FLASH XIX - akce Tell Target potřetí - Grafika.cz - vše o počítačové grafice

17. dubna 2000, 00.00 | V dalším pokračování akce Tell Target spojíme animované menu s
animací klipu po kliknutí a s popiskem po najetí myší na tlačítko.

V dalším pokračování akce Tell Target spojíme animované menu s animací klipu po kliknutí a s popiskem po najetí myší na tlačítko.

Začneme opět velikostí jeviště - 350x300. Budeme potřebovat vyrobit hodně komponent, než je začneme na scéně 1 kompletovat.
Ctrl + F8 a vytvoříme si klip tlačítka - but1. Ze všeho nejdřív vyrobíme obrázek tlačítka, jako základ. Použil jsem rovnoramenný trojúhelník, který jde snadno vyrobit. Nakreslíme čáru o délce 4 dílků základní mřížky (lépe se nám bude pracovat, když si zapneme magnet), kterou si okopírujeme 2x. Jednu necháme vodorovně, druhou vybereme a Window -- Inspectors -- Transform -- Rotate = 60. Třetí si vybereme a Rotate = -60. Pak si každou zvlášť označíme a spojíme v rozích, magnet nám je přichytí. U takovýchto malých trojúhelníků to jde odhadem, tento návod se týká spíše velkých, kdy v mřížce ztrácíme přehled. Potom pouze vybarvíme vnitřek trojúhelníku a uložíme objekt do knihovny jako Graphic - (butt1). Objekt rozbijeme -- Break Apart a začneme animovat. Modify -- Frame -- Motion -- Shape. Na poli 3 - F6 a přebarvíme vnitřek tlačítka. Pole 5 a 7 - F6 a opět přebarvíme. Přidáme další vrstvu a vložíme text, který můžeme jakkoliv zanimovat. Vaše timeline a tlačítko by měly vypadat takto:

První klip máme, teď si jej 2x okopírujeme, v knihovně -- pravý klik - Duplicate -- a pojmenujeme but2 a další but3. Dvojklikem v knihovně si otevřeme klip but2 a musíme upravit text, protože se nám okopíroval ten z klipu but1. To samé provedeme u klipu but3.

Nyní si musíme vyrobit středové klipy. Ctrl + F8 -- Movie Clip - a jméno (clip1). První pole necháme prázdné a zadáme na něm akci Stop. Na druhém si nakreslíme opět rovnoramenný trojúhelník, jehož jedna strana bude 8 dílků základní mřížky a použijeme výše uvedený návod na výrobu tojúhelníku. Vybarvíme ho celý jakoukoliv barvou. Přidáme vrstvu a přetáhneme ji dolů. Nakreslíme si kruh, buď s okrajem nebo bez a výplň zadáme nějakou radiálu z nabídky v barvách. Určíme animaci - Shape a postupně budeme přidávat kexframy na polích 6, 10, 14, 18, 21 a nástrojem Kyblík - Tranform Fill upravovat velikost výplně. Pokud jsme hotovi a spokojeni, přejdeme do vrstvy, kde máme trojúhelník, pravý klik nad vrstvou -- Mask. Já jsem přidal ještě další vrstvu popisek čísla klipu. Na kterémkoliv posledním keyframu zadáme akci -- Go to and Play (2). Vaše timeline by měla vypadat takto:

A obrázek na posledním framu po odemknutí vrstev a po zamčení:

Opět v knihovně vyrobíme duplikáty klipu a pojmenujeme je clip2 a clip3. Tady je třeba zase přizpůsobit pouze světla, změnit jejich barvu a směr. Nejjednodušší je na všechny keyframy, mimo prvního a posledního pravý klik a Clear Keyframe a zadávat je znovu a první a poslední jen přebarvit a přesunout.
Přistoupíme k výrobě popisků. Ctrl + F8 -- Movie Clip -- jméno (pop1). První rám opět necháme prázdný a zadáme akci Stop. Na druhém nakreslíme obdélník a do něj napíšeme text. Ctrl + A a uložíme do knihovny (po1). Na poli 2 -- pravý klik -- Create Motion Tween. Pole 10 -- F6. Vrátíme se na pole 2 a dvojklikem na objekt otevřeme Instance Properties -- Color Effect -- Alpha = 100. Na poli 10 to samé, jen Alpha = 40. A ještě přidáme akci Stop. V knihovně opět vytvoříme dva duplikáty - pop2, pop3. Tady já jsem nic neměnil, jinak je zase třeba změnit text.

Tím bychom měli výrobu komponent hotovu, můžeme skočit na scénu 1 a začít kompletaci. Nakreslíme si stejný tojúhelník jako v klipech clip1-3, pomocí čar a bez výplně. Zadáme animaci Shape a na poli 4 - F6. Ctrl + A -- pravý klik -- Copy a Paste -- Window -- Inspectors -- Transform -- Scale = 70%. Takto vytvořený menší trojúhelník vložíme do většího, označíme pouze menší a celý postup opakujeme na poli 7, 10 a 13. Označíme celou timeline a okopírujeme ji na pole 14. Vrstvu zamkneme a přidáme další, do které vytvoříme první tlačítko. Z knihovny vložíme na jeviště klip but1 a usadíme jej viz obr:

Pokud jej máme na poli 1 takto přichycen k trojúhelníku, Insert -- Convert to Symbol -- Button -- button1. Hned pravý klik -- Edit. Na políčku Over -- F6 a vymažeme klip. Z knihovny natáhneme náš dnešní první obrázek tlačítka - butt1 a usadíme jej přesně na stejné místo, jako byl předtím klip but1. Tím jsme zadali editaci tlačítku, které bude animovat a po najetí myší se zastaví. Vrátíme se na scénu 1 a pokračujeme ve tvorbě animace buttonu1. Na poli 1 -- pravý klik -- Create Motion Tween. A na polích 9 a 18 přesuneme tlačítko dle obrázku výše. Na poli 26 bude ve výchozí poloze. Máme hotový button1 a stejným postupem vyrobíme button2 a 3, ale každé do jiné vrstvy.
Přidáme si další vrstvu, do které vložíme popisky. Na poli 26 - F6 a z knihovny vložíme na jeviště klip -- pop1. Ten usadíme nad button1. Protože jsme nechali prázdné první pole v klipu pop1, zobrazila se nám pouze tečka, na kterou dvakrát klikneme -- otevřeme Instance Properties a napíšeme Instance Name -- pop1. Přidáme další vrstvy a vložíme popisky pop2 a pop3 a zadáme Instance Name -- pop2 a pop3.
Přidáme vrstvu, do které budeme vkládat klipy - clip1. Opět na poli 26 - F6 a z knihovny vložíme clip1. Ten usadíme do středu trojúhelníka, který jsme kreslili v první vrstvě. Dvojklik -- Instance Properties -- Instance Name = clip1. Toto opakujeme i v dalších vrstvách. V poslední vrstvě clip3 zadáme na poli 26 akci Stop. Timeline by měla vypadat takto:

A jeviště takto:

Nyní je na řadě přidělení akcí tlačítkům. Na poli 26, dvojklikem otevřeme Instance Properties buttonu1. Začínáme On MouseEvent (Roll Over), aby se nám popisek pohyboval za myší v objektu (buttonu) dáme akci Drag Movie Clip, zde musíme do kolonky Target (Cíl) napsat Instance Name popisku - pop1 a zatrhnout Lock mouse to center.

Podívejme se ještě na obrázku na akci Tell Target:

Nebudu rozebírat každou akci zvlášť, pokud jste pozorně prostudovali minulou lekci, při pohledu na akce je Vám postup jasný.
Akce Roll Over s týká pouze popisku, který se zobrazí po najetí myší:

On (Roll Over)
   Start Drag ("pop1", lockcenter)
   Begin Tell Target ("/pop1")
     Play
   End Tell Target
End On

Akce po kliknutí se týká pouze klipů - clip1-3

On (Release)
   Begin Tell Target ("/clip1")
     Play
   End Tell Target
End On

Akce Roll Out se týká i popisků i klipů a návratu:

On (Roll Out)
   Begin Tell Target ("/pop1")
     Stop
   End Tell Target
   Begin Tell Target ("/clip1")
     Go to and Stop (1)
   End Tell Target
   Go to and Play (Scene 1, 1)
End On

Všechny tyto akce zadáme i u tlačítek 2 a 3.

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

FLASH XVIII - akce Tell Target podruhé
FLASH XVII - akce Tell Target poprvé
FLASH XVI - jednoduché menu
FLASH XV - animace tlačítka
Bezplatný export pro Flash z Corelu 9
FLASH XIV - intro a menu
FLASH NA SVĚTOVÉ ÚROVNI
FLASH XIII - jak na preloader a jak ho umístit
FLASH XII - akce pro tlačítka
FLASH XI - 3D hvězda, zvuk na pozadí
JAK DOSTAT ČEŠTINU DO FLASHE ?
FLASH - X - animace bitmapy
SEZNAMTE SE - FLASH 4 - IX
SEZNAMTE SE - FLASH 4 - VIII
SEZNAMTE SE - FLASH 4 - VII
SEZNAMTE SE - FLASH 4 - VI
SEZNAMTE SE - FLASH 4 - V
SEZNAMTE SE - FLASH 4 - IV
SEZNAMTE SE - FLASH 4 - III
SEZNAMTE SE - FLASH 4 - II
SEZNAMTE SE - FLASH 4 - I
Macromedia připravuje Flash plugin pro Illustrator
Macromedia představila Flash 4
FLASH - ANIMAČNÍ TECHNIKY I.