Autor artykułu: mgr Jerzy Wałaszek, wersja1.0
©2010 mgr
Jerzy Wałaszek
I LO w Tarnowie
|
|
Autor artykułu: mgr Jerzy Wałaszek, wersja1.0 |
©2010 mgr
Jerzy Wałaszek
|
Symbole wyświetlane na scenie mogą same być filmami. Filmy te wyświetlają się niezależnie od akcji rozgrywanej na scenie. Dzięki temu można uzyskiwać bardzo ciekawe efekty animacyjne.
Tym razem stworzymy aktora, który będzie skaczącą piłeczką.
1. Uruchom Macromedia Flash i wybierz nowy dokument Flash.
2. Wymiary sceny ustal na 400 × 300 pikseli, 30 klatek na sekundę.
3. Z przybornika wybierz Oval Tool (narzędzie owalu):
Na panelu Properties (własności) wybierz pożądany kolor linii. Jako wypełnienie wybierz wypełnienie tonalne, które znajduje się u dołu po lewej stronie okienka wyboru koloru:
Tak przygotowanym narzędziem owalu narysuj u góry sceny niezbyt dużą piłkę. W czasie rysowania możesz naciskać klawisz SHIFT - wtedy będzie rysowane koło, nie elipsa.
4. Wybierz z przybornika Selection Tool (narzędzie wyboru - strzałka):
Zaznacz markizą piłeczkę - obwiedź ją prostokątem markizy z wciśniętym lewym przyciskiem myszki. Wnętrze piłeczki oraz jej obrys powinno zostać wykropkowane - w ten sposób Flash informuje o zaznaczeniu grafiki.
Naciśnij klawisz F8 - pojawi się okienko zamiany grafiki w symbol. W okienku wpisz nazwę symbolu - gr_pilka i wybierz rodzaj symbolu - Graphic. Symbol powinien pojawić się w prawym panelu Library (biblioteka). Na scenie nasza piłka zmieniła nieco wygląd:
Wokół wybranego symbolu Flash rysuje kwadrat.
6. Jeszcze raz naciśnij klawisz F8. Zmieniamy nasz symbol w nowy symbol. Tym razem wpisz nazwę mv_pilka i wybierz typ Movie clip (klip filmowy):
Zatwierdź okienko, klikając przycisk. OK. W panelu Library (biblioteka) pojawią się dwa symbole:
Możesz się teraz zastanawiać, co się właściwie stało. Otóż masz dwa symbole:
gr_pilka jest symbolem zawierającym grafikę - naszą piłeczkę
mv_pilka jest symbolem zawierającym symbol graficzny gr_pilka.
Symbol typu Movie clip (klip filmowy) posiada swoją własną linię czasu, dzięki której możemy go wewnętrznie animować.
7. Kliknij dwukrotnie kursorem myszki w symbol mv_pilka na scenie. Na pasku tytułowym linii czasu pojawi się nazwa naszego symbolu:
Oznacza to, iż widoczna u góry linia czasu nie dotyczy sceny, lecz naszego klipu - mv_pilka. Będziemy go uczyć jego roli.
8. Kliknij dwukrotnie w nazwę warstwy Layer 1 na linii czasu i zmień tę nazwę na pilka:
9. Kliknij myszką klatkę nr 30 i naciśnij klawisz F6 - dodanie nowej klatki kluczowej. Następnie wybierz klatkę nr 60 i ponownie wciśnij F6:
Klatki kluczowe rysowane są z kropeczką, jeśli coś zawierają i z kółeczkiem, jeśli są puste. W tym przypadku na linii czasu naszego symbolu mv_pilka mamy trzy klatki kluczowe: 1, 30 i 60. W tej chwili wszystkie trzy zawierają to samo - symbol gr_pilka u góry sceny. Wybierz klatkę środkową nr 30. Następnie z wciśniętym klawiszem SHIFT (zapobiegnie to ruchom na boki) przeciągnij piłkę z góry sceny na dół.
Po tej operacji mamy:
klatka nr 1: piłka u góry
klatka nr 30: piłka u dołu
klatka nr 60: piłka u góry w takim samym położeniu jak na klatce nr 1.
10. Dodajemy Motion Tween (automatyczną animację) pomiędzy klatkami 1-30 oraz 30-60. W tym celu przeciągnij z wciśniętym lewym klawiszem myszki po klatkach pośrednich:
wskaż zaznaczenie, kliknij je prawym przyciskiem myszki i wybierz z menu opcję Create Motion Tween. Na pustych klatkach pojawią się strzałki animacji automatycznej. Oznaczają one przejście od danej klatki kluczowej do następnej z kadrami pośrednimi, które już dorysowuje Flash.
Możesz przetestować animację, wciskając CTRL+ENTER. Piłeczka powinna już skakać, lecz jej ruch nie jest najlepszy, ponieważ jest jednostajny. Musimy zmodyfikować parametry animacji tween, aby ruch przypominał rzeczywisty ruch piłki. W tym celu kliknij myszką lewą strzałkę pomiędzy klatkami 1-30. W panelu Properties (własności) pojawią się wtedy własności tej animacji. Zmień własność Ease (łatwość ruchu) na -100. W prawej animacji tween ustaw w podobny sposób ten parametr na 100. Przeglądnij teraz animację.
11. Dodamy teraz nową warstwę animacji do linii czasu. W tym celu kliknij pierwszą z ikon (Insert Leyer - wstaw warstwę), które są umieszczone po lewej stronie u dołu linii czasu:
Nową warstwę nazwij cień (patrz: punkt 8) i przeciągnij myszką pod warstwę piłka:
Warstwa cień posiada tylko jedną klatkę kluczową nr 1. Pozostałe klatki są klatkami zwykłymi. Klatka kluczowa nr 1 jest pusta - narysowane jest na niej małe, puste w środku kółeczko. Na tej warstwie zrobimy animację cienia piłki.
12. Kliknij myszką w klatkę nr 1 na warstwie cień. Spowoduje to wybranie tej klatki do edycji:
Przeciągnij z biblioteki symbol gr_pilka i umieść go w miejscu pokazanym poniżej:
Na panelu Properties dla symbolu gr_pilka wybierz opcję Color - Tint. Następnie wybierz kolor szary i krycie 100%. Powinieneś otrzymać następujący wynik:
Z przybornika wybierz Free Transform Tool (narzędzie swobodnej transformacji):
Następnie spłaszcz cień:
13. Na linii czasu w warstwie cień dodaj teraz dwie klatki kluczowe - 30 i 60 (kliknij klatkę myszką i wciśnij F6). Przejdź do klatki nr 30 i przesuń cień pod piłkę:
Pomiędzy klatkami 1-30 i 30-60 dodaj animację tween. Następnie dla lewej animacji tween ustaw parametr Ease na -100, dla prawej na 100%. Przeglądnij animację wciskając CTRL + ENTER. Nasz aktor jest gotowy:
Wróć do sceny klikając na linii czasu niebieską strzałkę w lewo (możesz również kliknąć nazwę Scene 1). Linia czasu klipu zniknie i pojawi się linia czasu sceny, na której wciąż jest tylko jedna klatka kluczowa z naszym aktorem - mc_pilka.
14. Aktora możesz przemieszczać i transformować na scenie jak każdy inny symbol. Wykorzystując go, zaprojektuj poniższe animacje (w ostatniej animacji wykorzystaj cztery warstwy w linii czasu - na każdej z warstw jest animowana jedna piłka)::
 | I Liceum Ogólnokształcące |
Pytania proszę przesyłać na adres email: i-lo@eduinf.waw.pl
W artykułach serwisu są używane cookies. Jeśli nie chcesz ich otrzymywać,
zablokuj je w swojej przeglądarce.
Informacje dodatkowe