přejít na obsah přejít na navigaci

Linux E X P R E S, Open-source alternativy Adobe Flashe: Jednoduché bannery v SWFTOOLS

Open-source alternativy Adobe Flashe: Jednoduché bannery v SWFTOOLS

flash.png

Použití Flashe na webových stránkách má řadu výhod. Díky němu můžeme mít kontrolu nad grafickým vzhledem webové aplikace nebo můžeme do webu vkládat různé interaktivní prvky a animace. Velice důležitou oblastí je i tvorba různých flashových her. Je zbytečné Flash zatracovat. Spíše si projděme různé otevřené alternativy, díky kterým můžeme svobodně vyvíjet interaktivní a vyšperkované aplikace, a nebýt přitom svazováni balíkem od firmy Adobe.


Úč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

Připravené podkladyPř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.

Nahoru

Odkazy

Příspěvky

Open-source alternativy Adobe Flashe: Jednoduché bannery v SWFTOOLS
Honza 21. 08. 2010, 08:53:14
Odpovědět  Odkaz 
Opravdu se těším na pokračování. Osobně FLASH moc rád nemám, ale možnost naučit se jak jej zkrotit a donutit posloužit dobré věci (než bude podpora prohlížečů HTML5 a CSS3 v globálním měřítku zajímavá) - to mne láká :-)
Luděk Janda Re:Open-source alternativy Adobe Flashe: Jednoduché bannery v SWFTOOLS
Luděk Janda 29. 08. 2010, 21:40:21
Odpovědět  Odkaz 
Já jsem FLASH taky neměl moc rád, dokud jsem si ho nevyzkoušel z příkazové řádky pod Linuxem. Doufám, že tě další díly navnadí a zkusíš to taky :-)
Předání adresy odkazu pomocí proměnné clickthru
Honza 30. 08. 2010, 22:46:38
Odpovědět  Odkaz 
Při zkoušení jsem narazil na zajímavý problém. Rád bych vyšel vstříc reklamním systémům, které vkládají odkaz kvůli měření úspěšnosti kampaně externě. Něco ve smyslu getURL(clickthru, "_top"); kde clickthru je proměnná zadaná v HTML - ...swf?clickthru=http://www.web.xy/
Na správnou syntaxi se mi po hodině mučení strýčka Google nepodařilo narazit a proto jsem sebral odvahu k tomuto komentáři a otázce zda a jak lze toto vyřešit.
Re:Předání adresy odkazu pomocí proměnné clickthru
Honza 1. 09. 2010, 15:53:28
Odpovědět  Odkaz 
Za laskavé asistence Luďka Jandy jsem dospěl k následujícímu:

.box buttonbox width=300 height=60 fill=black color=black
.button button
.show buttonbox as=idle,area,pressed,hover
.on_press inside:
if (clickthru.substr(0,5) == "http:") {
getURL (clickthru, "_top");
}
.end
.end

Velikosti tlačítka si každý upraví dle svých potřeb. V HTML je třeba vložit a

Rozměry nechť si opět každý upraví.

Pak mi začaly odkazy fungovat (po nahrání na web, na lokálním PC se tomu u mne pracovat nechtělo, ale jak jsem se dočetl, prý je to tak normální).
Re:Re:Předání adresy odkazu pomocí proměnné clickthru
Honza 1. 09. 2010, 15:55:05
Odpovědět  Odkaz 
HTML kód to nevložilo, tak snad alespoň takto (pokud to vyjde - není tu možnost náhledu komentáře):

param name="flashvars" value="clickthru=http://kýžený.cíl" a
embed SRC="flash.swf" flashvars="clickthru=http://kýžený.cíl" width="300" height="60"
následují boti klikací flashe?
Vašek 3. 06. 2011, 14:53:08
Odpovědět  Odkaz 
Chtěl bych se zeptat, jestli odkaz ve flashi zaregistruje bot internetových prohlížečů nebo se musí přidat mezi tagy object při vkládání do html ještě odkaz?

Odpovědět

Nejsou podporovány žádné značky, komentáře jsou jen čistě textové. Více o diskuzích a pravidlech najdete v nápovědě.
Diskuzi můžete sledovat pomocí RSS kanálu rss



 
 

Top články z OpenOffice.cz