Animované flash bannery – ukázkový projekt

18. 6. 2009 | Adam Sádovský | Návody | 11084×

Ukázkový projekt

A nyní se podíváme na konkrétní příklad od začátku do konce. Nic složitého, jen ukázka. Začneme kreslením v Inkscapu.

Grafika

Nakreslíme obrázek jako na následujícím screenshotu:

Rozměr obrázku je 728×90. Jak kruh, tak text převedeme do křivek (shift + ctrl + C) – import svg není ještě úplně dokonalý a křivky jsou tak trochu jistota. Následně přiřadíme svg elementům id (to se bude hodit při vkládání konkrétních části svg obrázku). Pravé kliknutí na objekt:

Vybereme položku Vlastnosti objektu. Jako ID nastavíme u textu: text a u kruhu: kruh.

Pak grafiku uložíme do nějakého pracovního adresáře: ~/prac/grafika.svg.

Můžeme si dovolit objekty seskupovat (group) a dávat takovým skupinám unikátní ID. Pomocí swfmill můžeme importovat i složité vektory včetně barev a průhledností, ale co ještě nefunguje, jsou blur efekty a hlavně barevné přechody. Chybějící barevné přechody jsou asi největším problémem konverze svg do swf. Snad se to časem zlepší.

To je vše, co se grafiky týká.

Kostra

Nyní vytvoříme xml kostru. Vytvoříme textový soubor ~/prac/kostra.xml a uložíme do něj následující kód:

<?xml version="1.0" encoding="utf-8" ?>
<!--Celá animace s rozměry a snímkovací frekvencí-->
<movie width="728" height="90" framerate="30">
	<!--Barva pozadí-->
	<background color="#ffffff" />
<!--Začátek snímku-->
<frame>
	<!--Začátek knihovny-->
	<library>
		<!--Importujeme pouze grafiku v svg formátu-->
		<clip id="grafika" import="grafika.svg" />
	</library>
	<!--Ze svg souboru vložíme objekt s id=text
	      a přitom nezměníme polohu hloubka 
	      vložení bude 0, protože jde o pozadí scény-->
	<place id="text" name="text_0" depth="0" />
	<!--Dále vložíme kruh a nazveme ho kruh_0,
		 tento název bude zpřístupňovat objekt v AS-->
	<place id="kruh" name="kruh_0" x="10" y="0" depth="1" />
	<!--Opět vložíme stejný kruh tentokrát s názvem kruh_1-->
	<place id="kruh" name="kruh_1" x="230" y="0" depth="2" />
<!--Konec snímku-->
</frame>
<!--Konec animace-->
</movie>

Skript

Pak vytvoříme textový soubor: ~/prac/skript.as s následujícím obsahem:

// název třídy se skriptem: v tuto chvíli
// je irelevantní – důležitá je metoda main()
class Main
{
	// název vstupní metody – tuto metodu hledá mtasc,
	// když má nastaven parametr -main, musí jít o statickou metodu
	static function main()
	{
		// objekty definované v kostře jsou instancemi třídy
		// MovieClip a jsou přístupné přes proměnnou _root.
		// můžeme jim přidat některé atributy,
		// které budeme později potřebovat
		_root["kruh_0"].v = 6;	// počáteční rychlost (v ixové souřadnici)
		_root["kruh_0"].m = 0.5;	// hmotnost
		_root["kruh_0"].r = 40;	// poloměr
 
		_root["kruh_1"].v = -1;
		_root["kruh_1"].m = 5;
		_root["kruh_1"].r = 40;
 
		// nyní vytvoříme pomocnou instanci třídy MovieClip;
		// tato instance bude řídit animaci
		// a kromě toho je použita k vytvoření průhledného
		// klikacího tlačítka nad celým Flashem
		var ctrl:MovieClip = _root.createEmptyMovieClip(
					"controller",
					_root.getNextHighestDepth());
 
		// začíná se kreslit klikací tlačítko
		ctrl.beginFill(0xFFFFFF);
		ctrl.moveTo(0, 0);
		ctrl.lineTo(Stage.width, 0);
		ctrl.lineTo(Stage.width, Stage.height);
		ctrl.lineTo(0, Stage.height);
		ctrl.lineTo(0, 0);
		ctrl.endFill();
		ctrl._alpha = 0;			// plná průhlednost
 
		// definujeme reakci na událost uvolnění tlačitka myši
		ctrl.onRelease = function() {
			// přepneme na požadovanou stránku;
			// pokud chcete přejít na stránku mimo server,
			// může se stát, že vám to flash prohlížeč nedovolí;
			// místo _self zkuste _blank
			getURL("banner.html", "_self");
		}
 
		// definujeme skript, který bude vyvolán
		// při události generování nového snímku
		ctrl.onEnterFrame = function() {
			// zjednodušíme si život pomocnou proměnnou,
			// pro více objektů by se hodilo pole
			var obj1 = _root["kruh_0"];
			var obj2 = _root["kruh_1"];
 
			// ---- TADY UŽ ZAČÍNÁ SAMOTNÁ ANIMACE ----
			// pro ukázku je zvolena jednoduchá fyzika srážek
 
			// nx je pomocná ixová souřadnice.
			// jde o souřadnici, na kterou se objekt přesune,
			// pokud do ničeho nenarazí
			obj1.nx = obj1._x + obj1.v;
			obj2.nx = obj2._x + obj2.v;
 
			// pomocná proměnná ukazující, zda došlo ke kolizi, či nikoli
			obj1.collision = false;
			obj2.collision = false;
 
			// kontrola krajních mantinelů
			if (obj1.nx < 0) || (obj1.nx > Stage.width - 2*obj1.r) {
				obj1.v *= -1;
				obj1.collision = true;
			}
			if (obj2.nx < 0) || (obj2.nx > Stage.width - 2*obj2.r) {
				obj2.v *= -1;
				obj2.collision = true;
			}
 
			// kontrola kolize mezi objekty
			if Math.abs(obj1.nx – obj2.nx) < (obj1.r + obj2.r) {
				var u1 = obj1.v;
				var u2 = obj2.v;
 
				// výpočet výsledné rychlosti – uvažuje i různé hmotnosti
				obj1.v = (u1*(obj1.m – obj2.m) + 2*obj2.m*u2) / (obj1.m + obj2.m)
				obj2.v = (u2*(obj2.m – obj1.m) + 2*obj1.m*u1) / (obj1.m + obj2.m)
				obj1.collision = true;
				obj2.collision = true;
			}
 
			// pokud nedošlo ke kolizi, potom objekt skutečně přesuň,
			// v opačném případě objekt nepřesouvej;
			// když se to neudělá, mohl by objekt vyletět ze scény
			if !(obj1.collision) obj1._x = obj1.nx;
			if !(obj2.collision) obj2._x = obj2.nx;
 
			// hrátky s průhledností – po nárazu sniž průhlednost na 10 %
			if (obj1.collision) obj1._alpha = 10;
			if (obj2.collision) obj2._alpha = 10;
 
			// pokud není průhlednost 100 %, pomalu ji zvyšuj
			if (obj1._alpha < 100) obj1._alpha += 5;
			if (obj2._alpha < 100) obj2._alpha += 5;
		}
	}
 
}

Nyní už jen celý výsledek přeložíme:

swfmill simple kostra.xml kostra.swf
mtasc -swf kostra.swf -main skript.as -out vysledek.swf

A podíváme se na vysledek.swf – mělo by to fungovat. Celé se to nyní sbalilo do jednoho souboru o velikosti 2,8 kB.

Závěr

Na závěr bych uvedl jen tolik, že už mi Flash není tak nesympatický a že jsou nástroje, jak si ho přizpůsobit obrazu svému.

Hlavní problémy:

• Největší nepříjemností je chybějící barevný přechod při transformaci z svg.
• Počátek soustavy souřadnic objektů z svg je při převodu do swf v levém horním rohu. Inkscape ho má v levém dolním rohu. A kromě toho objekty, které budete chtít zvětšovat či rotovat (nebo prostě mít jejich lokální souřadný systém v jejich středu), musíte kreslit v Inkscapu do levého horního rohu obrázku a tím pádem jeden přes druhý. (O možnosti přesunu lokální souřadného systému nic nevím(?)).
• V současné verzi swfmill nelze importovat více svg – snad to půjde až v té další.

Menší problémy:

• Animace se musí dělat pomocí skriptování. Lze ale použít již hotové animační knihovny (Fuse, Tweener, GoASAP) a nebo si můžete vlastní animační knihovničku napsat.
• Některé swf přehrávače pravděpodobně z důvodu bezpečnosti omezují přesměrování na stránky na jiném serveru. Zatím nevím, jak se toto řeší profesionálně. Možná přes Javascript(?).

Nějaké ty výhody:

• Jakmile pracujeme s animací ve skriptu, potom není takový problém naprogramovat nějakou jednoduchou fyziku či nějaké náhodné chování tak, aby animace nevypadala pořád stejně. Je klidně možné vytvořit reklamní banner, ve kterém se nebude do omrzení opakovat stále stejná smyčka, a bude záživnější.
• Použité programy jsou zdarma ke stažení ve svobodné licenci.
• Nemusíte se učit nové GUI a IDE, pokud už umíte Inkscape.
• Je klidně možné, že v budoucnosti bude do Inkscapu vytvořen plugin, který bude pomocí zmíněných nástrojů generovat swf přímo. Aspoň by se mi to líbilo.

Projekt ke stažení: flash-ukazka.zip.

---

Článek původně vyšel v blogu.

       

Komentáře

[Jardík]

flash je zlo! flash je zlo! Nejenom, že verze pro Linux je v alpha stádiu, ale pro Windows a další OS není ani to. (samozřejmě se bavím o 64bit verzi).

[kralyk z abclinuxu]

pro windoze není 64bit verze? uh, to sem nevěděl...

[appolito]

flash je zlo!

+1

[Praedo]

+1 ještě že je flashblock

[Boky]

nejvic nejhorsi na celym svete...

[kolemjdouci]

nejnejhoršejší na veškerých světech!

[JirkaH]

uz to nehul

[volunteer]

to je divny, to je divny ... jak si mam teda vysvetlit, ze denne na 64-bit widlich s flashem pracuju? nejspis bezi v 32-bit compatibility modu, ale funguje celkem spolehlive (CS3 i CS4)

[Lukáš Kotek]

Pěkný článek, díky za něj. Něco takového jsem už v minulosti potřeboval.

[mirec]

Ale pokud jde o složitější animované reklamní proužky, potom pragmatická mysl nemůže zvolit nic lepšího, než je právě Flash.

Je niekto, kto to neblokuje? Ja som zásadne proti blokovaniu reklamy, ale flash nikdy (minimálne preto, lebo mi nefunguje v prehliadači, ktorý používam). Čím decentnejšia reklama so zaujímavou informáciou tým skôr na ňu kliknem, na animované kraviny už len z princípu neklikám.

[cezz]

Ano, tiez mi zurivo blikajuci banner vadi (hoci ho neblokujem) a ano tiez nan zvycajne nekliknem, ale chapem, ze je vela ludi, ktori to beru ako pre nich zaujimavu reklamu a kopa inzerentov, ktori taku reklamu chcu mat.

[Adrin]

Popravdě, taky se snažím flash bannerů v prohlížeči zbavit, a na žádné bannery a reklamy už prakticky ani neklikám, ale převážná většina dnešních uživatelů ani neví, že je nějaká možnost, jak reklamní bannery blokovat (s klikáním už je to jiná - lidi jsou čím dál apatičtější, nevím jaká je míra prokliku u průměrné reklamy, ale myslím, že se pohybuje v desetinách procenta).

[mirec]

No ja občas kliknem na reklamu (nie moc často). Ale dnes ma jedna reklama fakt dostala. Veľa webov má už takú tú reklamu vtrepanú povedzme medzi odstavce v článku. Ja som predpokladal, že je to obrázok k článku a klikol (aby bolo jasné ten obrázok sa nenačítal a preto som chcel vedieť čo na ňom je - fakt účinná reklama, aspoň na mňa).

[Josef Kufner]

Důvod blokovat veškerý flash je i v zatížení CPU a s tím související spotřebě, což je u notebooku běžícího na baterku celkem klíčová věc.

Od doby co mám flashblock mi flash vůbec nevadí... implicitně není a pokud ho potřebuju, stačí jednou kliknout :)

[mirec]

Tak to zaťaženie u flashu je strašné. Obyčajná reklama je schopná zamestnať CPU na 100% čo fakt nepoteší. Našťastie mi nerobí problém ľudí, ktorí po mne chcú flash poslať niekam ;)

[petr_p]

Dovolím si menší poučení: Autor píše, že s Flashem má zaručené jednotné prostředí. To je pravda jen pokud se bavíme o Flashi, nikoliv však o SWF.

Ten první název je ochranná známka a označuje „jediný správný“ přehrávač SWF animací. Druhý pojem je označení formátu a zcela dle očekávání existuje více jeho interpreterů.

Je třeba dodat, že firma Adobe po uvolnění specifikací začala tuto politiku silně prosazovat, a tak třeba z Gnashe musely zmizet všechny výskyty slova Flash. Tímto bych chtěl požádat autora, aby se pro příště této „nové“ terminologie držel, protože jinak jeho text bude působit jako reklama nebo jako úsměvné zjednodušení či neznalost typu „internet se prohlíží Explorerem“.

Chápu, že dnešní nadvláda přehrávače Flash, operačního systému Windows a hardwaru typu x86 (pro Jardíka dodám 32bitového) může mnohým vyhovovat. Ale stále je to jen pokřivená realita, která se může změnit. V okamžiku, kdy třetina pracovních stanic nebude mít žádný přehrávač SWF, třetina od Adobe a třetina od jiného výrobce, tak poučky o univerzálnosti SWF skončí u HTML a ostatní webových technologií.

[Adrin]

Ano, už mě na to někdo upozorňoval. Jde o zjednodušení, kterému se pro příště pokusím vyhnout.

[Filip Jirsák]

Naivní dotaz: nástroj, který by umožnil přímo zkonvertovat SVG animaci do SWF asi neexistuje, že?

[David Watzke]

Strč do google svg to swf, najde toho spoustu...

[Filip Jirsák]

Ve skutečnosti to najde dva projekty, z nichž jeden umí jenom statické obrázky, a druhý je nějaká prezentace, ke které se mi nepodařilo příslušný program dohledat…

[Adrin]

Pokud vím, tak swfmill je v konverzi svg->swf nejdál - nebo tomu věnují alespoň hodně pozornosti. Ke konverzi stačí připravit si jednoduchou kostru podobně jako je to v příkladu a pak provést generování swf.

[Filip Jirsák]

Swfmill fakt umí načítat SVG? Na stránkách projektů jsem zkratku SVG nenašel ani jednou…

[Adrin]

V článku o tom píšu a v příkladu to dokonce používám. Zopakuju jen, že ta konverze není ještě dokonalá, text se nepřenese s fonty a nezachovají se rozměry (je lepší vše převést do křivek), barevné přechody nebo efekty rozmazání jsou ještě také problém a konverze na úrovni třeba javascriptu nebo smilu je asi zatím jen scifi. Ale vektorová grafika se do swf takto dostat dá. Bližší informace jsou zde: http://osflash.org/swfmill

[Filip Jirsák]

Já jsem právě myslel, jestli neexistuje něco, co umí převést i deklarativně popsanou animaci. Nechce se mi právě to animování dělat znova. No, asi zatím zůstanu u exportu do animovaného GIFu…

[dc]

No neviem ci flash je az take zlo. Na RIA asi nic lepsie ani neni.Ma sice obmedzenia a je to pomerne uzavreta platfroma ale aspon ako tak zaruci ze vsetko pojde. Prehliadace webu su sice na rozne platformi a podporuju toho dost ale kazdy je iny, kazdy si riesi veci posvojom a javascript teda neni zrovna nejaka vyhra.

[xm]

Uvědomujete si, že tu jako klad popisujete vendor lock-in? Brrr...

[razor]

Mě by se líbilo, kdyby ten skvělý flash alespoň umožňil na linuxu vkládat non ascii znaky. Jinak je to jako RIA absolutně nepoužitelné.

[Jardík]

Nebavte se sprostě (co je RIA?)

[Filip Jirsák]

Rich Internet Applications, tedy bohaté (nebo možná tlusté) internetové aplikace, nebo možná internetové aplikace pro bohaté

[xm]

Přidávám se, Flash je Absolutní Zlo (TM)! To už snad i ten Silverlight od Microsoftu je o něco otevřenější technologie (i když to je velmi relativní).

Flash mám v browseru defaultně zablokovaný a zapínám jej jen když je to opravdu nezbytně nutné. Článek o tvorbě Flashových reklamních bannerů je mi už z principu odporný, protože to je přesně to, co člověka na Flashi když už jej má zapnutý nejvíc štve (otravné animované, blikající a hrající bannery).

[Adrin]

Mě velmi mrzelo, když Adobe zanevřel z pochopitelných důvodů na SVG. Tak moc mi SVG v kombinaci s java scriptem, stylováním a smilem, vyhovoval a těšil jsem se, že ho protlačí. Bohužel politika je politika, zamáčkl jsem slzu a rozhlédl se, jaká že je realita. Nic moc, ale že bych viděl všude jen zlo? SWF by neměl nahrazovat menu webových stránek, nebo dokonce celé stránky, pro multimédia bych ocenil střídmější použití swf a pro tvorbu aplikací v něm musí být sakra pádný důvod, ale pro reklamy ...? Pro webové reklamy, pokud je nepovažujete za kryptofašistický, buržoazní teror, je swf jasná volba. Protože když za mnou někdo přijde, že chce udělat stránky, tak mám 80 nebo 90 % šanci ho přesvědčit, aby se použily technologie html a spol., ale pokud chce reklamu a já přinesu animovaný gif, tak mám asi 95% šanci, ale na odmítnutí.

[M. Lox]

Flash je zlo, ale kdyby mi na mém počítači fungoval, tak ho zapnutý mám. Takhle jsem bohužel utřel nos. Web je pro text, aplikace mají běžet nativně, ale když už něco, tak JavaScript nebo Javu.

[Zdeněk Štěpánek]

Pro Flashovy magory pridam jeden paradni odkaz.

Prosim mrknete tam a nezapomente nechat prispevek v tamni diskuzi.

http://www.centrumpanorama.cz/

A to bohuzel musim dodat, ze predchozi web sice nehyril informacemi, ale byl stokrat lepsi.

Ten flash je neco jako ten, jehoz jmeno se nevyslovuje. Proste tenhle clanek je ZLO!

Zdenek

[Jendа]

To je toho, menu ve flashi. Nejhorší jsou stránky, které tvoří jeden velký flash. Když se v nich klikne na nějaký "link", tak obsah umělecky odjede a po spirále přijede jiný. To celé trvá třeba 20 sekund, takže mezitím zapomenu, proč jsem vlastně kliknul. O nemožnosti používání tabů a historie (a barvení prohlédnutých odkazů) ani nemluvě. Návrhářům a marketingovému to nepřijde, protože oni se tím webem kochají, zatímco návštěvníci hledají informace.

[mirec]

Menu vo flashi je zlo. Vďaka tomu sa nedostanem k podstránkam keďže mi flash nefunguje.

[Fluttershy, yay!]

Tak k Flashi lze mít alternativní kód pro případ nepřítomnosti pluginu, ale naráží to na prasáckost webdizajnérů.

[mirec]

No ta prasáckosť je už asi všade (hlavne u programátorov). Už málokto robí weby tak, aby fungovali aj bez js (ja sa snažím písať takým spôsobom, že js nijako neovplyvní funkčnosť ak je vypnutý, so zapnutým js len prinesie určité vylepšenia). Našťastie so swf to ešte také hrozné nie je (tým nechcem povedať, že by situácia bola dobrá).

[kralyk z abclinuxu]

Typickým příkladem takové zhovadilosti je garfield.com - děs! Ještě že na prohlížení existuje ten plasmoid, tohle bych dlouho nesnes...

[Robert Krátký]

Ten plasmoid mi s Garfieldem nechce fungovat. Jiné stripy to načte a zobrazí hezky, ale Garfield ani ťuk.

[Rezza]

Jj, zlaty Plasmoid! Jednou jsem se tam chtel podivat, ja se lekl :D Ale jinak trebas kamos si hraje s Flashem, dela gamesky a to IDE je celkem bomba (aspon co jsem se zbezne dival).