TECHNIKI MULTIMEDIALNE

Transkrypt

1 INSTYTUT TELEINFORMATYKI POLITECHNIKI KRAKOWSKIEJ TECHNIKI MULTIMEDIALNE Ćwiczenie nr 12 Temat: Podstawy animacji w Adobe Flash Opracował mgr inŝ. Krzysztof Czajkowski

2 1. Grafika wektorowa i rastrowa w Adobe Flash Adobe Flash umoŝliwia zarówno tworzenie grafiki wektorowej, jak i import grafiki wektorowej oraz rastrowej, wykonanej w innych aplikacjach. 1.1 Rysowanie wektorowe i edycja obiektów Adobe Flash udostępnia wiele narzędzi do selekcji i edycji, z których najwaŝniejsze, umieszczone na pionowej belce narzędziowej, pogrupowane są w sekcje (rys. 1): Sekcja pierwsza selekcji obiektów: selekcja, podselekcja, przekształcanie, lasso. Sekcja druga edycji wierzchołków krzywych wektorowych, tworzenia tekstów, tworzenie obiektów wektorowych o róŝnych kształtach (na rys. 1 jest dla przykładu rozwinięte podmenu dla tej opcji), ołówek, pędzel. Sekcja trzecia kałamarz (Ink Bootle) do edycji brzegów obiektów, wiadro (Paint Bucket) do edycji wypełnień obiektów, pipeta (eyedropper) do pobierana kolorów, gumka (Ereaser). Sekcja czwarta rączka (Hand) do przesuwania ekranu, lupa (Zoom) do powiększeń, ustawienia kolorów rysowania i wypełniania. Rys. 1. Belka narzędziowa 2

3 1.2 Importowanie obiektów TECHNIKI MULTIMEDIALNE Adobe Flash importowanie zarówno grafiki wektorowej, jak i rastrowej. Importowanie pozwala załadować obraz zarówno bezpośrednio na ekran (określany we Flash jako Stage) lub teŝ wczytanie obiektu do biblioteki, z której następnie moŝe być on wielokrotnie pobierany na ekran (postawienie wiele instancji jednego obiektu zapewnia to większą wydajność aplikacji, jak i łatwiejsze zarządzania skomplikowanymi projektami). Dodatkowo moŝliwe jest importowanie obiektów z zewnętrznych bibliotek, jak równieŝ import plików video. Opcje importu przedstawia rys. 2. Rys. 2. Menu importu UWAGA: 1. W przypadku importu z katalogu, w którym znajduje się większa liczba plików, których nazwy róŝnią się tylko kolejnym numerem, Flash zaproponuje zaimportowanie wszystkich plików i umieszczenie ich w osobnych klatkach ( Do you want to import all of the images In the sequence? ) w tych ćwiczeniach zaleca się nie korzystanie z tej opcji. Importujemy kaŝdy plik osobno. 2. W przypadku importu plików PSD (z Adobe Phostoshop) moŝliwy jest wybór warstw, które mają zostać zaimportowane. Ćwiczenie 1: 1. Zaimportuj plik Rysunek1.psd z katalogu Zadanie1. 3

4 2. Przy imporcie pamiętaj o wczytaniu tylko jednego pliku; poniewaŝ ma on tylko jedną warstwę, podczas eksportu nie trzeba zmieniać ustawień dotyczących warstw. 3. Plik zostanie wstawiony bezpośrednio na ekran (Stage) i umieszczony w klatce pierwszej, o nazwie Layer Wykorzystując narzędzie Selection ustaw obiekt na środku ekranu roboczego (Stage). 5. Zapisz powstały plik i przetestuj go wybierając: Control / Test Movie (skrót Crtl + Enter). 2. Warstwy i linia czasu Adobe Flash, jako narzędzie do grafiki, swoje działanie opiera na warstwach, z których kaŝda stanowi niezaleŝną płaszczyznę roboczą. Jest to jednak równieŝ (lub przede wszystkim) narzędzie do tworzenia animacji, dlatego wykorzystuje linię czasu, reprezentującą jego upływ. Połączenie warstw oraz linii czasu powoduje, Ŝe moŝliwości animacyjne Flash są bardzo duŝe. Do pracy z linią czasu niezbędna jest znajomość dwóch pojęć: klatki (frame) i klatki kluczowej (key frame). Pierwsza z nich jest reprezentowana na linii czasu jak szary prostokąt i nie umoŝliwia wprowadzania zmian w obiektach, druga natomiast (reprezentowana za pomocą szarego prostokąta z czarną kropką) pozwala na edycję obiektów, a tym samym na tworzenie efektu ruchu lub przekształceń. Na rys. 3 znajduje się fragment interfejsu Flash przestawiający linię czasu oraz opcje dla warstw. Rys. 3. Linia czasu KaŜda warstwa posiada właściwości reprezentowane za pomocą ikon po jej lewej stronie: 4

5 Oko oznacza widoczność obiektów na warstwie. Kłódka pozwala zablokować edycję warstwy. Ołówek wskazuje aktualnie edytowaną warstwę (a jego przekreślenie oznacza brak takiej moŝliwości). W prawej części widoczne są linie czasu dla poszczególnych warstw (co piąta klatka jest numerowana). W dolnej części okna są opcje umoŝliwiające: Tworzenie nowej warstwy. Tworzenie prowadnicy ruchu (Motion Guide). Tworzenie katalogu dla warstw (warstwy moŝna grupować, ułatwia to zarządzanie projektami). Usuwanie warstwy. Wyświetlenie informacji na temat aktualnej szybkości animacji (na rys. 3 jest to 12 klatek na sekundę ich liczbę, jak równieŝ rozmiar obszaru roboczego (Stage) moŝna zmienić np. w oknie Properties na dole aplikacji. Ćwiczenie 2: 1. W oknie Properties ustaw liczbę klatek na sekundę na Ustaw kursor na klatce nr 50, na warstwie z wczytanym obrazem (Rysunek1) i wstaw klatkę kluczową (przycisk F6). 3. Wróć na klatkę nr 1 i przesuną Rysunek1 w lewo tak, aby znalazł się całkowicie poza obrazem (trzymając Shift ułatwiasz sobie przesuwanie obiektów w linii prostej). 4. Przetestuj działanie Ctrl+Enter obrazek nie przesuwa się, a zmienia połoŝenie skokowo, dopiero w ostatniej klatce. W Adobe Flash dostępne są dwa rodzaje animacji: Animacja ruchu Motion Tween, która uwzględnia zmianę połoŝenia obiektu. Animacja kształtu Shape Tween, która uwzględnia zmianę połoŝenia oraz kształtu obiektu. Ćwiczenie 2 cd.: 5. Ustaw kursor na dowolnej klatce od 1 do 50 na warstwie z obrazkiem Rysunek1. 6. Z menu kontekstowego (prawy przycisk myszy) lub z menu Insert / Time Line wybierz opcję Create Motion Tween, aby utworzyć animacje ruchu. Linia czasu powinna wyglądać, jak na rysu Przetestuj działanie animacji. 5

6 Rys. 4. Linia czasu z efektem Morion Tween 8. Wczytaj obraz Rysunek2.psd, powstanie kolejna warstwa, z jedną klatką kluczową na początku. 9. Tej nowej warstwie zmień numer z 0 na 1, a dotychczasową warstwę nr 1 (pustą) usuń. 10. Zamieć wczytany obrazek na obiekt z menu Modify wybierz opcję Convert to Symbol pojawi się okno, jak na rys. 5. Wybierz typ: Graphic. Rys. 5. Linia czasu z efektem Morion Tween 11. Kliknij dwukrotnie na nowopowstały obiekt, przejdziesz w ten sposób do jego edycji. 12. Za pomocą narzędzia Free Transform z belki narzędziowej obróć obraz tak, aby łodygi skierowane były w dół. 13. Z menu Modify wybierz opcję Brake Apart w ten sposób jeden spójny obrazek rozbijesz na piksele. MoŜe moŝna go łatwo edytować. 14. Za pomocą narzędzia Lasso, zaznacz mniej więcej dolną połowę rośliny. 15. Klikają Delete usuń zaznaczony fragment. Uzyskałeś w ten sposób samą górną część rośliny. 6

7 16. Wybierz narzędzie Selection i kliknij dwukrotnie poza obszarem rośliny, wrócisz w ten sposób do edycji całej animacji (opuścisz edycję obiektu). 17. Ustaw kursor na klatce 1 w warstwie nr Przenieś roślinę tak, aby znalazła się poza obszarem roboczym (na środku na górze). 19. Ustaw kursor na klatce 50 w warstwie nr Utwórz w tym miejscu klatkę kluczową (F6). 21. Ustaw roślinę tak, aby przysłaniała ¼ łabłka (górną), jak na rys Postępując analogicznie, do punktów 5-6 utwórz efekt Motion Tween dla tego obiektu. 23. Przetestuj animację. PoniewaŜ animacja odtwarzana jest cyklicznie, nie jest wygodna w oglądaniu. Dodamy akcję do animacji. 24. Ustaw kursor na klatce 50 w warstwie nr Z menu kontekstowego wybierz opcję Action. 26. Pojawi się edytor języka Action Script, skryptowego języka programowania w środowisku Flash. (rys. 6). 27. Wpisz tylko jedno słowo: stop() zatrzyma ono cykliczne odtwarzanie animacji. 28. Zamknij okno Action Scriptu i ponownie przetestuj aplikację. Rys. 6. Okno Action Scriptu Inną moŝliwością importowania obiektów do Flash jest import do biblioteki. Obiekty znajdujące się w bibliotece mogą być wielokrotnie umieszczane w animacji, stanowiąc jednak tylko osobne instancje tego samego obiektu (co zmniejsza rozmiar pliku, optymalizując aplikację). Kolejne ćwiczenie zademonstruje tę idee. Ćwiczenie 3: 1. Z menu File / Import wybierz opcję Import to Library. 7

8 2. Wybierz plik Rysunek 9.psd 3. Po imporcie, w oknie Library (prawa strona) znajduje się obiekt Rysunek 9.psd. 4. Kliknij dwukrotnie na tym obiekcie w bibliotece, przejdziesz do jego edycji. Za pomocą Free Transform mniejsz jego rozmiar o około 1/3 (trzymając Shift zachowasz proporcję). Wróć do edycji animacji. 5. Dodaj nową warstwę i nadaj jej numer Umieść kursor na warstwie 2 w klatce Wstaw w niej klatkę kluczową (F6) 8. Przeciągnij obiekt z Library na ekran (poza obszarem roboczym, obok jego lewego górnego rogu). 9. W 75 klatce na warstwie 2 wstaw klatkę kluczową. 10. PoniewaŜ pozostałe warstwy (0 i 1) nie istnieją w klatkach powyŝej 50, dla kaŝdej z tych warstw umieść klatki kluczowe w klatce W klatce 75 dla warstwy 2 przenieś obiekt tak, aby umieszczony był mniej więcej w środku jabłka (nieco do góry i na lewo). 12. Aby animacja nie zatrzymywała się na klatce 50, przenieś polecenie stop() z klatki 50 do klatki Przetestuj działanie animacji. 14. Podobnie, jak w krokach 5-13 (tym razem na klatach ), wykonaj operacje dla drugiego oka (bo juŝ być moŝe zauwaŝyłeś, Ŝe tworzysz jarzynowego ludzika ). 15. Docelowo animacja, prowadzona na kolejnych klatkach, dla poszczególnych obiektów pojawiających się z róŝnych stron, ma doprowadzić do otrzymania twarzy, jak na rys. 7. Rys. 7. Twarz jarzynowego ludzika 8

9 Kolejnym zadaniem, jest takie poprowadzenie animacji, aby ludzik ruszał ustami (wraŝenie mowy) oraz mrugał czasem okiem (wykorzystaj dodatkowy element, jak powieki) i ruszał brwiami (wraŝenie mimiki). Będzie w tym celu potrzebował kolejnych kilkuset klatek i pewnej liczby klatek kluczowych. Zadanie 2: Wykonaj animację na dowolny temat, posługując się grafikami rastrowymi przygotowanymi np. w Adobe Photoshop oraz grafikami wektorowymi wykonanymi we Flash. Animacja ma zwierać co najmniej 10 elementów graficznych (nie koniecznie wszystkie muszą być jednocześnie na ekranie) oraz co najmniej 30 klatek kluczowych. Długość animacji powinna wynosić od 30 do 60 sekund. SPRAWOZDANIE: W sprawozdaniu ma zostać zamieszczony co najmniej jeden końcowy screen z zadania 1 oraz screeny z poszczególnymi etapami tworzenia projektu do zadania 2. Do pliku ZIP, poza dokumentacją w DOC lub PDF, mają zostać dołączone pliku SWF z kompletnymi animacjami z zadań 1 i 2. 9