Rozdział 4. Proste animacje
Poznawanie zasad animacji rozpoczniemy od ożywienia pojedynczego obiektu.
Tworzenie złożonych projektów polega na dodawaniu kolejnych animowanych
elementów i uzupełnianiu ich efektami multimedialnymi.
Gwiazda
Ćwiczenie 4.1.
Narysuj obiekt. Zaznacz w dokerze Timeline czas życia obiektu.
Sposób wykonania:
Załaduj program Corel R.A.V.E. W tym celu wybierz polecenia Start / Programy /
CorelDRAW 10 / Corel R.A.V.E 1.0.
Po pojawieniu się okna Welcome to Corel R.A.V.E 1.0 kliknij ikonę New Movie.
Rysunek 4.1. Ikona narzędzia Polygon

Wyświetlone zostanie okno programu z pustym arkuszem roboczym. Kliknij widoczną
na pasku Toolbox ikonę narzędzia Polygon (rysunek 4.1). Uaktywnione zostało
narzędzie służące do rysowania wielokątów.
Wciśnij i przytrzymaj klawisz Ctrl. Rysowanie figury geometrycznej przy
wciśniętym klawiszu Ctrl powoduje, że ma ona równe szerokość i wysokość
zamiast elipsy powstaje okrąg, zamiast prostokąta kwadrat itd.
Rysunek 4.2. Rysowanie wielokąta

Umieść kursor w lewym górnym rogu arkusza roboczego.
Wciśnij i przytrzymaj lewy przycisk myszy.
Przesuń kursor ukośnie w kierunku prawego dolnego rogu arkusza. W trakcie
przesuwania kursora wyświetlany będzie zarys figury (rysunek 4.2). Lewy
narożnik przytwierdzony jest do miejsca, w którym rozpocząłeś rysowanie. Prawy
dolny narożnik przemieszcza się wraz z kursorem.
Zwolnij lewy przycisk myszy.
Zwolnij klawisz Ctrl.
Rysunek 4.3. Zamiana wielokąta w gwiazdę

Kliknij widoczną na pasku Property Bar ikonę Star (rysunek 4.3). Wielokąt
zmieni się w gwiazdę.
Kliknij widoczny w palecie kolorów kwadrat oznaczony napisem Black 20%. Wnętrze
figury zostanie wypełnione kolorem identycznym z kolorem próbki.
Rysunek 4.4. Zaznaczanie pierwszej klatki, w której widoczny jest obiekt
Polygon

W umieść kursor w dokerze Timeline na przecięciu klatki o numerze 1 oraz
obiektu Polygon (rysunek 4.4).
Wciśnij i przytrzymaj lewy przycisk myszy.
Przesuń kursor aż do klatki o numerze 25. Narysowana została linia wyznaczająca
czas życia obiektu Polygon.
Zwolnij lewy przycisk myszy.
Najprostszym sposobem tworzenia animacji jest narysowanie obiektu początkowego
i różniącego się od niego wyglądem obiektu końcowego. Następnie należy utworzyć
kolejne klatki. W każdej z nich obiekt musi coraz bardziej zmieniać pewną
cechę.
Aby animacja była płynna, należy utworzyć wiele klatek. Obrazy w sąsiednich
klatkach są do siebie bliźniaczo podobne. Dlatego ta metoda animacji określana
jest jako tweening.
Ćwiczenie 4.2.
Narysuj obiekt, wstaw ramki kluczowe, obróć obiekt i wyświetl animację.
Sposób wykonania:
Wykonaj ćwiczenie 4.1.
Rysunek 4.5. Wskaźnik umieszczony w ramce o numerze 25

Sprawdź, czy ramka 25 jest zaznaczona (rysunek 4.5).
Rysunek 4.6. Wstawianie ramki kluczowej

Kliknij znajdującą się w dokerze Timeline ikonę Insert Keyframe (rysunek 4.6).
Na końcach linii informującej o czasie życia obiektu pojawiły się kwadraty; w
ten sposób zaznacza się ramki kluczowe. Możesz wprowadzić zmianę w wyglądzie
obiektu program wyliczy klatki pośrednie. Kliknij dwukrotnie obiekt. Pojawią
się wokół niego strzałki.
Rysunek 4.7. Obracanie obiektu

Umieść kursor na strzałce znajdującej się w prawym górnym rogu obiektu (rysunek
4.7).
Wciśnij lewy przycisk myszy. Obróć obiekt o około trzydzieści stopni zgodnie z
ruchem wskazówek zegara.
Zwolnij lewy przycisk myszy.
Rysunek 4.8. Uruchamianie wyświetlania animacji

Kliknij strzałkę uruchamiającą wyświetlanie animacji (rysunek 4.8). Zapoznaj
się wyglądem animacji.
Rysunek 4.9. Zatrzymywanie wyświetlania animacji

Kliknij kwadrat, aby zatrzymać wyświetlanie animacji (rysunek 4.9).
Ćwiczenie 4.3.
Narysuj obiekt i zmień jego położenie i kolor. Wyświetl animację.
Sposób wykonania:
Wykonaj ćwiczenie 4.2.
W dokerze Timeline kliknij ramkę o numerze 25.
Kliknij obiekt.
Rysunek 4.10. Zmiana koloru wypełnienia na czarny

W palecie kolorów kliknij kolor Black (rysunek 4.10). W ten sposób
zdecydowałeś, że obiekt w klatce o numerze 25 ma być wypełniony kolorem
czarnym. Zatem podczas odtwarzania animacji zmianie ulegać będzie nie tylko
położenie obiektu, lecz także jego kolor.
Kliknij strzałkę uruchamiającą wyświetlanie animacji (rysunek 4.8). Zapoznaj
się z wyglądem animacji.
Kliknij kwadrat (rysunek 4.9), aby zatrzymać wyświetlanie animacji.
Ćwiczenie 4.4.
Narysuj obiekt, obejrzyj animację, narysuj ścieżkę i przesuń obiekt wzdłuż
ścieżki.
Sposób wykonania:
Wykonaj ćwiczenie 4.3.
Rysunek 4.11. Ikona narzędzie Freehand

Kliknij znajdujące się na pasku Toolbox narzędzie Freehand (rysunek 4.11).
Posługując się narzędziem Freehand, można narysować linię, wzdłuż której będzie
się przesuwał obiekt. Umieść kursor w lewym górnym rogu obszaru roboczego.
Wciśnij i przytrzymaj lewy przycisk myszy.
Rysunek 4.12. Rysowanie linii za pomocą narzędzia Freehand

Przesuń kursor łukiem w kierunku prawego górnego rogu arkusza roboczego.
Podczas przesuwania kursora na arkuszu będzie pozostawał ślad (rysunek 4.12).
Zwolnij lewy przycisk myszy. Na arkuszu roboczym pozostanie krzywa.
Kliknij znajdujące się na pasku Toolbox narzędzie Pick.
Kliknij w dokerze Timeline obiekt Polygon.
Wybierz polecenia Movie / Attach to path. Kursor zmienił kształt z strzałki
prostej na strzałkę zakrzywioną.
Rysunek 4.13. Wskazywanie ścieżki

Kliknij dowolne miejsce ścieżki (rysunek 4.13).
Rysunek 4.14. Wymuszenie wyznaczania kolejnych położeń obiektu wzdłuż ścieżki


Na pasku Property Bar kliknij ikonę Sets the Tween to occur along full path
(rysunek 4.14).
Uruchom animację. Obiekt będzie się obracał, zmieniał kolor, przesuwał wzdłuż
ścieżki.
Zatrzymaj animację.
Ćwiczenie 4.5.
Ukryj ścieżkę, wzdłuż której przesuwa się obiekt.
Sposób wykonania:
Wykonaj ćwiczenie 4.4.
Kliknij znajdujące się na pasku Toolbox narzędzie Pick.
Rysunek 4.15. Wskaźnik umieszczony w ramce o numerze 1

W dokerze Timeline kliknij ramkę o numerze 1 (rysunek 4.15).
Kliknij ścieżkę narysowaną w ćwiczeniu 4.4.
Rozwiń paletę Outline.
Rysunek 4.16. Usuwanie obwiedni

Kliknij ikonę No Outline (rysunek 4.16). Ścieżka pozostanie na arkuszu
roboczym. Ponieważ nie będzie miała obwiedni ani wypełnienia, będzie
niewidoczna.
Uruchom animację. Obiekt będzie się obracał, zmieniał kolor, przesuwał wzdłuż
niewidocznej ścieżki.
Zatrzymaj animację.
Ćwiczenie 4.6.
Zmień kolor tła animacji.
Sposób wykonania:
Wykonaj ćwiczenie 4.5.
Domyślnie kolor arkusza roboczego (a więc i tła animacji) jest biały.
Wybierz polecenia Movie / Movie Setup.
Rysunek 4.17. Wybieranie rodzaju tła

Po wyświetleniu okna Options kliknij kolejno Document / Movie Setup /
Background (rysunek 4.17).
Wyświetlone zostanie okno Background.
W górnej części okna widoczne są trzy pola: No Backround usunięcie tła z
animacji, Solid tło w jednolitym kolorze, Bitmap użycie pliku bitmapowego w
charakterze tła. Kliknij Solid.
Rysunek 4.18. Wybieranie jednolitego koloru tła

Rozwiń paletę próbek kolorów. Wybierz z niej dowolny kolor (rysunek 4.18).
Powtórz kilka razy ćwiczenie 4.6, wybierając różne kolory tła.
Ćwiczenie 4.7.
Dodaj do animacji dodatkowe zniekształcenie.
Sposób wykonania:
Wykonaj ćwiczenie 4.6.
Rysunek 4.19. Zaznaczanie miejsca, w które wstawiona zostanie ramka kluczowa

W oknie dokera Timeline kliknij ramkę 14 w linii życia gwiazdy (rysunek 4.19).
Rysunek 4.20. Dodatkowa ramka kluczowa wstawiona w komórce 14

Kliknij ikonę Insert keyframe. W klatce 14 wstawiona została ramka kluczowa
(rysunek 4.20).
Rozwiń paletę Interactive Distortion.
Rysunek 4.21. Ikona narzędzia Interactive Distortion Tool

Kliknij znajdującą się w palecie ikonę narzędzia Interactive Distortion Tool
(rysunek 4.21).
Rysunek 4.22. Pasek Property Bar po wybraniu narzędzia Interactive Distortion
Tool

Na pasku Property Bar można wybrać sposób deformacji obiektu. Kliknij ikonę
Push and Pull Distortion (rysunek 4.22).
Rysunek 4.23. Lista rodzajów deformacji. Po zaznaczeniu nazwy wyświetla się
okno z miniaturką; na podstawie jej wyglądu można się zorientować, jakim
zmianom ulegnie obiekt

Rozwiń listę Preset List. Znajduje się ona po lewej stronie paska. Zapoznaj się
z dostępnymi wzorcami deformacji (rysunek 4.23).
Rysunek 4.24. Ikona Zipper Distortion

Na pasku Property Bar kliknij ikonę Zipper Distortion (rysunek 4.24).
Rozwiń listę Preset List. Zapoznaj się z dostępnymi wzorcami deformacji.
Rysunek 4.25. Ikona Twister Distortion

Na pasku Property Bar kliknij ikonę Twister Distortion (rysunek 4.25).
Rozwiń listę Preset List. Zapoznaj się z dostępnymi wzorcami deformacji.
Na liście Preset List zaznacz opcję Twister3. Ten rodzaj zniekształcenia
zostanie zastosowany do obiektu.
Uruchom animację. Obiekt będzie się obracał, zmieniał kolor, przesuwał wzdłuż
niewidocznej ścieżki i ulegał zniekształceniu.
Zatrzymaj animację.
Zapisz animację pod nazwą Twister1.

Ćwiczenie 4.8.
Wykorzystując istniejący projekt, utwórz nową animację.
Sposób wykonania:
Wykonaj ćwiczenie 4.7.
Wczytaj plik Twister1.
W oknie dokera Timeline kliknij ramkę 14 w linii życia gwiazdy.
Rysunek 4.26. Usuwanie zniekształcenia obiektu

Kliknij znajdującą się na pasku Property Bar ikonę Clear Distortion.
Zniekształcenia wprowadzone w ćwiczeniu 4.26 zostały anulowane.
Rozwiń paletę Interactive Tool.
Rysunek 4.27. Ikona Interactive Envelope Tool

Kliknij znajdującą się w palecie ikonę narzędzia Interactive Envelope Tool
(rysunek 4.27).
Zmień wygląd figury, przeciągając jej węzły.
Uruchom animację. Obiekt będzie się obracał, zmieniał kolor, przesuwał wzdłuż
niewidocznej ścieżki i ulegał zniekształceniu spowodowanemu przesunięciem
węzłów.
Zatrzymaj animację.
Zapisz animację pod nazwą Envelope1.
Ćwiczenie 4.9.
Wykorzystując istniejący projekt, utwórz animację, używając efektu
przezroczystości.
Sposób wykonania:
Wykonaj ćwiczenie 4.8.
Wczytaj plik Envelope1.
W oknie dokera Timeline kliknij ramkę 14 w linii życia gwiazdy.
Kliknij znajdująca się na pasku Property Bar ikonę Clear Distortion (rysunek
4.26). Zniekształcenia wprowadzone w ćwiczeniu 4.8 zostały anulowane.
Rozwiń paletę Interactive Tool.
Rysunek 4.28. Ikona Interactive Transparency Tool

Kliknij znajdującą się w palecie ikonę narzędzia Interactive Transparency Tool
(rysunek 4.28).
Na pasku Property Bar rozwiń listę Transparency Type.
Rysunek 4.29. Lista Transparency Type z zaznaczoną opcją Uniform


Zaznacz opcję Uniform (rysunek 4.29).
Uruchom animację. Zaobserwuj, jak zmienia się wygląd obiektu.
Zatrzymaj animację.
Wybieraj z listy Transparency Type (rysunek 4.29) kolejne rodzaje
przezroczystości i uruchamiaj animacje.
Powtórnie zastosuj przezroczystość, która twoim zdaniem dała najciekawszy
efekt.
Zapisz plik pod nazwą moje1.
Ćwiczenie 4.10.
Dodaj do projektu nowy obiekt.
Sposób wykonania:
Wykonaj ćwiczenie 4.9.
Wczytaj plik moje1.
W oknie dokera Timeline kliknij ramkę 5.
Rysunek 4.30. Ikona narzędzia Rectangle Tool

Kliknij znajdującą się na pasku Toolbox ikonę narzędzia Rectangle Tool (rysunek
4.30).
Przesuń kursor w prawy górny róg obszaru roboczego.
Narysuj prostokąt.
Umieść kursor w dokerze Timeline na przecięciu wiersza z nazwą obiektu i ramki
o numerze 5. Widoczne jest w nim czarne kółko, wyznaczające początek czasu
życia obiektu.
Wciśnij i przytrzymaj lewy przycisk myszy.
Przesuń kursor do klatki o numerze 15.
Zwolnij lewy przycisk myszy.
Uruchom animację. Zaobserwuj, kiedy pojawia się nowy obiekt.
Zatrzymaj animację.
Zapisz plik pod nazwą moje2.
Animowany napis
Zdobyte do tej pory umiejętności umożliwiają wykonanie prostego projektu o
wartościach użytkowych. Stworzysz animowany napis.
Ćwiczenie 4.11.
Utwórz nowy dokument. Dostosuj wymiary arkusza roboczego do rozmiarów projektu.
Sposób wykonania:
Załaduj program Corel R.A.V.E. W tym celu wybierz polecenia Start / Programy /
CorelDRAW 10 / Corel R.A.V.E. 1.0.
Po pojawieniu się okna Welcome to Corel R.A.V.E. 1.0 kliknij ikonę New Movie.
Rysunek 4.31. Rozmiary arkusza roboczego

Utworzony zostanie nowy dokument. Domyślnie arkusz roboczy ma wymiary 500 na
500 pikseli. Są one widoczne na pasku Property Bar (rysunek 4.31).
Wpisz w pola na pasku Property Bar następujące wartości: szerokość 90 pikseli
oraz wysokość 30 pikseli.
Rysunek 4.32. Arkusz roboczy po zmianie wymiarów

Po wpisaniu ostatniego wymiaru naciśnij klawisz Enter. Wymiary arkusza zmieniły
się (rysunek 4.32).
Ćwiczenie 4.12.
Zmień kolor tła projektu na czarny.
Sposób wykonania:
Wykonaj ćwiczenie 4.11.
Wybierz polecenia Movie / Movie Setup.
Rysunek 4.33. Wyświetlanie okna wyboru tła

Po wyświetleniu okna Options rozwiń kolejno kategorie Document / Movie Setup /
Background (rysunek 4.33).
Po wyświetleniu okna Background kliknij opcję Solid.
Rysunek 4.34. Zmiana koloru tła na czarny

Rozwiń paletę barw. Kliknij w niej kolor Black (rysunek 4.34).
Ćwiczenie 4.13.
Umieść na projekcie napis.
Sposób wykonania:
Wykonaj ćwiczenie 4.12.
Rysunek 4.35. Ikona narzędzia Text Tool

Kliknij na pasku Toolbox ikonę narzędzia Text Tool (rysunek 4.35).
Kursor zmienia kształt ze strzałki na krzyżyk z literą. W pasku Property Bar
wybierz czcionkę Comic Sans Ms.
Rozwiń listę Font Size List. Kliknij liczbę 12.
Domyślnie wpisywany tekst ma kolor czarny. Nie będzie widoczny na czarnym tle.
Kliknij w palecie barw kolor Yellow (żółty).
Rysunek 4.36. Właściwości tekstu ustawione w pasku Property Bar. Kursor
wskazuje miejsce wpisywania tekstu

Kliknij w pobliżu lewego marginesu arkusza roboczego. Pojawi się tam migający
punkt wstawiania (rysunek 4.36).
Wpisz z klawiatury tekst Neonik.
Ćwiczenie 4.14.
Umieść napis dokładnie na środku arkusza roboczego.
Sposób wykonania:
Wykonaj ćwiczenie 4.13 (rysunek 4.37).
Rysunek 4.37. Napis przed umieszczeniem na środku arkusza roboczego

Wybierz polecenia Arrange / Align and Distribute.
Rysunek 4.38. Zaznaczenie opcji Center of stage powoduje zaznaczenie obu opcji
Center

Po wyświetleniu okna Align and Distribute kliknij opcję Center of stage
jednoczesne wyrównanie w pionie i w poziomie (rysunek 4.38).
Kliknij widoczny w dolnej części okna Align and Distribute przycisk OK.
Rysunek 4.39. Napis umieszczony pośrodku arkusza roboczego

Napis został umieszczony pośrodku arkusza roboczego (rysunek 4.39).
Ćwiczenie 4.15.
Rozciągnij linię życia obiektu.
Sposób wykonania:
Wykonaj ćwiczenie 4.14.
Rysunek 4.40. Projekt składa się z jednego obiektu umieszczonego w ramce 1

Projekt składa się z jednego obiektu (napisu). Istniej on tylko w ramce o
numerze 1. Umieść kursor na czarnym kółku (rysunek 4.40).
Wciśnij i przytrzymaj lewy przycisk myszy.
Rysunek 4.41. Linia życia obiektu obejmuje klatki 1 i 2



Przeciągnij kursor do ramki o numerze 2.
Zwolnij lewy przycisk myszy. Linia życia obiektu będzie obejmowała klatki 1 i 2
(rysunek 4.41).
Ćwiczenie 4.16.
Wstaw ramki kluczowe.
Sposób wykonania:
Wykonaj ćwiczenie 4.15.
Kliknięciem zaznacz linię życia obiektu.
Rysunek 4.42. Wstawianie ramki kluczowej

Kliknij ikonę Insert Keyframe (rysunek 4.41).
W pierwszej i ostatniej klatce na linii życia obiektu pojawiły się kwadraty. W
ten sposób wyróżnione zostały ramki kluczowe. Wygląd ramek kluczowych
całkowicie kontroluje użytkownik; pozostałe ramki są interpolowane przez
program. Uruchom animację.
Rysunek 4.43. Animacja z ramkami kluczowymi

Zatrzymaj animację. Wygląd arkusza roboczego nie zmienia się. W obu ramkach
kluczowych jest ten sam obrazek.
Ćwiczenie 4.17.
Zmień kolor napisu w ramce kluczowej.
Sposób wykonania:
Wykonaj ćwiczenie 4.16.
Kliknij klatkę o numerze 2 widoczną w linii życia obiektu.
Kliknij widoczny w palecie barw kolor Orange. Kolor napisu w klatce 2 zmienił
się.
Uruchom animację. Napis miga, na przemian jest żółty lub pomarańczowy.
Zatrzymaj animację.
Ćwiczenie 4.18.
Wydłuż czas animacji do 10 klatek.
Sposób wykonania:
Wykonaj ćwiczenie 4.17.
Rysunek 4.44. Kursor umieszczony nad ramką kluczową w klatce 2

Umieść kursor na czarnym kwadracie w klatce 2 (rysunek 4.44).
Wciśnij i przytrzymaj lewy przycisk myszy.
Przeciągnij kursor do ramki o numerze 10.
Rysunek 4.45. Linia życia rozciągnięta od klatki 1 do 10

Zwolnij lewy przycisk myszy. Linia życia obiektu będzie obejmowała klatki od 1
do 10 (rysunek 4.45).
Uruchom animację. Napis zmienia kolor od żółtego (ramka kluczowa 1) do
pomarańczowego (ramka kluczowa 2). Zmiana odbywa się stopniowo; z uwagi na zbyt
małą liczbę klatek nie jest płynna.
Zatrzymaj animację.
Ćwiczenie 4.19.
Wydłuż czas animacji do 40 klatek.
Sposób wykonania:
Wykonaj ćwiczenie 4.18.
Rysunek 4.46. Kursor umieszczony nad ramką kluczową w klatce 10

Umieść kursor na czarnym kwadracie w klatce 10 (rysunek 4.46).
Wciśnij i przytrzymaj lewy przycisk myszy.
Przeciągnij kursor do ramki o numerze 40.
Zwolnij lewy przycisk myszy. Linia życia obiektu będzie obejmowała klatki od 1
do 40 .
Uruchom animację. Napis płynnie zmienia kolor od żółtego (ramka kluczowa 1) do
pomarańczowego (ramka kluczowa 40). Liczba klatek jest na tyle duża, że
uzyskujemy złudzenie płynnego przejścia pomiędzy kolorami.
Zatrzymaj animację.


Wyszukiwarka

Podobne podstrony:
r04 01
t informatyk12[01] 02 101
r11 01
2570 01
introligators4[02] z2 01 n
Biuletyn 01 12 2014
beetelvoiceXL?? 01
01
2007 01 Web Building the Aptana Free Developer Environment for Ajax
9 01 07 drzewa binarne

więcej podobnych podstron