Prezentowane materiały są przeznaczone dla uczniów szkół ponadgimnazjalnych. Autor artykułu: mgr Jerzy Wałaszek, wersja1.0 |
©2010 mgr
Jerzy Wałaszek |
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.
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:
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:
klatki kluczowe (ang. key frame), które mogą zawierać nowy element animacji.
klatki zwykłe (ang. frame), które nie wprowadzają nowych elementów, a jedynie pośredniczą pomiędzy klatkami kluczowymi. Klatki zwykłe pozwalają na tworzenie automatycznych przejść pomiędzy treściami kolejnych klatek kluczowych - przykłady podamy później.
Pod sceną mamy dwa panele:
Actions (Akcje) - tutaj wpisujemy polecenia w języku ActionScript - jak to się dokładnie robi, powiemy później
Properties (Własności) - przedstawia różne własności wybranych na scenie elementów animacji.
Po prawej stronie mamy tzw. bibliotekę (ang. library), w której będziemy gromadzili różne elementy występujące w naszej animacji.
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...
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ę:
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):
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).
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:
5. Na scenie rysujemy odręcznie zarys twarzy - to będzie pierwsza klatka naszej animacji:
6. Naciskamy klawisz F6. Spowoduje to wstawienie nowej klatki kluczowej do naszej animacji. Nowa klatka kluczowa automatycznie skopiuje zawartość klatki poprzedzającej.
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):
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:
Przeciągając myszką kursor po linii czasu
Ustawiając kursor na wybranej klatce i naciskając SHIFT + ENTER - animacja zostanie raz odtworzona
Naciskając CTRL + ENTER - animacja zostanie odtworzona cyklicznie w okienku. Tutaj widzimy efekt końcowy.
Publikując do pliku swf i odtwarzając go w przeglądarce internetowej. W tym celu naciskamy SHIFT + F12. W katalogu projektu powstanie plik html oraz plik swf. Plik html możemy uruchomić w dowolnej przeglądarce internetowej. Zwróć uwagę, że plik animacji Flash jest bardzo mały - to duża zaleta w sieci, gdzie dane muszą być przesyłane przez łącza o różnej przepustowości - im mniejszy plik, tym szybciej zostanie przesłany.
A tak wygląda w działaniu nasza animacja w działaniu:
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)
Na panelu własności prostokąta ustawiamy kolor linii, kolor wypełnienia, grubość linii:
4. Na scenie rysujemy niezbyt duży prostokąt.
5. Zmieniamy narzędzie na strzałkę - Selection Tool
6. Otaczamy markizą nasz prostokąt - powinien on zostać pokryty siatką drobnych punktów - w ten sposób Macromedia Flash informuje o zaznaczeniu grafiki.
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:
Symbole mogą być trzech rodzajów:
Movie clip - symbol jest filmem, który będzie wyświetlany na scenie. Filmy posiadają własną linię czasu, która jest niezależna od linii czasu sceny.
Button - przycisk, który użytkownik może klikać myszką i w ten sposób wyzwalać różne akcje - o tym później
Graphic - symbol jest grafiką, nieruchomym obrazem.
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.
8. Umieszczamy nasz symbol poza sceną po lewej stronie u góry
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:
10. Mając wybraną klatkę nr 40, przesuwamy nasz prostokąt poza prawą krawędź sceny, na dół:
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:
12. Klikamy w dowolną z klatek pośrednich. Na panelu własności pojawią się wtedy własności animacji Tween.
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:
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):
Na panelu własności narzędzia wybierz odpowiedni kolor linii i wypełnienia:
4. Na scenie narysuj niewielką elipsę:
5. W przyborniku wybierz Selection Tool (Narzędzie Wyboru):
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:
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:
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:
None - żaden, symbol pozostaje taki jaki jest
Brightness - reguluje jasność symbolu
Tint - pozwala zmienić kolor symbolu
Alpha - pozwala regulować przeźroczystość symbolu
Advanced - pozwala na jednoczesną zmianę wszystkich trzech parametrów
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:
Kliknij w ikonę wyboru koloru i wybierz kolor czerwony. Kolor naszego symbolu odpowiednio się zmieni:
Teraz suwakiem zwiększ krycie wybranego koloru na 100%. Elipsa stanie się jednolicie czerwona:
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):
Wokół symbolu na scenie pojawią się uchwyty, które pozwalają go skalować:
Powiększ obiekt, przeciągając myszką narożne uchwyty:
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:
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 |
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