Animacja

autor: Łukasz Struk

e-mail: iti@klub.chip.pl

Do ściągnięcia: [Animacja]
Plik źródłowy: [anim.fla]


Jak zrobić animację?

Jak już w lekcji dotyczącej animacji napisałem, to istnieją dwie podstawowe metody animacji, animacja typu Motion Tween i Shape tween. W tej animacji właśnie one zostały wykorzystane.

 Klatki kluczowe

  1. Na obrazku klatki zaznaczone kolorem zielonym to animacja typu Motion Shape, czyli Morphing.
  2. Na początku tworzymy dwie warstwy. Nazwijmy je "warstwa górna" i "warstwa dolna".
  3. W warstwie dolnej tworzymy 50 klatek lub więcej, w zależności od ilości wyświetlanych klatek na sekundę (w tym przypadku jest 12).
  4. W morphingu nie można stosować symboli, a więc w pierwszej klatce dolnej warstwy tworzymy klatkę kluczową i umieszczamy w niej  koło wypełnione gradientem. Następnie w 9 klatce wstawiamy klatkę kluczową i umieszczamy w niej koło wypełnione jednolitym kolorem. Następnie tworzymy animację Motion Shape klikając dwukrotnie na pierwszej klatce i z zakładki Zakładka Tweening wybieramy Tweening: Shape - uzyskujemy przejście koła z gradiantem w koło z jednolitym kolorem.
  5. W klatce 10 wstawiamy koło z klatki 9 i tworzymy z niego symbol (klawisz F8). Potem w klatce 19 wstawiamy symbol z klatki 10 i powiększamy go o około 400%. Klikamy dwukrotnie na powiększonym kole i z zakładki Zakładka Color Effect wybieramy Color Effect Alpha (przezroczystość), poczym Alpha ustawiamy na 0 (czyt. zero). W klatce 10  wstawiamy animację Motion Tween - w ten sposób uzyskamy płynne powiększenie i zanik koła. 
  6. W klatce 20 wstawiamy symbol z klatki 19, ale musimy go podzielić z menu Modify opcja Break Apart. Wypełniamy powiększone koło tym samym kolorem, jakim jest obecnie wypełnione, ale z Alpha ustawionym na zero. Klikamy na narzędzie Paint Bucket, potem na ikonę Kolor wypełnienia i Atrybuty koloru, z zakładki Zakładka Solid wybieramy Alpha=0. Do klatki 31 wstawiamy tekst i także go dzielimy z menu Modify opcja  Break Apart. W klatce 30 ustawiamy animację Motion Shape (Morphing) - uzyskujemy przejście z dużego koła w tekst.
  7. Do klatek od 32 do 46 włącznie wstawiamy tenże tekst zamieniając go na symbol (klawisz F8). W klatce 47 wstawiamy klatkę kluczową z tekstem (symbol), w klatce 50 też wstawiamy klatkę kluczową z tym samym symbolem, tylko teraz ustawiamy przezroczystość Alpha na 0. W klatce 46 ustawiamy animacje Motion Tween.
  8. Teraz przechodzimy do górnej warstwy i w klatce 36 wstawiamy klatkę kluczową z symbolem "tekst", następnie w klatce 46 także wstawiamy symbol z tekstem i powiększamy go kilkakrotnie zmieniając również jego przezroczystość na 0. Do klatki 36 wstawiamy animację Motion Tween.
  9. Jeżeli wszystko zostało dobrze zrobione, efekt końcowy powinien być podobny do tego na górze.

 Początek strony