FLASH XV - animace tlačítka - Grafika.cz - vše o počítačové grafice

Fotosoutěže
Fotogalerie
Rubriky
Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:

Nabídka práce


Webdesign

FLASH XV - animace tlačítka

27. března 2000, 00.00 | Jak vyrobit a umístit animované tlačítko. Postup krok za krokem.

V několika následujících tutoriálech se budeme věnovat tvorbě tlačítek, menu a akcím k jejich ovládání. Začneme obyčejným tlačítkem s několika efekty.

Upravíme si velikost jeviště - 300x300 a necháme zobrazit mřížku. Vytvoříme první movie klip -- Ctrl + F8, zadáme jméno (Animace) a označíme Movie Clip.Nakreslíme ovál, viz obrázek 1, pokud jsme kreslili ovál s linkou, tak ji odstraníme. Potom nástrojem kyblík přebarvíme vnitřek oválu (obr.2) a nástrojem Transform Fill upravíme dle obr.3.

           

Takto hotový obrázek musíme vložit do knihovny -- Insert -- Convert to Symbol -- Graphic a pojmenovat(Buton). Protože ho budeme chtít animovat animací Shape, tak jej musíme opět rozbít -- Modify -- Break Apart (Ctrl + B). Zadáme druh animace -- Modify -- Frame -- Tweening -- Shape. Na poli 10 -- F6 a nástrojem kyblík přebarvíme vnitřek oválu a nástrojem Transform Fill posuneme záři dle úvahy, třeba do protějšího rohu oválu.

Přidáme další vrstvu, z knihovny tažením umístíme na středový křížek symbol Buton. (Tady následuje jedna rada, je dobré si vždy předchozí vrstvu zabezpečit zamknutím a zobrazit ji pouze v obrysech, které se dobře skládají na sebe a máme větší přehled.) protože symbol již máme v knihovně, zadáme tedy jen druh animace -- Ctrl + F -- Tweening -- Motion. Na poli 10 -- F6 a přetáhneme obrázek nahoru tak, aby se vršek spodního oválu dotýkal spodku vrchního. Máme obrázek na poli 10, dvojklikem na obrázek na jevišti zadáme změnu barvy -- Color Effect -- Alpha = 0%.
Přidáme další vrstvu a opakujeme ten samý postup, pouze pohyb objektu směřujeme dolů. Přidáme další vrstvu a opět opakujeme, ale pohyb tentokrát směřujeme doleva.
Přidáme poslední vrstvu - text. Napíšeme text, jaký budeme potřebovat na tlačítku a umístíme jej do knihovny. Zadáme animaci tweening, jako v předchozích případech a na poli 10 -- F6. Dvojklikem na objekt zadáme změnu barvy -- Color Effect -- Tint = 10% -- bílou barvu. A nakonec na poli 10 Zvětšíme velikost textu na 150% (Windows -- Inspectors -- Transform -- Scale = 150%)
A poslední krok je, že vrstvu s animací shape(první vrstva zespodu) přetáhneme až nahoru.
Celá animace bude vypadat na poli 1 v obryse a v normálním zobrazení takto:

     

Na poli 10 v obryse:

A na poli 10 v normálním zobrazení:

Vrátíme se na Scénu 1 a tažením z knihovny umístíme obrázek Buton na jeviště. Insert -- Convert to Symbol -- Button - a jméno (tlac). Pravý klik nad objektem -- Edit. Nyní máme na příkazu Up umístěn statický obrázek. Abychom docílili efektu, že po nájezdu myší nad tlačítko se nám spustí animace, musíme v kolonce Over přidat keyframe -- F6 a hned pravý klik a statický objekt odstranit -- Cut. Z knihovny tažením umístíme na stejné místo movie klip (animace). Protože odkazy po kliknutí zadávat dnes nebudeme, necháme políčka Down a Hit volná. Vrátíme se na Scénu 1 a pouze přebarvíme jeviště na černou barvu.

Celý tutoriál si můžete stáhnout TADY

Další díly seriálu naleznete v rubrice Webdesign.

Obsah seriálu (více o seriálu):

Tématické zařazení:

 » Rubriky  » Go verze  

 » Rubriky  » Webdesign  

Poslat článek Diskuse (0) Tisk Přečteno: 2971x

www.grafika.cz/rubriky/webdesign/flash-xv-animace-tlacitka-128757cz

 

 

 

Nejčtenější články
Nejlépe hodnocené články
Nabídka bazar

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: