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:

1. Załaduj program Corel R.A.V.E. W tym celu wybierz polecenia Start / Programy / CorelDRAW 10 / Corel R.A.V.E 1.0.

2. Po pojawieniu się okna Welcome to Corel R.A.V.E 1.0 kliknij ikonę New Movie.

Rysunek 4.1. Ikona narzędzia Polygon

3. 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.

4. 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

5. Umieść kursor w lewym górnym rogu arkusza roboczego.

6. Wciśnij i przytrzymaj lewy przycisk myszy.

7. 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.

8. Zwolnij lewy przycisk myszy.

9. Zwolnij klawisz Ctrl.

Rysunek 4.3. Zamiana wielokąta w gwiazdę

10. Kliknij widoczną na pasku Property Bar ikonę Star (rysunek 4.3). Wielokąt zmieni się w gwiazdę.

11. 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

12. W umieść kursor w dokerze Timeline na przecięciu klatki o numerze 1 oraz obiektu Polygon (rysunek 4.4).

13. Wciśnij i przytrzymaj lewy przycisk myszy.

14. Przesuń kursor aż do klatki o numerze 25. Narysowana została linia wyznaczająca czas życia obiektu Polygon.

15. 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:

1. Wykonaj ćwiczenie 4.1.

Rysunek 4.5. Wskaźnik umieszczony w ramce o numerze 25

2. Sprawdź, czy ramka 25 jest zaznaczona (rysunek 4.5).

Rysunek 4.6. Wstawianie ramki kluczowej

3. Kliknij znajdującą się w dokerze Timeline ikonę Insert Keyframe (rysunek 4.6).

4. 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

5. Umieść kursor na strzałce znajdującej się w prawym górnym rogu obiektu (rysunek 4.7).

6. Wciśnij lewy przycisk myszy. Obróć obiekt o około trzydzieści stopni zgodnie z ruchem wskazówek zegara.

7. Zwolnij lewy przycisk myszy.

Rysunek 4.8. Uruchamianie wyświetlania animacji

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

Rysunek 4.9. Zatrzymywanie wyświetlania animacji

9. 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:

1. Wykonaj ćwiczenie 4.2.

2. W dokerze Timeline kliknij ramkę o numerze 25.

3. Kliknij obiekt.

Rysunek 4.10. Zmiana koloru wypełnienia na czarny

4. 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.

5. Kliknij strzałkę uruchamiającą wyświetlanie animacji (rysunek 4.8). Zapoznaj się z wyglądem animacji.

6. 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:

1. Wykonaj ćwiczenie 4.3.

Rysunek 4.11. Ikona narzędzie Freehand

2. Kliknij znajdujące się na pasku Toolbox narzędzie Freehand (rysunek 4.11).

3. 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.

4. Wciśnij i przytrzymaj lewy przycisk myszy.

Rysunek 4.12. Rysowanie linii za pomocą narzędzia Freehand

5. Przesuń kursor łukiem w kierunku prawego górnego rogu arkusza roboczego. Podczas przesuwania kursora na arkuszu będzie pozostawał ślad (rysunek 4.12).

6. Zwolnij lewy przycisk myszy. Na arkuszu roboczym pozostanie krzywa.

7. Kliknij znajdujące się na pasku Toolbox narzędzie Pick.

8. Kliknij w dokerze Timeline obiekt Polygon.

9. Wybierz polecenia Movie / Attach to path. Kursor zmienił kształt z strzałki prostej na strzałkę zakrzywioną.

Rysunek 4.13. Wskazywanie ścieżki

10. Kliknij dowolne miejsce ścieżki (rysunek 4.13).

Rysunek 4.14. Wymuszenie wyznaczania kolejnych położeń obiektu wzdłuż ścieżki

11. Na pasku Property Bar kliknij ikonę Sets the Tween to occur along full path (rysunek 4.14).

12. Uruchom animację. Obiekt będzie się obracał, zmieniał kolor, przesuwał wzdłuż ścieżki.

13. Zatrzymaj animację.

Ćwiczenie 4.5.

Ukryj ścieżkę, wzdłuż której przesuwa się obiekt.

Sposób wykonania:

1. Wykonaj ćwiczenie 4.4.

2. Kliknij znajdujące się na pasku Toolbox narzędzie Pick.

Rysunek 4.15. Wskaźnik umieszczony w ramce o numerze 1

3. W dokerze Timeline kliknij ramkę o numerze 1 (rysunek 4.15).

4. Kliknij ścieżkę narysowaną w ćwiczeniu 4.4.

5. Rozwiń paletę Outline.

Rysunek 4.16. Usuwanie obwiedni

6. 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.

7. Uruchom animację. Obiekt będzie się obracał, zmieniał kolor, przesuwał wzdłuż niewidocznej ścieżki.

8. Zatrzymaj animację.

Ćwiczenie 4.6.

Zmień kolor tła animacji.

Sposób wykonania:

1. Wykonaj ćwiczenie 4.5.

2. Domyślnie kolor arkusza roboczego (a więc i tła animacji) jest biały.

3. Wybierz polecenia Movie / Movie Setup.

Rysunek 4.17. Wybieranie rodzaju tła

4. Po wyświetleniu okna Options kliknij kolejno Document / Movie Setup / Background (rysunek 4.17).

5. Wyświetlone zostanie okno Background.

6. 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

7. Rozwiń paletę próbek kolorów. Wybierz z niej dowolny kolor (rysunek 4.18).

8. 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:

1. Wykonaj ćwiczenie 4.6.

Rysunek 4.19. Zaznaczanie miejsca, w które wstawiona zostanie ramka kluczowa

2. 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

3. Kliknij ikonę Insert keyframe. W klatce 14 wstawiona została ramka kluczowa (rysunek 4.20).

4. Rozwiń paletę Interactive Distortion.

Rysunek 4.21. Ikona narzędzia Interactive Distortion Tool

5. 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

6. 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

7. 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

8. Na pasku Property Bar kliknij ikonę Zipper Distortion (rysunek 4.24).

9. Rozwiń listę Preset List. Zapoznaj się z dostępnymi wzorcami deformacji.

Rysunek 4.25. Ikona Twister Distortion

10. Na pasku Property Bar kliknij ikonę Twister Distortion (rysunek 4.25).

11. Rozwiń listę Preset List. Zapoznaj się z dostępnymi wzorcami deformacji.

12. Na liście Preset List zaznacz opcję Twister3. Ten rodzaj zniekształcenia zostanie zastosowany do obiektu.

13. Uruchom animację. Obiekt będzie się obracał, zmieniał kolor, przesuwał wzdłuż niewidocznej ścieżki i ulegał zniekształceniu.

14. Zatrzymaj animację.

15. Zapisz animację pod nazwą Twister1.

Ćwiczenie 4.8.

Wykorzystując istniejący projekt, utwórz nową animację.

Sposób wykonania:

1. Wykonaj ćwiczenie 4.7.

2. Wczytaj plik Twister1.

3. W oknie dokera Timeline kliknij ramkę 14 w linii życia gwiazdy.

Rysunek 4.26. Usuwanie zniekształcenia obiektu

4. Kliknij znajdującą się na pasku Property Bar ikonę Clear Distortion. Zniekształcenia wprowadzone w ćwiczeniu 4.26 zostały anulowane.

5. Rozwiń paletę Interactive Tool.

Rysunek 4.27. Ikona Interactive Envelope Tool

6. Kliknij znajdującą się w palecie ikonę narzędzia Interactive Envelope Tool (rysunek 4.27).

7. Zmień wygląd figury, przeciągając jej węzły.

8. 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.

9. Zatrzymaj animację.

10. 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:

1. Wykonaj ćwiczenie 4.8.

2. Wczytaj plik Envelope1.

3. W oknie dokera Timeline kliknij ramkę 14 w linii życia gwiazdy.

4. Kliknij znajdująca się na pasku Property Bar ikonę Clear Distortion (rysunek 4.26). Zniekształcenia wprowadzone w ćwiczeniu 4.8 zostały anulowane.

5. Rozwiń paletę Interactive Tool.

Rysunek 4.28. Ikona Interactive Transparency Tool

6. Kliknij znajdującą się w palecie ikonę narzędzia Interactive Transparency Tool (rysunek 4.28).

7. Na pasku Property Bar rozwiń listę Transparency Type.

Rysunek 4.29. Lista Transparency Type z zaznaczoną opcją Uniform

8. Zaznacz opcję Uniform (rysunek 4.29).

9. Uruchom animację. Zaobserwuj, jak zmienia się wygląd obiektu.

10. Zatrzymaj animację.

11. Wybieraj z listy Transparency Type (rysunek 4.29) kolejne rodzaje przezroczystości i uruchamiaj animacje.

12. Powtórnie zastosuj przezroczystość, która twoim zdaniem dała najciekawszy efekt.

13. Zapisz plik pod nazwą moje1.

Ćwiczenie 4.10.

Dodaj do projektu nowy obiekt.

Sposób wykonania:

1. Wykonaj ćwiczenie 4.9.

2. Wczytaj plik moje1.

3. W oknie dokera Timeline kliknij ramkę 5.

Rysunek 4.30. Ikona narzędzia Rectangle Tool

4. Kliknij znajdującą się na pasku Toolbox ikonę narzędzia Rectangle Tool (rysunek 4.30).

5. Przesuń kursor w prawy górny róg obszaru roboczego.

6. Narysuj prostokąt.

7. 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.

8. Wciśnij i przytrzymaj lewy przycisk myszy.

9. Przesuń kursor do klatki o numerze 15.

10. Zwolnij lewy przycisk myszy.

11. Uruchom animację. Zaobserwuj, kiedy pojawia się nowy obiekt.

12. Zatrzymaj animację.

13. 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:

1. Załaduj program Corel R.A.V.E. W tym celu wybierz polecenia Start / Programy / CorelDRAW 10 / Corel R.A.V.E. 1.0.

2. Po pojawieniu się okna Welcome to Corel R.A.V.E. 1.0 kliknij ikonę New Movie.

Rysunek 4.31. Rozmiary arkusza roboczego

3. Utworzony zostanie nowy dokument. Domyślnie arkusz roboczy ma wymiary 500 na 500 pikseli. Są one widoczne na pasku Property Bar (rysunek 4.31).

4. 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

5. 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:

1. Wykonaj ćwiczenie 4.11.

2. Wybierz polecenia Movie / Movie Setup.

Rysunek 4.33. Wyświetlanie okna wyboru tła

3. Po wyświetleniu okna Options rozwiń kolejno kategorie Document / Movie Setup / Background (rysunek 4.33).

4. Po wyświetleniu okna Background kliknij opcję Solid.

Rysunek 4.34. Zmiana koloru tła na czarny

5. Rozwiń paletę barw. Kliknij w niej kolor Black (rysunek 4.34).

Ćwiczenie 4.13.

Umieść na projekcie napis.

Sposób wykonania:

1. Wykonaj ćwiczenie 4.12.

Rysunek 4.35. Ikona narzędzia Text Tool

2. Kliknij na pasku Toolbox ikonę narzędzia Text Tool (rysunek 4.35).

3. Kursor zmienia kształt ze strzałki na krzyżyk z literą. W pasku Property Bar wybierz czcionkę Comic Sans Ms.

4. Rozwiń listę Font Size List. Kliknij liczbę 12.

5. 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

6. Kliknij w pobliżu lewego marginesu arkusza roboczego. Pojawi się tam migający punkt wstawiania (rysunek 4.36).

7. Wpisz z klawiatury tekst Neonik.

Ćwiczenie 4.14.

Umieść napis dokładnie na środku arkusza roboczego.

Sposób wykonania:

1. Wykonaj ćwiczenie 4.13 (rysunek 4.37).

Rysunek 4.37. Napis przed umieszczeniem na środku arkusza roboczego

2. Wybierz polecenia Arrange / Align and Distribute.

Rysunek 4.38. Zaznaczenie opcji Center of stage powoduje zaznaczenie obu opcji Center

3. Po wyświetleniu okna Align and Distribute kliknij opcję Center of stage — jednoczesne wyrównanie w pionie i w poziomie (rysunek 4.38).

4. Kliknij widoczny w dolnej części okna Align and Distribute przycisk OK.

Rysunek 4.39. Napis umieszczony pośrodku arkusza roboczego

5. Napis został umieszczony pośrodku arkusza roboczego (rysunek 4.39).

Ćwiczenie 4.15.

Rozciągnij linię życia obiektu.

Sposób wykonania:

1. Wykonaj ćwiczenie 4.14.

Rysunek 4.40. Projekt składa się z jednego obiektu umieszczonego w ramce 1

2. 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).

3. Wciśnij i przytrzymaj lewy przycisk myszy.

Rysunek 4.41. Linia życia obiektu obejmuje klatki 1 i 2

4. Przeciągnij kursor do ramki o numerze 2.

5. 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:

1. Wykonaj ćwiczenie 4.15.

2. Kliknięciem zaznacz linię życia obiektu.

Rysunek 4.42. Wstawianie ramki kluczowej

3. Kliknij ikonę Insert Keyframe (rysunek 4.41).

4. 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

5. 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:

1. Wykonaj ćwiczenie 4.16.

2. Kliknij klatkę o numerze 2 widoczną w linii życia obiektu.

3. Kliknij widoczny w palecie barw kolor Orange. Kolor napisu w klatce 2 zmienił się.

4. Uruchom animację. Napis miga, na przemian jest żółty lub pomarańczowy.

5. Zatrzymaj animację.

Ćwiczenie 4.18.

Wydłuż czas animacji do 10 klatek.

Sposób wykonania:

1. Wykonaj ćwiczenie 4.17.

Rysunek 4.44. Kursor umieszczony nad ramką kluczową w klatce 2

2. Umieść kursor na czarnym kwadracie w klatce 2 (rysunek 4.44).

3. Wciśnij i przytrzymaj lewy przycisk myszy.

4. Przeciągnij kursor do ramki o numerze 10.

Rysunek 4.45. Linia życia rozciągnięta od klatki 1 do 10

5. Zwolnij lewy przycisk myszy. Linia życia obiektu będzie obejmowała klatki od 1 do 10 (rysunek 4.45).

6. 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.

7. Zatrzymaj animację.

Ćwiczenie 4.19.

Wydłuż czas animacji do 40 klatek.

Sposób wykonania:

1. Wykonaj ćwiczenie 4.18.

Rysunek 4.46. Kursor umieszczony nad ramką kluczową w klatce 10

2. Umieść kursor na czarnym kwadracie w klatce 10 (rysunek 4.46).

3. Wciśnij i przytrzymaj lewy przycisk myszy.

4. Przeciągnij kursor do ramki o numerze 40.

5. Zwolnij lewy przycisk myszy. Linia życia obiektu będzie obejmowała klatki od 1 do 40 .

6. 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.

7. Zatrzymaj animację.

2 Część I ♦ Podstawy obsługi systemu WhizBang (Nagłówek strony)

2 K:\Helion\1 Od autora\r04-01.doc

---