SWiSHmax. Ćwiczenia

  • Published on
    12-Jan-2015

  • View
    1.602

  • Download
    1

Embed Size (px)

DESCRIPTION

SWiSHmax to najnowsza wersja rozbudowanego programu do tworzenia animacji we Flashu. Wrd nowych funkcji warto zwrci uwag na ponad 200 gotowych efektw, ktre mona doda do wasnych projektw, jzyk programowania SWiSHscript, umoliwiajcy pen interakcj z uytkownikiem, bardziej intuicyjne i wygodne narzdzia do pracy nad grupami obiektw, a take prowadnice i pozycjonowanie, pozwalajce niezwykle precyzyjnie rozmieszcza elementy. Dziki ogromnym moliwociom tej aplikacji jedynym ograniczeniem przy tworzeniu efektownych animacji bdzie Twoja wiedza. Ksika "SWiSHmax. wiczenia" pomoe Ci szybko rozpocz przygod z animacjami we Flashu. Wykonujc proste wiczenia, poznasz interfejs i funkcje programu SWiSHmax. Nauczysz si pracowa nad grafik, a take dodawa tekst. Dowiesz si, jak przygotowywa animacje na podstawie utworzonych obrazw, stosowa atrakcyjne efekty oraz uywa przyciskw do interakcji z uytkownikami. Zobaczysz take, jak doda do animacji ciek dwikow oraz jak zapisa i opublikowa gotowy projekt. * Korzystanie z interfejsu * Przygotowywanie grafiki * Dodawanie tekstu * Stosowanie rnych typw animacji * Maskowanie elementw obrazu * Korzystanie z wbudowanych efektw * Zarzdzanie interakcj z uytkownikami * Dodawanie dwiku * Zapisywanie i publikowanie projektw Tworzenie animacji we Flashu jest atwiejsze, ni mylisz -- przekonaj si o tym ju dzi.

Transcript

<ul><li> 1. SWiSHmax. wiczeniaAutor: Pawe LenarISBN: 978-83-246-0873-7Format: A5, stron: 160SWiSHmax to najnowsza wersja rozbudowanego programu do tworzenia animacji weFlashu. Wrd nowych funkcji warto zwrci uwag na ponad 200 gotowych efektw,ktre mona doda do wasnych projektw, jzyk programowania SWiSHscript,umoliwiajcy pen interakcj z uytkownikiem, bardziej intuicyjne i wygodne narzdziado pracy nad grupami obiektw, a take prowadnice i pozycjonowanie, pozwalajceniezwykle precyzyjnie rozmieszcza elementy. Dziki ogromnym moliwociom tejaplikacji jedynym ograniczeniem przy tworzeniu efektownych animacji bdzie Twojawiedza.Ksika "SWiSHmax. wiczenia" pomoe Ci szybko rozpocz przygod z animacjamiwe Flashu. Wykonujc proste wiczenia, poznasz interfejs i funkcje programu SWiSHmax.Nauczysz si pracowa nad grafik, a take dodawa tekst. Dowiesz si, jak przygotowywaanimacje na podstawie utworzonych obrazw, stosowa atrakcyjne efekty oraz uywaprzyciskw do interakcji z uytkownikami. Zobaczysz take, jak doda do animacjiciek dwikow oraz jak zapisa i opublikowa gotowy projekt. Korzystanie z interfejsu Przygotowywanie grafiki Dodawanie tekstu Stosowanie rnych typw animacji Maskowanie elementw obrazu Korzystanie z wbudowanych efektw Zarzdzanie interakcj z uytkownikami Dodawanie dwiku Zapisywanie i publikowanie projektwTworzenie animacji we Flashu jest atwiejsze, ni mylisz przekonaj si o tym ju dzi Wydawnictwo Helion ul. Kociuszki 1c 44-100 Gliwice tel. 032 230 98 63 e-mail: helion@helion.pl </li></ul><p> 2. Wprowadzenie 5 Rozdzia 1. Rozpoczcie pracy z programem 7 Interfejs programu7 Okrelanie parametrw filmu11 Korzystanie z siatki i prowadnic 13Rozdzia 2. Rysowanie i import grafiki 17 Korzystanie z narzdzi przybornika 17Tworzenie odcinkw i krzywych 18Tworzenie obiektw i wypenie20Korzystanie z autoksztatw 27Tworzenie wasnych kolorw i gradientw 29 Modyfikowanie i przeksztacanie obiektw 35Skalowanie i obracanie35Zmiana ksztatu 40Transformacja i kopiowanie45 Grupowanie 48Sposoby tworzenia i modyfikowania grup48Dzielenie na czci i likwidacja grup 55Kolejno elementw na scenie 58Rozmieszczanie i wyrwnywanie obiektw61 Praca z bitmapami67Bitmapowe wypenienia obiektw67Import i optymalizacja grafiki71 3. 4SWiSHmax wiczeniaRozdzia 3. Dodawanie tekstu77 Wprowadzanie i formatowanie tekstu77 Proste animowanie tekstu82 Rodzaje pl tekstowych85Rozdzia 4. Animacja87 Typy animacji 87Klatka po klatce 88cieka ruchu93Potga efektw 99 Typy animacji113Funkcja obiektw Sprite 114Tworzenie instancji 119 Maskowanie 125Maskowanie tekstu 125Maskowanie obiektw 128Rozdzia 5. Tworzenie przyciskw 131 Tworzenie i modyfikowanie stanw przycisku 131 Animowany przycisk 134Rozdzia 6. Dodawanie dwiku137 Import dwiku 137 Dwikowe to projektu 139 Sterowanie odtwarzaniem dwiku za pomoc przyciskw 141Rozdzia 7. Zapisywanie, publikacja i optymalizowanie projektu 145 Zapisywanie146 Publikacja 149Eksport do pliku SWF149Eksport do pliku Wideo (AVI)151Eksport do pliku Html 153Eksport do pliku EXE154Podsumowanie 157 4. Pierwszymi animacjami byy filmy rysunkowe popularne kreskwki tworzenie ich byo bardzo pracochonne, wy- magao wykonania bardzo wielu podobnych do siebie ry- sunkw, ktre nastpnie byy szybko, kolejno po sobie wywietlane, co dawao pewne zudzenie ruchu. Z nastaniem ery komputerw stopniowo pojawiao si coraz wicej programw do tworzenia ani- macji poczwszy od animowanych plikw graficznych gif, na gra- fice w peni trjwymiarowej skoczywszy. Dynamiczny rozwj inter- netu spowodowa, e animowane filmy stopniowo zawitay na stronach sieci. Dzi podstawowym elementem nowoczesnych, interaktywnych stron internetowych s animacje flash (czsto strony w caoci s wykonane w tej technologii). Wykonanie wicze zawartych w tym rozdziale pozwoli ci opanowa sztuk tworzenia wasnych projek- tw filmw flash przy uyciu rodowiska programu SWiSHmax, a wyniki swoich prac z atwoci bdziesz mg pniej opublikowa w internecie. W programie SWiSHmax animowane filmy moemy tworzy za po- moc kilku metod. Mog to by to po prostu zmieniajce si w pew- nych odstpach czasu obrazy, tak jak ma to miejsce w przypadku kreskwek, moesz okreli ciek ruchu dla obiektu albo po prostu skorzysta z zaimplementowanych w programie, gotowych efektw. 5. 88 SWiSHmax wiczeniaDobr metody animowania zaley od oczekiwanego efektu, a dziki poniszym wiczeniom nauczysz si, w jaki sposb stosowa i czy rne typy animacji, w zalenoci od celu, jaki sobie wytyczysz. Klatka po klatce W I C Z E N I E 4.1Pierwsza animacjaWykonaj ponisze czynnoci w celu stworzenia prostej animacji.1. Narysuj na rodku sceny gwiazd, nadaj jej dowolny kolor.2. Popatrz na listw czasow. Kady obiekt, ktry stworzysz, otrzymuje na niej swoj warstw (pierwsz warstw jest zawsze warstwa sceny). Program automatycznie nadaje nazw kadej stworzonej figurze warstwa gwiazdy nosi nazw Star (rysunek 4.1). Rysunek 4.1.Wygld listwyczasowejpo narysowaniugwiazdy3. Kliknij prawym przyciskiem myszy pierwsz klatk warstwy Star i z podrcznego menu wybierz pozycj Insert Keyframe (Wstaw klatk kluczow), tak jak pokazano na rysunku 4.2. Rysunek 4.2.Wstawianieklatki kluczowej 6. Rozdzia 4. Animacja89Klatki kluczowe to takie, w ktrych zachodzi jaka zmiana w animacji, pozostae klatki po prostu wypeniaj czas midzy nimi. Klatk kluczow na listwie czasowej moesz rozpozna po tym, e znajduje si w niej czarna kropka. Istniej skrty klawiaturowe pozwalajce na szybkie wstawianie i usuwanie klatek. Aby wstawi klatk kluczow, wystarczy zaznaczy dane ujcie i wcisn klawisz F6 z klawiatury. Do umieszczania pustych klatek suy klawisz F5. W celu usunicia dowolnej klatki naley skorzysta z kombinacji Shift+F5.4. Dodaj trzy kolejne klatki kluczowe, teraz listwa czasowa bdziewygldaa tak, jak na rysunku 4.3.Rysunek 4.3. Dodawanie klatek kluczowych 5. Wybierz klatk numer dwa na listwie czasowej i zaznacz gwiazd,ktr narysowae na scenie. Prawym przyciskiem myszy kliknijgwiazd i z podrcznego menu wybierz polecenie Transform/Rotate 90, co spowoduje obrt gwiazdy w tej klatce o 90 stopni(rysunek 4.4).Rysunek 4.4. Obrt gwiazdy o 90 stopni 6. Zaznacz kolejno klatk trzeci oraz czwart i rwnie dokonajich obrotu o 90 stopni. 7. Ukoczye wanie prac nad swoj pierwsz animacj klatkapo klatce. Przetestuj jej dziaanie, w tym celu wybierz polecenieControl/Play Movie z grnego menu. 7. 90SWiSHmax wiczenia W I C Z E N I E 4.2Animacja ruchu postaciAby stworzy animacj ruchu postaci, wykonaj ponisze zadania.1. Cel tego wiczenia to zrobienie prostej animacji ruchu postaci. Przy uyciu narzdzi rysunkowych, ktre poznae wczeniej, stwrz elementy skadowe postaci (rysunek 4.5).Rysunek 4.5. Obiekty wchodzce w skad ciaa animowanej postaci 2. Wykorzystaj narysowane obiekty do uoenia takiej postaci, jak pokazano na rysunku 4.6. Jeeli nie pamitasz, w jaki sposb ustawia si kolejno obiektw na scenie, wr do rozdziau 2., do miejsca, gdzie byo to wyjanianie. Na razie na listwie czasowej projektu znajduj si jedynie warstwy odpowiadajce elementom wchodzcym w skad ciaa naszego bohatera. Rysunek 4.6.Gotowa posta 8. Rozdzia 4. Animacja913. Zaznacz ca posta i wcinij klawisz F6. Spjrz na listwczasow, pierwsze ujcia kadej z warstw stay si klatkamikluczowymi. Animacja ruchu naszego bohatera bdzie siskadaa z czterech klatek, sprawmy wic, aby rwnie kolejnetrzy ujcia stay si kluczowymi. Kliknij lewym przyciskiemmyszy drug klatk listwy czasowej w miejscu, gdzie znajdujesi gowica wskazujca aktualnie wywietlany kadr, i wcinijklawisz F6 z klawiatury (rysunek 4.7).Rysunek 4.7. Wstawianie nastpnej klatki kluczowej dla wszystkich warstw 4. Wstaw klatki kluczowe rwnie w trzecim i czwartym kadrzedla wszystkich warstw. Po tych zabiegach listwa czasowapowinna wyglda tak, jak przedstawiono na rysunku 4.8.Rysunek 4.8. Wygld listwy czasowej po wstawieniu wszystkich potrzebnych uj kluczowych 5. Przesuwaj teraz kolejno gowic wskazujc aktualniewywietlany kadr, aby dokona w kadym z uj pewnych zmianw ustawieniu ciaa postaci, tak by osign efekt poruszania sibohatera filmu (rysunek 4.9). 6. Przetestuj swj projekt za pomoc polecenia Control/Play Movie.Jeeli ruch postaci nie odpowiada jeszcze w peni twoimoczekiwaniom, nanie niezbdne poprawki. 9. 92SWiSHmax wiczeniaRysunek 4.9. Etapy ruchu postaci w kolejnych kadrachNarzdzia suce do kontroli odtwarzania animacji, znajdujce siw grnym menu Control, zdublowane s w panelu Control Toolbar(rysunek 4.10).Rysunek 4.10. Narzdzia panelu Control Toolbar 10. Rozdzia 4. Animacja 93cieka ruchu W I C Z E N I E 4.3Animacja ruchu obiektu wzdu linii prostejStwrz animacj ruchu obiektu wzdu linii prostej.1. Przy uyciu narzdzi rysunkowych stwrz obiekt, ktrego ruch bdziemy animowa. Narysuj posta przypominajc rybk. Spraw, aby wszystkie czci ciaa narysowanego bohatera byy zgrupowane. W tym celu zaznacz ca rybk i wybierz polecenie Modify/Grouping/Group as Group z grnego menu (rysunek 4.11). Rysunek 4.11.Zgrupowaneobiektywchodzcew skad rybki2. Zmie kolor sceny na jasnoniebieski (przypominajcy wod). W tym celu wybierz zakadk Movie z okna palet znajdujcych si z prawej strony ekranu i wska odpowiedni barw za pomoc menu Background Color (rysunek 4.12).3. Ustaw bohatera filmu w pobliu lewej grnej czci sceny. Z przybornika wybierz narzdzie Motion Path (cieka ruchu), pozwala ono okreli sposb, w jaki bdzie porusza si obiekt. Zwr uwag na now pozycj, ktra pojawia si w przyborniku, w sekcji Options (rysunek 4.13). 11. 94 SWiSHmax wiczenia Rysunek 4.12.Zmianakoloru scenyRysunek 4.13.Narzdzie sucedo wyznaczaniacieki ruchuobiektuNarzdzie Motion Path zapewnia moliwo wyboru szybkoci przesuwaniaobiektu wzdu wyznaczonej cieki. Suy do tego parametr Speed,ktrego warto wyraona jest w liczbie pikseli, o jakie przesuwany jestobiekt w kadej z klatek animacji. Im wiksza jest warto parametru Speed,tym szybciej przebiega animacja (jest jednak mniej pynna ze wzglduna due przesunicia w kadym z uj), a im jest mniejsza, tym odtwarzaniejest wolniejsze i bardziej pynne. 4. Upewnij si, e wybranym narzdziem nadal jest Motion Path, a nastpnie ustaw szybko przebiegu animacji na 10 pikseli na klatk, wpisujc t warto do pola Speed w sekcji Options przybornika.5. Wyznacz teraz ciek ruchu dla bohatera naszego filmu. Kliknij lewym przyciskiem myszy w prawej dolnej czci obszaru sceny (rysunek 4.14). 12. Rozdzia 4. Animacja95Rysunek 4.14. Wyznaczanie cieki ruchu obiektu 6. Midzy pocztkiem a kocem cieki ruchu pojawi si cig niebieskich punktw, z kad klatk animacji obiekt przesuwa si wanie o odlego jednego punktu.7. Sprawd, jak prezentuje si gotowa animacja, korzystajc z narzdzi dostpnych na pasku Control Toolbar.8. Po zakoczeniu testowania popatrz na listw czasow filmu naniesiony zosta tam pasek oznaczajcy wprowadzenie animacji ruchu (rysunek 4.15).Rysunek 4.15. Wygld listwy czasowej po dodaniu do projektuanimacji ruchu W I C Z E N I E 4.4Wyznaczanie toru ruchu obiektuPoznaj metod wyznaczania toru dla animowanego obiektu.1. Cel tego wiczenia to stworzenie animacji lotu rakiety, ktra po starcie zatoczy ptl, a nastpnie uderzy i zniszczy bunkier. 13. 96 SWiSHmax wiczenia Przy uyciu narzdzi rysunkowych stwrz niezbdne elementygraficzne animacji (rysunek 4.16).Rysunek 4.16. Elementy graficzne animacji 2. Kady z obiektw, ktre narysowae, skada si kilku elementw skadowych, dlatego w celu uatwienia animowania zaznacz kolejno kady z nich z osobna i zgrupuj, wybierajc polecenie Modify/Grouping/Group as Group.3. Rozmie teraz wszystkie obiekty, tak jak pokazano na rysunku 4.17.4. Zaznacz rakiet i wybierz z przybornika narzdzie Motion Path. W sekcji Options przybornika, w polu Speed wpisz warto 10. Wyznaczymy teraz pierwszy odcinek lotu rakiety. W tym celu kliknij lewym przyciskiem myszy w pewnej odlegoci u gry od startera rakiety (rysunek 4.18 a). Nastpnie wybierz z przybornika narzdzie Select , a w sekcji Options wska Rotate or skew . Dokonaj obrotu rakiety w taki sposb, aby bya ona dostosowana do trajektorii lotu (rysunek 4.18 b). 14. Rozdzia 4. Animacja 97 Rysunek 4.17. Wygld ekranu po rozmieszczeniu elementw filmuRysunek 4.18. Tworzenie cieki ruchu (a) i ustawianie kierunku lotu rakiety (b) 5. Wybierz ponownie narzdzie Motion Path i nanie kolejnypunkt trajektorii lotu rakiety (rysunek 4.19), rwnie tutajdostosuj odpowiednio kierunek ustawienia pocisku za pomocnarzdzia Rotate or skew. Zauwa, e po dodaniu kolejnegopunktu trajektoria lotu rakiety zostaa automatycznie skorygowanai przybraa teraz ksztat uku. 15. 98 SWiSHmax wiczeniaRysunek 4.19. Dodawanie kolejnego punktu cieki ruchu 6. Dodaj kolejne punkty cieki ruchu rakiety, tak by pociskzatoczy w locie ptl, a nastpnie uderzy w bunkier. Pamitaj,aby w momencie dodawania kolejnego punktu trajektorii zawszeodpowiednio dostosowa kierunek rakiety przy uyciu narzdziaRotate or skew(rysunek 4.20).Rysunek 4.20. Tor ruchu pocisku 7. W momencie gdy rakieta uderza w bunkier, nastpuje eksplozja,potrzebny wic bdzie obiekt, ktry wygldem bdzie przypominawybuch. Narysuj efekt wybuchu podobny do przedstawionegona rysunku 4.21. 16. Rozdzia 4. Animacja99Rysunek 4.21. Dodawanie efektu wybuchu 8. Popatrz teraz na listw czasow, pojawia si tam warstwa obiektu przypominajcego wybuch (rysunek 4.21). Kliknij lewym przyciskiem myszy pierwsz klatk tej warstwy i nie zwalniajc przycisku, przesuwaj pasek w lewo, a do momentu, w ktrym zobaczysz miejsce, gdzie koczy si animacja lotu rakiety. Umie pasek wybuchu mniej wicej tak, jak pokazano na rysunku 4.22, aby obiekt przypominajcy eksplozj pojawi si na kocu filmu (gdy rakieta uderzy w bunkier).9. Przetestuj dziaanie filmu. Potga efektw Efekty to gotowe, wbudowane w programie schematy animacji, dziki ktrym moemy w bardzo szybki sposb uzyska rewelacyjne wyniki, w zasadzie bez nakadu pracy. Parametry kadego z efektw mona modyfikowa, co pozwala na dostosowywanie ich do wasnych po- trzeb. Odkryj bogactwo efektw programu SWiSHmax i sprawd, w jak duym stopniu ich wykorzystanie umoliwi ci tworzenie godnych podziwu animacji. 17. 100SWiSHmax wiczeniaRysunek 4.22. Umieszczanie efektu wybuchu we waciwym miejsculistwy czasowej W I C Z E N I E 4.5Efekt ZoomOdkryj moliwoci, jakie oferuje efekt Zoom.1. Umie w obszarze sceny trzy napisy, takie jak na rysunku 4.23.2. Zaznacz pierwszy napis: Wydawnictwo Helion, a nastpnie rozwi menu Add Effectznajdujce si z lewej strony listwy czasowej i wybierz pozycj Zoom/Zoom In (rysunek 4.24).3. Kliknij teraz drugi napis: SWiSHmax i dokonaj takiej samej operacji, jak wczeniej za pomoc menu Add Effect. Upewnij si, e w momencie dodawania efektu gowica wskazujca aktualnie wywietlany kadr ustawiona jest na kocu dodawanego wczeniej efektu (rysunek 4.25).4. Zaznacz trzeci napis: wiczenia praktyczne i tak jak poprzednio, dodaj efekt Zoom In. Po dokonaniu wszystkich operacji listwa czasowa powinna wyglda podobnie, jak widoczna na rysunku 4.26. 18. Rozdzia 4. Animacja101 Rysunek 4.23. Napisy rozmieszczone na scenie Rysunek 4.24. Dodawanie efektu Zoom In Rysunek 4.25. Ustawienie gowicy listwy czasowej w momencie dodawania efektu dla kolejnego napisu 19. 102 SWiSHmax wiczenia Rysunek 4.26.Wygld listwyczasowejpo dodaniuefektu Zoom...</p>