Animace, složitější scény

Přehled vlastností symbolů, které lze animovat, praktické vyzkoušení. Symboly typu Button (tlačítka). Základy ovládání klipů pomocí ActionScriptu.

Cílem hodiny je vytvoření jednoduché prezentace – titulní strana a dvě animace, vznik kationtu a aniontu. Součástí prezentace jsou dvě tlačítka, kterými se spustí žádaná animace.

Animované objekty: atom (kulička), elektron (kulička).

ukázka výsledné scény

Popis scény

Animace se skládá ze tří částí: titulní strana, animace vzniku kationtu, animace vzniku aniontu. Vznik iontů je vyznačen změnou velikosti a barvy atomu, náboj je znázorněn znaménky „+“ a „-“. Při ionizaci elektron vylétá z atomu, resp. přilétá k atomu.

titulni stranka animace

Tvorba scény:

  1. vytvořte na časové ose tři vrstvy, pojmenujte je (odspodu) pozadi, elektron, atom. Všechny vrstvy nastavte tak, aby obsahovaly 50 snímků.

  2. do vrstvy atom nakreslete zhruba uprostřed větší tmavě modrý kruh, ten převeďte na symbol typu Graphic.

  3. do vrstvy elektron nakreslete malý světlemodrý kruh, převeďte na symbol typu MovieClip, umístěte ho tak, aby se nacházel celý pod kruhem představující atom

  4. do vrstvy pozadi nakreslete dva stejné obdélníky, do nich vložte políčka se statickým textem „vznik aniontu“ a „vznik kationtu“. Oba obdélníky s textem budou představovat tlačítka pro spuštění příslušných animací.

  5. vyberte jeden obdélník a příslušným textem a převeďte ho na symbol typu Button, pojmenujte ho kation. Totéž proveďte s druhým obdélníkem, ten pojmenujte anion.

  6. ve všech vrstvách vytvořte vložte do druhého snímku klíčový snímek (F6)

  7. ve všech vrstvách vymažte v prvním snímku veškerý obsah – zde bude obsah titulní strany ve vrstvě pozadi

  8. vytvořte titulní stranu v prvním snímku vrstvy pozadi podle následujícího vzoru:

  9. do vrstev elektron a atom vytvořte v rozsahu 2—50 Motion Tween

  10. do vrstvy elektron a atom vložte klíčové snímky na pozice 25, 26 a 50, do vrstvy atom na pozice 12, 25, 26, 37, 50

  11. ve vrstvě atom zrušte v rozsazích 2—12 a 26—37 Motion Tween (zde se atom měnit nebude)

  12. elektron nastavte ve 2. snímku tak, aby se nacházel ve středu atomu a ve snímku 25 tak, aby se nacházel vně atomu zhruba ve vzdálenosti odpovídající dvojnásobku poloměru atomu od jeho středu (animace vylétnutí elektronu z atomu).

  13. atom v 25. snímku přiměřeně zmenšete, změňte jeho barvu na zelenou

  14. nyní animace vzniku aniontu: v 26. snímku umístěte elektron do vzdálenosti stejné jako měl vylétnuvší elektron v předchozí animaci, v 50. snímku ho umístěte do středu atomu

  15. atom v 50. snímku lehce zvětšete, změňte jeho barvu na červenou.. Tím je základ prezentace hotov

  16. klikněte na časové ose do vrstvy atom na 1. snímek a v okně Actions napište: stop();

  17. tutéž akci vložte i do klíčových snímků na pozicích 25 a 50

  18. vyberte tlačítko s nápisem „vznik kationtu“ a do okna Actions vložte kód: on (press) {gotoAndPlay(2);}

  19. stejným způsobem přiřaďte druhému tlačítku akci: on (press) {gotoAndPlay(26);}. Tím se zajistí, aby při stisku příslušných tlačítek ¨(on (press)) se spustila příslušná část animace.

  20. stiskněte CTRL + Enter a vyzkoušejte funkčnost animace, případně opravte chyby ve skriptech akcí tlačítek a časové osy

Rozšiřující témata:

vložení znamének u elektronu a iontu, postupné objevování se znaménka iontu.