Tvorba reklamnho banneru
Obsah lekce:
- Zatek projektu
- Import obrzku iPhone
- Prce s texty
- Maska
- Dokonen projektu
Zatek projektu
V tto lekci budeme tvoit reklamn banner na nov iPhone. Ukeme si jak importovat soubory z Adobe Photoshopu, pidat stn, v dal sti bude vysvtleno, jak udlat text, kter pilet, nebo se objev, a pot pidme upoutvku na slevu. V posledn sti lekce se budeme zabvat pidnm masky, kter vyrob efekt odkryt mobilu. Cel postup narz je ilustrovn ve videu na konci lekce.
Pro tuto lekci bude poteba obrzek iPhone.
Spustme si tedy Adobe Flash Professional, zvolme nov dokument ActionScript 3.0 a nastavme velikost 550 x 400 pixel, pro tento banner zvolme 24 FPS, co zaru, e bude animace plynul. Tento banner bude pot pipraven k vystaven kdekoli na webu.
Import obrzku iPhone
V programu Adobe Photoshop si oteveme soubor s obrzkem iPhonu a zamaskujeme bl okol kolem mobilu (vetn spodnho stnu) a ozneme jej co nejble k hranm iPhonu. Pozad ponechme prhledn.
Soubor ulome a v programu Adobe Flash Professional zvolme poloku Import to Library (z menu File>Import). Pokud importujeme soubor z Adobe Photoshopu, mme k dispozici vbr, kter vrstvy chceme importovat zvolme tedy pouze vrstvu s iPhonem bez jakhokoli pozad.
Po potvrzen se nm obrzek importuje do knihovny, ovem zatm ne jako symbol. Musme jej pethnout na pltno a symbol z nj teprve vytvoit. Zde bude poteba zvolit typ Movie Clip, abychom mli pstup k rozenm vlastnostem (typy symbol lze mnit i po jejich pidn pomoc panelu Properties).
Symbol pethneme na pltno a pomoc panelu Transform zmnme jeho rozmry tak, aby se pkn veel na vku, a umstme jej do lev sti.
Po kliknut na prv pidan symbol se nm v panelu Properties objev monost Filters, kde ve spodn sti klikneme na volbu Add Filter a zvolme Drop Shadow. Hodnoty nastavme podle nsledujcho obrzku tak, aby iPhone vrhal lehk stn, kter vylep celkov grafick dojem.
Tmto krokem jsme s obrzkem iPhonu zatm skonili, protoe je umstn a vypad tak, jak jsme potebovali, zbv u jen vytvoit bn snmek ve vrstv s obrzkem (tu si meme pejmenovat na obrazek) na pozici 150.
Prce s texty
Text iPhone
Zaneme vytvoenm nov vrstvy pro text iPhone (pojmenujeme ji text), vytvome klov snmek (F6) na pozici 72, take vechny snmky 1-71 zstanou przdn. Dle pidme text iPhone napravo od mobilu, pouijeme vhodn bezpatkov font, napklad Calibri. Velikost zvolme kolem hodnoty 50 a pouijeme tmav edou, poppad tm ernou barvu.
Pevedeme text na symbol, aby bylo mon provst animaci, a vytvome bn snmek (F5) na pozici 99. Aplikujeme MotionTween animaci mezi snmky 72-99, protoe v tomto rozmez se bude text pohybovat.
Nyn se pepneme do snmku 72 a posuneme text mimo pltno, aby nebyl vidt (budeme simulovat efekt, kdy text pilet do pozice, ve kter jsme jej vytvoili). Posledn vc, kter nm chyb, je pidat symbolu s textem ve snmku 99 rotaci napklad 1080 zajist, e se text bhem letu tikrt oto kolem stedu.
Nen problm s rotac a drhou jakkoli experimentovat, dokud se nm nebude zdt pohyb pirozen a vhodn. Na obrzcch pod tmto textem jsou vyobrazeny snmky 72 a 99 s drhou textu.
Text 3GS
Obdobnm zpsobem pidme text 3GS (vytvome novou vrstvu s nzvem 3gs, pot vytvome klov snmek na pozici 100, snmky ped tmto zstanou przdn a na pozici 100 vytvome text), pouijeme stejn font, ale zvtme jej, pevedeme jej na symbol a aplikujeme MotionTween animaci mezi snmky 100-129 (nezapomeneme na pozici 129 vytvoit klov snmek pomoc klvesy F6).
Zde vyuijeme jin efekt, a to sice prhlednost. Pepneme se do snmku 100, ozname symbol s textem 3DS a vpravo v panelu Properties, pod zlokou Color Effect vybereme styl Alpha a nastavme hodnotu na 0. Tmto doclme efektu, kdy text od 100. snmku bude postupn vystupovat a do snmku 129, kdy bude pln vidt.
Me se stt, e bude nutno jet ve snmku 129 zpt nastavit hodnotu Alpha na 100, zle na poad, ve kterm jsme jednotliv kroky dlali.
Nlepka se slevou
Posledn objekt, kter budeme pidvat do scny, je nlepka se slevou. Vytvome si novou vrstvu s nzvem sleva, v n klov snmek na pozici 130. Pidme ptihelnk a do nj npis 30 % off na dva dky, aby byl dobe iteln.
Ve pevedeme na symbol do knihovny a umstme do pravho dolnho roku. Prothneme snmky a k snmku 150, vytvome MotionTween animaci (nezapomeneme vytvoit na pozici 150 klov snmek) a ve snmku 130 tento symbol mnohonsobn zvtme (klidn pes cel plno) a potome teba o 720.
Doclme tak efektu, e ptihelnk jakoby spadne na pltno a zastav se v roku.
Maska
Dal vc, kterou pidme do projektu, bude vrstva s maskou. Masku si meme pedstavit stejn jako masku v programu Adobe Photoshop. Maska je vrstva, kter uruje, jak st vrstvy pod n bude vidt.
Vytvome tedy nad vrstvou obrazek novou vrstvu s nzvem maska. Klikneme na ni pravm tlatkem a zvolme volbu Mask. Nakreslme kruh pes obrzek iPhonu do vrstvy maska a zkusme animaci exportovat pomoc Ctrl+Enter.
Vidme, e v exportovanm nhledu se msto barevnho kruhu maska aplikovala a z vrstvy pod n je vidt jen dan vez. Nezbv ne pout na kruh ve vrstv maska animaci MotionTween a mezi snmky 1 a 72 vytvoit rzn pohyb ze strany na stranu a postupn zvtovn kruhu, a nakonec ve snmku 72 bude iPhone odkryt zcela (kruh tedy mus kompletn pesahovat symbol s iPhonem).
Dokonen projektu
Zbv u jen zkontrolovat, jestli vechny vrstvy obsahuj snmky a k pozici 150, pokud tomu tak nen, musme posledn klov snmky prothnout a do snmku 150, aby nm v prbhu animace nkter st nezmizela. Jedinou vjimkou je maska, kter me skonit ve snmku 72, protoe dle nebude aplikovna.
Nakonec vytvome jet jednu vrstvu s nzvem kod a na pozici 150 zde umstme przdn klov snmek, do kterho pidme akci Stop, aby animace na konci zastavila a neopakovala se (samozejm pokud opakovn nen douc).
Cel projekt je hotov, nezbv ne jej exportovat, a to bu ve formtu swf, nebo ve formtu avi, zle, kam potebujeme vslednou animaci umstit. Ve videu pod tmto textem je cel proces tvorby tto animace ukzn.
Soubor s bannerem a soubor s projektem lze sthnout zde.
Dal ten
Otzky a koly
- V lev spodn sti se nachz okno s presety pro MotionTween, najdte vhodn preset a aplikujte jej v animaci na libovoln objekt.