Díky Waldovi jsem narazil na tuhle zajímavou flashovou záležitost, kterou můžete využít na vašem webu pro efektní prohlížení katalogů, časopisů, brožur apod. Abychom si hned na začátek ukázali, o čem je řeč, upravil jsem pomocí FPF jeden starý kalendář, který jsem kdysi vytvářel pro potřeby našeho městečka.

Klikněte na náhled

Tip: Kromě posouvání se šipkami ve spodní části si zkuste kurzorem chytit okraj stránky a tažením ji otočit, jako když listujete ve skutečném časopise.

FPF existuje ve více verzích, ale ta základní, kterou jste si právě vyzkoušeli na ukázce, je zdarma. Stačí si stáhnout celou složku, vyměnit ukázkové soubory ve složce Pages za svoje a přepsat soubor Pages.xml v nějakém textovém nebo html editoru (na Mac OS doporučuji free editor Smultron).

Já na uvedeném příkladu zaměnil původní soubory za jednotlivé stránky kalendáře 01-12.jpg.

Pak jsem ve zmíněném souboru Pages.xml přepsal jednotlivé názvy souborů a trošku jsem upravil barvy a také rozměr okna.

Teď už jen nahrajete celou složku na server a odkazujete na spouštěcí soubor Default.html.

Tip pro Mac OS X: Celou stránku vytvořenou pomocí Flash Page Flip můžete také začlenit např. do svého RapidWeaver projektu pomocí stránky iFrame.

Tag: internet, grafika, software, flash, free, skript, tip, web

V dnešním tutoriálu se mrkneme, jak název článku napovídá, na tvorbu takovéto jednoduché flashové grafiky vytvořené pouze s pomocí Illustratoru bez nutnosti použití dalších speciálních programů.



Hlavní roli bude hrát oblíbená funkce Prolnutí. Návod předpokládá základní znalosti programu, takže nebudu zabíhat do úplných detailů a podrobností. Kdyby někomu nebylo něco jasné, klidně se zkuste v komentářích pod článkem zeptat. A nemusím snad dodávat, že také tento tutoriál má pouze „ukazovat cestu“ a navést vás směrem k vlastnímu zkoušení, experimentování, objevování, ...

1) Založte si nový dokument o výsledné velikosti grafiky. Já zvolil např. 500x300 px. V něm si pomocí elipsy, cestáře, pera apod. vytvořte trasu, po které bude míček ve finále skákat... třeba něco takovéhoto. Tloušťka a barva tahu je libovolná, nezáleží na tom.

2) Vytvořte míček (kolečko s kruhovým přechodem), udělejte jeho kopii a jeden dejte na začátek trasy a druhý na konec. Označte oba míčky a zvolte Objekt > Prolnutí > Volby prolnutí (nebo dvojklik na nástroj Prolnutí). Zadejte od oka nějaký počet kroků, za chvíli to ještě doladíme.

3) Stiskněte Cmnd+Opt+B (na PC patrně Ctrl+Alt+B) a tím vytvořte prolnutí.

4) Označte vše (Cmnd/Ctrl+A) a zvolte Objekt > Prolnutí > Nahradit osu. Poté vyvolejte opět volby prolnutí a zvyšte počet kroků tak, aby celá cesta míčku byla pokryta - vytváří to pak podle mě plynulejší pohyb.

6) Teď už stačí jen vyexportovat pomocí Soubor > Export a jako formát zvolit Flash (swf). V rozbalovací roletce Exportovat jako zvolte Vrstvy AI do snímků SWF, zatrhněte checkbox Oříznout na velikost kreslicího plátna a případně si zvolte barvu pozadí. Poté klikněte na třetí buton shora Další volby a tam si nastavte hlavně Kmitočet snímků (laicky řečeno, jak rychle sebou bude míček mrskat) a zatrhněte asi tu nejdůležitější položku Animovat prolnutí. Pod ní máte ještě dvě volby: Samostatně a Přidávat... v našem případě zvolíme možnost Samostatně. Další možnosti exportu si případně už vyzkoušejte sami nebo projděte nápovědu k programu.

7) Výsledek můžete pohodlně kontrolovat kliknutím na tlačítko Webový náhled.

8) Zkoušejte, hrajte si... :o)

Tag: Illustrator, DTP, tip, flash, tutoriál