Účelem tohoto seriálu je seznámit s tvorbou flashových aplikací pomocí otevřených nástrojů. Nechci se zde podrobně zabývat syntaxí jednotlivých programů nebo základy jazyka ActionScript. Také nenabízím jednoduché příklady z manuálů typu Hello World!. Takové věci jsou sice užitečné pro naprostý start, ale snadno si je vygooglujete nebo je najdete na domovských stránkách projektů, na které vždy uvedu odkaz.
Ukážu složitější příklady, které skutečně využívám ve své praxi. Předvedu vám, jak rychle pomocí otevřených programů (a tedy i v Linuxu) uděláte flashový banner, jednoduchou hru a mp3 přehrávač s playlistem. Ke každému příkladu je možné si stáhnout zdrojové soubory a také uvádím odkazy na stránky projektů, kde najdete další informace. Podívejte se se mnou na možnosti jednotlivých programů a sami si pak zkuste prohloubit znalosti.
SWFTOOLS - Nástroj pro tvorbu bannerů
Jedná se o kolekci programů pro generování swf souborů. Díky nim lze převádět do swf obrazové soubory, PDF, filmy, fonty a podobně. My s pomocí tohoto balíku vytvoříme klikatelný banner s řadou efektů:
Bannery vytvářím pomocí příkazu swfc z této kolekce utilit. Swfc vytváří swf soubor podle napsaného skriptu. Skript napíšu v jakémkoliv editoru a uložím s příponou .sc.
Zkompiluji ho následujícím příkazem:
swfc zdrojovysoubor.sc
Ve skriptu je vše – rozměry a snímkování Flashe a dále jednotlivé objekty, kterými definuji chování na časové ose.
Nejčastější příkazy jsou:
. flash filename="cilovysoubor.swf" version=5 fps=25 # určuji jméno koncového souboru, verzi Flashe a snímkování .jpeg s1 "photo.jpeg" quality=80% # příkazy jako .jpeg nebo .png slouží k importu externích obrázků. Označení např. s1 slouží k identifikaci importovaného obrázku dále v skriptu .box b1 100 100 color=yellow fill=red # obrázky nemusím jen importovat, ale mohu je přímo kreslit .frame 100 # číslo snímku, na kterém se má něco provést .put s1 x=50 y=50 scalex=110 scaley=110 # umisťuje jednotlivé objekty na scénu, je možné zadávat další parametry pro určení polohy, zvětšení apod. .change s1 scalex=110 scaley=110 alpha=50 # změny, které chci provést s objektem „s1“ - v tomto případě mírně zvětšit a změnit jeho průhlednost .move s1 x=110 y=110 # Posunu s objektem na danou souřadnici. V dřívějších verzích se pohybovalo objektem pomocí souřadnic u příkazu .change. Tento postup lze stále použít a najdete ho v manuálu, nicméně při kompilaci budete varováni před tímto postupem. .end
Objekty lze zvětšovat, zmenšovat, rotovat jimi, maskovat, posouvat, lze si u nich hrát s barevností a přidávat filtry rozmazání apod. Podrobnosti se spoustou příkladů najdete na stránkách originálního manuálu.
Práce s objekty s určením čísla snímku připomíná práci s originálním IDE Adobe Flashe, avšak zde pracuji s textovým souborem a psanými údaji. Pro mě je skript přehlednější než dlouhá časová osa se spoustou políček. V praxi jsem tuhle výhodu mnohokrát ocenil. Běžně se stává, že zákazník vrátí vytvořený banner s tím, že chce prodloužit přechod v některém okamžiku třeba o půl vteřiny. V programu Adobe Flash mě čekalo složité klikání a přesuny, tady si zcela exaktně spočítám snímky a změním u nich číselnou hodnotu.
Banner s prolínáním
Reklamní banner je nejčastější případ, kde se s Flashem můžu setkat.
Podklady pro banner si vytvoříme v jakémkoliv grafickém editoru (když už děláte Flash na koleně jako my, tak místo Adobe Photoshopu použijte GIMP nebo Inkscape). V našem případě si vytvoříme fotky s vloženým textem na standardní rozměr tzv. Square Button - 125 x 125 px. Podobně si mohu nakreslit různá tlačítka apod., pokud je uplatním. Vytvořené fotografie se budou prolínat.
Připravené podklady
.flash bbox=125x125 filename="banner-krtek.swf" fps=25 version=6 background=white # Definuji rozměry, název, snímkování, verzi Flashe .jpeg s1 "krtince.jpg" .jpeg s2 "krtek.jpg" # import obrázků ve formát jpg .sprite animace # definování spritu. V těchto jednoduchých animacích není nutné je používat. Uplatní se tam, kde chci kombinovat více animací na scéně. .put s1 alpha=100% .frame 100 .put s2 alpha=0% .frame 125 .change s2 alpha=100% .del s1 # jednou umístěné obrázky je dobré mazat. Šetří se tím paměť! .frame 200 .put s1 alpha=0% .frame 225 .change s1 alpha=100% .del s2 .end .put animace # umístím sprite animace .end # Konec swf
Skript si uložím jako např. animace.sc a zkompiluji:
$ swfc animace.sc
Výsledek
Klikatelný banner se složitějším efektem
Banner musí být klikatelný. A navíc chci víc efektů, pouhá prolínačka dnes zákazníka nenaláká. Proto přidám rotování a pohyb. A také fonty, protože swfc umí pracovat i s textem.
Pokud jde o klikání, swfc naštěstí zvládá příkazy jazyka ActionScript 2 a ActionScript 3 a díky nim si mohu pohlídat události na banneru. V našem případě ve skriptu vytvoříme průhledné tlačítko a umístíme ho na časovou osu. Průhledné tlačítko bude vést na námi požadovanou stránku. Pomocí metody .on_press, která hlídá událost stisknutí myši na objektu, spustíme příkaz ActionScriptu 2 – getURL, který se již postará o přesměrování na zadanou adresu.
Definice tlačítka:
.box buttonbox width=125 height=125 fill=black color=black
.button button
.show buttonbox as=idle,area,pressed,hover
.on_press inside:
getURL("http://cs.wikipedia.org/wiki/Krtek", "_top");
.end
.end
Před .end umístíme:
.put button alpha=0
Fonty se vkládají pomocí příkazu .font a nadefinovaný font dále použijeme příkazem .text.
.font Arial filename="Arial Bold.ttf" # uvedeme jméno, kterým budeme font dále označovat a cestu k importovanému fontu .text krtince font=Arial size ="22pt" text="KRTINCE?" # obsah textového pole. S tímto polem jde pak pracovat stejně jako s jinými objekty, lze tedy na něj uplatňovat různé změny příkazem .change apod.
S texty budu pohybovat, budu s nimi rotovat a přidám jim rozmazání (blur effect).
Rotování vytvořím parametrem rotate u příkazu .change. Rozmazání si musím nadefinovat:
.blur rozmazani blurx=100 blury=0 passes=2 # příkazem .blur nadefinuji filtr rozmazání. Zadávám u něj velikost rozmazání na každé ose. .blur konecrozmazani blur=0 # Pokud místo paramteru blurx a blury použiji prosté blur, potom se hodnota vztahuje k oběma osám.
Filtr pak aplikuji pomocí parametru filter u příkazu .change.
.change odeme filter=konecrozmazani
Protože používám filtry, musím zvýšit verzi výsledného Flashe na 8. Nižší verze filtry neznají!
Výsledný skript:
# swfc animace2.sc
.flash bbox=125x125 filename="banner-krtek-link.swf" fps=25 version=8 background=white # Definuji rozměry, název, snímkování, verzi Flashe
.font Arial filename="Arial Bold.ttf"
.text krtince font=Arial size ="22pt" text="KRTINCE?"
.text nejlepsi font=Arial size ="22pt" text="NEJLEPŠÍ"
.text odeme font=Arial size ="16pt" text="ODE MĚ!"
.blur rozmazani blurx=100 blury=0 passes=2
.blur konecrozmazani blur=0
.jpeg s1 "krtince-beztextu.jpg" # import obrázků ve formátu jpg
.jpeg s2 "krtek-beztextu.jpg"
.box buttonbox width=125 height=125 fill=black color=black
.button button
.show buttonbox as=idle,area,pressed,hover
.on_press inside:
getURL("http://cs.wikipedia.org/wiki/Krtek", "_top");
.end
.end
.sprite animace # definování spritu. Těchto spritů může být mnohem více
.frame 1
.put s1 alpha=100%
.frame 15
.put krtince x=10 y=140
.frame 25
.move krtince y=100
.frame 100
.del s1
.del krtince
.put s2 alpha=0% x=62 y=62 scalex=0 scaley=0
.frame 125
.change s2 alpha=100% scalex=100% scaley=100%
.move s2 x=0 y=0
.put nejlepsi rotate=+360 alpha=100% x=62 y=32 pin=center scalex=0% scaley=0%
.frame 150
.change nejlepsi rotate=-20% pin=center scalex=100% scaley=100%
.frame 160
.put odeme x=50 y=113 filter=rozmazani
.frame 170
.change odeme filter=konecrozmazani
.frame 250
.del s2
.put s1 alpha=0% x=62 y=62 scalex=0 scaley=0
.frame 275
.change s1 alpha=100% scalex=100% scaley=100%
.move s1 x=0 y=0
.end
.put animace # umístím sprite animace
.put button alpha=0
.end # Konec swf
Výhody swfc:
-
celý popis animace v jednoduchém a přehledném skriptu;
-
rychlé vytvoření banneru s pomocí nástrojů, na které jsem zvyklý (GIMP, textový editor...);
-
rychle lze upravovat již vytvořenou animaci, díky skriptu mi stačí změnit číselné údaje u snímků, rychlé, praktické a srozumitelné.
V profesionální oblasti se také využívá pdf2swf z balíku SWFTOOLS. Už z názvu je jasné, že tato utilitka konvertuje pdf soubory do swf. Zmiňuji se o tom proto, že na pdf2swf staví komerční projekty pro různé on-line listovací služby jako Scribd.com. Dále v praxi využitelné jsou další utilitky pro konverzi fontů do swf apod.
Příště se podíváme na kombinaci programů SWFMILL a MTASC a vytvoříme si základ jednoduché hry.
Všechny materiály pro krtčí banner si můžete stáhnout v jednom archivu swfc.zip.