Tvorba reklamn�ho banneru

Obsah lekce:

Za��tek projektu

V t�to lekci budeme tvo�it reklamn� banner na nov� iPhone. Uk�eme si jak importovat soubory z Adobe Photoshopu, p�idat st�n, v dal�� ��sti bude vysv�tleno, jak ud�lat text, kter� p�ilet�, nebo se objev�, a pot� p�id�me upout�vku na slevu. V posledn� ��sti lekce se budeme zab�vat p�id�n�m masky, kter� vyrob� efekt odkryt� mobilu. Cel� postup nar�z je ilustrov�n ve videu na konci lekce.

Pro tuto lekci bude pot�eba obr�zek iPhone.

Spust�me si tedy Adobe Flash Professional, zvol�me nov� dokument ActionScript 3.0 a nastav�me velikost 550 x 400 pixel�, pro tento banner zvol�me 24 FPS, co� zaru��, �e bude animace plynul�. Tento banner bude pot� p�ipraven k vystaven� kdekoli na webu.

Import obr�zku iPhone

V programu Adobe Photoshop si otev�eme soubor s obr�zkem iPhonu a zamaskujeme b�l� okol� kolem mobilu (v�etn� spodn�ho st�nu) a o��zneme jej co nejbl�e k hran�m iPhonu. Pozad� ponech�me pr�hledn�.

Soubor ulo��me a v programu Adobe Flash Professional zvol�me polo�ku Import to Library (z menu File>Import). Pokud importujeme soubor z Adobe Photoshopu, m�me k dispozici v�b�r, kter� vrstvy chceme importovat � zvol�me tedy pouze vrstvu s iPhonem bez jak�hokoli pozad�.

Po potvrzen� se n�m obr�zek importuje do knihovny, ov�em zat�m ne jako symbol. Mus�me jej p�et�hnout na pl�tno a symbol z n�j teprve vytvo�it. Zde bude pot�eba zvolit typ Movie Clip, abychom m�li p��stup k roz���en�m vlastnostem (typy symbol� lze m�nit i po jejich p�id�n� pomoc� panelu Properties).

Symbol p�et�hneme na pl�tno a pomoc� panelu Transform zm�n�me jeho rozm�ry tak, aby se p�kn� ve�el na v��ku, a um�st�me jej do lev� ��sti.

Po kliknut� na pr�v� p�idan� symbol se n�m v panelu Properties objev� mo�nost Filters, kde ve spodn� ��sti klikneme na volbu Add Filter a zvol�me Drop Shadow. Hodnoty nastav�me podle n�sleduj�c�ho obr�zku tak, aby iPhone vrhal lehk� st�n, kter� vylep�� celkov� grafick� dojem.

T�mto krokem jsme s obr�zkem iPhonu zat�m skon�ili, proto�e je um�st�n a vypad� tak, jak jsme pot�ebovali, zb�v� u� jen vytvo�it b�n� sn�mek ve vrstv� s obr�zkem (tu si m��eme p�ejmenovat na obrazek) na pozici 150.

Pr�ce s texty

Text iPhone

Za�neme vytvo�en�m nov� vrstvy pro text iPhone (pojmenujeme ji text), vytvo��me kl��ov� sn�mek (F6) na pozici 72, tak�e v�echny sn�mky 1-71 z�stanou pr�zdn�. D�le p�id�me text iPhone napravo od mobilu, pou�ijeme vhodn� bezpatkov� font, nap��klad Calibri. Velikost zvol�me kolem hodnoty 50 a pou�ijeme tmav� �edou, pop��pad� t�m�� �ernou barvu.

P�evedeme text na symbol, aby bylo mo�n� prov�st animaci, a vytvo��me b�n� sn�mek (F5) na pozici 99. Aplikujeme MotionTween animaci mezi sn�mky 72-99, proto�e v tomto rozmez� se bude text pohybovat.

Nyn� se p�epneme do sn�mku 72 a posuneme text mimo pl�tno, aby nebyl vid�t (budeme simulovat efekt, kdy text p�ilet� do pozice, ve kter� jsme jej vytvo�ili). Posledn� v�c�, kter� n�m chyb�, je p�idat symbolu s textem ve sn�mku 99 rotaci � nap��klad 1080� zajist�, �e se text b�hem letu t�ikr�t oto�� kolem st�edu.

Nen� probl�m s rotac� a dr�hou jakkoli experimentovat, dokud se n�m nebude zd�t pohyb p�irozen� a vhodn�. Na obr�zc�ch pod t�mto textem jsou vyobrazeny sn�mky 72 a 99 s dr�hou textu.

Text 3GS

Obdobn�m zp�sobem p�id�me text 3GS (vytvo��me novou vrstvu s n�zvem 3gs, pot� vytvo��me kl��ov� sn�mek na pozici 100, sn�mky p�ed t�mto z�stanou pr�zdn� a na pozici 100 vytvo��me text), pou�ijeme stejn� font, ale zv�t��me jej, p�evedeme jej na symbol a aplikujeme MotionTween animaci mezi sn�mky 100-129 (nezapomeneme na pozici 129 vytvo�it kl��ov� sn�mek pomoc� kl�vesy F6).

Zde vyu�ijeme jin� efekt, a to sice pr�hlednost. P�epneme se do sn�mku 100, ozna��me symbol s textem 3DS a vpravo v panelu Properties, pod z�lo�kou Color Effect vybereme styl Alpha a nastav�me hodnotu na 0. T�mto doc�l�me efektu, kdy text od 100. sn�mku bude postupn� vystupovat a� do sn�mku 129, kdy bude pln� vid�t.

M��e se st�t, �e bude nutno je�t� ve sn�mku 129 zp�t nastavit hodnotu Alpha na 100, z�le�� na po�ad�, ve kter�m jsme jednotliv� kroky d�lali.

N�lepka se slevou

Posledn� objekt, kter� budeme p�id�vat do sc�ny, je n�lepka se slevou. Vytvo��me si novou vrstvu s n�zvem sleva, v n� kl��ov� sn�mek na pozici 130. P�id�me p�ti�heln�k a do n�j n�pis 30 % off na dva ��dky, aby byl dob�e �iteln�.

V�e p�evedeme na symbol do knihovny a um�st�me do prav�ho doln�ho ro�ku. Prot�hneme sn�mky a� k sn�mku 150, vytvo��me MotionTween animaci (nezapomeneme vytvo�it na pozici 150 kl��ov� sn�mek) a ve sn�mku 130 tento symbol mnohon�sobn� zv�t��me (klidn� p�es cel� pl�no) a poto��me t�eba o 720�.

Doc�l�me tak efektu, �e p�ti�heln�k jakoby spadne na pl�tno a zastav� se v ro�ku.

Maska

Dal�� v�c�, kterou p�id�me do projektu, bude vrstva s maskou. Masku si m��eme p�edstavit stejn� jako masku v programu Adobe Photoshop. Maska je vrstva, kter� ur�uje, jak� ��st vrstvy pod n� bude vid�t.

Vytvo��me tedy nad vrstvou obrazek novou vrstvu s n�zvem maska. Klikneme na ni prav�m tla��tkem a zvol�me volbu Mask. Nakresl�me kruh p�es obr�zek iPhonu do vrstvy maska a zkus�me animaci exportovat pomoc� Ctrl+Enter.

Vid�me, �e v exportovan�m n�hledu se m�sto barevn�ho kruhu maska aplikovala a z vrstvy pod n� je vid�t jen dan� v��ez. Nezb�v� ne� pou��t na kruh ve vrstv� maska animaci MotionTween a mezi sn�mky 1 a 72 vytvo�it r�zn� pohyb ze strany na stranu a postupn� zv�t�ov�n� kruhu, a� nakonec ve sn�mku 72 bude iPhone odkryt zcela (kruh tedy mus� kompletn� p�esahovat symbol s iPhonem).

Dokon�en� projektu

Zb�v� u� jen zkontrolovat, jestli v�echny vrstvy obsahuj� sn�mky a� k pozici 150, pokud tomu tak nen�, mus�me posledn� kl��ov� sn�mky prot�hnout a� do sn�mku 150, aby n�m v pr�b�hu animace n�kter� ��st nezmizela. Jedinou v�jimkou je maska, kter� m��e skon�it ve sn�mku 72, proto�e d�le nebude aplikov�na.

Nakonec vytvo��me je�t� jednu vrstvu s n�zvem kod a na pozici 150 zde um�st�me pr�zdn� kl��ov� sn�mek, do kter�ho p�id�me akci Stop, aby animace na konci zastavila a neopakovala se (samoz�ejm� pokud opakov�n� nen� ��douc�).

Cel� projekt je hotov�, nezb�v� ne� jej exportovat, a to bu� ve form�tu swf, nebo ve form�tu avi, z�le��, kam pot�ebujeme v�slednou animaci um�stit. Ve videu pod t�mto textem je cel� proces tvorby t�to animace uk�z�n.

Soubor s bannerem a soubor s projektem lze st�hnout zde.

Dal�� �ten�

Ot�zky a �koly

1. V lev� spodn� ��sti se nach�z� okno s presety pro MotionTween, najd�te vhodn� preset a aplikujte jej v animaci na libovoln� objekt.