O najjednoduchšej animácii vo formáte Flash. Ako vytvárať Flash animácie Vytváranie a manipulácia so scénami

Začiatok práce

Prvý rám vrstvy je označený prázdnym kruhom. To znamená, že rámik 1 aj „vrstva 1“ sú prázdne - na vrstvu nie sú vložené žiadne objekty. Prilepte ľubovoľný objekt do vrstvy 1. Napríklad importujme bitmapu (pozri Import) a vložme ju do vrstvy „Vrstva 1“. Obrázok je zobrazený vľavo. Stlačením klávesu Enter si môžete zobraziť ukážku vytvorenej animácie. Vrstva pozadia je zvyčajne uzamknutá, aby sa zabránilo zmene - vloží sa ikona zámku. Príklad 4: Môžete pridať alebo odstrániť jednoduché rámy. Mazanie rámov: Ak chcete rám odstrániť, vyberte ho, v kontextovej ponuke vyberte možnosť Odstrániť rámy. Podržaním klávesu Ctrl vyberte viac snímok. Napríklad chceme znížiť počet snímok pre pozadie o 5 snímok. Vyberte 5 snímok a vymažte ich - namiesto 30 snímok zostáva 25. Pridávanie rámov: Napríklad musíme pridať niektoré rámce do vrstvy „Pozadie“. Môžete to urobiť tak, že kliknete na rámček 30 a keď sa vedľa kurzora zobrazí malý obdĺžnik, jednoducho rámček 30 pozdĺž časovej osi potiahnete doprava. Alebo môžete kliknúť na ľubovoľný rámec medzi 1. a 30. dňom a v kontextovej ponuke zvoliť možnosť Vložiť rám. Posledná aktualizácia: december 2014

Doteraz sme sa pozerali na filmy vo formáte Flash, ktoré sa od začiatku do konca prehrávali bez zásahu diváka. Flash však tiež umožňuje vytvárať interaktívne aplikácie, kde môže používateľ ovládať prezentáciu obsahu. V tejto lekcii sa oboznámime s prvkami skriptovacieho jazyka Action Script a pozrieme sa na to, ako ich môžete použiť na vytváranie interaktívnych aplikácií. Ako príklad si vytvorme fotoalbum s prvkami interaktívneho rozhrania. Ale predtým, ako pristúpime k popisu Action Script, je potrebné povedať o jednom ďalšom type symbolov, ktoré sme doteraz ponechali bez pozornosti - jedná sa o symboly tlačidiel. Na vytvorenie interaktívneho rozhrania sú jednoducho nevyhnutné.

Vytváranie tlačidiel

Tlačidlo je interaktívny filmový klip so štyrmi snímkami. Keď nastavíme symbol na typ tlačidla, vytvorí Flash pre nový symbol štvorramennú časovú os:

Stav hore je rámček zodpovedajúci situácii, keď nie je stlačené tlačidlo a ukazovateľ myši nie je nad tlačidlom;

Nadmerný stav - rám ilustrujúci vzhľad tlačidla, keď je kurzor myši nad tlačidlom, ale tlačidlo nie je stlačené;

Dolný stav - tento rám zobrazuje vzhľad tlačidla po stlačení;

Stav zásahu - definuje oblasť, v ktorej tlačidlo reaguje na kliknutie myšou; táto oblasť nie je v klipe viditeľná.

Ak chcete vytvoriť tlačidlo, spustite príkaz Vložiť \u003d\u003e Nový symbol (môžete zadať klávesovú skratku Control + F8). V zobrazenom dialógovom okne Vytvoriť nový symbol zadajte názov symbolu tlačidla (napríklad but1) a vyberte typ symbolu tlačidla.

Flash sa prepne do režimu úprav symbolov a poskytne snímky nahor, nad, nadol a zasiahnuté. Prvý snímok, Hore, sa stane prázdnym kľúčovým snímkom. Poďme do tohto rámčeka nakresliť nestlačený pohľad na tlačidlo (obr. 1).

Obrázok: 1. Rámik tlačidla HORE

Vyberme druhý rámček, označený ako Over a zodpovedajúci stavu, keď je kurzor umiestnený nad tlačidlom. Vložme do tohto rámca kľúčový snímok (príkazom Vložiť \u003d\u003e Kľúčový snímok), v dôsledku čoho sa objaví kľúčový snímok, ktorý úplne opakuje obsah Up-rámca. Zmeňme farbu tlačidla, ako je to znázornené na obr. 2.

Obrázok 2. Rám rámu

Podobne pridajte nasledujúci rámec (Down-frame) a nakreslite stlačený stav tlačidla (obr. 3).

Obrázok: 3. Tlačidlá nadol

Zatiaľ nebudeme nič vykresľovať v rámci Hit-frame, ale k tomuto rámcu sa vrátime o niečo neskôr.

Poďme na hlavnú scénu, zavolajme knižnicu pomocou príkazu Okno \u003d\u003e Knižnica a vytvoríme inštanciu symbolu tlačidla jej pretiahnutím na scénu (obr. 4.)

Obrázok: 4. Vytvoríme inštanciu tlačidla jeho presunutím z knižnice

Vo výsledku dostaneme nasledujúci film. Ako môžete vidieť z tohto filmu, tlačidlo sa stláča nielen keď klikneme na strednú (pracovnú) oblasť tlačidla, ale aj keď klikneme na rám okolo neho. Je to tak kvôli skutočnosti, že ak sa Hit-frame nekreslí, potom pracovná oblasť tlačidla bude zodpovedať Up-frame.

Aby bolo možné stlačiť tlačidlo iba v pracovnej oblasti, je potrebné túto oblasť definovať v Hit-frame, to znamená nakresliť tlačidlo bez rámu (pozri obr. 5).

Obrázok: 5. Hit-frame tlačidla

Po pridaní požadovaného Hit-rámca sa dočkáme ďalšieho filmu, v ktorom stlačenie rámčeka nestlačí tlačidlo.

Aby bolo tlačidlo interaktívne, je potrebné priradiť skutočnosť, že je stlačené, k vykonaniu určitých príkazov, to znamená k popísaniu určitého scenára. Na skriptovanie vo formáte Flash existuje špeciálny jazyk s názvom Action Script. V tejto lekcii sa dotkneme iba malej časti schopností tohto jazyka a v budúcnosti sa vrátime k štruktúre a syntaxi Action Script, pretože príklady vytvárania interaktívnych filmov vo Flashi sa stávajú zložitejšími.

Pochopenie Action Script

Action Script je skriptovací jazyk, sada pokynov, ktoré ovládajú prvky filmu Flash. Skripty akcií je možné vložiť do filmu alebo uložiť do externého textového súboru s príponou AS.

Keď vložíte scenár do filmu, môžete ho vložiť do rôznych častí filmu. Skripty akcií môžu konkrétnejšie obsahovať kľúčové snímky, inštancie tlačidiel a inštancie filmových klipov. V súlade s tým sa scenáre nazývajú Action Frame, Action Button a MovieClip Action.

Skripty akcií sa vykonávajú, keď používateľ alebo systém spustí určité udalosti. Mechanizmus, ktorý hovorí Flash, aký príkaz má vykonať, keď dôjde k udalosti, sa nazýva obsluha udalosti.

Action Script má svoju vlastnú syntax, podobne ako JavaScript. Flash MX 2004 podporuje Action Script všetkých predchádzajúce verzie Blesk.

Jedným zo základných konceptov Action Script sú Action - príkazy, ktoré vydávajú pokyny počas vykonávania súboru SWF. Napríklad gotoAndStop () posiela prehrávaciu hlavu (Playhead) na konkrétny rámec alebo štítok. Názov jazyka pochádza zo slova Action - Action Script (doslova - akčný skript). S väčšinou pojmov tohto jazyka sa oboznámime na konkrétnych príkladoch.

Interaktívny fotoalbum

Poďme si demonštrovať použitie tlačidiel na ovládanie fotoalbumu - vytvorme sadu fotografií a pridáme dve tlačidlá, ktoré budú listovať fotografiou tam a späť.

Umiestnite prvú fotografiu na hlavnú časovú os a pridajte tlačidlo zo štandardnej sady. Požadovaný priečinok otvoríte spustením príkaz Windows \u003d\u003e Ovládacie panely Bežné knižnice \u003d\u003e Tlačidlá (obr. 6).

Obrázok: 6. Pridajte tlačidlo zo štandardnej knižnice

Po vykonaní tohto príkazu sa objaví panel obsahujúci veľkú sadu predkreslených tlačidiel odlišné typy... Vyberieme napríklad Key Buttons (tlačidlá, ktoré vyzerajú ako klávesy na klávesnici), otvoríme zodpovedajúci priečinok, vyberieme tlačidlo ľavého klávesu (obr. 7) a vytvoríme inštanciu tohto tlačidla (jeho presunutím na plochu).

Obrázok: 7. Položky v priečinku Key Buttons

Upozorňujeme, že keď umiestnite druhé tlačidlo (vpravo-vpravo) na plochu a posuniete ho tak, aby sa zarovnal s prvým tlačidlom, program poskytne nápovedu (prerušovaná čiara), ktorá vám umožní presne umiestniť dané tlačidlo (obrázok 8).

Obrázok: 8. Automatické zarovnanie tlačidiel na rovnakej úrovni

Ak chcete pridať skript, musíte zavolať editora Action Script príkazom Window \u003d\u003e Development Panels \u003d\u003e Actions alebo stlačením klávesu F9. Pokiaľ sa chystáte písať skripty často, stojí za to si tento príkaz na klávesnici zapamätať. Vo výsledku sa zobrazí editor Action Script (obr. 9).

Obrázok: 9. Panely editora Action Script

Ak pri sledovaní správ v paneloch editora skriptov Action Script experimentujete so zvýrazňovaním rôznych prvkov v scéne, zistíte, že vás program vyzve, na ktorý prvok môžete „zavesiť“ kód. Ak vyberiete rámček na scéne, potom sa v ľavom hornom rohu panela editora zobrazí nápis Akcie - Rám, ak kliknete na tlačidlo, zobrazí sa nápis Akcie - Tlačidlo, to znamená, že program zobrazí výzvu, aby zadaný kód bude odkazovať na skript tlačidla. A ak vyberiete fotografiu, potom sa v poli určenom na zadanie skriptu zobrazí správa: Aktuálny výber nemôže mať na seba aplikované akcie (na tento vybraný objekt nie je možné použiť skript).

Tlačidlu priradíme skript. IN najnovšie verzie ActionScript má schopnosť písať centralizovaný kód, to znamená kód, ktorý žije na jednom mieste, a táto schopnosť vám umožňuje lepšie porozumieť veľkým programom. Avšak v jednoduché príklady (o čom uvažujeme) priradenie skriptu k tlačidlu je úplne platné.

Pre tlačidlo so šípkou doľava teda musíme formalizovať nasledujúci scenár: „Ak sa tlačidlo uvoľní na určitom rámci, potom z tohto rámca je potrebné prejsť na predchádzajúci rámec.“ V súlade so syntaxou jazyka Action Script (obr. 10) to bude vyzerať takto:

Prvý riadok obsahuje obslužnú rutinu udalosti tlačidla () (), ktorá má nasledujúci formát:

Teraz pridajme niekoľko kľúčových snímok, aby sa do nich skopírovali tlačidlá vytvorené na prvom ráme, a do novovytvorených rámov vložíme potrebné fotografie.

Ak spustíme vytvorený film na vykonanie, snímky sa budú prehrávať nepretržite po sebe, a preto je potrebné v prvom rade dať príkaz „Stop“ na prvú snímku. Za týmto účelom pridajte do prvého rámca príslušný príkaz (obr. 11).

Obrázok: 11. Skript priradený k prvému rámcu

Poznámka: príkaz už nie je priradený tlačidlu, ale rámu. Skutočnosť, že rámcu bol priradený skript, je uvedená na hlavnej časovej osi - nad tučným bodom v označení rámca sa objaví malé písmeno „a“.

Vo výsledku sme dostali nasledujúci film.

Ak máme vo fotoalbume iba niekoľko rámčekov, potom sú celkom postačujúce dve tlačidlá - „Vpred“ a „Späť“, ale ak je sada fotografií veľká, je žiaduce mať aj také tlačidlá, ktoré odosielajú na začiatok a koniec filmu. V nasledujúcom príklade pridáme príslušné tlačidlá: „K prvému rámcu“ a „K poslednému rámcu“. Tlačidlá vhodnej mnemotechniky môžete vybrať zo štandardnej knižnice tlačidiel v priečinku Circle Buttons (Obr. 12).

Na tomto príklade sa oboznámime s ďalším príkazom gotoAndStop (), ktorý vám umožní prejsť na požadovaný rámec a potom zastaviť.

Obrázok: 12. Tlačidlá v priečinku Kruhové tlačidlá

Na tlačidlo pre prechod na prvý rámec (tretí zľava na obr. 13) pridáme kód, ako je znázornené na obr. 13.

Obrázok: 13. Scenár pre tlačidlo „Na prvý snímok“

V prípade fotoalbumu s piatimi rámami pridajte k poslednému tlačidlu prechodový skript „Na posledný rám“:

Automatizované skriptovanie

Doteraz sme všetky príkazy písali manuálne, ale panely editora ActionScript poskytujú rôzne automatizované skriptovacie služby. Zvážme tieto možnosti.

Obrázok: 14. Automatizované skriptovacie nástroje

Okno Editor skriptov akcií umožňuje výber, presúvanie, preskupenie a odstránenie príkazov.

Ukážeme si, ako môžete v automatizovanom režime písať ten istý skript pre tlačidlo „Poslať ďalej“. Po výbere priečinka Movie Clip Control (ľavé horné okno na obr. 14) máte prístup k obslužnému programu udalostí on a potom buď dvakrát kliknite na príslušnú položku, alebo v režime Drag and Drop potiahnite výraz do poľa na písanie skriptu.

Obrázok: 15. Pomôcka pre dokončenie výrazu

Vďaka tomu sa v pracovnom poli zobrazí požadovaný výraz a náznak formulára (obr. 15): z ponuky vyberiete požadovaný príkaz a výraz sa dokončí automaticky. Ako vidíte z ponuky, môžete zvoliť nielen stav spojený s tlačidlami na obrazovke - z ponuky môžete zvoliť aj obr. 15 klauzula keyPress “ „, Alebo stlačenie klávesu“ ”, Čo zodpovedá stlačeniu klávesov na klávesnici (šípka doľava, šípka doprava), to znamená, že je možné vytvoriť fotoalbum, ktorý sa bude„ preklápať “pomocou klávesov na klávesnici.

Obrázok: 16. Prístup k tlačidlu klávesnice

Pomocou príkazu keyPress “ ”(Obr. 16), potom choďte do priečinka Timeline Control, vyberte príkaz nextFrame a presuňte ho do pracovného priestoru (Obr. 17).

Obrázok: 17. Príkaz nextFrame nájdete v priečinku Timeline Control

Pre tlačidlo, ktoré prenáša film na začiatok fotoalbumu, môžete zvoliť stlačenie klávesu Domov z ponuky ako udalosti a potom (obr. 18) presunúť príkaz gotoAndStop do poľa, v dôsledku čoho objaví sa ďalšia nápoveda k možnej syntaxi tohto príkazu.

Šípky v popise popisujú rôzne možnosti syntaxe. Program poskytuje dve možnosti (obr. 18 a 19), to znamená, že ponúka nastavenie scény a rám, alebo len rám. V našom prípade stačí zadať iba rám (Frame). Ak je názov scény vynechaný, vykoná sa štandardne prechod na rámik aktuálnej scény.

Obrázok: 18. Tip na možnú syntax príkazu

Obrázok: 19. Šípkový trojuholník vám umožňuje zobraziť možnosti syntaxe

Potom priradíme všetky tlačidlá k zodpovedajúcim tlačidlá klávesnice, dostaneme sa k ďalšiemu filmu, kde bude stránkovanie fotografií prebiehať z klávesnice a klikanie na tlačidlá na obrazovke pomocou myši nebude mať žiadne následky.

Je možné poskytnúť scenár, v ktorom rôzne udalosti povedú k rovnakým akciám? Ukazuje sa, že je to možné - na to musíte v obslužnom programe udalostí on uviesť zoznam názvov udalostí. Ak po prvej udalosti vložíte do zoznamu udalostí čiarku, samotný program vám ponúkne ponuku (obr. 20).

Obrázok: 20. Po zadaní čiarky do zoznamu udalostí sa automaticky zobrazí ponuka ďalších príkazov

Pridajte k prvej udalosti druhú udalosť (stlačte tlačidlo na klávesnici) (uvoľnite tlačidlo na obrazovke):

Zopakujme postup pre ostatné tlačidlá a vo výsledku dostaneme fotoalbum, v ktorom sa bude stránkovanie fotografií robiť myšou aj klávesnicou (originálny súbor FLA je možné získať z odkazu) .

V uvažovanom príklade sme použili prechod podľa čísla rámca, ale táto metóda nie je vždy pohodlná: ak sa počas procesu editácie zmení číslovanie rámcov, môže dôjsť k narušeniu logiky. Je pohodlnejšie použiť prechod po značke rámu. Zvážte príklad, ktorý si vyžaduje nielen listovanie v albume, ale aj presun do rôznych sekcií, teda zložitejšiu navigáciu.

Nech album pozostáva z kresieb, počítačovej grafiky a fotografií.

Prvý rámik sekcie „obrázky“ bude mať označenie Obrázky, podobne ako k prvým rámčekom ostatných sekcií priradíme štítky grafika a fotografia.

Vytvorte vrstvu na umiestnenie štítku a pomenujte ju Štítky. Ak chcete umiestniť štítok na rám, na paneli Vlastnosti vyberte typ štítka Názov a zapíšte si jeho názov. V našom prípade Obrázky (obr. 21). Rovnakým spôsobom umiestnite štítky do rámov 5 a 10 (obr. 22).

Obrázok: 21. Príklad priradenia štítku k rámu

Teraz pridajte novú vrstvu a pomenujte ju Akcie. V prvom kľúčovom snímku vrstvy Akcie zavolajte panel Akčný rám (stlačením tlačidla F9) a zadajte príkaz stop () (pozri obr. 22).

Obrázok: 22. Scenár prvého rámca

Pridajme ďalšiu vrstvu s názvom Predmety, v ktorej priradíme názvy k zodpovedajúcim rámcom: „Obrázky“ (obr. 23), „Grafika“ a „Fotografie“.

Obrázok: 23. Názov rámčekov v sekcii „Obrázky“

Teraz pridajte na bočné tlačidlá ponuky rovnaké mená, ktoré umiestnime do novej vrstvy s názvom Menu.

Vytlačíme si z ľavého okraja prvú položku ponuky „Obrázky“ a preložíme ju do symbolu tlačidla. Pomocou nástroja Šípka vyberte textový blok „Obrázky“ a vykonajte príkaz Upraviť \u003d\u003e Prevod na symbol (tento príkaz môžete vykonať aj pomocou klávesu F8), v paneli Prevod na symbol nastavte typ symbolu Tlačidlo a definujte jeho názov ako obrázkové tlačidlo (obr. 24).

Obrázok: 24. Tlačidlu prechodu na časť obrázkov priraďte názov tlačidla Obrázok

Vytvoríme štyri tlačidlá pre tlačidlo „Obrázky“: prvý bude jednoducho predstavovať pôvodný text (obr. 25), druhý - ten istý text bude iba modrý, tretí rámček preskočíme (v tomto prípade rámček Down bude rovnaký ako Over-frame) a v Hit-frame nakreslíme obdĺžnikovú oblasť, ktorá definuje oblasť stlačenia tlačidla (obr. 26).

Obrázok: 25. Horný rám obrázkaTlačidlo

Obrázok: 26. Hit rám obrázkaButton

Teraz musíme skript zavesiť na novo vytvorené tlačidlo. Ak to chcete urobiť, stlačte tlačidlo na scéne 1 a stlačením klávesu F9 vyvolajte panel Akcie a potom pridajte kód zobrazený na obr. 27.

Obrázok: 27. Scenár prechodu na rám so štítkom

Neustále čelíme bleskovej animácii - na internete a v televíznom vysielaní. Vytváranie jednoduchých animácií Flash pomocou technológie Flash je pomerne jednoduchá úloha, pretože Flash ponúka veľa užitočných nástrojov, ktoré celý proces zjednodušujú. Ak chcete vytvoriť bleskovú animáciu alebo karikatúru, môžete ich načrtnúť za pár hodín.

Kroky

Časť 1

Základy časozbernej animácie. Táto metóda sa považuje za hlavnú metódu vytvárania „tradičnej“ animácie, v ktorej každý nasledujúci rámec obsahuje jeden, ale mierne upravený obrázok. Keď sa prehrajú všetky snímky, obraz ožije. Toto je rovnaká technika, akú používajú animátori voľnou rukou, a je časovo náročnejšia ako doplnenie (pozri nasledujúcu časť).

• V predvolenom nastavení prehráva Flash 24 snímok za sekundu (FPS). To znamená, že sa za jednu sekundu zobrazí 24 snímok, ale nie všetky musia byť odlišné. Toto nastavenie môžete zmeniť (ak chcete) na 12 snímok za sekundu, ale pri 24 snímkach za sekundu bude animácia hrať plynulejšie.

1. Nainštalujte si Flash Professional. Existuje veľa flash animačných programov, ale najvýkonnejší je Adobe Flash Profesionálny CC. Môžete si nainštalovať zadarmo skúšobná verzia tento program alebo použite iný produkt (ak sa nechcete zaregistrovať do programu Adobe Creative Cloud). Zvyšok tohto článku popisuje prácu s programom Flash Professional.

   Pretože animácia po snímkach vyžaduje viac obrázkov (ktoré sa od seba mierne líšia), musíte tieto obrázky vytvoriť manuálne. Ak to chcete urobiť, použite program Adobe Flash Professional alebo nakreslite obrázky v ľubovoľnom grafickom editore.

   • Ak chcete, aby veľkosť vašich obrázkov bola ľahká bez straty ich kvality, vytvárajte obrázky vo vektore, nie v rastrová grafika. Vektorové obrázky sa znova prekreslia, keď majú zmenenú veľkosť (to znamená, že sa vyhnete pixelovaniu alebo vyhladeniu). Bitmapy sú tradičné obrázky, ako sú fotografie, maľované obrázky atď. Ak sa pokúsite takéto obrázky zväčšiť, získate vysoko skreslený obraz.

2. Vytvorte prvý rám. Pri prvom spustení aplikácie Adobe Flash Professional uvidíte prázdne plátno (vrstvu) a prázdnu časovú os. Po pridaní rámcov sa časová os vyplní automaticky. S vrstvami môžete pracovať rovnako ako vo Photoshope.

   • Pred pridaním obrázka vytvorte základné pozadie svojej animácie. Premenujte „vrstvu 1“ na „pozadie“ a potom ju ukotvte. Vytvorte druhú vrstvu a pomenujte ju, ako sa vám páči. Toto bude vrstva, na ktorej vytvoríte svoju animáciu.
   • Pridajte kresbu na plátno prvého rámu. Výkres môžete importovať z počítača alebo môžete pomocou nástrojov na kreslenie vytvoriť výkres priamo v programe.
   • Prvý rámec je „kľúčový“. Kľúčová snímka je snímka, ktorá obsahuje obrázok a tvorí chrbticu animácie. Zakaždým, keď zmeníte obrázok, vytvoríte nový kľúčový snímok.
   • Kľúčové snímky na časovej osi sú označené čiernou bodkou.
   • Kľúčový snímok nepotrebujete v každej nasledujúcej snímke. Vytvorte kľúčovú snímku každé štyri až päť snímok, aby ste vytvorili dobrú animáciu.

3. Previesť obrázok na symbol. V takom prípade môžete obrázok pridať do rámčeka niekoľkokrát. To je obzvlášť užitočné, ak potrebujete rýchlo pridať niekoľko obrázkov rovnakého typu do jedného rámu (napríklad ryby v akváriu).

   • Vyberte obrázok. Kliknite kliknite pravým tlačidlom myši umiestnite kurzor myši na obrázok a vyberte možnosť „Previesť na symbol“. Obrázok bude pridaný do knižnice, čo uľahčuje jeho budúce použitie.
   • Odstráňte výkres. Nerobte si starosti - môžete ho pridať do svojho rámu jednoduchým presunutím z knižnice. Týmto spôsobom môžete do rámčeka pridať viackrát ten istý obrázok.

4. Pridajte prázdne rámčeky. Keď je váš prvý kľúčový snímok pripravený, vložte prázdne snímky a potom pokračujte vytvorením druhého kľúčového snímky. Stlačením klávesu F5 (štyrikrát alebo päťkrát) pridáte za prvý kľúčový snímok prázdne snímky.

   Vytvorte druhý kľúčový snímok (po pridaní niekoľkých prázdnych snímok). Existujú dva rôzne spôsoby, ako to urobiť: môžete skopírovať existujúci kľúčový snímok a urobiť v ňom malé zmeny, alebo môžete vytvoriť prázdny kľúčový snímok a pridať k nemu nový obrázok. Ak používate výkres vytvorený v inom programe, použite druhú metódu. Ak prilepujete obrázok vytvorený pomocou kresliacich nástrojov Adobe Flash Professional, použite prvú metódu.

   • Ak chcete vytvoriť kľúčový snímok pomocou obsahu predchádzajúcej kľúčovej snímky, stlačte kláves F6. Ak chcete vytvoriť prázdny kľúčový snímok, kliknite pravým tlačidlom myši na posledný snímok na časovej osi a vyberte príkaz Vložiť prázdny kľúčový snímok.
   • Po vytvorení druhého kľúčového snímky musíte upraviť jeho obraz, aby ste oživili animáciu. Ak ste použili kresliace nástroje aplikácie Adobe Flash Professional, vyberte nástroj Transformácia, aby ste vybrali prvok na svojej kresbe (napríklad ruku postavy) a upravili ho.
   • Ak vkladáte nový obrázok do každej kľúčovej snímky, uistite sa, že je na správnom mieste (podľa logickej postupnosti rámcov).

5. Opakujte postup. Po vytvorení dvoch kľúčových snímok opakujte postup - medzi jednotlivé kľúčové snímky pridajte nejaké prázdne snímky a uistite sa, že animácia hrá „plynulo“.

   • Vykonajte malé zmeny. Čím menšie (jemnejšie) zmeny, tým plynulejšia je animácia. Napríklad ak chcete, aby postava zdvihla ruku, druhá kľúčová snímka by nemala obsahovať kresbu, na ktorej je postava zobrazená s už zdvihnutou rukou. Namiesto toho sa pomocou niekoľkých kľúčových snímok presuňte zo spustenej ruky na zdvihnutú ruku. V takom prípade bude animácia plynulejšia.

6. Konvertujte výkres. Ak ste vytvorili kľúčové snímky a cestu, môžete obrázok transformovať tak, aby sa plynule menil pri pohybe po ceste dvojčaťa. Môžete zmeniť tvar, farbu, naklonenie, veľkosť a akýkoľvek iný parameter obrázka.

   • Vyberte rám, v ktorom sa bude obrázok transformovať.
   • Otvorte panel vlastností pre obrázok. Ak to chcete urobiť, stlačte kláves F3.
   • V okne vlastností obrázka zmeňte hodnoty parametrov. Môžete napríklad zmeniť odtieň alebo farbu, pridať filtre, zmeniť veľkosť.
   • Môžete tiež použiť nástroj Voľná \u200b\u200btransformácia na zmenu obrázka, ako sa vám páči.

7. Pridajte doladenie. Vytvorenú animáciu otestujte stlačením kombinácie klávesov Ctrl + Enter. Uistite sa, že sa kresba (znak) mení správne a animácia sa prehráva správnou rýchlosťou. Ak sa animácia prehráva príliš rýchlo, znížte FPS alebo predĺžte trvanie dvojčaťa.

   • Predvolená hodnota FPS je 24, takže skúste túto hodnotu znížiť na 12. Na paneli vlastností zmeňte hodnotu FPS. Pri FPS \u003d 12 sa však animácia nemusí hrať dostatočne plynulo.
   • Ak chcete zmeniť trvanie doplnenia, vyberte vrstvu obsahujúcu doplnenie a pomocou posúvača zmeňte trvanie doplnenia. Ak chcete zdvojnásobiť trvanie dvojčaťa, posuňte posúvač o 48 snímok. Nezabudnite vložiť pozadie do prázdnych rámov, aby pozadie nezmizlo uprostred animácie. Ak to chcete urobiť, vyberte vrstvu pozadia, kliknite na posledný snímok animácie (na časovej osi) a potom stlačte kláves F5.

3. časť

1. Nahrávajte alebo sťahujte zvukové efekty a hudbu. Do svojej animácie môžete pridať zvukové efekty, aby bola efektívnejšia. Vďaka hudbe bude animácia vzrušujúcejšia a z dobrých animácií sa môžu stať vynikajúce. Flash podporuje rôzne formáty zvukové súbory vrátane AAC, MP3, WAV a AU. Vyberte formát, ktorý zaručuje vysoká kvalita zvuk pri minimálnej veľkosti súboru.

   • Formát MP3 zaručuje vysoko kvalitný zvuk s najmenšou veľkosťou súboru. Súbory WAV sú veľké.

2. Importujte zvukové súbory do knižnice, aby ste mohli rýchlo pridávať zvuky a hudbu k animáciám. Kliknite na „Súbor“ - „Importovať“ - „Importovať do knižnice“. Vyhľadajte zvukový súbor v počítači. Skontrolujte, či má zvukový súbor ľahko zapamätateľný názov, aby ste ho mohli rýchlo nájsť.

   Vytvorte novú vrstvu pre každý zvukový súbor. Toto je voliteľné a do existujúcich vrstiev môžete pridať zvuk, ale vložením zvukového súboru do samostatnej vrstvy získate lepšiu kontrolu nad zvukovou stopou animácie.

   Vytvorte kľúčovú snímku, kde sa začne prehrávať zvuk. Na zvukovej vrstve vyberte animačný rámec, od ktorého sa začne zvuk prehrávať. Stlačením klávesu F7 vložte prázdny kľúčový snímok. Napríklad ak chcete vložiť zvukový súbor, ktorý sa bude prehrávať počas celej animácie, vyberte prvý rámček vo vrstve zvukového súboru. Ak pridávate hlas postavy, vyberte rámček, kde postava začne rozprávať.

Zamysleli ste sa niekedy nad tým, čo sa skrýva za nádhernou animáciou bannerov na internete? Alebo nové karikatúry vytvorené pomocou počítačová technológia? Najčastejšie sú založené na „mase“, lepšie povedané, takto sa prekladá názov technológie Flash z angličtiny. Dnes si povieme niečo o flash animácii pre web:

Flash technológia

Multimediálny rámec vyvinula spoločnosť Macromedia. Ale po jeho akvizícii (fúzii) boli všetky práva na túto technológiu prevedené na nového vlastníka - spoločnosť Adobe Systems.

Región moderné využitie Adobe Flash:

• Tvorba webových aplikácií je celkom novým smerom. Zahŕňa úplné alebo čiastočné použitie programu Flash na vytváranie webových stránok. V čiastočnej aplikácii pomocou tejto technológie sa vytvárajú jednotlivé prvky návrhu: rôzne interaktívne ponuky, animované tlačidlá atď.

V porovnaní s konvenčnými zdrojmi založenými na html majú flashové stránky niektoré zvláštnosti, ktoré obmedzujú ich použitie. Patria sem vysoké náklady na vývoj, náročné serverové zdroje, dlho súbory na stiahnutie na pomalé pripojenie na internet a niektoré ďalšie aspekty:

• Implementácia multimediálnych schopností - na počúvanie zvuku a prehrávanie videa na stránkach sa často používajú prehrávače médií založené na Flashi. Ich vývoj zahŕňa použitie jedného zo skriptovacích jazykov (zvyčajne JavaScript):

• V online reklame sa technológia najčastejšie používa na vytváranie animovaných bannerov. Implikujú nielen hranie multimediálnych reklám, ale aj určitý druh interakcie s používateľom na základe hry.

Základy a nástroje vývoja Flash

Na vytváranie animácií vo formáte Flash sa najčastejšie používa tradičná sada nástrojov Adobe:

• Adobe Flash Professional - program na vytváranie interaktívnych animácií (animátor);
• Adobe Flash Builder - prostredie na vytváranie rozhrania webových aplikácií;
• Adobe Flash Player - prehrávač integrovaný do prehliadača na prehrávanie Flash.

Okrem neho môže tento typ multimediálneho obsahu prehrávať aj množstvo aplikácií tretích strán. Najobľúbenejšie z nich sú Gnash, QuickTime a niekoľko ďalších:

Táto technológia umožňuje zobraziť akýkoľvek typ grafiky ( raster, vektor, 3D). A tiež podporuje streamovanie zvukových a obrazových údajov. Špeciálne pre mobilné zariadenia bola vyvinutá odľahčená verzia aplikácie Flash Lite.

Hlavným štandardom pre súbory Flash je prípona SWF. Skratka znamená Small Web Format. Video zaznamenané vo formáte Flash má prípony súborov FLV, F4V.

Vektorová grafika je jadrom vývoja interaktívnej animácie vo formáte Flash. Vďaka tomu bolo možné implementovať podporu multimediálnej platformy a nezávislosť kvality animácie od rozlíšenia obrazovky.

Veľkosť súboru aplikácie Flash je rovnaká pre všetkých používateľov bez ohľadu na špecifikáciu obrazovky (rozlíšenie).

Flashová interaktívna animácia je založená na premene (vektorový typ), pri ktorej medzi kľúčovými snímkami dochádza k pomalému toku. Na prehrávanie údajov sa používa prehrávač Flash Player, ktorého práca je v mnohom podobná práci virtuálny prístroj JavaScript. Softvérová súčasť technológie sa implementuje pomocou jazyka ActionScript.

Medzi nevýhody technológie patria nasledujúce body:

• Veľké zaťaženie cPU klientsky stroj. Je to spôsobené nízkou účinnosťou flash virtuálneho stroja, ktorý je zabudovaný s prehrávačom do prehliadača používateľa;
• Vysoká pravdepodobnosť chýb - Flashovú animáciu je možné hrať s vysokou pravdepodobnosťou chýb. Poruchy v prehrávaní Flash navyše negatívne ovplyvňujú fungovanie všetkého klientská aplikácia (prehliadač). Je to spôsobené nedostatočnou kontrolou tolerancie voči chybám programového kódu pri vytváraní aplikácií typu Flash;
• Zlyhanie indexovania - Celý textový obsah zobrazený v obsahu Flash sa nezúčastňuje procesu indexovania. Toto obmedzenie je obzvlášť problematické pre zdroje, ktoré sú založené na tejto technológii.

Prehľad softvéru na vytváranie súborov Flash tretích strán

Sothink SWF Quicker bol braný ako prototyp aplikácie, v ktorej si ukážeme základy tvorby Flash. Podľa mnohých odborníkov je program najrozumiteľnejší a najjednoduchšie sa naučiť.

Okrem vytvárania a úprav editor „flash“ „vie, ako“ pracovať so všetkými ostatnými typmi webovej animácie (GIF, HTML a ďalšie štandardy):

Po inštalácii prejdite na priateľské rozhranie programu. Po putovaní všetkými zákutiami prepínača jazykov rozhrania sme ho, bohužiaľ, nenašli.

Aby sme pochopili, ako vytvoriť Flash animáciu v tejto aplikácii, použijeme vstavané šablóny. Okamžite po spustení programu sa zobrazí dialógové okno „Nový zo šablóny“. Okrem toho sa dá vyvolať prostredníctvom položky hlavnej ponuky „Súbor“. Z navrhovaných možností sme sa rozhodli vytvoriť banner:

V ďalšom okne sprievodcu z rozbaľovacieho zoznamu musíte vybrať šablónu, podľa ktorej sa vytvorí animácia. Pod ním je malý rámček, v ktorom sa prehráva vybraná šablóna:

V ďalších krokoch je potrebné nastaviť rozmery bannera a zadať 5 fráz textu, ktoré sa budú hrať v animácii. Ďalej musíte určiť adresu zdroja, na ktorý bude používateľ vedený kliknutím na banner:

Po zostavení projektu a zatvorení okna sprievodcu si výsledné video môžete pozrieť vo vstavanom prehrávači. Kliknite na zelenú šípku v hornej časti:

Po zatvorení prehrávača sa pozrime bližšie na rozhranie aplikácie. Upozorňujeme, že pozostáva z dvoch hlavných okien: horné je určené na úpravu časového intervalu videa a dolné je bežné. grafický editor... Každý z prvkov je umiestnený na samostatnej vrstve, ktorú je možné upravovať pomocou štandardných nástrojov umiestnených na bočnom paneli.

Otvorte Flash MX.
Pred nami je naša pracovná scéna, ponuka, panel nástrojov atď. V spodnej časti je okno, ako je toto: Vlastnosti. Pre vašu karikatúru existujú základné nastavenia (obr. 1).
Zaujíma nás tam RÝCHLOSŤ RÁMU - rýchlosť rolovania vašej karikatúry. V opačnom prípade 12 snímok za sekundu znamená, že sa za jednu sekundu prehrá 12 snímok (snímok) vašej karikatúry. Táto rýchlosť je štandardná a v zásade to, čo potrebujete. Ak potrebujete spomaliť animáciu - zmenšiť, musíte to urobiť rýchlejšie - zväčšiť tento údaj.

Prejdime teraz k samotnej animácii.
V programe Flash existujú dva hlavné spôsoby: doplnenie tvarov a doplnenie pohybu.
Uvažujme o prvom. Tvar - (angl.) Tvar. Už ste pochopili, že tu pôjde o zmenu formulára. Vytvorte tvar ako modrý štvorec. Hore sa na časovej osi na prvom ráme objaví kruh na sivom pozadí - vytvorili sme kľúčový snímok. Teraz vytvoríme rovnaký rám na ráme 10. To je možné vykonať dvoma spôsobmi: posuňte myš nad rám 10, kliknite (rám sa zmení na modrý) a v ponuke vyberte: Vložiť-\u003e kľúčový snímok; inak môžete: ukázať na rám 10, kliknúť a stlačiť kláves F6. V časovej línii je všetkých 10 rámcov sivých. Červená čiara ukazuje, na ktorom ráme sme. (obr. 2)

Prejdite na rámček 10. Vyberte náš štvorec (myšou alebo stlačením ctrl + A - táto kombinácia klávesov vyberie všetko, čo je v pracovnom priestore). Posunieme náš štvorec niekde nabok (uistite sa, že ste v 10. ráme!) A zmeňte farbu napríklad na žltú. Teraz sa vráťte k prvému rámcu. V riadku Vlastnosti je výber Tween, kde je predvolená hodnota „žiadna“. Teda žiadna animácia. Zmeňte to na „tvar“. V časovej línii sa naše rámy stávajú svetlozelenými so šípkou. Keď je všetko hotové, stlačte „Enter“. KRÁSA! Štvorec sa pohybuje a dokonca mení farbu! Znova prejdite na rám 10. Vyberte všetko (ctrl + A). A stlačte kláves Delete (tj. Odstrániť). Namiesto štvorca nakreslite nejaký druh červeného kruhu. Znova prejdite na prvý rámček a stlačte kláves Enter. Štvorec je teraz kruhový a červený. Už ste pochopili, že nemusíte kresliť každý rám - blesk to urobí za vás! Aj keď, ak potrebujete špeciálnu presnosť, alebo tak niečo, môžete kresliť. potom bude súbor narastať. Ak potrebujete plynulejší prechod zo štvorca na ten istý, napríklad na kruh, urobte tento postup nie pre 10, ale povedzme 25 rámcov. Ak potrebujete zložitejšie pohyby a pohyby, existujú na to masky vrstiev, ale o tých si poviem niekedy nabudúce. Obrázok 3 zobrazuje, ako vyzerá vaša animácia na časovej osi. Teraz môžete nakresliť jednoduchý film na zmenu tvaru!

Teraz sa pozrime na druhý spôsob nastavenia animácie: doplnenie pohybu (preklad niečoho ako: vytvorenie medzitímovej animácie pohybu). Tu to bude trochu komplikovanejšie. Znova otvorte nový súbor Flash.
Aký je rozdiel medzi tvarom a pohybom? Skutočnosť, že v druhom prípade nebudeme pracovať na formách, ale na hotových objektoch, t.j. symboly. Symbol je takpovediac najjednoduchšia jednotka animácie vo Flashi. Toto je bežnejší spôsob maľovania. Znova opakujeme všetko - v prvom ráme nakreslíme malý modrý štvorec. vyberte ju a stlačte kláves F8 (alebo vykonajte postupne: Vložiť-\u003e previesť na symbol). Pred nami sa objaví dialógové okno (obr. 4).

Čo je to? V programe Flash existujú tri typy symbolov: klip moovie je akousi dodatočnou animáciou vo vnútri symbolu. to znamená, že tento symbol obsahuje nejaký druh animácie atď. má presne rovnakú časovú líniu ako hlavné pódium; tlačidlo (tlačidlo) - prvok, ktorý reaguje na stlačenie, prítomnosť myši nad ním atď. Stručne povedané, tlačidlo je; a tretí, najstatickejší prvok, je grafický. Teda iba grafiku, akýsi obraz. Budeme pracovať s tým druhým. Nejako to nazveme, klikneme na „OK“. Na štvorci sa objaví kruh - inak stred nášho symbolu (stred je možné nastaviť aj v tomto dialógovom okne). Všetky naše symboly sú vložené do knižnice. Odtiaľ ich môžeme upravovať, podľa potreby vkladať a kde nie, mazať, pridávať. Ak sa chcete pozrieť do svojej knižnice, stlačte kláves F11 alebo postupujte podľa týchto pokynov: Okno -\u003e Knižnica. V 10. snímke vytvorte kľúčový snímok (F6). Teraz môžeme svoje námestie niekam posunúť. Potom ho urobíme neviditeľným: preto ho vyberieme v 10. rámčeku. Na paneli vlastností v časti farieb nastavte alfa (priehľadnosť). Nastavíme mu atribút v percentách: 0. Vráťme sa k 1. rámcu. Vykonajme všetky rovnaké akcie ako pri dopĺňaní tvarov, ale namiesto tvaru označíme pohyb. Rámy na časovej osi sa sfarbia do fialova a bude cez ne prechádzať šípka, ako je to znázornené na obr. 5. Stlačte kláves Enter.

Dostaneme efekt „štvorcové mušky do prázdna“. Blahoželáme! Viete, ako sa vo Flashi robí primitívna grafika!
Ďalšou dôležitou vlastnosťou je, že pre každú animáciu musíme mať samostatnú vrstvu (Layer). Ak potrebujete pridať ďalšiu vrstvu, použite príkaz: Vložiť-\u003e Vrstva.
A len trochu k časovej osi.
Ako ste už pochopili - svetlozelená so šípkou - doplnenie tvaru, fialová so šípkou - doplnenie pohybu. Svetlozelená alebo fialová s čiarami - zadali ste animáciu, ale túto animáciu nie je možné vytvoriť - urobili ste niečo zlé. Šedá farba - všetky rámy s týmto tieňovaním sú presnou kópiou predchádzajúceho kľúčového snímky (kľúčový snímok). Biela čiara znamená, že v týchto rámčekoch nie je nič. Čierny kruh je rámik na kľúče. Biely kruh je prázdna kľúčová snímka. No to je všetko. (obr. 6)

To je zatiaľ všetko. To je minimum, s ktorým môžete pracovať. Ďalej sa naučte pridávať zvuk, ovládať zvuk a pokračujte a napíšte Masyanya. :) Sľubujem, že čoskoro určite napíšem ďalšiu lekciu - o pokročilej animácii vo flashi. O tom, ako vytvoriť „kvapku peria“, o maskách, o kontrole nad zmenou tvarovania v tvare tweening, napr. Potom napíšem niečo iné.
Ak to niekomu pomohlo - povedzte vďaka celej webovej stránke FLASHER.RU. Je to najlepšie, čo na webe existuje.
Bol som rád a rád som jedol! Ak máte otázky, navštívte fórum alebo: [chránené e-mailom]
c) od St. Dimitryi aka Nirva do Flasher.ru
http://flasher.ru