Macromedia Flash - tworzenie prostych animacji

Uruchamiamy aplikację Macromedia Flash (do ćwiczeń możemy pobrać wersję 30-dniową z Internetu). Po starcie aplikacji pojawia się ekran, na którym wybieramy rodzaj tworzonego projektu.

 

obrazek

 

W pierwszej kolumnie możemy otworzyć ostatnio tworzony projekt. W środkowej kolumnie wybieramy rodzaj projektu, który chcemy utworzyć. W trzeciej kolumnie możemy wybrać jeden z przygotowanych przez firmę Macromedia szablonów. Na potrzeby dzisiejszej lekcji wybieramy ze środkowej kolumny opcję Flash Document. Ekran startowy zniknie i pojawi się ekran projektowy:

 

obrazek

 

Ekran podzielony jest na kilka obszarów. Po lewej stronie mamy przybornik (ang. Tools) z narzędziami rysunkowymi i edycyjnymi. W głównym oknie znajduje się scena, na której będzie wykonywana animacja - to ten biały prostokąt otoczony szarym polem. Obiekty umieszczone w białym prostokącie będą widoczne w oknie animacji. Jeśli obiekt znajdzie się poza sceną, to przestanie być widoczny, chociaż może dalej być animowany.

Ponad sceną jest umieszczona tzw. linia czasu (ang. timeline).  Znajdują się tam warstwy (ang. layer) z klatkami (ang. frames), które są wyświetlane w czasie odtwarzania animacji. Klatki dzielimy na dwa rodzaje:

Pod sceną mamy dwa panele:

Po prawej stronie mamy tzw. bibliotekę (ang. library), w której będziemy gromadzili różne elementy występujące w naszej animacji.

 

Ćwiczenie nr 1 - prosta animacja poklatkowa

Stworzymy prostą animację pojawiającej się twarzy.

1. Z przybornika wybierz Selection Tool (Narzędzie wyboru) - zwykle na początku pracy jest wybrane, ale gdyby nie było...

obrazek

 

2. Kliknij strzałką w scenę. Spowoduje to jej wybór.

 

3. Otwórz panel Properties - kliknij w strzałkę przed nazwą panelu, a otworzy się:

 

obrazek

 

Są to własności sceny - dlatego właśnie musieliśmy kliknąć w scenę, aby przełączyć ten panel na własności sceny. Tutaj wybieramy wielkość sceny. Kliknij przycisk Size (Rozmiar). Pojawi się okno dialogowe Document Properties (Własności Dokumentu):

 

obrazek

 

W okienku wpisujemy wymiary sceny: 400 do width (szerokość) i 400 do height (wysokość) oraz liczbę klatek na sekundę 6 do fps (ang. frames per second). Ten ostatni parametr określa jak szybko będą w naszej animacji wyświetlane klatki. Po wprowadzeniu tych danych zamykamy okienko dialogowe, klikając w przycisk OK. Scena powinna się odpowiednio dostosować.

 

4. Z przybornika wybieramy Brush Tool (Pędzel).

obrazek

 

Na dole przybornika pojawią się opcje dla wybranego narzędzia - zmieńmy rozmiar pędzla na niezbyt duży. W panelu własności możemy wybrać kolor rysowania pędzelka. Kolor wybieramy z okienka dialogowego, które pojawi się po kliknięciu na ikonkę koloru wypełnienia:

 

obrazek

 

5. Na scenie rysujemy odręcznie zarys twarzy - to będzie pierwsza klatka naszej animacji:

obrazek

6. Naciskamy klawisz F6. Spowoduje to wstawienie nowej klatki kluczowej do naszej animacji. Nowa klatka kluczowa automatycznie skopiuje zawartość klatki poprzedzającej.

 

obrazek

 

Zwróć uwagę na czerwoną, pionową kreseczkę kreseczkę. To jest kursor linii czasu. Pokazuje on, która z klatek jest bieżąco wyświetlana na scenie. Teraz powinna to być klatka nr 2.

 

7. Do naszej mordki dorysowujemy oczy - mogą być w innym kolorze (uwaga - po utworzeniu nowej klatki kluczowej skopiowana zawartość jest zaznaczona i aby usunąć to zaznaczenie naciśnij klawisz ESC, wtedy będziesz mógł wybrać inny kolor pędzelka bez zmieniania koloru treści klatki):

obrazek

8. Powtarzamy dwa ostatnie kroki, dorysowując na nowych klatkach kluczowych kolejne elementy twarzy. To już pozostawiam inwencji twórczej ucznia. Klatek kluczowych powinno być przynajmniej dwadzieścia (można dorysowywać po jednym włosku).

 

9. Dodajemy jeszcze jedną klatkę kluczową w odstępie 10 klatek za ostatnią w animacji w tym celu klikamy na linii czasu klatkę i naciskamy F6.

 

Animacja jest gotowa - zapisujemy projekt na dysku w przygotowanym dla niego katalogu.

 

Animację możemy przeglądać na kilka sposobów:

A tak wygląda w działaniu nasza animacja w działaniu:

 

 


 

Ćwiczenie nr 2 - wykorzystanie animacji tween do ruchu

Macromedia Flash posiada narzędzia, które ułatwiają tworzenie złożonych animacji obiektów na scenie. Jednym z takich narzędzi jest animacja automatyczna Tween. To ćwiczenie pokaże nam sposób tworzenia i używania tej animacji.

 

1. Tworzymy nowy dokument Flash.

 

2. Ustawiamy rozmiary sceny na 400 × 300, 30 fps.

 

3. Z przybornika wybieramy Rectangle Tool (Narzędzie Prostokątów)

obrazek

 

Na panelu własności prostokąta ustawiamy kolor linii, kolor wypełnienia, grubość linii:

 

obrazek

 

4. Na scenie rysujemy niezbyt duży prostokąt.

 

obrazek

 

5. Zmieniamy narzędzie na strzałkę - Selection Tool

obrazek

 

6. Otaczamy markizą nasz prostokąt - powinien on zostać pokryty siatką drobnych punktów - w ten sposób Macromedia Flash informuje o zaznaczeniu grafiki.

 

obrazek

 

7. Aby można było nasz obiekt animować za pomocą animacji Tween, musimy przerobić grafikę na symbol. W tym celu naciskamy klawisz F8. Na ekranie pojawi się okienko dialogowe tworzenia symbolu z zaznaczonej grafiki:

 

obrazek

 

Symbole mogą być trzech rodzajów:

Registration (Rejestracja) określa tzw. punkt rejestracji, czyli punkt, wg którego będą określane współrzędne naszego symbolu.

 

W okienku wpisujemy dane zgodnie z powyższym obrazkiem:

 

Nazwa - prostokąt
Typ - Graphic
Rejestracja - lewy górny narożnik

 

Po kliknięciu OK nasz prostokąt staje się symbolem i pojawia się w bibliotece po prawej stronie sceny.

 

obrazek

 

8. Umieszczamy nasz symbol poza sceną po lewej stronie u góry

 

obrazek

 

9. Na linii czasu klikamy klatkę 40 i naciskamy klawisz F6. W klatce nr 40 zostaje wstawiona klatka kluczowa z zawartością klatki nr 1:

 

obrazek

 

10. Mając wybraną klatkę nr 40, przesuwamy nasz prostokąt poza prawą krawędź sceny, na dół:

 

obrazek

 

11. Klikamy prawym klawiszem myszki w klatki pośrednie pomiędzy klatką kluczową 1 i 40. Z menu podręcznego wybieramy opcję Create Motion Tween - Utwórz Animację Ruchu. Na klatkach pośrednich zostaje narysowana strzałka, która symbolizuje przejście od klatki nr 1 do klatki nr 2. Fazy pośrednie tego przejścia tworzy automatycznie Macromedia Flash:

 

obrazek

 

12. Klikamy w dowolną z klatek pośrednich. Na panelu własności pojawią się wtedy własności animacji Tween.

 

obrazek

 

We własnościach Tween zmieniamy parametr Ease (Łatwość) na -100. Parametr ten kontroluje przyspieszenie ruchu. -100 oznacza, iż symbol rozpędza się od szybkości wolnej do coraz szybszej w miarę trwania animacji.

Parametr Rotate (Obracaj) pozwala obracać symbolem - ustawiamy CW - (ang. Clock Wise - zgodnie ze wskazówkami zegara). Obok, w okienku times (razy), możemy podać liczbę obrotów, które ma wykonać symbol w trakcie animacji. Wystarczy 1, ale możesz eksperymentować.

 

13. Animacja gotowa. Możesz ją teraz przeglądnąć - CTRL + ENTER lub opublikować - SHIFT + F12. U nas wygląda ona tak:

 


 

Ćwiczenie nr 3 - animacja koloru, przeźroczystości i powiększenia

Animację automatyczną Tween można stosować również do innych parametrów niż sam ruch.

 

1. Utwórz nowy dokument Flash.

 

2. Ustaw rozmiary sceny na 200 × 200, 20 fps.

 

3. Z przybornika wybierz Oval Tool (Narzędzie Owali):

obrazek

 

Na panelu własności narzędzia wybierz odpowiedni kolor linii i wypełnienia:

 

obrazek

 

4. Na scenie narysuj niewielką elipsę:

 

obrazek

 

5. W przyborniku wybierz Selection Tool (Narzędzie Wyboru):

obrazek

 

Markizą zaznacz elipsę i naciśnij F8, aby zamienić ją na symbol. W okienku dialogowym Convert to Symbol (Zmień na Symbol) wpisz nazwę lampka i wybierz typ symbolu Graphic:

 

obrazek

 

Zatwierdź okienko dialogowe przyciskiem OK. W bibliotece po prawej stronie sceny powinien pojawić się nasz symbol lampka.

 

6. Dodaj klatkę kluczową nr 20 i 40 - kliknij w linii czasu na klatkę nr 20 i naciśnij F6, to samo powtórz dla klatki 40. W naszej animacji mamy trzy klatki kluczowe: 1, 20 i 40:

 

obrazek

 

Wszystkie te trzy klatki zawierają nasz symbol lampka.

 

7. Na linii czasu wybierz do edycji klatkę kluczową 20, klikając w nią myszką.

 

8. Kliknij w symbol na scenie. Na dolnym panelu panelu pojawią się własności symbolu. Klikamy na listę Color. Lista ta pozwala wybrać różne parametry koloru naszego symbolu:

Pobaw się chwilę poszczególnymi opcjami, następnie z listy wybierz opcję Tint. Otrzymasz dostęp do kilku dalszych opcji, związanych ze zmianą koloru symbolu:

 

obrazek

 

Kliknij w ikonę wyboru koloru i wybierz kolor czerwony. Kolor naszego symbolu odpowiednio się zmieni:

 

obrazek

 

Teraz suwakiem zwiększ krycie wybranego koloru na 100%. Elipsa stanie się jednolicie czerwona:

 

obrazek

 

9. Na linii czasu dodaj Tween pomiędzy klatkami 1 - 20 i 20 - 40. Możesz zaznaczyć myszką ten obszar klatek i wspólnie dodać do nich Tween.

 

10. Z przybornika wybierz Free Transform Tool (Narzędzie Swobodnej Transformacji):

obrazek

 

Wokół symbolu na scenie pojawią się uchwyty, które pozwalają go skalować:

 

obrazek

 

Powiększ obiekt, przeciągając myszką narożne uchwyty:

 

obrazek

 

11. Zapisz projekt na dysku, przeglądnij animację - CTRL + ENTER oraz opublikuj ją - SHIFT + F12 i przeglądnij powstały plik html w przeglądarce sieciowej.

 

12. W klatce 20 zmień parametr Alfa (Przeźroczystość) na 0%.

 

 

 

13. W klatce 20 zmień parametr Color na Advanced, kliknij przycisk Settings... (Ustawienia...). Pojawi się okienko dialogowe Advanced Effects:

 

obrazek

 

Możemy w nim zmieniać parametry koloru każdej z barw podstawowych oraz przeźroczystości. Poeksperymentuj z tymi parametrami - pierwszy określa ile procent oryginalnego koloru przechodzi przez filtr: od 0 do 100%. Jeśli ustawisz ten parametr na 0, to dana składowa koloru symbolu zostanie całkowicie zablokowana - 100% pozostawia ją bez zmian. Drugi parametr określa składową dodaną. Zakres od -255 do 255. Parametr Alpha określa przeźroczystość symbolu. Ustaw te parametry tak, jak widzisz na obrazku.

 

 


   I Liceum Ogólnokształcące   
im. Kazimierza Brodzińskiego
w Tarnowie

©2024 mgr Jerzy Wałaszek

Dokument ten rozpowszechniany jest zgodnie z zasadami licencji
GNU Free Documentation License.

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