Flash 8. Techniki zaawansowane. Klatka po klatce

Wydawnictwo Helionul. Koœciuszki 1c44-100 Gliwicetel. 032 230 98 63e-mail: [email protected]

PRZYK£ADOWY ROZDZIA£PRZYK£ADOWY ROZDZIA£

IDZ DOIDZ DO

ZAMÓW DRUKOWANY KATALOGZAMÓW DRUKOWANY KATALOG

KATALOG KSI¥¯EKKATALOG KSI¥¯EK

TWÓJ KOSZYKTWÓJ KOSZYK

CENNIK I INFORMACJECENNIK I INFORMACJE

ZAMÓW INFORMACJEO NOWOœCIACH

ZAMÓW INFORMACJEO NOWOœCIACH

ZAMÓW CENNIKZAMÓW CENNIK

CZYTELNIACZYTELNIAFRAGMENTY KSI¥¯EK ONLINEFRAGMENTY KSI¥¯EK ONLINE

SPIS TREœCISPIS TREœCI

DODAJ DO KOSZYKADODAJ DO KOSZYKA

KATALOG ONLINEKATALOG ONLINE

Flash 8. Techniki zaawansowane.Klatka po klatce

Wykorzystaj wszystko, co oferuje Ci Flash

• Stwórz z³o¿one animacje• Kontroluj obiekty za pomoc¹ jêzyka ActionScript• Po³¹cz film wykonany we Flashu z baz¹ danych

Macromedia Flash 8 nie jest po prostu programem do tworzenia animacji wektorowej. Zawiera on równie¿ — a mo¿e przede wszystkim — potê¿ny jêzyk programowania ActionScript, wykorzystywany do wielu zadañ zwi¹zanych z tworzeniem interaktywnych prezentacji multimedialnych i witryn WWW. Dopiero u¿ycie ActionScriptu ujawnia prawdziw¹ potêgê Flasha. Dziêki temu w pe³ni obiektowemu jêzykowi mo¿na uzyskaæ efekty niemo¿liwe do osi¹gniêcia za pomoc¹ narzêdzi rysunkowych i animacyjnych Flasha.

W ksi¹¿ce „Flash 8. Techniki zaawansowane. Klatka po klatce” znajdziesz omówienie technik zwi¹zanych ze stosowaniem jêzyka ActionScript. Poznasz podstawy tego jêzyka, a tak¿e dowiesz siê, w jaki sposób pisaæ skrypty i do jakich obiektów je do³¹czaæ. Nauczysz siê kontrolowaæ za jego pomoc¹ elementy graficzne, dŸwiêkowe, tekstowe i nawigacyjne umieszczone w prezentacji. Zdobêdziesz wiedzê na temat mo¿liwoœci po³¹czenia witryn WWW tworzonych we Flashu z zewnêtrznymi plikami, przegl¹dark¹ internetow¹ i serwerem, na którym s¹ one publikowane. Znajdziesz tu tak¿e informacje o wykrywaniu i usuwaniu b³êdów w skryptach.

W ksi¹¿ce poruszone zosta³y nastêpuj¹ce tematy:

• zaawansowane narzêdzia animacyjne,• korzystanie z cyfrowego wideo w filmach Flasha,• elementy jêzyka ActionScript,• panel Actions,• tworzenie i u¿ywanie obiektów,• zarz¹dzanie listwami czasowymi,• obs³uga klawiatury i myszy,• komunikacja z serwerem i przegl¹dark¹,• pobieranie danych z zewn¹trz,• sterowanie elementami graficznymi i dŸwiêkiem.

Odkryj niesamowite mo¿liwoœci Flasha i ActionScriptu!

Autorzy: Russell Chun, H. Paul RobertsonT³umaczenie: Aleksander Lam¿a (wstêp, rozdz. 1 – 7),Rafa³ Joñca (rozdz. 8 – 13, dod. A, B)ISBN: 83-246-0369-7Tytu³ orygina³u: Macromedia Flash 8 Advancedfor Windows and Macintosh: Visual QuickPro GuideFormat: B5, stron: 672

http://helion.pl/view/2547w



http://helion.pl/add/2547w/ppf8tz




mailto:[email protected]

http://helion.pl/view/2547w/ppf8tz.htm

http://www.amazon.com/exec/obidos/ASIN/0321349644/eboinf-20

http://www.amazon.com/exec/obidos/ASIN/0321349644/eboinf-20

Spis treści

5

Spis treści

Wstęp 11

Część I Zaawansowane animacje 17

Rozdział 1. Tworzenie złożonych projektów 19Sposoby automatycznego tworzenia animacji ruchu .............................. 20Sposoby automatycznego tworzenia animacji kształtu ........................... 31Tworzenie efektów specjalnych (tylko w wersji Professional) ............... 38Animowane i złożone maski ................................................................... 42

Rozdział 2. Praca z wideo 55Importowanie wideo do Flasha ............................................................... 56Uaktualnianie i podmienianie filmów ..................................................... 68Dodawanie elementów Flasha do wideo ................................................. 70Rotoskopia ............................................................................................... 74

Część II Podstawy języka ActionScript 77

Rozdział 3. Posługiwanie się językiem ActionScript 79Obiekty i klasy ........................................................................................ 80Metody i właściwości .............................................................................. 81Używanie notacji kropkowej ................................................................... 82Więcej na temat interpunkcji ................................................................... 84Panel Actions ........................................................................................... 85Edytowanie kodu ActionScript ............................................................... 96Używanie obiektów ................................................................................. 99Funkcje .................................................................................................. 113Stosowanie komentarzy ......................................................................... 114

Część III Zarządzanie listwami czasowymi i komunikacja 115

Rozdział 4. Więcej o przyciskach i detektorach zdarzeń 117Zdarzenia i detektory zdarzeń ............................................................... 118Klasa Button .......................................................................................... 118

Spis treści

Spis treści

6

Spis

treśc

i

Niewidoczne przyciski .......................................................................... 123Automatycznie animowane przyciski ................................................... 125Animowane przyciski i symbole klipów filmowych ............................. 126Złożone przyciski .................................................................................. 130Możliwości śledzenia przycisków ......................................................... 135Właściwości przycisku .......................................................................... 138Klip filmowy jako przycisk ................................................................... 144Obsługa klawiatury ............................................................................... 151Obsługa myszy ...................................................................................... 158Menu podręczne .................................................................................... 166Tworzenie powtarzających się akcji z wykorzystaniem zdarzeniaonEnterFrame ........................................................................................ 173Tworzenie powtarzających się akcji z wykorzystaniem setInterval() ... 175Podsumowanie — zdarzenia i detektory zdarzeń .................................. 180

Rozdział 5. Praca z wieloma listwami czasowymi 181Nawigowanie listwami czasowymi klipów filmowych ......................... 182Ścieżki adresowe ................................................................................... 183Bezwzględne i względne ścieżki adresowe ........................................... 187Używanie akcji with do adresowania klipów filmowych ...................... 195Zasięg .................................................................................................... 197Klipy filmowe jako kontenery ............................................................... 202

Rozdział 6. Zarządzanie komunikacją zewnętrzną 207Komunikowanie się przez przeglądarkę internetową ............................ 208Ładowanie zewnętrznych filmów Flasha .............................................. 232Ładowanie zewnętrznych obrazków ..................................................... 246Komunikacja z zewnętrznym wideo ..................................................... 249Stosowanie projektorów i akcji fscommand .......................................... 258Komunikowanie się z drukarką ............................................................. 262Wykrywanie środowiska odtwarzania filmu ......................................... 269Wykrywanie postępu pobierania — programy ładujące ....................... 275

Część IV Przekształcanie grafiki i dźwięku 287

Rozdział 7. Sterowanie klipem filmowym 289Przeciąganie klipu filmowego ............................................................... 290Ustawianie właściwości klipu filmowego ............................................. 294Pobieranie właściwości klipu filmowego .............................................. 297

Spis treści

7

Spis treści

Zmiana koloru klipu filmowego ............................................................ 298Tworzenie oddziaływania kolorów ....................................................... 304Stosowanie filtrów do klipu filmowego ................................................ 307Kontrolowanie kolejności klipów filmowych na stosie ........................ 311Wykrywanie kolizji klipów filmowych ................................................. 315Wyznaczanie krawędzi klipu filmowego .............................................. 320Dynamiczne generowanie klipów filmowych ....................................... 322Dynamiczne usuwanie klipów filmowych ............................................ 329Pobieranie poziomu głębokości klipu filmowego ................................. 330Dynamiczne tworzenie kształtów .......................................................... 334Skalowanie i zniekształcanie klipów filmowych .................................. 353Używanie dynamicznych masek ........................................................... 357Dostosowanie wyglądu wskaźnika myszy ............................................ 361Podstawy animacji za pomocą języka ActionScript .............................. 364

Rozdział 8. Sterowanie grafiką rastrową 371Tworzenie obrazów i dostęp do nich ..................................................... 372Rysowanie na obiekcie BitmapData ...................................................... 380Używanie filtrów do modyfikacji obrazów ........................................... 394Animowanie obrazów rastrowych ......................................................... 401

Rozdział 9. Sterowanie dźwiękiem 415Korzystanie z klasy Sound .................................................................... 416Dołączanie dźwięków ............................................................................ 417Odtwarzanie dźwięków ......................................................................... 419Modyfikacja dźwięków ......................................................................... 422Modyfikacja niezależnych dźwięków ................................................... 424Przekształcanie dźwięków ..................................................................... 427Tworzenie dynamicznego sterowania dźwiękiem ................................. 430Wczytywanie zewnętrznych dźwięków ................................................ 436Odczyt właściwości dźwięku ................................................................ 438Wykrywanie zdarzeń dźwięku .............................................................. 441Wykorzystanie znaczników informacyjnych plików MP3 .................... 443

Część V Praca z informacjami 447

Rozdział 10. Sterowanie przepływem informacji 449Zmienne i wyrażenia ............................................................................. 450Wczytywanie zewnętrznych zmiennych ............................................... 455

Spis treści

8

Spis

treśc

i

Przechowywanie i współdzielenie informacji ....................................... 463Modyfikacja zmiennych ........................................................................ 469Łączenie zmiennych i dynamiczne referencje ....................................... 472Testowanie informacji za pomocą instrukcji warunkowych ................. 475Zapewnianie alternatyw dla warunków ................................................. 480Wiele instrukcji warunkowych — tworzenie rozgałęzień ..................... 482Łączenie warunków z operatorami logicznymi ..................................... 488Pętle ....................................................................................................... 490

Rozdział 11. Sterowanie tekstem 495Wejściowe pole tekstowe ...................................................................... 496Dynamiczne pole tekstowe .................................................................... 498Opcje pól tekstowych ............................................................................ 500Łączenie tekstu ...................................................................................... 503Wyświetlanie tekstu w formacie HTML ............................................... 507Animacja pól tekstowych ...................................................................... 512Właściwości klasy TextField ................................................................. 515Dynamiczne generowanie pól tekstowych ............................................ 526Modyfikacja tekstu w polach tekstowych ............................................. 530Formatowanie pól tekstowych z wykorzystaniem zewnętrznycharkuszy stylów ....................................................................................... 541Modyfikacja zawartości pola tekstowego ............................................. 544Klasa Selection ...................................................................................... 544Sterowanie aktywnością pól tekstowych ............................................... 545Sterowanie zaznaczeniem w polach tekstowych ................................... 548Wykrywanie zmian w polu tekstowym ................................................. 552Klasa String ........................................................................................... 555Analiza ciągów znaków ......................................................................... 556Aranżacja tekstów ................................................................................. 562Modyfikacja tekstów ............................................................................. 567

Rozdział 12. Modyfikacja informacji 569Obliczenia przy użyciu klasy Math ....................................................... 570Wyliczanie kątów za pomocą klasy Math ............................................. 571Wykorzystanie funkcji sinus i cosinus do ruchu pod kątem ................. 579Obliczanie odległości za pomocą klasy Math ....................................... 583Generowanie liczb losowych ................................................................. 588Organizacja informacji przy użyciu tablic ............................................ 591

Spis treści

9

Spis treści

Przechowywanie listy klipów filmowych w tablicy .............................. 598Data i czas ............................................................................................. 603Tworzenie kodu wielokrotnego użytku ................................................. 611

Rozdział 13. Zarządzanie zawartością i usuwanie błędów 621Współdzielenie symboli z biblioteki ..................................................... 622Współdzielenie czcionek ....................................................................... 628Wykorzystanie komponentów ............................................................... 631Dołączanie zewnętrznego kodu ActionScript ....................................... 634Panel Movie Explorer ............................................................................ 636Wyświetlanie wartości zmiennych i obiektów w trakcie odtwarzania .. 641Śledzenie zmiennych w panelu Output ................................................. 644Określanie typu zmiennej ...................................................................... 646Środowisko uruchomieniowe ................................................................ 648Optymalizacja filmu .............................................................................. 656Unikanie typowych błędów ................................................................... 660

Dodatki 661

Dodatek A Przyrostki określające typ obiektu 663

Dodatek B Klawisze i odpowiadające im kody 665

Skorowidz 667

Tworzenie złożonych projektów

19

Rozdział 1. Tworzenie złożonych projektów

Kluczem do tworzenia złożonych animacji weFlashu jest składanie ich z prostszych części. Taksamo jak ruch biegacza można przedstawić jakociąg ruchów jego kończyn, analogicznie projekt weFlashu powinieneś traktować jak zbiór mniejszychelementów. Dzięki rozbiciu jednej skomplikowanejanimacji na części, w każdej z nich możeszzastosować odpowiednią technikę. Takie podejścieupraszcza proces tworzenia animacji, daje Ciwiększą kontrolę nad całym projektem i doskonalszewyniki pracy.

Weźmy na przykład animację głowy odwracającejsię do kamery. Przede wszystkim należy sięzastanowić, czy nie da się uprościć tej animacji,tworząc pojedyncze ruchy. Animowanie całejsekwencji w tym samym czasie może być trudne,jeżeli nie niemożliwe, ponieważ ruchposzczególnych elementów, składających się naruch całej głowy, zmienia się w różny sposób.Kontur głowy może być animowany klatka poklatce, obrazując przejście z widoku profilu dowidoku od przodu. Niektóre elementy twarzymogą być egzemplarzami symboli, które będąodpowiednio ściskane i rozciągane w automatycznejanimacji ruchu, tak aby zgadzały się z obrotemgłowy. Włosy mogą być animowanym kształtem,dzięki czemu można oddać ich opadanie, falowanie,a nawet delikatny efekt zarzucenia w chwili,gdy głowa przestaje się obracać.

Poznanie metod łączenia różnych technik i rozbijaniaanimacji na prostsze elementy pozwala nie tylkorozwiązać trudne problemy z animacją, ale równieżprzekonać Cię do wykorzystywania wielu warstwi tworzenia symboli poszczególnych elementów.Dzięki temu zarządzanie tworzoną animacją i jejpoprawianie będzie znacznie prostsze.

W tym rozdziale opisane zostały różne podejściado tworzenia skomplikowanych animacji poprzezpodział na warstwy oraz łączenie i rozszerzaniepodstawowych możliwości Flasha.

Tworzeniezłożonych projektów 1


Rozdział 1.

20

Rysunek 1.1. Pięć obiektów umieszczonych na scenietak, jak mogłyby wyglądać na początku przewijaniaz prawej do lewej strony. Obiektami mogą byćprzyciski lub proste grafiki

Rysunek 1.2. Zgrupuj obiekty poprzez wybraniepozycji Group z menu Modify

Sposoby automatycznegotworzenia animacji ruchuProces automatycznego tworzenia animacjiruchu (ang. motion tweening) daje możliwośćzmiany zarówno dowolnych właściwościegzemplarza symbolu, takich jak: położenie,rozmiar, obrót, kolor, przezroczystość, jak równieżfiltrów zastosowanych do egzemplarza.Ze względu na swoją wszechstronność omawianatechnika może być zastosowana do różnorodnychzadań związanych z animacją i jest podstawąwiększości projektów we Flashu. Ponieważautomatyczna animacja ruchu w gruncie rzeczybazuje na właściwościach egzemplarza, możnają traktować jako animację egzemplarza. Zmianaegzemplarzy między kolejnymi klatkamikluczowymi wymaga zastosowania automatycznejanimacji ruchu — niezależnie od tego, czy jestwymagane dokonanie faktycznego ruchu nascenie. Traktowanie tej operacji jako animacjiegzemplarza pomoże Ci zadecydować, kiedyużyć automatycznej animacji, kiedy animacjikształtu, a kiedy animacji klatka po klatce.

Tworzenie płynnie zapętlonychanimacji

Zapętlone animacje są istotne z tego względu,że umożliwiają tworzenie efektu ciągłego ruchupoprzez zdefiniowanie jedynie kilku klatekkluczowych. Są one wykorzystywane jakoelementy interfejsu użytkownika, takie jakobracające się przyciski, przewijane menu, jakrównież w cyklicznych ruchach — chodzącychpostaciach, trzepoczących skrzydłach motyla czywirującej planecie. Ważną sprawą przy tworzeniupłynnych animacji jest upewnienie się,czy pierwsza klatka kluczowa jest taka sama(lub prawie taka sama) jak ostatnia klatka.Dzięki temu można uzyskać efekt ciągłości ruchu.

W niniejszym rozdziale omówiony zostaniesposób tworzenia dwóch najczęściej stosowanychtypów zapętlonych animacji — przewijanej grafikii grafiki animowanej po zamkniętej ścieżce ruchu.Przewijana grafika jest typowym efektemstosowanym w elementach interfejsu użytkownika,

takich jak np. pozycje menu przewijane naekranie. Tej techniki można również użyćdo tworzenia animacji umieszczanych w tlei odtwarzanych bez końca, jak na przykładgwieździste niebo za statkiem kosmicznym.

Spos

oby

twor

zeni

a an

imac

ji ru

chu


21

Rysunek 1.3. Utwórz wzór poprzez kopiowaniei wklejanie grupy

Rysunek 1.4. Ta grupa składa się tylko z dwóchobiektów. Umieść tyle jej kopii, aby rozszerzyła siępoza scenę

Rysunek 1.5. Utwórz symbol graficznyz całego wzoru

Rysunek 1.6. Druga powtórzona grupajest przesuwana do miejsca, gdzie oryginalnieznajdowała się pierwsza grupa

Ścieżka ruchu w warstwie wzorcowej dajemożliwość tworzenia płynnego ruchu wzdłuż tejścieżki, od punktu początkowego do końcowego.Jeżeli punkt końcowy pokrywa się z punktempoczątkowym, można uzyskać efekt płynnej pętlii faktycznie zamknąć ścieżkę ruchu.

Aby utworzyć przewijaną grafikę

1. Utwórz elementy, które będą przewijane poscenie i umieść je tak, jak mogłyby wyglądaćw dowolnym momencie przewijania(rysunek 1.1).

2. Zaznacz wszystkie elementy i z menu Modifywybierz pozycję Group (rysunek 1.2).

3. Skopiuj grupę i wklej jej kopię obokoryginalnej grupy, tak aby utworzyć pasekpowtarzających się elementów.

Jeżeli elementy są przewijane na przykładz prawej do lewej strony, drugą grupę umieśćna prawo od pierwszej (rysunek 1.3).

Przewijane elementy są zwykle szersze niżscena, ale jeśli pierwotna grupa elementówjest węższa niż scena, będziesz musiałpowielić ją więcej niż raz, tak aby utworzyćpowtarzający się wzór rozciągający się pozascenę (rysunek 1.4).

4. Zaznacz wszystkie grupy i zamień je nasymbol graficzny (rysunek 1.5).

Na scenie pozostał egzemplarz symbolu,który można będzie poddać animacji ruchu.

5. Utwórz klatkę kluczową w dalszym punkcieścieżki czasowej.

6. Zaznacz egzemplarz na ostatniej klatcekluczowej i przesuń go tak, żeby drugagrupa elementów pokryła się z pierwszą.

Aby podczas przesuwania egzemplarzadopasować jego położenie do poprzedniejpozycji, posłuż się jego obramowaniem(rysunek 1.6).

Sposoby tworzenia anim

acji ruchu

Rozdział 1.

22

7. Utwórz automatyczną animację ruchu międzyklatkami kluczowymi.

8. Wstaw nową klatkę kluczową dokładnieprzed ostatnią, a następnie usuń tę ostatnią(rysunek 1.7).

Dzięki zastosowaniu tej techniki uzyskaszpłynną zapętloną animację, a nie jedynieefekt naprzemiennego odtwarzania dwóchidentycznych klatek — pierwszej i ostatniej.

Aby utworzyć zamkniętą ścieżkę ruchu

1. Utwórz symbol graficzny i umieść jegoegzemplarz na scenie (rysunek 1.8).

2. Kliknij ikonę Add Motion Guide (dodaj ścieżkęruchu) pod listą warstw — utworzysz w tensposób warstwę wzorcową.

Nad pierwszą warstwą pojawi się nowawarstwa wzorcowa, a pierwsza stanie sięwarstwą podporządkowaną (rysunek 1.9).

3. We wzorcowej (górnej) warstwie narysujniewypełnioną elipsę.

4. Wybierz narzędzie zaznaczania (Selection)z włączonym przyciąganiem do obiektów(Snap to Object), złap za punkt zaczepieniaegzemplarza i umieść go na ścieżcew kształcie elipsy (rysunek 1.10).

Rysunek 1.9. Warstwa wzorcowa nad warstwąLayer 1 będzie zawierała ścieżkę ruchu

Rysunek 1.7. Utwórz nową klatkę kluczową(na górze) i usuń ostatnią klatkę (na dole)

Rysunek 1.8. Egzemplarz symbolu graficznegojest umieszczany na scenie w celu utworzeniaautomatycznej animacji ruchu po ścieżce

Rysunek 1.10. Punkt zaczepienia egzemplarzaprzedstawiającego kulę ziemską leży na ścieżceruchu

Spos

oby

twor

zeni

a an

imac

ji ru

chu


23

Rysunek 1.11. Położenie kuli ziemskiej w 1. i 18.klatce kluczowej jest takie samo

Rysunek 1.12. Punkt zaczepienia kuli ziemskiejw środkowej klatce kluczowej jest położonypo przeciwnej stronie elipsy

Rysunek 1.13. Kula ziemska odbija się tami z powrotem po tym samym odcinku elipsy

5. Do obu warstw dodaj klatki i utwórznową klatkę kluczową w ostatniej klatcepodporządkowanej (dolnej) warstwy.

Aby otrzymać zapętloną animację, pierwszai ostatnia klatka kluczowa muszą byćjednakowe (rysunek 1.11).

6. Zaznacz środkową klatkę w podporządkowanej(dolnej) warstwie i wstaw nową klatkękluczową. W tym miejscu egzemplarzpowinien znajdować się po przeciwnejstronie elipsy (rysunek 1.12).

7. Zaznacz wszystkie klatki pomiędzy klatkamikluczowymi. W panelu Properties wybierzMotion Tween.

Egzemplarz przemieszcza się teraz wzdłużeliptycznej ścieżki, ale zamiast wykonywaćpełny obrót, powraca tym samym odcinkiemelipsy (rysunek 1.13).

8. Chwyć egzemplarz w ostatniej klatcepodporządkowanej (dolnej) warstwy i przesuńgo w pobliże egzemplarza ze środkowej klatkikluczowej, uważając, aby punkt zaczepieniaznajdował się na ścieżce (rysunek 1.14).

Rysunek 1.14. Trzy klatki kluczowe kuli ziemskiej.Pierwszy egzemplarz jest ustawiony bliżej środkowegoegzemplarza na górnym odcinku elipsy, natomiastostatni jest umieszczony bliżej środkowego egzemplarzana dolnym odcinku elipsy


acji ruchu

Rozdział 1.

24

Flash automatycznie animuje dwaegzemplarze, wybierając najkrótszą ścieżkę.Skracając odległość między dwiema ostatnimiklatkami na dolnym odcinku elipsy, zmuszaszprogram do użycia właśnie tego odcinka.

Teraz egzemplarz przemieszcza się wzdłużobu stron elipsy (rysunek 1.15).

Wskazówka

Ten sam efekt zapętlenia można uzyskaćpoprzez usunięcie niewielkiego fragmentuścieżki. Tworząc przerwę, w rzeczywistościuzyskujesz otwartą ścieżkę z punktempoczątkowym i końcowym, które definiująruch egzemplarza (rysunek 1.16).

Stosowanie wielu warstwpodporządkowanych

Jedna warstwa wzorcowa może oddziaływaćna więcej niż jedną warstwę podporządkowaną,pozwalając na tworzenie wielu animacji ruchukorzystających z tej samej ścieżki. Takiepodejście jest dobre wszędzie tam, gdziekonieczne jest tworzenie skomplikowanychanimacji wymagających wielu obiektówprzemieszczających się w tym samym kierunku.Przykładem może być ruch maszerującychżołnierzy, krwinki przepływające tętnicą,wystrzeliwane kule czy uciekające stado bydła.Mimo że poszczególne egzemplarze mogą sięróżnić, dzięki zastosowaniu jednej warstwywzorcowej masz kontrolę nad głównymkierunkiem ich ruchu.

Dla przykładu — kilka powiewających liści możebyć animowanych z wykorzystaniem jednejwarstwy wzorcowej. Warstwa ta określa ogólnykierunek wiatru, natomiast ruch poszczególnychliści może się różnić poprzez wprowadzenieprzesunięć w osobnych warstwachpodporządkowanych. Aby zmienić zachowaniewszystkich liści, wystarczy zmodyfikować ścieżkęw warstwie wzorcowej. Takie stosowaniepojedynczej ścieżki do sterowania wielomawarstwami jest przykładem na to, że możnabudować skomplikowane animacje (w tym

Rysunek 1.15. Kula ziemska porusza się wokółzamkniętej ścieżki

Rysunek 1.16. Mała przerwa tworzy początkowyi końcowy punkt ścieżki ruchu

Rysunek 1.17. Zaznaczenie warstwypodporządkowanej (Layer 1) oraz wstawienienowej warstwy automatycznie przekształca nowąwarstwę w warstwę podporządkowaną (Layer 3)

Spos

oby

twor

zeni

a an

imac

ji ru

chu


25

Rysunek 1.18. Zwykła warstwa (Layer 3) możezostać przekształcona w warstwę podporządkowanąpoprzez przeciągnięcie pod warstwę wzorcową

Rysunek 1.19. Egzemplarz umieszczony na sceniew warstwie leaf 2

Rysunek 1.20. Zaznacz egzemplarz w drugiejwarstwie podporządkowanej i z przybornikawybierz narzędzie Free Transform

przypadku są to wirujące liście) z bardzoprostych części (jedna warstwa wzorcowai jeden symbol liścia).

Można zwiększyć złożoność projektu poprzezzastosowanie egzemplarzy animowanych symboligraficznych poruszających się po ścieżcew warstwie wzorcowej. Zapętlona animacjawewnątrz symbolu graficznego powodujelokalny ruch, który wciąż podąża za ścieżkąw warstwie wzorcowej na głównej listwieczasowej.

Aby przypisać drugą warstwępodporządkowaną do warstwy wzorcowej

1. Wybierz pierwszą warstwę podporządkowanąi kliknij ikonę Insert Layer (wstaw warstwę).

Nad pierwszą warstwą podporządkowanąpojawi się druga warstwa (rysunek 1.17).

lub

1. Istniejącą zwykłą warstwę przeciągnijponiżej warstwy wzorcowej.

Zwykła warstwa stanie się warstwąpodporządkowaną (rysunek 1.18).

Aby wprowadzić przesunięcie w drugiejwarstwie podporządkowanej

1. Utwórz drugą warstwę podporządkowaną,jak opisano w poprzednim ćwiczeniu,i przeciągnij na scenę egzemplarz, którychcesz animować (rysunek 1.19).

2. Zaznacz egzemplarz w drugiej warstwiepodporządkowanej i z przybornika wybierznarzędzie Free Transform (dowolneprzekształcenie).

Wokół egzemplarza pojawią się uchwyty,a w środku ukaże się białe kółko symbolizującebieżące położenie punktu zaczepienia(rysunek 1.20).


acji ruchu

Rozdział 1.

26

3. Przeciągnij punkt zaczepienia w nowemiejsce.

Punkt zaczepiania egzemplarza może byćumieszczony w dowolnym miejscu, nawetpoza granicami uchwytów narzędzia FreeTransform.

Nowy punkt zaczepienia jest ustawionyw miejscu, w którym go umieściłeś(rysunek 1.21).

4. Aby zakończyć pracę z narzędziem FreeTransform, wybierz narzędzie zaznaczania(Selection) i upewnij się, że jest włączoneprzyciąganie do obiektów (Snap to Objects).

5. Chwyć egzemplarz za jego nowy punktzaczepienia i umieść go w początkowympunkcie ścieżki w warstwie wzorcowej(rysunek 1.22).

6. Wstaw nową klatkę kluczową do ostatniejklatki.

Nowo utworzony egzemplarz w ostatniejklatce kluczowej ma tak samo umieszczonypunkt zaczepienia jak edytowany egzemplarz.

7. Przypisz egzemplarz w ostatniej klatcekluczowej do końcowego punktu ścieżkiw warstwie wzorcowej i utwórz automatycznąanimację ruchu pomiędzy dwiema klatkamikluczowymi.

Automatyczna animacja w drugiej warstwiepodporządkowanej podąża tą samą ścieżkąco animacja w pierwszej warstwie. Jednaknowy punkt zaczepienia egzemplarzaw drugiej warstwie wprowadza przesunięcieruchu (rysunek 1.23).

Rysunek 1.21. Zmień położenie punktu zaczepieniaegzemplarza poprzez przesunięcie białego kółka

Rysunek 1.22. Punkt zaczepienia liścia(zaznaczony na rysunku) jest przypisany do ścieżki

Rysunek 1.23. Dwie automatyczne animacjeporuszają się po tej samej ścieżce ruchu. Drugi liśćjest przesunięty dzięki przemieszczeniu jego punktuzaczepienia

Spos

oby

twor

zeni

a an

imac

ji ru

chu


27

Rysunek 1.24. Liść umieszczony w warstwie leaf 2zacznie się przemieszczać dopiero wtedy, gdy liśćw warstwie leaf 1 będzie już w ruchu

Rysunek 1.25. Ostatnią klatkę kluczową w warstwieleaf 1 przesuń bliżej pierwszej klatki kluczowej

Aby zmienić zgranie w czasiew drugiej warstwie podporządkowanej

1. Wykorzystaj przykład z poprzedniegoćwiczenia. Pierwszą klatkę kluczową drugiejwarstwy podporządkowanej przenieś w prawona listwie czasowej, czyli do późniejszegopunktu w czasie.

Automatyczna animacja dla tej warstwypodporządkowanej zacznie się później niżdla pierwszej warstwy, ale obie animacjezakończą się w tym samym czasie(rysunek 1.24).

2. Ostatnią klatkę kluczową pierwszej warstwypodporządkowanej przesuń w lewo na listwieczasowej, czyli do wcześniejszego punktuw czasie.

Animacje poruszające się po ścieżce z warstwywzorcowej są rozłożone w czasie, tak że nienakładają się na siebie (rysunek 1.25).

3. Popraw zgranie w czasie animacji ruchupoprzez przesuwanie pierwszej i ostatniejklatki kluczowej w obu warstwachpodporządkowanych.

Wskazówka

Możesz urozmaicać animację w drugiejwarstwie podporządkowanej poprzezumieszczanie egzemplarzy w dowolnymmiejscu wzdłuż ścieżki z warstwy wzorcowej.Animacja będzie działała nawet wtedy,gdy egzemplarz nie będzie leżał dokładniena początku lub na końcu ścieżki.


acji ruchu

Rozdział 1.

28

Aby dodać lokalne zróżnicowaniado animacji z wieloma warstwamipodporządkowanymi

1. Przejdź do trybu edycji symbolu graficznego,który wykorzystujesz w animacji po ścieżceruchu.

2. Zaznacz zawartość symbolu i przekształć gow symbol graficzny.

W ten sposób utworzyłeś symbol graficznywewnątrz innego symbolu graficznego,dzięki czemu możesz tworzyć automatyczneanimacje ruchu w obrębie pierwotnegosymbolu.

3. Utwórz zapętloną automatyczną animacjęruchu (rysunek 1.26).

W tym typie animacji koniec jest równoważnyz początkiem.

4. Wyjdź z trybu edycji symbolu i odtwórz film.Zwróć uwagę na to, w jaki sposób animacjasymbolu graficznego połączyła się z animacjąruchu na głównej scenie (rysunek 1.27).

Wskazówki

Aby zróżnicować sposób odtwarzania animacjiegzemplarzy w panelu Properties, przestawopcję animacji i parametr First (pierwszaklatka) (rysunek 1.28). Jeżeli poszczególnepętle animacji rozpoczynają się w różnychklatkach, możesz uniknąć w ten sposóbich wzajemnego zsynchronizowania(rysunek 1.29).

Jeżeli na tym etapie obrócisz egzemplarze,możesz uzyskać bardziej złożone, ciekawszei pozornie losowe ruchy. Poeksperymentujz obracaniem egzemplarzy poruszających siępo ścieżce.

Rysunek 1.26. Animowany graficzny symbol liściaporuszający się w górę i w dół

Rysunek 1.27. Odtwórz film i zobacz, w jaki sposóbliście podążają wzdłuż ścieżki ruchu, wykonującjednocześnie własną animację

Rysunek 1.28. Parametr First jest ustawiony na 10,co oznacza, że pętla animacji liścia rozpocznie sięod klatki 10. W menu rozwijanym opcji animacji sąjeszcze pozycje Play Ones (odtwórz jeden raz) i SingleFrame (jedna klatka)

Spos

oby

twor

zeni

a an

imac

ji ru

chu


29

Rysunek 1.29. Trzy egzemplarze tego samegosymbolu graficznego z ustawionymi różnymi klatkamipoczątku animacji. Pętla animacji motyla z lewejstrony rozpoczyna się w 1. klatce — jego skrzydłazaczynają się zamykać. Środkowy motyl zaczyna byćanimowany w 4. klatce — jego skrzydła zamykają się.Pętla animacji motyla z prawej strony rozpoczynasię w 10. klatce — jego skrzydła otwierają się.

Rysunek 1.30. Wynikiem rozbicia bloku tekstu(na górze) są obiekty z poszczególnymi literami(na dole)

Animowanie tytułów

Na stronach internetowych wykonanych weFlashu bardzo często można się spotkaćz animowanymi tytułami i innymi elementamitekstowymi, które zanim trafią na właściwemiejsce, kręcą się, spadają i obracają. Tego typuefekty można uzyskać przez zastosowanie kilkutechnik. Na przykład polecenie Break Apart(rozbij) wykonane na bloku tekstowym rozbijatekst na pojedyncze znaki, zachowując przy tymmożliwość jego edytowania. Polecenie to dajemożliwość utworzenia w prosty sposób odrębnychpól tekstowych z liter składających się na słowolub tytuł. Następnie możesz użyć poleceniaDistribute to Layers (rozmieść w warstwach), któreumieści każdy znak w osobnej warstwie. Pozostajetylko dodać automatyczną animację ruchu.

Rozpoczynając pracę z automatycznymianimacjami pojedynczych liter lub słów, dobrzejest zacząć tworzyć te animacje „od końca”, czyliod finalnego efektu. Utwórz ostatnią klatkękluczową, na której wszystkie znaki będą sięznajdowały w docelowym położeniu. Następniew pierwszej klatce możesz zmienić położenieznaków i zastosować dowolne przekształcenia,będąc pewnym, że na końcu animacji wszystkieznaki znajdą się na właściwym miejscu.

Aby animować litery tytułu

1. Zaznacz narzędzie Text i upewnij się,że w panelu Properties jest ustawionystatyczny tekst (Static Text).

2. Na scenie wpisz tekst tytułu, który chceszanimować.

3. Z menu Modify wybierz Break Apart(Ctrl+B w Windows, Cmd+B w Mac OS).

Statyczny tekst tytułu jest zamienianyna pojedyncze znaki (rysunek 1.30).


acji ruchu

Rozdział 1.

30

4. Z menu Modify/Timeline wybierz Distributeto Layers (Ctrl+Shift+D w Windows,Cmd+Shift+D w Mac OS).

Każdy zaznaczony element na scenie jestumieszczany w osobnej warstwie poniżejbieżącej warstwy. W tym przypadku nowotworzone warstwy są automatycznie nazywaneposzczególnymi literami (rysunek 1.31).

5. Dla każdej warstwy utwórz klatki kluczowew dalszym punkcie listwy czasowej.

6. W pierwszej klatce kluczowej każdej warstwydowolnie poprzestawiaj i poprzekształcajlitery.

7. Zaznacz wszystkie klatki na listwie czasoweji utwórz automatyczną animację ruchu.

Animowane są wszystkie elementy tekstu,łącząc się na końcu animacji we właściwytytuł (rysunek 1.32).

Rysunek 1.31. Polecenie Distribute to Layersrozmieszcza zaznaczone elementy w osobnychwarstwach

Rysunek 1.32. Spadające litery układają sięna swoich miejscach w ostatniej klatce kluczowej

Spos

oby

twor

zeni

a an

imac

ji ru

chu


31

Rysunek 1.33. Wynik próby przekształcenia słowa„flash” w słowo „shape” za jednym razem w jednejwarstwie. Zwróć uwagę na rozpad litery między „s”i „p” oraz na dziurę, która pojawiła się międzyliterami „h” i „e”

Sposoby automatycznegotworzenia animacji kształtuAutomatyczna animacja kształtu (ang. shapetweening) jest techniką umożliwiającąprzeprowadzanie amorficznych zmian wyglądu,niemożliwych do osiągnięcia przekształceniamiegzemplarza, takimi jak: obrót, skalowanie czywykrzywianie. Automatycznej animacji kształtumogą podlegać takie cechy egzemplarza jak:wypełnienie, zarys krawędzi, gradienti przezroczystość.

Flash tworzy animację kształtu w najbardziejwydajny i bezpośredni sposób. Niekiedy jednakwyniki działania tej metody są nieprzewidywalne— tworzone są pokrywające się kształty lubw niektórych miejscach pojawiają się dziury,które następnie się łączą (rysunek 1.33). Takieniepożądane efekty pojawiają się zwykle w efekciezastosowania klatek kluczowych zawierającychzbyt skomplikowane kształty, które nie mogąbyć równocześnie prawidłowo animowane.

Podobnie jak w przypadku animacji ruchu,tutaj również lepsze wyniki uzyska się dziękiuproszczeniu skomplikowanych animacjikształtu przez rozbicie ich na prostsze częściumieszczone w osobnych warstwach. Wskaźnikizmiany kształtu (ang. shape hints) umożliwiająokreślenie odpowiadających sobie punktówdwóch kształtów. Skomplikowaną animacjęmożna usprawnić poprzez wprowadzeniepośrednich klatek kluczowych. Dodaje się w tensposób stany przejściowe, dzięki którym łatwiejjest zarządzać kolejnymi etapami animacji.

Używanie wskaźnikówzmiany kształtu

Wskaźniki zmiany kształtu pozwalająprzyporządkować punkty jednego kształtu doodpowiadających im punktów drugiego kształtu.Dzięki umieszczeniu wielu takich wskaźnikówzyskujesz większą kontrolę nad sposobemanimacji kształtów.


acji kształtu

Rozdział 1.

32

Aby dodać wskaźnik zmiany kształtu

1. Zaznacz pierwszą klatkę kluczowąautomatycznej animacji kształtu i z menuModify/Shape wybierz polecenie Add ShapeHint (dodaj wskaźnik zmiany kształtu)(Ctrl+Shift+H w Windows, Cmd+Shift+Hw Mac OS) (rysunek 1.34).

W środku kształtu pojawi się czerwone kółkoz literą (rysunek 1.35).

2. Przesuń pierwszy wskaźnik zmiany kształtudo wybranego punktu w obrębie kształtu.

Upewnij się, że dla narzędzia zaznaczania(Selection) włączone jest przyciąganie doobiektów (Snap to Objects). Jest to konieczne,aby zaznaczenie było przyciąganedo wierzchołków i krawędzi.

3. Zaznacz ostatnią klatkę kluczowąautomatycznej animacji kształtu i przesuńpasującą literę w kółku do odpowiedniegopunktu końcowego kształtu.

Przeniesiony wskaźnik zmiany kształtuzmieni kolor na zielony, natomiast wskaźnikna pierwszym kształcie — na żółty, co oznacza,że zostały prawidłowo umieszczone(rysunek 1.36).

4. Dodaj więcej wskaźników zmiany kształtu,aż uzyskasz zadowalający wynik animacjikształtu (rysunek 1.37). Maksymalnie możeszumieścić 26 wskaźników.

Wskazówki

Wskaźniki zmiany kształtu umieszczaj zgodniez ruchem wskazówek zegara lub w odwrotnymkierunku. Flash łatwiej interpretujerozmieszczenie sekwencyjne niż chaotyczne.

Wskaźniki zmiany kształtu muszą byćumieszczane na krawędziach albo w rogachkształtu. Jeśli umieścisz wskaźnik wewnątrzlub na zewnątrz kształtu, oryginalnyi odpowiadający mu wskaźnik zmiany kształtupozostaną podświetlone na czerwono,a program je zignoruje.

Rysunek 1.34. Zaznacz pierwszą klatkę kluczowąautomatycznej animacji kształtu i z menu Modify/Shapewybierz polecenie Add Shape Hint

Rysunek 1.35. Pierwszy wskaźnik zmiany kształtupojawia się w środku sceny w pierwszej klatcekluczowej

Rysunek 1.36. Pierwszy wskaźnik zmiany kształtuw pierwszej klatce kluczowej (na górze)i odpowiadający mu wskaźnik w ostatniej klatce(na dole)

Spos

oby

twor

zeni

a an

imac

ji ks

ztał

tu


33

Rysunek 1.37. Zmiana litery „T” w „I”z zastosowaniem wskaźników zmiany kształtu(z lewej) i bez ich zastosowania (po prawej)

Rysunek 1.38. Skomplikowane animacje ruchuwymagają zastosowania kilku pośrednich klatekkluczowych

Aby obejrzeć animację bez wskaźnikówzmiany kształtu, z menu View wybierz ShowShape Hints (wyświetl wskaźniki zmianykształtu) (Ctrl+Alt+H w Windows,Cmd+Option+H w Mac OS). Zaznaczenieopcji Show Shape Hints zostanie usunięte,a wskaźniki zmiany kształtu zostaną ukryte.

Jeśli przesuniesz całą animację kształtuza pomocą polecenia Edit Multiple Frames(edytuj wiele klatek), będziesz musiałna nowo rozmieścić wszystkie wskaźnikizmiany kształtu. Niestety, nie ma możliwościjednoczesnego przesunięcia wszystkichwskaźników zmiany kształtu.

Aby usunąć wskaźnik zmiany kształtu

1. Przeciągnij wskaźnik zmiany kształtu pozascenę.

Odpowiadający mu wskaźnik w drugiej klatcekluczowej zostanie automatycznie usunięty.

Aby usunąć wszystkie wskaźnikizmiany kształtu

1. Z menu Modify/Shape wybierz polecenieRemove All Hints (usuń wszystkie wskaźnikizmiany kształtu).

Stosowanie pośrednich klatekkluczowych

Dodanie pośrednich klatek kluczowych możepomóc przy skomplikowanych animacjachkształtu przez wprowadzenie stanówprzejściowych tworzących mniejsze zmiany,którymi łatwiej jest zarządzać. Pomyśl o tymprocesie jak o automatycznej animacji ruchu.Wyobraź sobie, że masz wykonać animację piłkirozpoczynającej swój ruch w lewym górnymrogu sceny. Następnie piłka ma przelecieć doprawego górnego rogu, dalej do lewego dolnegoi ostatecznie ma trafić do prawego dolnego rogu(rysunek 1.38). Nie możesz się spodziewać, żeFlash prawidłowo wykona tę animację, jeżeliutworzysz tylko dwie klatki kluczowe — pierwsząz piłką w lewym górnym rogu sceny, drugą z piłkąw prawym dolnym rogu. Musisz wstawić


acji kształtu

Rozdział 1.

34

pośrednie klatki, tak aby program mógł wykonaćten ruch w kilku etapach. Takie same zasadydotyczą automatycznej animacji kształtu.Gwałtowną zmianę między dwoma kształtamilepiej jest zrealizować, używając prostszychpośrednich klatek kluczowych.

Czasami dodanie pośrednich klatek kluczowychnie wystarcza i aby polepszyć efekt animacji,musisz użyć wskaźników zmiany kształtu.W ćwiczeniu „Aby użyć wskaźników zmianykształtu w wielu klatkach kluczowych” opisanotrzy sposoby na dodanie tych wskaźników doanimacji kształtu przeprowadzanejz wykorzystaniem klatek pośrednich.

Aby utworzyć pośrednią klatkę kluczową

1. Zobacz, jak nieładnie wygląda standardowaanimacja kształtu przy przejściu litery „Z”w literę „S” (rysunek 1.39).

2. Umieść klatkę kluczową w pośrednim punkcieanimacji.

3. W nowo utworzonej klatce kluczowej wstawkształt, który będzie pełnił rolę pomostudo docelowego kształtu (rysunek 1.40).

Teraz zmiany kształtu w animacji są mniejsze,dzięki czemu jej wynik jest bardziej płynny(rysunek 1.41).

Aby użyć wskaźników zmiany kształtuw wielu klatkach kluczowych

1. Zaznacz pośrednią klatkę kluczową i dodajwskaźniki zmiany kształtu, tak jakby to byłapierwsza klatka kluczowa.

Zwróć uwagę na przyporządkowaniewskaźników zmiany kształtu do animacji,obserwując odpowiadające im kolory. Nażółto zaznaczone są wskaźniki początkowejklatki kluczowej, na zielono — ostatniej(rysunek 1.42).

lub

1. Umieść nową klatkę kluczową tak, byprzylegała do drugiej klatki, i rozpocznijdodawanie wskaźników zmiany kształtu.

Rysunek 1.39. Przekształcenie litery „Z” w „S”w jednym podejściu powoduje odwracaniei krzyżowanie się ze sobą kształtów

Rysunek 1.40. Pośredni kształt

Rysunek 1.41. Przejście litery „Z” w kształt pośrednijest proste, a późniejsza zmiana w „S” jest płynna

Rysunek 1.42. Ta pośrednia klatka kluczowa zawieradwie grupy wskaźników zmiany kształtu. Niektóre sąkońcowymi wskaźnikami pierwszej animacji, a innesą początkowymi wskaźnikami drugiej animacji

Nowa klatka kluczowa pozwoli dodawaćwskaźniki zmiany kształtu bez obawyo nakładanie się wskaźników z poprzedniejanimacji (rysunek 1.43).

Spos

oby

twor

zeni

a an

imac

ji ks

ztał

tu


35

Rysunek 1.43.Wskaźnik zmiany kształtu w nowejklatce kluczowej

Rysunek 1.44. Warstwa Layer 2 przechowujeoddzielnie początkowe wskaźniki zmiany kształtu dlaklatek 7 – 15 oraz końcowe wskaźniki dla klatek 1 – 7

lub

1. Utwórz nową warstwę, która powiela pośredniąi ostatnią klatkę kluczową animacji kształtui rozpocznij dodawanie animacji kształtóww tej warstwie.

Powielając pośrednią klatkę kluczową,zachowujesz wskaźniki zmiany kształtuw osobnych warstwach, co również zapobieganakładaniu się wskaźników (rysunek 1.44).

Wykorzystanie warstwdo uproszczenia zmian kształtu

Technika automatycznej animacji kształtu pozwalana tworzenie nawet bardzo skomplikowanychanimacji z wykorzystaniem tylko jednej warstwy.Takie podejście może jednak prowadzić donieprzewidywalnych efektów. Lepiej jest używaćwielu warstw, by oddzielić od siebie złożonekształty, i tworzyć wiele prostszych animacjikształtu.

W animacji przedstawiającej na przykład zmianęlitery „F” w „D” na krawędziach pierwszegokształtu pojawia się dziura pochodzącaz ostatniego kształtu (rysunek 1.45). Oddzielającdziurę w literze „D” i traktując ją jako białykształt, można kontrolować moment i sposób jejpojawienia się. Wstaw nową warstwę i utwórzdrugą animację dla dziury. Połączenie tych dwóchanimacji da doskonalsze efekty (rysunek 1.46).


acji kształtu

Rysunek 1.45. W trakcie zmianylitery „F” w „D” na obrzeżachpierwszego kształtu pojawia siędziura Rysunek 1.46. Dziurę

oraz wypełniony kształt umieszczonow osobnych warstwach

Rozdział 1.

36

Stosowanie automatycznych animacjikształtu na przejściach gradientu

Automatyczną animację kształtu należy traktowaćjako technikę mającą większe możliwości niż tylkoprzeprowadzającą morfing czy przekształcającąamorficzne kształty. Przecież tego typu animacjamoże być stosowana na dowolnych cechachkształtu, takich jak np.: grubość obramowania,kolor linii i wypełnienia, włączając w toprzezroczystość i gradient. Dzięki wykorzystaniuanimacji koloru gradientu możesz tworzyćinteresujące efekty. Używając na przykładnarzędzia Gradient Transform (przekształceniegradientu), możesz zmieniać sposób zastosowaniagradientu na danym wypełnieniu, czego rezultatemmoże być przemieszczanie gradientu wzdłużsceny. Przez połączenie tej funkcji ze zmianąkonturów można uzyskać efekty przypominającechmury lub kłęby dymu.

Aby utworzyć przejście gradientuz wykorzystaniem automatycznejanimacji kształtu

1. Wybierz narzędzie Rectangle (prostokąt)i narysuj duży prostokąt na scenie.

2. Wypełnij kształt radialnym lub liniowymgradientem.

3. Wybierz narzędzie Gradient Transformi kliknij prostokąt znajdujący się na scenie.

Na gradiencie pojawią się uchwytynarzędzia Gradient Transform.

4. Na potrzeby tego ćwiczenia przesuń uchwytzmiany środkowego punktu gradientu w lewąstronę prostokąta (rysunek 1.47).

Rysunek 1.47. Użyj narzędzia Gradient Transformz przybornika, by przesunąć środkowy punktwypełnienia gradientem do lewej strony prostokąta

Rysunek 1.48. W ostatniej klatce kluczowej użyjnarzędzia Gradient Transform, aby zmienić sposóbwypełnienia prostokąta liniowym gradientem. W tymprzykładzie gradient liniowy jest przesunięty w prawo,pochylony i zwężony

Spos

oby

twor

zeni

a an

imac

ji ks

ztał

tu


37

Rysunek 1.49. Ostateczna animacja kształtupowoduje przekręcenie, rozszerzenie i przemieszczeniegradientu wzdłuż prostokąta

5. Utwórz nową klatkę kluczową w dalszympunkcie listwy czasowej.

6. Wybierz ostatnią klatkę kluczową i kliknijprostokąt z włączonym narzędziem GradientTransform.

Na gradiencie w ostatniej klatce kluczowejpojawią się uchwyty narzędzia GradientTransform.

7. Uchwyt zmiany środkowego punktu gradientuprzesuń na prawą stronę prostokąta orazdowolnie zmień obrót, skalę i kąt gradientu.

Obie klatki kluczowe zawierają ten samprostokątny kształt, ale różnią się sposobemwypełnienia gradientem (rysunek 1.48).

8. Zaznacz pierwszą klatkę kluczową i w paneluProperties wybierz opcję Shape Tween.

Flash animuje przekształcenie gradientuz pierwszej do ostatniej klatki kluczowej.Rzeczywisty kontur prostokąta pozostajebez zmian.

9. Usuń obramowanie prostokąta.

Gradient przemieszcza się od lewej do prawejstrony (rysunek 1.49).

Wskazówka

Nie jest możliwe zastosowanie automatycznejanimacji kształtu pomiędzy dwoma typamigradientów. Oznacza to, że nie możnautworzyć animacji przechodzącej z gradienturadialnego na liniowy i na odwrót.


acji kształtu

Rozdział 1.

38

Rysunek 1.50. Panel Filters może być wykorzystanydo dodania specjalnych efektów graficznych do klipówfilmowych, przycisków i tekstu

Rysunek 1.51.W rozwijanym menuAdd Filter wybierzfiltr Blur

Tworzenie efektówspecjalnych(tylko w wersji Professional)Ponieważ narzędzia rysujące we Flashu są opartena wektorach, nie można tu mówić o klasycznychefektach specjalnych, takich jak poruszenie, któresą kojarzone z aplikacjami pracującymi z grafikąbitmapową, np. Adobe Photoshop i MacromediaFireworks. Ale dzięki nowym filtrom dostępnymw wersji Professional tego typu efekty specjalnemożna tworzyć bezpośrednio we Flashu. Dziękitej technice tworzone filmy mogą być znaczniebogatsze, wychodząc poza proste płaskie kształtyi gradienty rysunków wektorowych.

Poniższe ćwiczenia demonstrują efekt przejściaod rozmycia do pełnej ostrości i efekt poruszenia.Efekt rozmycia (ang. blur) pojawia się wtedy,gdy obiektyw kamery ma źle ustawioną ostrość.Efekt ten jest przydatny szczególnie przytworzeniu przejść — możesz animowaćprzejście między obrazem rozmytym i ostrym.

Efekt poruszenia (ang. motion blur) jestartefaktem kamery, który powstaje wtedy, gdyprędkość filmowanego obiektu jest większa niższybkość przechwytywania obrazu przez kamerę.Poruszony obraz zobaczysz tam, gdzie powinienznajdować się poruszający się obiekt. Często takieobrazy się nakładają, tworząc w ten sposób smugę,która ciągnie się za szybko poruszającym sięobiektem. W kamerach ten efekt powstajeautomatycznie i niejako niechcący, natomiast weFlashu sam musisz go dodać.

Aby utworzyć efekt przejścia od rozmyciado pełnej ostrości

1. Za pomocą narzędzi rysujących lub poprzezzaimportowanie obrazu na scenę utwórz obraz,który chcesz rozmyć.

2. Przekształć obraz w symbol klipu filmowego.

We Flashu filtry mogą być dodawane jedyniedo symbolu klipu filmowego, symboluprzycisku lub tekstu.

Twor

zeni

e ef

ektó

w s

pecj

alny

ch


39

Rysunek 1.52. Właściwości filtra umożliwiajądopasowanie stylu filtra do Twojego projektu. Każdyfiltr posiada specyficzne właściwości, które możeszdowolnie zmieniać

Rysunek 1.53. Efektem jest przejście od rozmyciado ostrości

3. Utwórz nową klatkę kluczową w dalszympunkcie listwy czasowej.

Będzie to egzemplarz zawierający ostryobraz, będący zakończeniem animacji.

4. Zaznacz egzemplarz w pierwszej klatce.

5. Otwórz panel Filters (filtry) (rysunek 1.50).

6. Kliknij przycisk Add Filter (dodaj filtr) (+)i wybierz filtr Blur (rozmycie) (rysunek 1.51).

7. Stwórz pożądany efekt rozmycia przezustawienie właściwości Blur X, Blur Yi Quality (rysunek 1.52).

Właściwość Blur X wskazuje, w jakim stopniuobiekt powinien być rozmyty w osi X(poziomej). Właściwość Blur Y służy do tegosamego, ale odnosi się do osi Y (pionowej).Powyższe wartości są niezależne, tak więcmożna tworzyć rozmycia tylko w jednymkierunku. Właściwość Quality (jakość)reguluje stopień wygładzenia rozmycia.Wyższe wartości tego parametru powodująwiększe wygładzenie, co przybliża efektdo wyniku działania filtru rozmywającegow Photoshopie. Niestety, jest to dużeobciążenie dla Flash Playera, więc film możesię odtwarzać wolniej.

8. Zaznacz klatkę kluczową w pierwszej klatcei w panelu Properties wybierz opcję MotionTween.

Program stworzy animację, która wyświetliprzejście od rozmytego do ostrego obrazu(rysunek 1.53).

Wskazówki

Spróbuj trochę powiększyć początkowyrozmiar rozmywanego obrazu, co da delikatnyefekt najazdu kamery. Uwydatni to dodatkowoefekt przejścia od rozmycia do ostrości.

W celu utworzenia efektu przejścia w tensam sposób możesz wykorzystać dowolnyfiltr. Poeksperymentuj z licznymi dostępnymifiltrami, dopasowując efekt do filmu.

Tworzenie efektów

specjalnych

Rozdział 1.

40

Aby stworzyć efekt poruszenia

1. Podobnie jak w poprzednim ćwiczeniu utwórzobraz, do którego chcesz dodać poruszeniei przekształć go w symbol klipu filmowego(rysunek 1.54).

2. Otwórz panel Filters i dodaj filtr rozmyciado egzemplarza symbolu na scenie.

3. Zmień właściwości rozmycia Blur X i Blur Y,aby ustalić kierunek, w którym obraz będziesię poruszał.

Wartość rozmycia w kierunku ruchu ustaw naokoło jedną dziesiątą całkowitej szerokościobrazu, natomiast wartości dla drugiegokierunku przypisz 0. Właściwość Qualityustaw na High (wysoka) (rysunek 1.55).

Obraz ulegnie rozmyciu jedynie w jednymkierunku, symulując efekt smugi rejestrowanyprzez kamerę.

Rysunek 1.54. Utwórz symbol graficzny. Tensnowboardzista będzie poruszał się wystarczającoszybko, aby spowodować efekt poruszenia

Rysunek 1.55. Ustawienie tylko jednej wartościrozmycia (X lub Y) powoduje rozmycie obrazu tylkow jednym kierunku

Twor

zeni

e ef

ektó

w s

pecj

alny

ch


41

Rysunek 1.56. Efekt poruszenia jest ustawionyza obrazem snowboardzisty. Oba egzemplarzeznajdują się w osobnych warstwach i możnana nich zastosować animację ruchu

Rysunek 1.57. Wypróbuj różne ustawienia zgraniaanimacji w czasie, tak aby rozmycie pojawiało się,gdy snowboardzista jedzie, natomiast znikało, gdysię zatrzymuje

4. Utwórz nową warstwę nad rozmytymegzemplarzem i dodaj do nowej warstwykolejny egzemplarz symbolu klipufilmowego z okna Library (biblioteka)(rysunek 1.56).

5. Utwórz klatki kluczowe dla obu warstww dalszym punkcie listwy czasowej,a następnie przesuń oba egzemplarzewzdłuż sceny i do obu warstw dodajautomatyczną animację ruchu.

Zarówno oryginalny, jak i rozmyty obrazbędą poruszać się razem, ale uzyskany efektnie jest jeszcze przekonujący.

6. Wyreguluj zgranie w czasie klatekkluczowych, tak aby rozmyty obraz zaczynałruch kilka klatek później, a oryginalny obrazkończył animację kilka klatek wcześniej.W ostatniej klatce rozmytego obrazu dodajpustą klatkę kluczową (rysunek 1.57).

Dzięki wprowadzeniu opóźnienia międzyrozmytym i oryginalnym obrazem uzyskanoefekt wierniej oddający rzeczywistość.

Tworzenie efektów

specjalnych

Rozdział 1.

42

Animowane i złożone maskiMaskowanie jest prostym sposobem naodsłanianie fragmentów warstwy lub warstwleżących poniżej. Ta technika wymaga wybraniajednej warstwy jako warstwy maski, natomiastwarstwy leżące pod nią stają się warstwamimaskowanymi.

Dodając animację do warstwy maski, warstwmaskowanych albo do wszystkich naraz, możeszuzyskać wyniki wykraczające poza prosty efekt„podglądania” obrazu przez wizjer. Możesztworzyć maski, które się poruszają, zmieniająkształt i odsłaniają poruszające się obrazy.Animowane maski pozwalają osiągnąć takzłożone efekty, jak ruchome reflektory, soczewkipowiększające obrazy czy efekt promienirentgenowskich, który w polu maski pokazujewięcej szczegółów obrazu. Możliwe jest równieżuzyskanie kinowych efektów, takich jakzakrywanie poprzedniej sceny następną czyefekt przesłony, w którym jedna scena znikaw kurczącym się kółku, pozostawiając na ekraniekolejną scenę.

Można uzyskać jeszcze większą złożoność,wstawiając warstwy nad i pod warstwą maski.Na przykład kształt wypełniony gradientemprzezroczystości może dać efekt powolnegościemniania ostrych krawędzi maskiw delikatnym świetle reflektora.

W warstwie maski wszystkie wypełnienia sątraktowane jako kształty kryjące, nawet jeślizastosuje się przezroczyste wypełnienie lubgradient. W związku z tym wszystkie maskimają ostre krawędzie. Aby utworzyć delikatniejszekrawędzie, należy ukryć krawędzie maski,umieszczając gradient z przezroczystym środkiemnad lub pod tą maską. Tworzenie rozmytychkrawędzi za pomocą radialnych gradientówprzezroczystości dobrze się sprawdza przyokrągłych maskach. Jeżeli jednak kształt maskijest bardziej skomplikowany, trzeba się uciecdo dostosowania przyciemniania krawędzi.

Rysunek 1.58. Warstwa Layer 2 jest warstwąmaski, a Layer 1 — maskowaną warstwą

Anim

owan

e i z

łożo

ne m

aski


43

Rysunek 1.59. Automatyczna animacja kształturuchomej pionowej wstęgi znajduje się w warstwiemaski. Obraz ze skoczkiem znajduje się w maskowanejwarstwie

Rysunek 1.60. Animacja kształtu odkrywa obrazze skoczkiem. Odsłonięta jest jedynie ta częśćfotografii, która znajduje się pod maską

Używanie klipów filmowych w warstwachmaski daje więcej możliwości, włączając w tozastosowanie wielu masek, maski poruszającesię po ścieżce ruchu, a nawet dynamicznietworzone maski, które reagują na działanieużytkownika. Ponieważ dynamiczne maskiopierają się na języku ActionScript, będąszczegółowo omówione później (w rozdziale 7.)po podaniu podstawowych informacji o językuskryptowym.

Aby animować warstwę maski

1. W warstwie Layer 1 utwórz obrazek tła lubzaimportuj bitmapę.

2. Wstaw nową warstwę nad pierwszą warstwą.

3. Zaznacz górną warstwę i z menu Modify/Timeline wybierz pozycję Layer Properties.

lub

Dwukrotnie kliknij ikonę warstwy w górnejwarstwie.

Pojawi się okno dialogowe Layer Properties.

4. W polu Layer Type: zaznacz Mask.

5. Zaznacz dolną warstwę i z menu Modify/Timeline wybierz pozycję Layer Properties.

6. W polu Layer Type: zaznacz Masked.

Górna warstwa stanie się warstwą maski,a dolna — maskowaną warstwą (warstwą,na którą działa maska) (rysunek 1.58).

7. Utwórz animację kształtu lub animacjęruchu w warstwie maski (górna warstwa)(rysunek 1.59).

8. Do maskowanej warstwy (dolna warstwa)wstaw taką samą liczbę klatek, jaka jestprzeznaczona na animację w warstwie maski.

9. Zablokuj obie warstwy, aby zobaczyć efektdziałania animowanej maski na obraziez maskowanej warstwy (rysunek 1.60).

Animow

ane i złożone maski

Rozdział 1.

44

Wskazówki

Użyj dwóch niewiele się różniących obrazków.Jeden z nich umieść w maskowanej warstwie,drugi — w zwykłej warstwie pod maskowanąwarstwą. W tej technice animowana maskadziała jak pewnego rodzaju filtr odsłaniającyleżący pod spodem obraz. Możesz na przykładwstawić jasny obraz do maskowanej warstwy,a jego ciemną wersję do zwykłej warstwyleżącej pod nią. Maska stworzy efekt reflektoraoświetlającego obraz (rysunek 1.61).

Wypróbuj inne możliwości łączeniapowielonych obrazów, takie jak ostryi rozmyty obraz, obraz w odcieniach szarościi jego kolorowa wersja lub wzajemnieprzesunięte obrazy (rysunek 1.62).

W warstwie maski umieść animacjęrozszerzającego się prostokąta, który zakrywascenę, symulując w ten sposób kinowy efektnakładania się obrazów (rysunek 1.63).

Rysunek 1.62. Poruszające się pionowe kształtyw warstwie maski (venetianblinds) odkrywają zdjęciekolarzy umieszczone w maskowanej warstwie (bikers).Kopia zdjęcia znajdująca się w dolnej zwykłej warstwie(bikers offset) jest lekko przesunięta, co daje efektfalowania

Rysunek 1.61. Poruszający się reflektor umieszczonyw warstwie maski (spotlight) odkrywa obraz witrażuz warstwy maskowanej (bitmap). Ciemniejsza kopiazdjęcia została umieszczona w zwykłej warstwieleżącej na samym dole (dark bitmap)

Rysunek 1.63. Warstwa maski zawiera dużą animacjękształtu, która zakrywa całą scenę. Ta technikaumożliwia tworzenie kinowego efektu nakładaniaobrazów z maskowanej warstwy (obraz 1.) i z dolnejzwykłej warstwy (obraz 2.)

Anim

owan

e i z

łożo

ne m

aski


45

Aby animować maskowaną warstwę

1. Mając dwie warstwy, górną przekształćw warstwę maski, a dolną w warstwęmaskowaną.

2. W warstwie maski (górna warstwa)narysuj wypełniony kształt bądź kształty(rysunek 1.64).

Ten kształt stanie się obszarem, przezktóry będziesz mógł zobaczyć animacjęw zamaskowanej warstwie.

3. Utwórz animację kształtu lub animację ruchuw zamaskowanych warstwach (górnewarstwy), która przechodzi pod kształtamiz warstwy maski. Pod jedną warstwą maskimożesz umieścić dowolną liczbę maskowanychwarstw (rysunek 1.65).

4. Zablokuj obie warstwy, aby zobaczyćefekt działania animowanych maskowanychwarstw pojawiających się zza warstwy maski(rysunek 1.66).

Rysunek 1.64. Kształty przedniej szybysą umieszczone w warstwie windshield. Wnętrzesamochodu tworzą rysunki znajdujące się w zwykłejwarstwie leżącej nad warstwą windshield

Rysunek 1.65. Kilka animacji ruchuw zamaskowanych warstwach (drzewo, krowa,ziemia i niebo) poruszających się pod kształtamidefiniującymi przednią szybę w warstwie maski

Rysunek 1.66. Obrazki drzewa, krowy, ziemi i niebaporuszają się pod maską, tworząc wrażenie ruchusamochodu

Animow


Rozdział 1.

46

Wskazówka

To podejście jest użyteczną alternatywą dlastosowania automatycznej animacji kształtuw celu animowania krawędzi i podobnychtypów obiektów, które rosną, kurczą sięi wypełniają. Wyobraź sobie na przykładanimację przedstawiającą dopalający się lontbomby (rysunek 1.67). Utwórz maskę lontu,a następnie animuj maskowaną warstwę, takaby stopniowo malała, co wygląda, jakby lontsię skracał (rysunek 1.68). Inne przykłady,w których można skorzystać z tej techniki,to rosnące drzewa, rury lub naczyniakrwionośne z przepływającą cieczą i tekstwypełniający się kolorem. Pamiętaj jednak,że Flash nie rozpoznaje konturów w warstwiemaski. Jeżeli chcesz w tej warstwie utworzyćcienkie linie, używaj tylko wypełnień.

Aby utworzyć maskęz miękkimi krawędziami

1. Utwórz warstwę maski i maskowanąwarstwę.

2. Umieść lub narysuj obraz tła w maskowanejwarstwie (dolna warstwa).

3. Narysuj elipsę w warstwie maski (górnawarstwa).

4. Skopiuj elipsę.

5. Umieść nową warstwę pomiędzy warstwąmaski a maskowaną warstwą.

Nowa warstwa stanie się maskowaną warstwą.

6. Z menu Edit wybierz polecenie Paste in Place(wklej w miejscu) (Ctrl+Shift+V w Windows,Cmd+Shift+V w Mac OS).

Elipsa pojawi się w nowej maskowanejwarstwie, tuż pod elipsą w górnej warstwiemaski (rysunek 1.69).

Rysunek 1.67. Zapalnik bomby ulega skróceniu

Rysunek 1.68. Zapalnik bomby to cienki kształtw warstwie maski. Animowany prostokątw maskowanej warstwie kurczy się, dzięki czemuwydaje się, że lont się skraca

Anim

owan

e i z

łożo

ne m

aski

Rysunek 1.69. Zarówno w warstwie maski (ellipse 1),jak i w górnej maskowanej warstwie (ellipse 2)

pojawia się ta sama elipsa. Obraz z postaciąwindsurfera znajduje się w dolnej maskowanej

warstwie (background)


47

Rysunek 1.70. W górnej maskowanej warstwieznajduje się radialny gradient z przezroczystymśrodkiem

Rysunek 1.71. Efekt nałożenia maski z miękkimikrawędziami

7. Wklejoną elipsę wypełnij radialnymgradientem w tym samym kolorze co scena,definiując jego środek jako przezroczysty,a obrzeża jako kryjące (rysunek 1.70).

8. Zablokuj wszystkie trzy warstwy, aby zobaczyćefekt zastosowania maski (rysunek 1.71).

Warstwa maski pozwala patrzeć na obrazprzez eliptyczny obszar. Górna maskowanawarstwa zakrywa krawędzie elipsy poprzezutworzenie stopniowego zaciemnieniaw kierunku środka. Dolna maskowana warstwazawiera obraz tła (rysunek 1.72).

Aby utworzyć maskę o nieregularnymkształcie z miękkimi krawędziami

1. Utwórz warstwę maski i maskowanąwarstwę.

2. Umieść lub narysuj obraz w maskowanejwarstwie (dolna warstwa).

3. Narysuj nieregularny kształt w warstwiemaski (górna warstwa).

Rysunek 1.72. Maska z miękkimi krawędziami jestpołączeniem maski z górnej warstwy (warstwa maski),radialnego gradientu ze środkowej warstwy (górnamaskowana warstwa) i obrazu tła z dolnej warstwy(dolna maskowana warstwa)

Animow


Rozdział 1.

48

4. Skopiuj kształt.

5. Umieść nową maskowaną warstwępomiędzy warstwą maski a pierwsząmaskowaną warstwą.

6. Z menu Edit wybierz Paste in Place(Ctrl+Shift+V w Windows, Cmd+Shift+Vw Mac OS).

Nieregularny kształt pojawi się w nowejmaskowanej warstwie, tuż pod oryginalnymkształtem w górnej warstwie maski(rysunek 1.73).

7. Za pomocą narzędzia Oval (owal) lubRectangle (prostokąt) narysuj obrys wokółkształtu (rysunek 1.74).

8. Obszar między kształtem a obrysem wypełnijkolorem tła i usuń wypełnienie oryginalnegokształtu.

Nieregularny kształt jest teraz „dziurą”w większym kształcie (rysunek 1.75).

Rysunek 1.74. Pusty prostokąt narysowanywokół nieregularnego kształtu

Rysunek 1.73. Nieregularny kształtw górnej maskowanej warstwie znajdujesię ponad obrazem w dolnej maskowanejwarstwie

Rysunek 1.75. Wypełniając przestrzeńmiędzy kształtem a prostokątem, a potemusuwając kształt, tworzysz dziurę

Anim

owan

e i z

łożo

ne m

aski


49

9. Zaznacz cały kształt i z menu Modify/Shapewybierz Soften Fill Edges (zmiękcz krawędziewypełnienia) (rysunek 1.76).

Pojawi się okno dialogowe Soften Fill Edges(rysunek 1.77). Pole Distance (szerokość)określa szerokość miękkiej krawędzi. Wartośćw polu Number of steps (liczba kroków)wpływa na stopniowanie przejścia od kryciado przezroczystości. Z kolei opcja Direction(kierunek) określa sposób zmiękczaniakrawędzi.

10. Wpisz szerokość zmiękczenia (w pikselach)oraz liczbę kroków, a jako kierunek wybierzExpand.

Wszystkie krawędzie dookoła kształtu ulegnązmiękczeniu. Ze względu na to, że cały kształtsię zwiększa, dziura się kurczy (rysunek 1.78).

11. Zablokuj wszystkie trzy warstwy, aby zobaczyćefekty działania maski (rysunek 1.79).

Rysunek 1.76. Z menu Modify/Shapewybierz polecenie Soften Fill Edges

Rysunek 1.77. Okno dialogowe Soften Fill Edges

Rysunek 1.78. Zmiękczone krawędzierozszerzają się w stronę dziury,przez którą widoczny jest obraz

Rysunek 1.79. Miękkie krawędzie nieregularnejmaski utworzone za pomocą polecenia Soften FillEdges z menu Modify/Shape

Animow


Rozdział 1.

50

Tworzenie wielu masek

Mimo że Flash umożliwia tworzenie wieluwarstw maskowanych pod pojedynczą warstwąmaski, nie jest możliwe posiadanie wielu warstwmaski oddziałujących na dowolną ilość warstwmaskowanych (rysunek 1.80). Aby utworzyćwięcej niż jedną maskę, trzeba użyć klipówfilmowych. Pojawia się pytanie, po co właściwietworzyć wiele masek? Wyobraź sobie animację,w której po obrazie niezależnie poruszają się dwareflektory (rysunek 1.81). Ponieważ oba reflektorysą animacjami, muszą się znaleźć w osobnychwarstwach. Rozwiązaniem jest połączenie w klipiefilmowym dwóch poruszających się reflektorów,a następnie umieszczenie tego klipu w warstwiemaski.

Umieszczanie egzemplarza klipu filmowegow warstwie maski umożliwia nie tylko tworzeniewielu masek, ale również daje możliwośćstworzenia maski poruszającej się po ścieżceruchu. Wewnątrz klipu filmowego skonstruujanimację, która będzie się poruszała wzdłużścieżki ruchu, następnie umieść taki klipw warstwie maski na głównej scenie i gotowe— masz już maskę, która porusza się po ścieżce.

Na temat klipów filmowych znacznie więcejmożesz się dowiedzieć w rozdziałach 4. i 7.Jeżeli chcesz, możesz teraz przejść do lekturytych rozdziałów i wrócić tu, kiedy będziesz jużwięcej wiedział o klipach filmowych.

Aby utworzyć wielokrotną maskę

1. Utwórz warstwę maski i maskowaną warstwę.

2. Umieść obraz w maskowanej warstwie(dolna warstwa).

3. Z menu Insert wybierz New Symbol (nowysymbol) (Ctrl+F8 w Windows, Cmd+F8w Mac OS).

Pojawi się okno dialogowe Create NewSymbol (utwórz nowy symbol).

4. Wpisz opisową nazwę i wybierz opcjęMovie Clip (klip filmowy) (rysunek 1.82),a następnie kliknij przycisk OK.

Rysunek 1.80. Zarówno Layer 1, jak i Layer 2są zdefiniowane jako warstwy maski, ale tylkoLayer 2 wpływa na Layer 3 — maskowaną warstwę

Rysunek 1.81. Dwa niezależnie poruszające sięreflektory, każdy odkrywający część obrazu

Rysunek 1.82. Aby utworzyć nowy symbol klipufilmowego wybierz opcję Movie Clip

Anim

owan

e i z

łożo

ne m

aski


51

Rysunek 1.83. Dwa poruszające się reflektorysą animacjami ruchu wewnątrz klipu filmowego

Rysunek 1.84. Egzemplarz klipu filmowegoznajduje się w górnej warstwie (warstwa maski),zaś obraz przedstawiający kolarzy — w dolnej(maskowanej) warstwie

Program utworzy symbol klipu filmowego.Wejdź do trybu edycji dla tego symbolu.

5. Na listwie czasowej symbolu klipu filmowegoutwórz dwie animacje ruchu reflektorówprzemieszczających się w różnych kierunkach(rysunek 1.83).

6. Powróć na główną scenę i przeciągnijegzemplarz symbolu klipu filmowegona warstwę maski (górna warstwa)(rysunek 1.84).

7. Aby zobaczyć efekty działania maskiw klipie filmowym, z menu Controlwybierz Test Movie.

Obie animacje ruchu wewnątrz klipufilmowego maskują obraz z maskowanejwarstwy. Anim

owane i złożone m

aski

Rozdział 1.

52

Wskazówki

Aby zobaczyć, co odkrywają maski, zastosujprzezroczyste wypełnienie lub w oknie LayerProperties warstwy wybierz opcję View Layeras Outlines (pokaż warstwy jako kontury)(rysunek 1.85).

Aby zabezpieczyć się przed zapętleniemanimacji wewnątrz klipu filmowego,do ostatniej klatki wstaw klatkę kluczowąi dodaj w niej akcję stop.

Aby umieścić maskę na ścieżce ruchu

1. Utwórz warstwę maski i maskowaną warstwę.

2. Umieść obraz w maskowanej warstwie(dolna warstwa) (rysunek 1.86).

3. Utwórz nowy symbol klipu filmowego.

Rysunek 1.85. Oglądając maski jako kontury,można zobaczyć, co się pod nimi znajduje. W oknieLayer Properties wybierz opcję View Layer asOutlines albo kliknij ikonę Show as Outlines przydanej warstwie

Rysunek 1.86. Słowa składające się na ciekawepytanie i wypełnienie tła znajdują się w dolnej(maskowanej) warstwie

Anim

owan

e i z

łożo

ne m

aski


53

Rysunek 1.87. Egzemplarz przedstawiający kwiatekpodąża ścieżką ruchu wewnątrz klipu filmowego

Rysunek 1.88. Klip filmowy zawierającyporuszający się kwiatek jest umieszczonyw warstwie maski nad słowami

4. Wewnątrz symbolu klipu filmowego utwórzanimację ruchu, która będzie się poruszaćpo ścieżce ruchu (rysunek 1.87).

5. Powróć na główną scenę i przeciągnijegzemplarz klipu filmowego na warstwęmaski (górna warstwa) (rysunek 1.88).

Animow


Rozdział 1.

54

6. Dostosuj kształt ścieżki ruchu do swoichwymagań i do rozmieszczenia obiektówna scenie poprzez wybranie polecenia Editin Place (edytuj w miejscu) z menu Editalbo dwukrotnie klikając na egzemplarzu(rysunek 1.89).

Flash zaciemni całą grafikę z wyjątkiemedytowanego egzemplarza.

7. Z menu Control wybierz polecenie Test Movie,aby zobaczyć efekty odtwarzania klipufilmowego w warstwie maski.

Animacja podąży swoją ścieżką zdefiniowanąw ścieżce ruchu, jednocześnie maskując obrazmaskowanej warstwy na głównej scenie(rysunek 1.90).

Rysunek 1.89. Funkcja Edit in Place pozwalazmieniać symbol klipu filmowego, z możliwościąjednoczesnego obserwowania grafiki na głównejscenie

Rysunek 1.90. Poruszający się kwiatek,podążając po ścieżce ruchu, odsłania pytanieAn

imow

ane

i złożo

ne m

aski

Documents

Flash 8. Techniki zaawansowane. Klatka po klatce