Font

KzK

Výběr jazyka

cs / en

 

KzK - banner pro Radio Wave

Součástí reklamní kampaně pro Radio Wave, realizované nedávno naším studiem, bylo také vytvoření flashových bannerů různých velikostí. Prohlédněte si stručnou ukázku postupu tvorby banneru, vzniklého na základě vizuálu, na kterém nekonformní ovce utíká ze stáda. Tento článek navazuje na Krok za krokem v tištěném Fontu 101.

Vizuál byl vytvořen ve Photoshopu: ovce pomocí vektorových objektů – pozadí, ohradu a písmo tvoří bitmapy naskenované temperové malby. V banneru se má odlišná ovce rozeběhnout, prorazit ohradu a utéct od svého stáda. Následuje zobrazení loga rádia a vyskládání sloganu z jednotlivých písmen.

 

Vektorové objekty jsme nejprve v Illustratoru zjednodušili (z opakujících se částí kresby byl zanechán vždy jen jeden exemplář) a připravili na export do Flashe – jednotlivé části, které budou v animaci tvořit celek, byly sloučeny, pojmenovány a převedeny na Movie Clipy.

 

Ve Flashi jsme poté Movie Clipy importovali do knihovny.

 

Reklamními systémy vyžadovaná maximální velikost flashového banneru se pohybuje okolo 20-40 kB, proto jsme pro úsporu cenných kilobajtů (a také pro plynulost animace) tvary křivek ve Flashi optimalizovali. (Shape / Optimize). Obrázky ukazují tvary před a po optimalizaci a celkovou redukci počtu křivek.

 

Statická grafika (pozadí a ohrada) byla překreslena ve Flashi jednoduchými tvary s přechody – bitmapy by příliš zvětšily výsledný swf soubor. Abychom se přiblížili předloze, můžeme přidat stíny a filtry (Drop Shadow, Bevel...), ovšem za cenu vyššího nároku na výkon a zvětšení souboru. V tomto případě také musíme banner publikovat pro vyšší verze Flash Playeru, což může být v rozporu s požadavky reklamního systému.

 

Dále jsme vytvořili Movie Clip pro animaci běžící ovečky. Ta byla poskládána z dílčích symbolů (tělo, nohy atd.) importovaných z Illustratoru a rozpohybována pomocí Motion Tweenů. Pro opakující se prvky (srst, bílé ovce...) se využije mnoho instancí téhož symbolu.

 

Jako samostatné Movie Clipy byly vytvořeny animace běžící ovce, přední a zadní část rozpadajícího se plotu a animace písmen tvořících slogan. Na hlavní časové ose jsme pak animace poskládali do výsledné podoby, přidali „průhledné“ tlačítko s kódem prokliku pro reklamní systém a publikovali soubor pro Flash Player 7 s nastavením 20 snímků za vteřinu. Následovalo ještě další zeštíhlování výsledného swf souboru, abychom se vešli do 40kB limitu.

Na výsledek se můžete podívat zde.

-JK-


Komentáře k článku

7. 11. 2008 15:54 Karimartin

Drsnacka ovecka se povedla.
Mel bych vsak vytku ke zpracovani, v momente kdy ovecka mizi do ztracena jsou pres sebe videt jednotlive vrstvy a nevypada to moc dobre - jiny rezim prolnuti ve Flashi by urcite pomohl .)
Jinak pekne, konecne neco vyrazneho v zaplave nudnych veci.