Dokončenie blinkie pomocou doplnku Flash Motion Tweens

• Apríl 23, 2024

Keď sme naposledy pracovali na animácii blikania Flash, práve sme dokončili textové efekty. Posledným textovým efektom, ktorý sa pri animácii vyskytol, bol vzhľad a zánik názvu webových stránok „J3 Designs“. Zmizne z javiska doľava s efektom časovej osi (prechod 3 na časovej osi). Dôvod bol pre to a chystáte sa zistiť, čo to bolo za dôvod.

Pamätajte, že ako súčasť detailov dizajnu máme tieto dve lienky. Nastal čas dať ich do práce. Keď sme postavili vrstvy do nášho projektu blinkie, pridali sme do vrstvy Bug 1 zlatú lienku. Teraz, prvá vec, ktorú urobíme, je pridať druhú lienku do novej vrstvy, ktorú nazveme Bug 2. Chceme, aby sa táto červená lienka objavila spred portrétu. Preto bude potrebné umiestniť novú vrstvu pod vrstvu Statické podrobnosti.

Otvorte blinkie2.fla do Flash CS3 a poďme do práce. Chceme, aby sa lienka začala pohybovať spred portrétu, keď sa názov webových stránok začína strácať. Chceme, aby to vyzeralo tak, že text z dôvodu lienky mizne. Preto pridáme túto novú lienku do rámu 110, keď text začína miznúť.

1. Kliknutím na Súbor - Import - Importovať do knižnice otvorte dialógové okno Import a do našej Knižnice pridajte červenú lienku.
   
   
2. Pridajte novú vrstvu pod vrstvu Statické podrobnosti a pomenujte ju „Bug 2“. Pridajte do snímky 110 kľúčový snímok (Vložiť - Časová os - Kľúčový snímok). Presuňte červenú lienku z knižnice pod portrét a mimo nej zatiaľ.
   
   Chceme, aby sa táto lienka posunula doľava, až kým nezmizne z pódia, keď zmizne text. Chceme teda slunéčko sedmitečné až doľava a mimo javiska, kým nedosiahneme rámec 160.
   
   
3. Kliknite na Frame 160 vo vrstve Bug 2, pridajte Keyframe a potiahnite červenú lienku doľava a úplne mimo javisko. Kliknite pravým tlačidlom myši medzi snímky 110 a 160 a v rozbaľovacej ponuke vyberte položku Create Motion Tween.
   
   Vyskúšajte film a mali by ste vidieť, že text prestáva blikať, keď sa nad ním pohybuje lienka. Akonáhle je červená lienka mimo pódia, presunieme zlatú lienku (Bug 1 layer) hore a doprava, až kým z pódia nezmizne.
   
   
4. Kliknite na snímku 160 vo vrstve Bug 1 a pridajte kľúčový rámec pre začiatočný bod pre animáciu zlatej lienky. Použime 20 snímok, aby sme presunuli zlatú lienku z pódia. Kliknite na Rám 180 a pridajte kľúčový rámec. Presuňte zlatú lienku hore a von z pódia.
   
   
5. Kliknite pravým tlačidlom myši medzi snímky 160 a 180 a vytvorte doplnenie pohybu. Kliknite na Rám 180 a pridajte Rám do vrstvy Statické detaily a Pozadie, aby sa obsah týchto vrstiev opäť zviditeľnil.
   
   Nakoniec chceme presunúť zlatú lienku späť do pôvodnej polohy v ľavej dolnej časti javiska. Nechceme však, aby sa chyba posunula nadol z vrchu javiska. Chceme, aby sa posunula zdola pod pódium. Preto musíme najprv umiestniť zlatú lienku doľava a pod pódium. Potom všetko, čo musíme urobiť, je posunúť ho nahor späť na pôvodné miesto, aby sa animácia mohla opakovať. Použijeme 10 snímok na presun lienky späť na miesto.
   
   
6. Prejdite celú cestu späť do snímky 1 vo vrstve Bug 1 a vyberte zlatú lienku. Kliknutím na Upraviť - Kopírovať uložíte pôvodnú pozíciu zlatej lienky.
   
   
7. Stále vo vrstve Bug 1, pridajte kľúčový rámec do snímky 190. Kliknite na Upraviť - Vymazať, aby ste odstránili zlatú lienku, ktorá už existuje. Potom kliknite na Upraviť - Vložiť na miesto, čím vrátite zlatú lienku späť na pôvodné miesto.
   
   
8. Stále vo vrstve Bug 1 kliknite na Frame 181 a pridajte Keyframe. Potom odstráňte zlatú lienku, ktorá už existuje. Vložte zlatú lienku späť na pôvodné miesto v tomto rámčeku (Paste in Place). Potom pretiahnite túto lienku pod pódium. Medzi snímky 181 a 190 pridajte doplnenie pohybu, ktoré posunie túto lienku nahor a na pódium.
   
   
9. Kliknite na snímku 190 a pridajte rám do vrstiev statických detailov a pozadia, aby sa obsah týchto vrstiev opäť zviditeľnil.
   
   

Otestujte a uložte blinkie ako blinkie3.fla. Potom publikujte svoj blinkie ako súbor .swf a užite si nový blinkie.

Dizajn J3

Copyright 2018 Adobe Systems Incorporated. Všetky práva vyhradené. Snímky obrazovky produktov spoločnosti Adobe znova vytlačené so súhlasom spoločnosti Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst a Flash Paper je / sú [a] registrované ochranné známky alebo ochranné známky spoločnosti Adobe Systems Incorporated v USA a / alebo iných krajinách.