Grafika animacyjna. Kurs grafiki komputerowej dla ucznio w i nauczycieli Zespołu Szko ł Zawodowych nr 1 w Zdun skiej Woli

Transkrypt

1 Kurs grafiki komputerowej dla ucznio w i nauczycieli Zespołu Szko ł Zawodowych nr 1 w Zdun skiej Woli Grafika animacyjna dr Joanna Sekulska-Nalewajko Instytut Informatyki Stosowanej Politechniki Ło dzkiej Łódź, 2017

2 2

3 Spis treści 1 Wstęp kilka słów o Adobe Flash Środowisko robocze Symbole i organizacja biblioteki Typy symboli Edycja symbolu Biblioteka Typy animacji Animacja poklatkowa Klasyczna animacja Animacja ruchu Animacja kształtu Warstwy zwykłe i warstwy specjalne Warstwa linii pomocniczej Warstwa maskująca i maskowana Typy klatek Dźwięk we Flash Eksportowanie i publikowanie plików Aplikacje Adobe AIR Literatura do przedmiotu Zadania do realizacji Pierwsza animacja oparta o klasyczną animację Animacja obiektu po ścieżce Animacja kształtu Animacja z wykorzystaniem warstwy Maska Animacja tekstu Animacja 3D Animacja zdjęć z użyciem filtrów Animacja zdjęć z użyciem zaawansowanego efektu koloru Teleportacja Animowany kursor Lupa Aktywny mur Umieszczanie dźwięku na głównej listwie czasowej Umieszczanie dźwięku na listwie czasowej przycisku Mini-odtwarzacz mp

4 9.16 Galeria zdjęć czytanie pliku SWF do pliku kontenera Galeria z użyciem pliku XML do wczytania podpisów pod zdjęciami Wczytanie pliku video

5 1 Wstęp kilka słów o Adobe Flash Adobe Flash Professional (obecnie Adobe Animate CC) jest jednym z najpopularniejszych i najlepszych programów przeznaczonych do tworzenia grafiki animacyjnej. Wielką zaletą tego programu jest możliwość tworzenia animacji metodą klatek kluczowych, czyli bezpośrednio na listwie czasowej, a także wykonywanie wszelkiego typu operacji czyli również animacji za pomocą języka sktyptowego, który nazywa się ActionScript. Technologia flash po raz pierwszy pojawiła się na rynku w połowie lat dziewięćdziesiątych XX wieku w postaci programu FutureSplash Animator, który stworzyła niezbyt znana firma amerykańska FutureWave Software. Służyła ona do projektowania witryn internetowych wykorzystując w tym celu grafikę wektorową. Jej główną zaletą było tworzenie animacji cechujących się dobrą jakością generowanych obrazów przy jednoczesnym małych rozmiarach plików. Dość szybko patent na wykorzystanie tej technologii został kupiony przez firmę Macromedia, która dalej dynamicznie rozwijała produkt. Dołączono między innymi moduł programowania w języku ActionScript 1.0, zastąpiony potem wersją 2.0. W 2005 roku produkt został kupiony przez potentata na rynku oprogramowania graficznego firmę Adobe która do dzisiaj nieustannie rozwija Flasha. Zastąpiono ActionScript 2.0 nową sprawniejszą wersją (3.0). Obecnie program jest wykorzystywany do tworzenia gier, interaktywnych prezentacji, samodzielnych aplikacji w środowisku AIR, aplikacji mobilnych na urządzenia z systemem Android i ios. Jego rola w aplikacjach internetowych osłabła ze względu na rozwój technologii HTML5, jakkolwiek twórcy Adobe Flash/Animate uwzględnili palącą potrzebę tworzenia ciekawych animacji dla Internetu przez osoby znające lepiej technologię Flash niż techniki programistyczne HTML5 i JavaScript, aplikując do Flasha moduł konwersji natywnych produktów flash do HTML5 Canvas. Aplikacja składa się ze środowiska roboczego oraz odtwarzacza Flash Player. 1.1 Środowisko robocze Rozpoczynając pracę we Flashu napotkamy na ekran wyboru formatu pliku (Rys. 1). My zajmujemy się na początku poznaniem samych technik animacji, dlatego z panelu powitalnego wybierać będziemy zazwyczaj nowy plik z ActionScript 3.0. Rys. 1: Ekran wyboru formatu pliku CS5.5-CS6.0 Po wyborze pliku roboczego ukazuje się obszar roboczy, okna i panele z narzędziami oraz listwa czasowa projektu. Ustawienie narzędzi zależy od wyboru przestrzeni roboczej. W układzie klasycznym 5

6 układ okien prezentuje się jak na rysunku 2. Można też wybrać kilka innych gotowych układów, w tym opcję dla programistów lub spersonalizować przestrzeń roboczą według własnych wymagań Właściwości filmu i układ sceny Rys. 2: Obszar roboczy w układzie klasycznym. W każdym projekcie należy zaprojektować wielkość aplikacji, ustawienia koloru tła oraz częstotliwość odtwarzania klatek w filmie, co ma wpływ potem na płynność animacji. Ustawienia te można zmieniać na każdym etapie pracy, pamiętając jednak o tym, że zawartość graficzna musi zostać dostosowana do nowej rozdzielczości. Na rysunku 3 widać panel Właściwości służący do ustawień filmu. Panel ten udostępnia opcje dokumentu, ale tylko wówczas gdy nie zaznaczona jest żadna treść graficzna w obrębie obszaru roboczego oraz nie wybrano żadnego narzędzia z Przybornika. Uwaga. Panel ten kontekstowo zmienia zawartość innym razem może zawierać ustawienia narzędzi do rysowania prostokąta i elipsy, opcje narzędzia tekst i pola tekstowego, właściwości klatek lub zaznaczonych obiektów leżących w obszarze rysowania wszystko zależy od tego co zaznaczyliśmy w projekcie. Jeśli w trakcie pracy z dokumentem uznamy, że powinniśmy zmienić rozdzielczość pliku, to najlepszym wyborem jest skorzystanie z opcji Modyfikuj > Dokument, która daje możliwość skalowania zawartości graficznej razem z oknem dokumentu (Rys. 3). 6

7 Rys. 3: Okno Właściwości dokumentu i okno Ustawień dokumentu Narzędzia do rysowania Rys. 4: Przybornik z narzędziami. Zestaw narzędzi do rysowania obejmuje podstawowe narzędzia do rysowania i edycji prostych obiektów elipsy, krzywe, prostokąty (Rys. 4) jest tu też kilka narzędzi służących do ustawień specjalnych (np. 3D), przekształceń swobodnych, kinematyki odwrotnej, zaawansowanych rysunków (np. narzędzie zamalowywanie, dodane w nowszej wersji programu, rys. 5) Rys. 5: Efekt przykładowego użycia narzędzia Zamalowywanie i okno Właściwości narzędzia. Listwa czasowa Animacja przebiega w czasie, dlatego każdy dokument zawiera główną oś czasu, która jest miejscem aranżowania zmian (Rys. 6). Miejsce to oferuje możliwość ustawiania długości ujęć i dodawania typów animacji. Klatki możemy dodawać, a tym samym rozciągać animację w czasie (zazwyczaj w tym celu dodaje się ciąg klatek zwykłych). Możemy też klatki usuwać, przenosić i kopiować. Należy pamiętać, że typ animacji jest uzależniony od typu obiektu animacje związane z ruchem przebiegają na symbolach, animacja kształtu na zwykłej grafice wektorowej oraz, że każdy typ animacji wymaga zdefiniowania klatek kluczowych, w których ustawiamy cechy obiektu animowanego. 7

8 Rys. 6: Oś czasu dokumentu. Z czasem listwa czasowa zapełnia się obiektami i dokonywanymi na nich animacjami. Może to być też miejsce dołączania muzyki, skryptów ActionScript i zagnieżdżania dowolnych elementów, które mają własne listwy czasowe - tak zwanych symboli. Konieczne jest wtedy dodawanie nowych warstw, nazywanie ich w celu usprawnienia pracy z ich zawartością oraz blokowanie tych warstw, których zawartość chcemy ochronić przed przypadkowymi zmianami Rys. 7: Oś czasu z warstwami zawierającymi (od dołu): ujęcie statyczne (zwróć uwagę, że ta warstwa jest zablokowana), klasyczną animację ruchu, animację kształtu, dźwięk oraz skrypt umieszczony w klatce 40. Operacje Nieodzownym elementem aplikacji Flash są skrypty. Często są to pojedyncze komendy służące do sterowania listwą czasową np. zatrzymywania animacji lub przekierowania odtwarzania w inne miejsce osi czasu (Rys. 8). Animacje, o ile nie podano inaczej, odtwarzają się w nieskończonej pętli. Proste komendy: play(), stop(), nextframe(), prevframe(), gotoandplay() i gotoandstop() mogą zmienić ten sposób odtwarzania i poprzez to zrealizować ciekawe efekty związane z animacją. Proste skrypty umieszczane są w oknie o nazwie Operacje, które dostępne jest w górnym menu Okno (lub po wciśnięciu klawisza funkcyjnego F9 dotyczy tylko Windows). Zaawansowani programiści mogą tworzyć bardzo rozbudowane skrypty obsługujące gry, aplikacje webowe lub mobilne. Wtedy zazwyczaj tworzą tak zwane pakiety zlokalizowane w plikach o specjalnym rozszerzeniu.as. 8 Rys. 8: Okno Operacje. Każdy początkujący i nie tylko początkujący chętnie wspiera się możliwością pisania kodu z zastosowaniem podpowiedzi, szablonów czy gotowych wzorców. Naprzeciw takim oczekiwaniom

9 wychodzi panel o nazwie Wycinki kodu, który ułatwia wstawienie kodu ActionScript o bardziej rozbudowanej składni (Rys. 9). Zwróć uwagę, że panel oferuje pogrupowane tematycznie sekcje, w tym obsługę audio i wideo, obsługę gestów na urządzeniach mobilnych czy możliwość ładowania treści z zewnętrznych plików. Rys. 9: Panel Wycinki kodu i okno Operacje z wstawionym wycinkiem kodu. 2 Symbole i organizacja biblioteki Program Flash Pro/Animate CC dobrze radzi sobie z grafiką wektorową i umożliwia animacje na bitmapach ale filozofia tej aplikacji polega na upakowaniu grafiki do symboli, które to ewidentnie pozwalają zaoszczędzić czas twórcy aplikacji oraz zasoby urządzeń, które potem tę grafikę przetwarzają. Użycie symboli w dokumencie znacznie zmniejsza wielkość pliku; zapis kilku instancji symbolu wymaga mniej miejsca niż zapis wielu kopii grafiki o tym samym kontekście. Można zmniejszyć wielkość pliku dokumentów poprzez konwertowanie statycznych grafik (takich jak obrazki tła) w symbole, a następnie wielokrotne używanie ich. Użycie symboli może także zwiększyć szybkość odtwarzania pliku SWF, ponieważ symbole trzeba pobrać do programu Flash Player tylko raz. 1 Są trzy typy symboli: grafika, przycisk oraz klip. Zazwyczaj tworzymy symbole w środowisku graficznym ale warto nadmienić, że klip i przycisk można także utworzyć przez użycie klas ActionScript: MovieClip (AS 2.0 i 3.0) i SimpleButton (AS 3.0). Symbole mają też swoje przeznaczenie zapewniają interakcję z użytkownikiem i możliwość reakcji na wiele zdarzeń zachodzących wokół aplikacji, pozwalają na oszczędne, eleganckie i wyrafinowane zagospodarowanie osi czasu projektu, pozwalają na osiągnięcie efektów trudnych do uzyskania za pomocą jednej osi czasu (każdy symbol ma własną oś czasu) oraz pozwalają na szybkie osiągnięcie powtórzeń danego efektu. Poza tym, mamy możliwość zarządzania symbolami poprzez skrypty, co daje nam praktycznie nieograniczone możliwości aranżacji efektów. Raz utworzony symbol można wykorzystywać wielokrotnie w tym samym projekcie lub eksportować do innych projektów Flasha. Każdy symbol, który tworzymy, automatycznie staje się częścią biblioteki dla bieżącego dokumentu. Symbole klipu i grafiki powstają także automatycznie, gdy do surowego obiektu graficznego dodajemy 1 9

10 animację ruchu, klasyczną animację, kinematykę odwrotną lub animację 3D; typ automatycznie tworzonego symbolu zależy od typu animacji. Instancja jest kopią symbolu umieszczoną na stole montażowym lub zagnieżdżoną wewnątrz innego symbolu. Instancja może różnić się od swojego symbolu nadrzędnego pod względem koloru, rozmiaru i funkcji. Edycja symbolu uaktualnia wszystkie jego instancje, ale stosowanie efektów animacji do instancji symbolu wpływa na zmianę tylko tej instancji. 2.1 Typy symboli Każdy symbol posiada unikatową oś czasu, nieco inne przeznaczenie oraz inne możliwości obsługi. Do Osi czasu symbolu można dodać ramki, klatki kluczowe i warstwy w taki sam sposób, jak do głównej Osi czasu. Symbol tworzy się od zera, wybierając polecenie Wstaw > Nowy symbol lub konwertuje się istniejącą już grafikę do wybranego symbolu polecenie: Modyfikuj > Konwertuj do symbolu (F8 w systemie Windows). Tworząc symbol nadajesz mu nazwę i wybierasz jego typ (Rys. 10) Grafika Rys. 10: Okno Utwórz nowy symbol. Symbol graficzny stosuje się do statycznych obrazków i do utworzenia kawałków animacji wielokrotnego użycia, które są podczepione do głównej Osi czasu. Symbol graficzny działa tylko w synchronizacji w główną Osią czasu. Symbol ten nie nadaje się do zagnieżdżania dźwięku i interaktywnych kontrolek. Nie można stosować do Grafiki filtrów ani obsługiwać jej z poziomu ActionScript. Symbole graficzne nie przyczyniają się do wielkości pliku FLA tak bardzo jak przyciski czy klipy filmowe, ponieważ ich oś czasu nie zachowuje autonomii. Oś czasu z wyglądu przypomina oś główną dokumentu Przycisk Symbol przycisku tworzy się dla zapewnienia interaktywności w projekcie, dzięki temu że reaguje on na kliknięcia myszki, najazd i inne czynności użytkownika. Dzięki specjalnie zbudowanej osi czasu definiuje się grafiki związane z różnymi stanami przycisków (Rys. 11). Stany przycisku: W górze kiedy przycisk jest w stanie spoczynku (nie jest przyciskany ani kursor myszy nie znajduje nad przyciskiem); Over kiedy kursor myszy jest nad przyciskiem Down kiedy przycisk jest wciskany Hit oznacza pole reakcji przycisku Gotowe przyciski, po umieszczeniu na osi czasu projektu, należy nazwać specjalną nazwą rozpoznawalną dla operacji ActionScript (tak zwaną nazwą instancji), a następnie związuje się instancje tych

11 przycisków z odpowiednimi operacjami nasłuchiwania zdarzeń (np. klikanie myszą) i odpowiedzi na te zdarzenia. Rys. 11: Oś czasu przycisku służy do definiowania stanów przycisków. Po prawej stronie widać oddzielne grafiki zdefiniowane dla stanów W górze i Over Klip Klipy filmowe posiadają swoją własną wieloramkową Oś czasu, która jest niezależna od głównej Osi czasu. Są to autonomiczne, wielozadaniowe animacje, które mogą posiadać zagnieżdżone interaktywne kontrolki, dźwięki a nawet instancje innych klipów filmowych. Instancje klipu filmowego można także umieścić wewnątrz Osi czasu symbolu przycisku, aby utworzyć animowane przyciski. Dodatkowo, klipami filmowymi można zarządzać za pomocą skryptów ActionScript. Są to obiekty, które mogą reagować na zdarzenia związane z działaniem użytkownika lub odtwarzaniem filmu. 2.2 Edycja symbolu Podczas edytowania symbolu program Flash Pro/Animate CC aktualizuje wszystkie jego wystąpienia w dokumencie. Symbole edytuje się głównie na jeden z poniższych sposobów: W kontekście z innymi obiektami znajdującymi się na Stole montażowym, używając polecenia Edytuj w miejscu. Inne obiekty są wtedy wygaszone, aby odróżnić je od obiektów, które edytujesz. Nazwa symbolu, który edytujesz, pojawia się na pasku Edycja na górze Stołu montażowego, po prawej stronie bieżącej nazwy sceny (Rys. 12). Poprzez panel Biblioteka - należy podwójnie kliknąć ikonę symbolu w panelu Biblioteka. Symbol otwiera się we własnym oknie, bez możliwości podglądu kontekstu sceny. 2.3 Biblioteka Rys. 12: Edycja przycisku. Strzałka wskazuje pasek Edycji, na którym widoczna jest nazwa edytowanego symbolu. Biblioteka filmu zawiera wszystkie symbole, które tworzyliśmy lub tworzył je program automatycznie, importowane obrazy, muzykę, gotowe składniki, czcionki lub wideo (Rys. 13). Z biblioteki pobieramy obiekty (po prostu przeciągamy je), aby następnie umieścić na sole montażowym w odpowiednim miejscu na osi czasu. Wystąpienia obiektów w filmie można dalej personalizować, zmieniając niektóre ich ustawienia i wygląd bez wpływu na obiekt oryginalny. Biblioteka pokazuje ile razy użyto dany element na osi czasu oraz czy jest powiązanie obiektu z ActionScript, które daje możliwość 11

12 wykorzystania obiektu bezpośrednio z biblioteki, bez konieczności zamieszczania jego instancji na stole montażowym. Rys. 13: Panel biblioteki. 3 Typy animacji Podstawowe typy animacji to animacja poklatkowa klasyczna animacja animacja ruchu animacja kształtu Poza tym Flash oferuje bardziej zaawansowane formy animacji takie jak animacja oparta na narzędziu Kość (na zasadzie kinematyki odwrotnej) animacja oparta na narzędziach 3D (Obrót 3D i Translacja 3D) 3.1 Animacja poklatkowa Ze względu na możliwość dużego obciążenia pamięci urządzenia ten typ animacji stosuje się, gdy nie można osiągnąć efektu animacji inną drogą. Animacja ta polega na ustawieniu statycznych ujęć, w których to dokonujemy zmian na obiektach (Rys. 14). 12 Rys. 14: Przykład reprezentacji animacji poklatkowej na osi czasu. Niestety, w kilku wersjach Flasha niektóre efekty animacji 3D wymagają finalnie konwersji do animacji poklatkowej, gdyż narzędzie to wykazuje wady w pewnym zakresie. 3.2 Klasyczna animacja Dzięki tej animacji możliwe jest jednoczesne zrealizowanie kilku efektów: zmiany położenia obiektu, zmiany koloru, wielkości, proporcji i widoczności obiektu, dodanie efektów specjalnych, w tym zmian za

13 pomocą filtrów. Dzięki ustawieniom klatki kluczowej możliwe jest też dodanie obrotu do obiektu i ustawienie dynamiki animacji (przyspieszanie animacji, zwalnianie pod koniec, cofanie itp.). Aby zastosować tę animację wystarczy zdefiniować co najmniej dwie klatki kluczowe, w których ustawiamy wyjściowe i docelowe położenie i wygląd obiektu. Animacja klasyczna jest reprezentowana na osi czasu jako ujęcie z filetowym kolorem ramek (Rys. 15). Istotne jest też występowanie strzałki linia przerywana wskazuje na błędy animacji. Rys. 15: Przykład reprezentacji animacji klasycznej na osi czasu. Klasyczna animacja zachodzi na każdym typie symbolu, ale jeśli wcześniej nie konwertowaliśmy surowej grafiki do symbolu po dodaniu animacji klasycznej Flash utworzy własny symbol Grafika. 3.3 Animacja ruchu Animacje ruchu umożliwiają kontrolowanie animacji w największym zakresie. Poza tym animacje te są wydajniejsze i powodują mniejszy rozmiar pliku. Istnieje różnica pomiędzy klatkami definiującymi zmianę Obiektu - w tej animacji klatka kluczowa oznacza klatkę na osi czasu, w której po raz pierwszy na stole montażowym pojawia się wystąpienie symbolu. Odrębny termin klatka kluczowa właściwości oznacza wartość zdefiniowaną dla właściwości obiektu w określonym momencie lub w określonej klatce w późniejszej fazie animacji ruchu. Animacja ruchu jest reprezentowana na osi czasu jako ujęcie z niebieskim kolorem ramek (Rys. 16). Rys. 16: Przykład reprezentacji animacji ruchu na osi czasu. Pierwsza klatka w ujęciu jest klatką kluczową, klatka ostatnia klatką kluczową właściwości. Klatka kluczowa właściwości to klatka zakresu animacji, w której jawnie zdefiniowana jest wartość jednej lub wielu właściwości obiektu docelowego animacji. Modyfikowane właściwości mogą obejmować położenie, współczynnik alfa (przezroczystość), kolor tinty itd. Każda właściwość definiowana przez użytkownika ma swoje własne klatki kluczowe właściwości. W przypadku ustawienia więcej niż jednej właściwości w pojedynczej klatce w klatce tej rezydować będą klatki kluczowe każdej z ustawionych właściwości. Wyboru typów klatek kluczowych właściwości, jakie mają być wyświetlane na osi czasu, można dokonać w menu kontekstowym zakresu animacji (Rys. 17). 13

14 Rys. 17: Wybór klatki kluczowej właściwości z menu kontekstowego. Po prawej stronie prezentowane jest okno Właściwości klatki kluczowej właściwości Poszczególne właściwości zakresu animacji i jego klatek kluczowych właściwości można wyświetlać w obszarze Edytor ruchu (Rys. 18). Rys. 18: Edytor ruchu dla przykładowej animacji ruchu. Jeśli w trakcie animacji zmienia się położenie animowanego obiektu na stole montażowym, z zakresem animacji jest skojarzona ścieżka ruchu. Ścieżka ruchu przedstawia trajektorię ruchu animowanego obiektu na stole montażowym (Rys. 19). Ścieżkę ruchu można edytować na stole montażowym za pomocą narzędzi do zaznaczania, zaznaczania cząstkowego, konwertowania punktów kotwiczenia, usuwania punktów kotwiczenia i przekształcenia swobodnego, a także przy użyciu poleceń z menu Modyfikuj. Jeśli animowaną właściwością nie jest położenie, na stole montażowym nie pojawia się ścieżka ruchu. Możliwe jest również zastosowanie istniejącej ścieżki jako ścieżki ruchu przez wklejenie ścieżki do zakresu animacji na osi czasu classic_tweens 14

15 3.4 Animacja kształtu Rys. 19: Animacja ruchu z widoczną ścieżką ruchu na stole montażowym Dzięki tej animacji możliwe jest przeobrażanie grafiki (jednego obiektu w drugi) w bardzo prosty sposób. Wystarczy zdefiniować dwa odrębne obiekty wektorowe (Rys. 20) (nie należy ich konwertować do żadnego z symboli) w dwóch różnych klatkach kluczowych leżących na tej samej warstwie i dla pierwszej klatki ustawić typ animacji kształtu. Animacja kształtu jest reprezentowana na osi czasu jako ujęcie z zielonym kolorem ramek (Rys. 21). Istotne jest też występowanie strzałki linia przerywana wskazuje na błędy animacji. Rys. 20: Przykładowe obiekty graficzne zdefiniowane w klatkach kluczowych (gwiazda i litera W) oraz wygląd klatek przejściowych w trakcie animacji (podgląd możliwy dzięki opcji Onion skin patrz Rys. 17). Rys. 21: Przykład reprezentacji animacji kształtu na osi czasu. Po prawej pokazane zaznaczenie klatek w trybie przenikania ujęć (Onion skin). 4 Warstwy zwykłe i warstwy specjalne Warstwy pomagają uporządkować zawartość dokumentu. Obiekty znajdujące się na danej warstwie można rysować i edytować bez wpływania na obiekty z innych warstw. Przed rozpoczęciem malowania, edytowania lub modyfikowania w obrębie danej warstwy należy zaznaczyć tę warstwę na osi czasu (co spowoduje, że stanie się ona aktywna). Jeśli warstwa jest aktywna lub folder jest aktywny, to obok nazwy tego elementu na osi czasu jest wyświetlana ikona ołówka. Warstwa umieszczona wyżej przykrywa zawartość warstwy leżących pod nią. Warstwy można także ukryć, zablokować oraz inaczej rozmieścić. Jedynie pamięć komputera użytkownika jest ograniczeniem dla ilości tworzonych warstw. Liczba warstw nie ma wpływu na rozmiar publikowanego pliku SWF. Rozmiar pliku zwiększają tylko umieszczone w warstwach obiekty. Pracę z warstwami (zwłaszcza ich dużą liczbą) może ułatwić umieszczenie ich w specjalnie dobranych folderach. Zwijanie i rozwijanie folderów warstw na osi czasu nie ma wpływu na zawartość stołu montażowego. Należy używać odrębnych warstw lub folderów na pliki muzyczne, pliki ActionScript, etykiety klatek i komentarze do klatek (Rys. 22). Dzięki temu można łatwiej odszukać elementy określonego typu. 15

16 Rys. 22: Warstwy zwykłe i foldery warstw w oknie Osi czasu. Podczas tworzenia zaawansowanych efektów pomocne są specjalne warstwy linii pomocniczych (ułatwiające rysowanie i edytowanie) oraz warstwy maskujące. 4.1 Warstwa linii pomocniczej Warstwy linii pomocniczych zawierają obrysy, które mogą ułatwiać definiowanie ruchów obiektów w ramach klasycznych animacji. Animowany obiekt znajduje się na warstwie podporządkowanej warstwie linii pomocniczej (Rys. 23). Jednej warstwie linii pomocniczej można podporządkować wiele warstw. Rys. 23: Warstwa linii pomocniczej z konturem elipsy, po którym porusza się animowany kwadrat umieszczony na warstwie podporządkowanej. 4.2 Warstwa maskująca i maskowana Warstwy maskujące zawierają obiekty używane jako maski w celu ukrywania wybranych fragmentów warstw leżących pod nimi. Warstwy maskowane to warstwy znajdujące się pod warstwami maskującymi i skojarzone z nimi (Rys. 24). Widoczna jest tylko ta część warstwy maskowanej, która nie jest zakryta przez maskę. Maskować możemy dowolną ilość warstw każda warstwa maskowana musi być podporządkowana warstwie maskującej w tym celu nadajemy im typ Maskowane. Warstwa maskująca musi mieć nadany typ Maska. Rys. 24: Warstwa Maska (o nadanej nazwie maska-elipsa) i dwie podrzędne warstwy maskowane. Maska w kształcie elipsy częściowo zasłania napis oraz obiekt leżące na podporządkowanych warstwach. 16

17 5 Typy klatek We flashu na listwie czasowej ustawiamy animację poprzez organizowanie ujęć, dodawanie klatek kluczowych i klatek zwykłych. Klatka kluczowa jej obecność oznacza jakąś zmianę na listwie czasowej. Obiekt umieszczony na scenie trafia zawsze do klatki kluczowej, a usunięcie klatki kluczowej powoduje skasowanie całej jej zawartości. Obecność klatki kluczowej reprezentowana jest przez czarne kółko na szarym (ujęcia statyczne) lub zielonym, fioletowym, niebieskim tle (w przypadku animacji) (rys. 25). Rys. 25: Klatki kluczowe reprezentowane są czarną kropką Pusta klatka kluczowa - umożliwia rozpoczęcie sekwencji, w której nie będzie zawartości poprzedniej klatki. Obecność pustej klatki kluczowej reprezentowana jest przez białe kółko na białym tle (Rys. 26). Rys. 26: Puste klatki kluczowe reprezentowane są białą kropką Klatka zwykła tylko rozciąga ujęcie, nie decyduje o etapie animacji, zmianie wyglądu bądź położenia obiektu. Klatki zwykłe muszą następować zawsze po jakiejś klatce kluczowej (pustej lub zawierającej obiekt) i zawierają tę samą treść co klatka kluczowa (Rys. 27). Rys. 27: Zwykłe klatki nie zawierają kropek 6 Dźwięk we Flash Pliki dźwiękowe we Flashu są dość powszechnie stosowane. Ich użycie znacznie wzbogaca filmy Flasha możemy mieć muzykę w tle animacji, narrację, odtwarzanie dźwięków po kliknięciu przycisków i budować coraz bardziej zaawansowane odtwarzacze utworów muzycznych. Istnieje kilka sposobów na dodanie dźwięku do filmu Flasha. W trakcie ćwiczeń zostaną zaprezentowane wszystkie możliwości. Najprostsze sposoby polegają na osadzeniu dźwięku na listwie czasowej i doborze odpowiedniej synchronizacji dźwięku z listwą czasową w ustawieniach klatki. Można też powodować zanik lub narastanie dźwięku dla nadania ścieżce dźwiękowej większej płynności. Można też przypisywać dźwięki do przycisków dla uzyskania większej interaktywności. 17

18 Pliki dźwiękowe są umieszczane w programie Flash/Animate przez importowanie ich do biblioteki lub bezpośrednie importowanie na stół montażowy. Kod ActionScript 2.0 lub 3.0 pozwala także na dynamiczne pobieranie dźwięków, wówczas cała obsługa dźwięku odbywa się poprzez operacje AS. Flash obsługuje kilka formatów plików dźwiękowych: WAV, AIF i MP3. Należy pamiętać jednak, że do dynamicznego ładowania dźwięków w trakcie odtwarzania filmu Flasha możemy wykorzystać tylko format MP3. Dźwięki mogą zajmować dużo miejsca na dysku i wymagać znacznych ilości pamięci RAM. Należy jednak przy tym pamiętać, że dane dźwiękowe typu mp3 mają postać skompresowaną i nie są tak wymagające jak format WAV czy AIFF. Przy używaniu plików WAV lub AIFF najlepiej jest korzystać z dźwięków mono o częstotliwości khz (dźwięk stereo oznacza dwa razy więcej danych niż mono), jednak program Flash/Animate może importować dźwięki 8- lub 16-bitowe o częstotliwości próbkowania 11, 22 lub 44 khz. Dźwięki nagrane w formatach niebędących wielokrotnością 11 khz (na przykład 8, 32 lub 96 khz) są podczas importowania ponownie próbkowane. Jeśli do dźwięków w programie Flash/Animate będą dodawane efekty, najlepiej jest importować dźwięki 16-bitowe. Przy ograniczonej ilości pamięci RAM klipy dźwiękowe powinny być krótkie lub ograniczone do dźwięków 8-bitowych (zamiast 16-bitowych). W programie Flash/Animate występują dwa rodzaje dźwięków: dźwięki strumieniowe i dźwięki zdarzeń. Dźwięk zdarzenia musi zostać w pełni pobrany zanim rozpocznie się jego odtwarzanie, które nie wygasa samoczynnie, lecz trwa dopóki nie zostanie w sposób celowy zatrzymane. Dźwięki strumieniowe odtwarzane są zaraz po pobraniu kilku pierwszych klatek; są one zsynchronizowane z osią czasu w celu odtwarzania na stronach internetowych. Jeśli dźwięk jest umieszczany na osi czasu to warto zapoznać się teraz z opcjami synchronizacji dźwięku z osią czasu, aby móc poprawnie je stosować: Zdarzenie - Zestraja dźwięk z wystąpieniem zdarzenia. Dźwięk zdarzenia jest odtwarzany, gdy głowica odtwarzania na osi czasu dotrze do uruchamiającej go klatki kluczowej. Dźwięk jest odtwarzany w całości, nawet w przypadku zatrzymania odtwarzania pliku SWF. Jeśli podczas odtwarzania dźwięku zdarzenia zostanie utworzone wystąpienie tego samego dźwięku (na przykład użytkownik ponownie kliknie przycisk lub głowica odtwarzania minie klatkę kluczową uruchamiającą dany dźwięk), będzie kontynuowane odtwarzanie pierwszego wystąpienia dźwięku i jednocześnie rozpocznie się odtwarzanie kolejnego wystąpienia tego dźwięku. Należy o tym pamiętać w przypadku używania długich dźwięków, gdyż mogą się one nakładać, generując niezamierzone efekty. Początek - Zastosowanie tej opcji daje podobne wyniki jak opcja Zdarzenie, ale jeśli dźwięk jest już odtwarzany, nie można rozpocząć odtwarzania nowego wystąpienia tego dźwięku. Zatrzymaj - Powoduje wyciszenie wskazanego dźwięku. Stosuje się na ogół w klatce kluczowej, którą umieszcza się na końcu ujęcia z dźwiękiem, w celu zatrzymania go. Strumień - Synchronizuje dźwięk do odtwarzania w witrynie internetowej. Program Flash/Animate wymusza zestrojenie animacji z dźwiękiem strumieniowym. Jeśli klatki animacji nie mogą być wystarczająco szybko rysowane, program je pomija. W przeciwieństwie do dźwięków zdarzenia, dźwięki strumieniowe ustają wraz z zatrzymaniem odtwarzania pliku SWF. Ponadto odtwarzanie dźwięku strumieniowego nie może przekraczać zakresu klatek, na które przypada. 18

19 Uwaga: Aby użyć dźwięku MP3 jako dźwięku strumieniowego, należy go ponownie skompresować w celu wyeksportowania. Plik MP3 można wyeksportować, zachowując kompresję zastosowaną przy jego importowaniu. 7 Eksportowanie i publikowanie plików Po zakończeniu pracy nad projektem lub jeszcze w jej trakcie plik roboczy (FLA) musi zostać testowo lub ostatecznie przekonwertowany do postaci finalnej. Do sprawdzania działania pliku SWF przed publikowaniem służą polecenia Testuj film (Sterowanie > Testuj film > Testuj) i Testuj scenę (Sterowanie > Testuj scenę). Jeśli chcemy uzyskać produkt docelowy musimy opublikować lub wyeksportować gotowy projekt Polecenie Publikuj tworzy pliki wyjściowe według wcześniejszych ustawień; domyślnie jest to plik SWF oraz dokument HTML, który wstawia zawartość Flash do okna przeglądarki. Dla dokumentu HTML dostępne są różne szablony, np. szablon obsługujący tryb pełnoekranowy przeglądarki. Ważne jest, że do otworzenia pliku SWF potrzebne jest zainstalowanie w przeglądarkach internetowych programu Flash Player. Ustawienia publikowania formatów dokonane przez użytkownika, są przechowywane w samym pliku FLA. We Flashu można publikować także materiały w formatach alternatywnych: samodzielne aplikacje nazywane rzutnikiem (Projektor Windows i Projektor Mac), sekwencje obrazów GIF, JPEG, PNG oraz animowany GIF. Pliki FLA można też eksportować do różnych formatów. Przypomina to publikowanie z jednym wyjątkiem: w przypadku eksportowania ustawienia formatów nie są zapisywane w pliku FLA. Na dodatek, wśród formatów dostępnych do eksportu pojawiają się formaty filmowe AVI (dla Windows) i MOV (Quick Time dla ios). Rys. 28: Okno ustawień publikowania wybrano kartę formatu HTML. 19

20 7.1 Aplikacje Adobe AIR Aplikacje tworzone dla środowiska Adobe AIR to pełnoprawne aplikacje desktopowe. Aplikacje te projektowane są w zasadzie za pomocą tych samych narzędzi Flasha co aplikacje internetowe ale odrębny jest sposób ich publikowania (muszą zostać spakowane i oznaczone jak pełnoprawne aplikacje komputerowe). Inny jest też sposób ich instalowania, zwłaszcza na urządzeniach mobilnych. Urządzenie na którym chcemy mieć aplikację desktopową musi być wyposażone w Środowisko Adobe AIR, które jest środowiskiem wykonawczym dla różnych systemów operacyjnych i typów ekranów i jest instalowane jednokrotnie na komputerze lub urządzeniu użytkownika. Dzięki niemu możliwe jest instalowanie i uruchamianie aplikacji AIR. W systemie ios nie jest instalowane osobne środowisko wykonawcze AIR. Każda aplikacja AIR w tym systemie jest autonomiczna. Ponieważ Środowisko Adobe AIR udostępnia spójną platformę i architekturę niezależną od systemu operacyjnego aplikacje opracowane dla środowiska AIR będą działać w wielu różnych systemach operacyjnych, bez dodatkowego nakładu pracy ze strony programisty. Jeżeli tworzymy we Flashu zawartość dla urządzeń przenośnych to w jego środowisku roboczym, dzięki narzędziu Mobile Content Simulator, możemy testować materiał w emulowanym systemie Android lub ios. Mobile Content Simulator udostępnia polecenie Sterowanie > Testuj film, które służy do testowania plików w programie AIR Debug Launcher dla urządzeń przenośnych. Po otwarciu okna symulatora można wysyłać do dokumentu dane wejściowe w taki sposób, jakby był on uruchomiony na urządzeniu przenośnym. 8 Literatura do przedmiotu 1. Adobe Flash Professional CS6/CS6PL. Oficjalny podręcznik, Helion, Gliwice Perkins Todd. Adobe Flash CS5/CS5 PL Professional Biblia. Helion, Gliwice Zakrzewski Paweł. Adobe Flash CS6 i ActionScript 3.0. Interaktywne projekty od podstaw. Helion, Gliwice Programowanie w języku ADOBE ACTIONSCRIPT 3.0 dla środowiska Adobe Flash. Adobe Systems Incorporated, San Jose, California, Materiały szkoleniowe i pomoc techniczna Adobe Animate CC 20

21 9 Zadania do realizacji 9.1 Pierwsza animacja oparta o klasyczną animację Podczas tego ćwiczenia będziemy animować kwadrat. Animacja będzie polegała na tym, że kwadrat w trakcie odtwarzania filmu przesunie się od jednego narożnika sceny po przekątnej na drugi kraniec, a podczas ruchu będzie on zmieniał kolor, wykona jeden obrót i będzie się zmniejszał. Stół montażowy z pokazaną drogą pokonywaną przez kwadrat. ETAPY PRACY: Krok 1 - Rozpoczęcie pracy Ustawienie Właściwości stołu montażowego Krok 2 Rysowanie kwadratu i modyfikacja jego właściwości Krok 3 Tworzenie automatycznej animacji ruchu na osi czasu Krok 4 Dodanie efektów animacji Krok 1 - Rozpoczęcie pracy Ustawienie Właściwości stołu montażowego Do pracy wybierz nowy plik z ActionScript 3.0. W panelu Właściwości ustalamy rozmiary pola pracy np. Szerokość stołu montażowego na 450 piks. (pikseli) i Wysokość stołu... na 120 piks. Kolor tła czarny. Aby panel pokazywał właściwość pola roboczego nie może być zaznaczony żaden element na scenie, ani klatka filmu. Uwaga panel może być zlokalizowany z prawej strony ekranu lub inaczej! Boczne położenie panelu dostępne jest przy klasycznym ustawieniu przestrzeni roboczej. 21

22 Krok 2 Rysowanie kwadratu i modyfikacja jego właściwości Rysujemy na stole montażowym kwadrat narzędziem Prostokąt (R). Przed narysowaniem sprawdźmy, czy opcja Rysowanie obiektów (J) jest włączona. Narzędzie Prostokąt (R) Uwaga! W celu uzyskania dokładnego kwadratu, staramy się zbliżyć do niego rysowany kształt, aż w prawym dolnym rogu rysowanego kształtu pojawi się małe lecz widoczne kółko. Oznacza ono, że ciągnąc mysz wzdłuż przekątnej, obraz będzie się skalował bez zmiany proporcji. Wybór koloru obramowania i koloru wypełnienia Kolory wybieramy przed rysowaniem. Do zmiany kolorów po narysowaniu obiektów służy panel Właściwości obiektu. Rysowanie obiektów (J) Zapobiega niechcianemu oddzielaniu krawędzi od tła obiektów. To kółko wskazuje czy rysujemy kwadrat czy też prostokąt Kwadrat rysujemy z lewej strony pola pracy zostawiając od górnej jego krawędzi około 1 cm. Jeżeli nam się to nie uda, możemy go przenieść. W celu przeniesienia kwadratu w odpowiednie miejsce, używamy narzędzia zaznaczania obiektów. (Jeśli nie włączylibyśmy przed rysowaniem kwadratu opcji Rysowanie obiektów (J), to moglibyśmy oddzielnie przenosić jego środek i boki!). Do przenoszenia możemy także użyć narzędzia wyboru obiektów. Jednak zwróćmy uwagę, że w momencie złapania kwadratu za którykolwiek z aktywnych wierzchołków, spowodujemy jego zniekształcenie. Jeśli chcemy zmodyfikować wyjściowe właściwości kwadratu (kolor tła, kolor i grubość obramowania to musimy użyć okna Właściwości dla obiektu. Znajduje się ono w tej samej lokalizacji co Właściwości stołu montażowego, lecz aby uwaktywnić właściwości obiektu musi on być najpierw zaznaczony [ klikniety ] na stole montażowym. Jeśli rysowaliśmy obiekt z wybrana opcją Rysowanie obiektów to musmy obiekt EDYTOWAĆ, czyli kliknąć 2x, gdyż nie mamy bezpośredniego dostepu do jego właściwości. W panelu Właściwości ustalamy kolor obramowania kwadratu na żółty i wypełnienie na błękitny. Możemy także ustalić grubość i styl obramowania. Ustawiamy grubość obramowania na 3 piksele: 22

23 Krok 3 Tworzenie automatycznej animacji ruchu na osi czasu Teraz przez chwilę będziemy pracować tylko na osi czasu. Klikamy na klatkę nr. 1 prawym klawiszem myszy. Uaktywniamy w ten sposób menu kontekstowe, które zawiera wiele pożytecznych opcji. Wybieramy z menu polecenie: Utwórz klasyczną animację. Następnie wstawiamy klatkę kluczową w klatce nr 20 (zaznaczasz klatkę 20 i wystarczy, że użyjesz klawisza funkcyjnego F6). W polu warstw powinna się od razu pokazać strzałka na lekko fioletowym tle: Teraz będziemy zaznaczać zarówno klatki kluczowe (są już dwie), jak i obiekt na stole montażowym, aby nadać mu odpowiednie ustawienia w różnych momentach animacji. A więc: będąc w klatce 20 (mamy ją już zaznaczoną dzięki poprzedniej operacji) łapiemy wskaźnikiem nasz kwadrat i po prostu przenosimy go na prawą stronę stołu montażowego: Naciśnij Enter. Już widać jak kwadrat wędruje po ekranie. Krok 4 Dodanie efektów animacji 23

24 OBRÓT: Przechodzimy teraz do klatki nr 1 (zaznaczasz ją na osi czasu) i w oknie Właściwości w sekcji Animacja ustal opcję Obróć na W prawo i zmień wartość razy (x) na 1: KOLOR: Zaznaczasz klatkę nr. 20 oraz zaznaczasz kwadrat na stole montażowym. Jak widać znów zmieniły się opcje w oknie Właściwości. Teraz dotyczą one głównie ustawień zmian wizualnych obiektu podczas animacji. Z okna Właściwości w zakładce Efekt koloru wybieramy opcję Tinta i za pomocą rozwijanej palety kolorów ustalamy nowy kolor na biały: Możemy zobaczyć, co osiągnęliśmy wciskając Enter. Kwadrat bieleje przesuwa się i obraca. SKALOWANIE: Sprawimy teraz, że kwadrat będzie się zmniejszał. Przechodzimy do klatki 20 (czyli zaznaczamy ją na osi czasu) i klikamy prawym klawiszem na nasz już biały kwadrat. Z rozwiniętego menu kontekstowego wybieramy opcję Przekształcanie swobodne. Teraz możemy łapiąc za róg kwadracika zmienić jego rozmiar. Zmniejszamy go. DYNAMIKA: Zaznacz pierwszą klatkę animacji i w panelu Właściwości w polu Dynamika wpisz wartość 100. Zrób test efektu (Ctrl + Enter). Następnie edytuj krzywą dynamiki za pomocą symbolu ołówka i ustaw własny efekt dynamiki. Na koniec należy zapisać plik projektu (menu Plik Zapisz) i opublikować animację (menu Plik Publikuj). Należy zachować plik do kolejnego ćwiczenia! 24

25 9.2 Animacja obiektu po ścieżce Celem ćwiczenia jest poznanie procesu tworzenia automatycznej animacji ruchu po torze, który wskazuje że obiekt ma poruszać się inaczej, niż w linii prostej. Będziemy animować kwadrat z poprzedniego ćwiczenia oraz całkiem nowy obiekt. ETAPY PRACY: Krok 1 Dodanie klasycznej linii pomocniczej ruchu do istniejącej klasycznej animacji Krok 2 Praca ze ścieżką w animacji ruchu Krok 1 Dodanie klasycznej linii pomocniczej ruchu do istniejącej klasycznej animacji Otwórz plik z poprzedniego ćwiczenia. Nazwij warstwę z animacją kwadrat. Kliknij na warstwę prawym klawiszem myszy i z menu podręcznego wybierz polecenie Dodaj klasyczne linie pomocnicze ruchu. Spowoduje to dodanie kolejnej warstwy (nadrzędnej), a już istniejąca warstwa z kwadratem zmieni swój status na podległy nowej warstwie (warstwa podrzędna). W nowej warstwie rysujemy tor animacji. Można go narysować narzędziem ołówka lub obramowaniem koła. Nasz kwadrat powinniśmy ułożyć tak by podczas trwania animacji cały czas stykał się z narysowanym torem. Nie wykluczone, że kwadrat sam odnajdzie ścieżkę, po której będzie się poruszał. W celu zwiększenia płynności animacji możemy zwiększyć ilość klatek występujących w animacji (chwytając myszą za ostatnią klatkę i przeciągając ją w prawo), jak również liczbę obrotów wykonywanych przez kwadrat. Może zaistnieć także potrzeba przeniesienia kwadratu w końcowy punkt toru ruchu. Sprawdzamy projekt naciskając Enter i publikujemy go. Krok 2 Praca ze ścieżką w animacji ruchu 25

26 Otwórz nowy plik i ustaw parametry stołu montażowego (mogą być takie same jak w poprzednim ćwiczeniu). Narysuj kwadrat na stole montażowym. Zaznacz klatkę z kwadratem prawym przyciskiem myszy i z menu podręcznego wybierz opcję Utwórz animację ruchu: Automatycznie pojawi się kilka klatek w tej warstwie. Zaznacz ostatnią i przenieś kwadrat na przeciwległą krawędź stołu montażowego. Pojawi się linia, która wyznacza tor ruchu obiektu. Można ją zmodyfikować używając narzędzi zaznaczania (czarna strzałka) lub zaznaczania cząstkowego (biała strzałka). Poniżej znajdują się przykładowe linie pomocnicze. Tak jak w poprzednim ćwiczeniu możemy także do efektów animacji dodać obrót, zmianę skali i koloru obiektu używając klatek kluczowych właściwości (patrz: Animacja ruchu). Zaznaczanie cząstkowe Zwykłe zaznaczanie 26

27 9.3 Animacja kształtu Celem ćwiczenia jest poznanie animacji kształtu. Ta technika animacji wymaga pracy na surowym obiekcie wektorowym. Dzięki niej możemy wykonać ciekawe metamorfozy obiektów. Efektem tego ćwiczenia będzie przejście od kształtu kwadratu do koła. ETAPY PRACY: Krok 1: Rysowanie kwadratu i ustawienie animacji kształtu Krok 2: Rysowanie koła Krok 3: Dodanie punktów zmiany kształtu Krok 4: Odwrócenie animacji Krok 1 Rysowanie kwadratu i ustawienie animacji kształtu Otwórz nowy plik. Za pomocą narzędzia Prostokąt narysuj kwadrat. Zaznacz prawym klawiszem myszy klatkę na listwie i wybierz polecenie Utwórz animację kształtu. Klatka powinna zmienić swój kolor na zielony. Krok 2 Rysowanie koła Przejdź do klatki 20 i wciśnij klawisz F6. Jak widać ujęcie wydłużyło się i nadal ma kolor zielony. W klatce 20 usuń kwadrat ze stołu montażowego (Delete) i w to miejsce narysuj koło. Koło może mieć inne wypełnienie niż kwadrat i może leżeć w innym miejscu. Teraz możesz przetestować naszą animację (Ctrl+Enter). Animacja już działa następuje zmiana kształtu, ale w następnym kroku dodamy punkty zmiany kształtu, które określą ja ta zmiana ma przebiegać. Krok 3 Dodanie punktów zmiany kształtu Przejdź do klatki 1 i z menu wybierz polecenie Modyfikuj > Kształt > Dodaj punkty zmiany kształtu. Można też użyć skrótu Ctrl+Shift+H. 27

28 Na ekranie pojawi się czerwone kółeczko z literą a jest to nasz pierwszy punkt zmiany kształtu. Punktów możemy dodawać tyle ile jest liter w alfabecie, czyli od A-Z. Dodajmy jeszcze 3 by mieć punkty a, b, c i d. Umieszczamy je po kolei w połowie boków kwadratu. Następnie przechodzimy do klatki nr 20. Nasze punkty już tam są. Należy je teraz rozmieścić na okręgu inaczej niż były w kwadracie np. po przeciwległych stronach: punkt a tam gdzie był b, b gdzie a, c gdzie d, a d gdzie c. Nasze Hint'y powinny zmienić kolor na zielony. Odtwórzmy animację (Enter lub Ctrl+Enter). Zmiana kształtu następuje teraz inaczej niż porzednio. Krok 4 Odwrócenie animacji Zaznaczamy klatkę nr 1 zawierającą kwadrat, klikamy na nią prawym klawiszem myszy i wybieramy polecenie Kopiuj klatki. Wchodzimy do klatki nr 40 i tu klikając prawym klawiszem wklejamy wcześniej skopiowana klatkę zawierającą nasz kwadrat wybierając z rozwiniętego menu opcję Wklej klatki. W klatce z kółkiem (20) dodajemy ponownie punkty zmiany kształtu (a, b, c, d) układając je na poprzednich punktach. W klatce 40 układamy punkty w takich położeniach jakie były w klatce nr 1. 28

29 9.4 Animacja z wykorzystaniem warstwy Maska Celem ćwiczenia jest poznanie techniki maskowania obiektów. Załóżmy, że chcemy odsłaniać powoli obiekt. Do tego celu służy nam właśnie maska. Zrobimy animację, w której krajobraz odsłaniany jest za pomocą ruchomej maski-kółka. Utworzymy trzy warstwy: na górnej warstwie tworzymy animowane kółko (animujemy je od lewej do prawej strony ekranu), na drugiej warstwie ma znaleźć się obrazek, który owe kółko będzie odsłaniać jest to krajobraz w dzień, a na dolnej warstwie możemy narysować tło - tłem jest ten sam krajobraz tylko w barwach ciemnych (noc). Całość powinna nam dać efekt noktowizora. ETAPY PRACY: Krok 1: Ustawienie obszaru roboczego i dodanie warstw Krok 2: Animacja koła Krok 3: Tworzenie warstwy dzień Krok 4: Tworzenie warstwy noc Krok 5: Praca z listwą czasową, w tym Maskowanie Krok 1 Ustawienie obszaru roboczego i dodanie warstw Otwórz nowy plik. Rozmiar pola roboczego zdefiniuj jako 600 x 200 pikseli. Dodaj dwie nowe warstwy. Warstwy nazwij jak na rysunku poniżej. Krok 2 Animacja koła Zaznacz warstwę maska i narysuj na niej koło. Umieść je poza lewą krawędzią stołu montażowego. Nie przejmuj się jego wyglądem. Ważne jest tylko to, że obiekt ten powinien mieć zdefiniowane wypełnienie. Zaznacz prawy klawiszem myszy klatę 1 z kołem i nadaj jej animacje ruchu. Pojawiło się kilka klatek w tej warstwie. Złap za krawędź ostatniej klatki i przeciągnij ją do klatki nr 60. Zaznacz klatkę 60, a następnie przenieś koło poza prawą krawędź stołu montażowego. 29

30 Krok 3 Tworzenie warstwy dzień Zaznacz warstwę dzień i za pomocą pędzla narysuj krajobraz. Rysując poszczególne elementy krajobrazu zmieniaj kolor wypełnienia i szerokość pędzla. Należy rysować w kolejności: niebo, trawa, korony drzew i na końcu pnie drzew. Krok 4 Tworzenie warstwy noc Zaznacz prawym klawiszem myszy klatkę 1 na warstwie dzień i wybierz polecenie Kopiuj klatki. Zaznacz prawym klawiszem myszy klatkę 1 na warstwie noc i wybierz polecenie Wklej klatki. Ukryj widok warstwy dzień klikając na ikonkę oka na listwie czasowej. Można także ukryć warstwę maska. Widzimy teraz tyko elementy z warstwy noc. Musimy teraz za pomocą narzędzi wypełnienia zmienić kolor elementów krajobrazu, tak aby uzyskać krajobraz widziany w nocy. Wszystkie elementy muszą być bardzo ciemne ale nasze oko powinno je odróżnić. Krok 5 Praca z listwą czasową, w tym Maskowanie Możemy teraz odkryć widok warstw. Musimy też przedłużyć ujęcia w warstwie dzień i noc do klatki 60. Wystarczy zaznaczyć klatkę 60 w obu warstwach i wcisnąć klawisz F5. 30

31 Musimy teraz określić warstwę maskującą i maskowaną. Klikamy więc prawym przyciskiem myszy na warstwie maska i wybieramy polecenie Maska. Warstwy maska i dzień zmieniły swój charakter. maska jest warstwą nadrzędną, a dzień podrzędną. Możemy teraz przetestować naszą animację (Ctrl+Enter). Efekt ćwiczenia powinien być podobny do tego: 31

32 9.5 Animacja tekstu W tym ćwiczeniu stworzymy animowany napis, np. KURS FLASHA. ETAPY PRACY: Krok 1: Praca z tekstem Krok 2: Dystrybucja liter na warstwach Krok 3: Animacja liter Krok 1 Praca z tekstem Otwórz nowy plik i ustal rozmiar stołu montażowego na 550x250 pikseli. Następnie przy pomocy narzędzia tekstowego utwórz dowolną bezszeryfową czcionką napis. Możesz go znacznie powiększyć (np. rozmiar 50) i dobrać kolor (np. niebieski) Napis po utworzeniu jest obiektem tekstowym (mówi o tym obramowanie całego napisu). Tekst utworzony czcionką, której odwiedzający naszą stronę nie posiada wyświetli się nieprawidłowo, dlatego przed dodaniem animacji musimy napis przekształcić w obiekt graficzny. Naciśnij w tym celu CTRL+B (lub menu Modyfikuj Rozdziel). Musisz być świadomy, że w tym momencie tracisz możliwość dalszej edycji tekstu. Musimy jeszcze raz powtórzyć polecenie Rozdziel zaznaczmy do tego jeszcze raz wszystkie litery. Możemy do utworzonego napisu dodać obramowanie dowolnej grubości. Służy do tego narzędzie kałamarz. Na zaznaczonym tekście klikamy kałamarzem raz na pierwszej literze (dwa lub trzy razy, jeśli litera ma wewnętrzną krawędź). Grubość i kolor obramowania możemy teraz określić w oknie Właściwości. Używamy ponownie kałamarza do nadania obramowana do pozostałych liter. Efekt, który uzyskujmy może wyglądać na przykład tak: 32

33 Krok 2 Dystrybucja liter na warstwach Należy rozdzielić napis tak aby każda litera położona była ona w oddzielnej warstwie. Zaznaczamy cały tekst i na tekście klikamy prawym klawiszem myszki. Z menu podręcznego wybieramy polecenie Rozmieść na warstwach: Polecenie tworzy tyle warstw ile jest obiektów (liter) i rozmieszcza te obiekty przypadkowo na nowych warstwach. Naszym zadaniem jest uporządkowanie warstw w kolejności, jaką zajmują litery w napisie oraz nazwanie warstw: Krok 3 Animacja liter Przystępujemy do animacji liter. Zaznaczamy cały tekst narzędziem zaznaczania obszaru zaznacza się ikony czy foldery w Windows'ie: tak jak Klikamy prawym klawiszem myszy na zaznaczoną już klatkę dowolnej litery, tak by nie odznaczyć pozostałych. Z rozwiniętego menu wybieramy trzecią opcję Utwórz klasyczną animację: 33

34 W efekcie każda klatka nr 1 w każdej warstwie powinna zrobić się niebieska. Przechodzimy teraz do klatki nr. 20 i klikamy tę klatkę w każdej warstwie z wciśniętym klawiszem SHIFT (lub klikamy na pierwszą klatkę od góry i z przyciśniętym klawiszem myszki ciągniemy zaznaczenie do dołu). Jeśli mamy już zaznaczenie klatek wciskamy F6. W ten sposób dodaliśmy klatkę kluczową, która zakończy animację. Teraz wszystkie warstwy powinny zawierać strzałkę oznaczającą trwającą animację: Wracamy do klatki nr 1 i tu zaznaczmy ponownie cały tekst. Na tekście Klikamy prawym klawiszem myszki i wybieramy opcję Przekształcanie swobodne i łapiąc za widoczne punkty transformacji (kwadraciki) skalujemy nasz tekst tak by był 3 czy nawet 4 razy większy: Ustawiamy teraz oddzielnie każdą literę tak by była poza polem roboczym, a nie na nim. 34

35 Teraz sprawimy by litery były niewidoczne i wraz z czasem trwania animacji pojawiły się na ekranie. Zaznaczamy więc ponownie razem wszystkie litery będąc w klatce nr 1. W panelu Właściwości wybieramy opcję Alfa i ustawiamy ją na 0%. Litery staną się niewidoczne. Naciśnijmy teraz Enter by zobaczyć jak to działa. Litery zmniejszają się jednocześnie pojawiając się w naszej animacji. Teraz sprawimy, że litery będą pojawiać się po kolei w odstępach czasu i pozostawać w polu animacji. Zaznaczamy warstwę litery nr 2 klikając na jej nazwę. Następnie łapiemy za podświetlone klatki i przeciągamy je do klatki nr 5: Sprawi to, że litera nr 2 pojawi się z opóźnieniem 5-u klatek w stosunku do litery nr 1. Czynność powtarzamy dla każdej litery ale tak by opóźnienie było za każdym razem większe o 5 klatek: 35

36 By litery nie znikały od razu po pojawieniu się dodajemy klatkę kluczową (F6) w klatce nr 65 w każdej warstwie (prócz ostatniej warstwy z literą A). Warstwy na koniec powinny wyglądać tak: I publikujemy naszą animację 36

37 9.6 Animacja 3D Do animacji 3D są do przeznaczone narzędzia Obrót 3D (W) i Translacja 3D (G). Narzędzia te działają na klipach filmowych, które mogą zawierać grafikę wektorową lub rastrową. ETAPY PRACY: Krok 1: Przygotowanie grafiki Krok 2: Podstawowa animacja 3D Krok 3: Modyfikacja animacji 3D Krok 4: Powielanie symboli Krok 5: Animacji 3D kolejnych obiektów Krok 6 Konwersja na animację klatka po klatce Krok 7 Zmiana tła animacji Krok 1 Przygotowanie grafiki Zaczynamy oczywiście od otwarcia nowego dokumentu o klasycznych wymiarach. Narzędziem Prostokąt (R) rysujemy duży kwadrat, któremu nadajemy wypełnienie gradientowe (paleta Kolor) i wyraźne obramowanie (panel Właściwości). Uwaga, jeśli chcemy zaokrąglić narożniki kwadratu, to możemy to uczynić tylko przed narysowaniem obiektu wybierając odpowiednie wartości w panelu Właściwości narzędzia. Gotowy element graficzny Wypełnienie modyfikujemy za pomocą narzędzia Przekształcenie gradientu (F). Przekształcamy gotowy element do symbolu graficznego (F8). Nazywamy go grafika1. Następnie niezwłocznie edytujemy go w miejscu przez dwukrotne kliknięcie. Wewnątrz symbolu dodajemy kolejną warstwę, na której umieszczamy jakiś napis. Kolor i wielkość napisu dobieramy według własnego uznania (przykład znajduje się powyżej). Po tych operacjach przełączamy się do głównej sceny. Krok 2 Podstawowa animacja 3D Symbol graficzny, który spoczywa na scenie konwertujemy do symbolu klipu filmowego (polecenie z menu podręcznego lub skrót F8 w Windowsie). Nazywamy go mc1. Symbol powinien znajdować się na środku stołu montażowego. Do wyrównania używamy narzędzi z panelu Wyrównaj. 37

38 Prawym klawiszem myszy klikamy na klip i wybieramy polecenie Utwórz animację ruchu. Następnie łapiemy ostatnią klatkę utworzonego ujęcia. Gdy pojawi się strzałka - przeciągamy ją do klatki 60. Zaznaczamy klatkę 15 i wybieramy narzędzie Obrót 3D. Na naszym obiekcie pojawiły się dwa okręgi, czerwony i niebieski, oraz zielona linia. Łapiemy zieloną linię i ciągniemy ją nieznacznie w dół do osiągnięcia efektu: Efekt modyfikacji powinien jednak znaleźć się w pierwszej klatce a nie w 15, musimy więc odwrócić klatki kluczowe. Robimy to zaznaczając którąkolwiek klatkę leżąca między 1 a 15 i z menu podręcznego wybierając polecenie Odwróć klatki kluczowe. Teraz zaznaczamy klatkę nr 45 i wstawiamy tam klatkę kluczową (F6). Następnie zaznaczamy klatkę 60 i tym razem przechylamy kwadrat w drugą stronę. Oto wygląd listwy czasowej: Możemy obejrzeć nasz efekt 3D (Ctrl+Enter). Obiekt powinien obracać się wokół własnej osi pionowej tworząc ciekawy efekt trójwymiarowy. Krok 3 Podstawowa animacja 3D Zajmiemy się teraz wykonaniem jeszcze ciekawszego efektu obrotu w przestrzeni. Nasz obiekt będzie zataczał krąg wokół sceny. Zaznaczamy klatkę 30 i otwieramy panel Przekształć, w którym zwiększamy wartość Z Punktu środkowego 3D do 350. Można zauważyć, że w klatce 1 i 60 obiekt bardzo zbliżył się do krawędzi sceny. 38

39 Zaznaczamy klatkę 1 i tym razem modyfikujemy wartość Y Obrotu 3D wpisujemy 120. W klatce 60 wartość Y ustalamy na Tym sposobem obiekt dodatkowo zawija się do tyłu. Można teraz przetestować animację, lecz tylko z użyciem samego klawisza Enter. Krok 4 Powielanie symboli Tę ciekawą animację możemy zastosować do kolejnych obiektów, które utworzymy na bazie już istniejącego. Modyfikacja źródłowego obiektu graficznego może polegać na zmianie kolorów gradientu i treści napisu. W bibliotece wystarczy powielić istniejący obiekt graficzny (grafika1) i zmienić nazwę duplikatu (na grafika2) oraz w trybie edycji symbolu zmienić jego wygląd. Powielamy także klip mc1. Kopię nazywamy mc2 i edytujemy ją dla zamiany symbolu graficznego. Zamianę robimy w ten sposób: wewnątrz powielonego klipu zaznaczamy leżącą na scenie grafikę i w panelu Właściwości wciskamy przycisk Zmień... Na podmianę wybieramy powielony przed chwilą obiekt grafika2. 39

40 Krok 5 Animacja 3D kolejnych obiektów Przełączamy się do głównej sceny i tam dodajemy nową warstwę. Zaznaczamy wszystkie klatki z gotową już animacją i z wciśniętym klawiszem Alt przenosimy je do nowej warstwy do klatki 53. W klatce 53 zaznaczamy nasz nowy obiekt i w panelu Właściwości znów używamy opcji Zmień... Tym razem na podmianę wybieramy klip mc2. Niestety znów nasza animacja nie jest w pełni widoczna przy odtworzeniu poprzez wciśnięcie Ctrl+Enter. Musimy zadowolić się tylko podglądem na stole montażowym (Enter). Krok 6 Konwersja na animację klatka po klatce Możemy oczywiście przygotować kolejne elementy graficzne i zajmować się kolejnymi animacjami. My jednak kończymy już to ćwiczenie. Co jednak z naszym efektem, który ginie w generowanym pliku SWF? W zasadzie, nie jest to do końca wyjaśnione (???). Bowiem będzie to działało w niektórych wersjach programu, nawet tych nieco starszych jak CS4. Jest jednak sposób, aby utrwalić nasz efekt i zachować go w pliku SWF - możemy przekonwertować animację 3D na zwykłą animację poklatkową. Zaznaczamy warstwami wszystkie klatki naszych animacji i z menu podręcznego wybieramy opcję Konwertuj na animacje klatka po klatce. Krok 7 Zmiana tła animacji Zmień kolor tła sceny na czarny i zobacz, jaki efekt ostatecznie udało się osiągnąć (Ctrl+Enter lub Cmd+Enter). 40

41 9.7 Animacja zdjęć z użyciem filtrów W tym ćwiczeniu stworzymy ciekawą metamorfozę zdjęć. ETAPY PRACY: Krok 1: Ustawienie środowiska roboczego Krok 2: Animacja pierwszego zdjęcia Krok 3: Animacja pozostałych zdjęć Krok 1 Ustawienie środowiska roboczego Otwórz plik metamorfoza.fla z lokalizacji podanej przez prowadzącego i ustaw właściwości filmu: Rozmiar stołu montażowego: 350 x 250 px, 28 Kl./s Krok 2 Animacja pierwszego zdjęcia Przenieś pierwsze zdjęcie biblioteki do sceny filmu i za pomocą panelu Wyrównaj precyzyjnie umieść zdjęcie w centrum stołu montażowego: Zaznacz zdjęcie na stole i przekonwertuj je do klipu (wciśnij F8). Nazwij klip img1_mc. Warstwę z obrazem nazwij zdjęcie1. Kliknij na klatkę 10 i wstaw klatkę kluczową (wciśnij F6). Potem kliknij na klatkę 20 i znów wstaw klatkę kluczową. Będąc w klatce nr 20 zaznacz zdjęcie i w panelu Właściwości przejdź do sekcji Filtry. Za pomocą pierwszej z lewej strony ikonki dodaj filtr Rozmycie i ustaw opcje: RozmycieX = RozmycieY = 100; Jakość Niska. 41

42 Dodanie filtra Zaznacz klatkę nr 10 i z menu podręcznego wybierz polecenie Utwórz klasyczną animację. Krok 3 Animacja pozostałych zdjęć Wstaw nową warstwę i nazwij ją zdjęcie2. Kliknij na 15 klatkę nowej warstwy i wstaw tam klatkę kluczową (F6). Przenieś drugie zdjęcie na stół montażowy i wyrównaj jego położenie tak jak poprzednio (krok 2). Przekształć zdjęcie w klip (F8) i nazwij go img2_mc. Klikaj kolejno na klatki 25, 35 i 45 i wstawiaj w nich klatki kluczowe (F6). Wróć do klatki nr 15, zaznacz zdjęcie i dodaj do niego filtr Rozmycie jak w Kroku 5. Znów zaznacz klatkę 15 i z menu podręcznego wybierz polecenie Utwórz klasyczną animację. Kliknij na klatkę 45, zaznacz zdjęcie i ustaw tak jak poprzednio efekt Rozmycie. Wróć do klatki 35 i z menu podręcznego wybierz polecenie Utwórz klasyczną animację. 42

43 Samodzielnie utwórz animację trzeciego zdjęcia w nowej warstwie zdjęcie3 powtarzając wszystkie czynności przekształcenie zdjęcia w klip, dodanie klatek kluczowych, dodanie filtra rozmycie, dodanie animacji. Zacznij od klatki nr 40. Efekt końcowy na listwie czasowej: 43

44 9.8 Animacja zdjęć z użyciem zaawansowanego efektu koloru W tym ćwiczeniu stworzymy ciekawe przejścia zdjęć w galerii. ETAPY PRACY: Krok 1: Ustawienie środowiska roboczego Krok 2: Animacja pierwszego zdjęcia Krok 3: Animacja pozostałych zdjęć Krok 1 Ustawienie środowiska roboczego Otwórz plik obrazy.fla z lokalizacji podanej przez prowadzącego i ustaw właściwości filmu: Rozmiar stołu montażowego: 250 x 188 px, 35 Kl./s. Krok 2 Animacja pierwszego zdjęcia Przenieś pierwsze zdjęcie biblioteki do sceny filmu i za pomocą panelu Wyrównaj precyzyjnie umieść zdjęcie w centrum stołu montażowego. Zaznacz zdjęcie na stole i przekonwertuj je do klipu (wciśnij F8). Nazwij go img1_mc. Kliknij na klatkę 20 i wstaw klatkę kluczową (wciśnij F6). Wróć do klatki nr 1, zaznacz zdjęcie i w panelu Właściwości przejdź do sekcji EFEKT KLORU. Wybierz opcję Zaawansowane. Ustaw składowe według wzoru: Zaznacz klatkę nr 1 i z menu podręcznego wybierz polecenie Utwórz klasyczną animację. Następnie w panelu Właściwości ustaw wartość Dynamiki na

45 Kliknij kolejno na klatkę 30 i 50 i wstaw tam klatkę kluczową (F6). W klatce 50 zaznacz zdjęcie i w panelu Właściwości tak jak poprzednio ustaw opcje Zaawansowane w sekcji EFEKT KLORU: Wróć do klatki nr 30 i dodaj Klasyczną animacje ruchu, a w panelu Właściwości ustaw wartość dynamiki na 100. Krok 3 Animacja pozostałych zdjęć Z tym zdjęciem to już koniec. Teraz kolej na następne cztery. Do dzieła! Najlepiej jeśli umieścisz każde zdjęcie na oddzielnej warstwie. Animacja zdjęcia nr 2 powinna zacząć się od klatki 51. Warstwę z pierwszym obrazem nazwij zdjęcie1, a kolejne warstwy zdjęcie2, zdjęcie

46 9.9 Teleportacja W tym ćwiczeniu stworzymy ciekawy efekt teleportacji. ETAPY PRACY: Krok 1: Ustawienie środowiska roboczego Krok 2: Wstępne ustawienie zawartości warstw na scenie głównej Krok 3: Praca wewnątrz klipu Krok 4: Dodanie skryptu wewnątrz klipu Krok 5: Końcowe ustawienie zawartości warstw na scenie głównej Krok 1 Ustawienie środowiska roboczego Otwórz plik obrazy_teleportacja.fla z lokalizacji podanej przez prowadzącego i ustaw właściwości filmu: Rozmiar stołu montażowego: 450 x 500 px, 33 Kl./s, AS 3.0 i wersja Flash Player nie mniej niż 10. Krok 2 Wstępne ustawienie zawartości warstw na scenie głównej Zmień nazwę warstwy 1 na tło. Przenieś na tę warstwę z biblioteki obraz background, który będzie tłem animacji. Za pomocą panelu Wyrównaj precyzyjnie umieść zdjęcie w centrum stołu montażowego. Wstaw nową warstwę, nazwij ją klip. Będąc w tej warstwie wstaw na stół montażowy obraz woman z biblioteki. Można postać nieznacznie zmniejszyć i dopasować jej położenie do tła. Zaznacz obraz z postacią i konwertuj go do klipu (F8). Nazwij klip teleportacja. Krok 3 Praca wewnątrz klipu Edytuj klip w miejscu (poprzez dwukrotne kliknięcie postaci). Wewnątrz klipu zaznacz postać i ponownie konwertuj ją do klipu (nazwa klipu to np. woman_mc ). Wciśnij Ctrl+C (czyli skopiuj klip). Wstaw nową warstwę i nazwij ją efekt. Warstwę pierwszą możesz nazwać obraz. Zablokuj warstwę obraz. Zaznacz nową warstwę ( efekt ) i będąc na scenie wstaw do niej skopiowany klip poleceniem: Edytuj > Wklej w miejscu. Wklejonej postaci dodaj efekt w panelu Właściwości: w sekcji EFEKT KOLORU wybierz styl Tinta i ustaw kolor biały i jego wartość na 100% : 46

47 W tym samym panelu Właściwości przejdź do sekcji FILTRY. Dodaj filtr Rozmycie z ustawieniami RozmycieX = RozmycieY = 11 piks. W warstwie efekt kliknij na klatkę 1 i wciśnij klawisz F6 dziewięć razy. Klikamy na co drugą klatkę, z wyjątkiem dwóch ostatnich, zaznaczamy obrazek i w panelu Właściwości w sekcji EFEKT KLORU zmieniamy właściwość Alfa na 0%. Blokujemy warstwę efekt, a odblokowujemy warstwę obraz. Zaznaczamy w niej klatki 2-10 i usuwamy je poleceniem Usuń klatki z menu podręcznego. Klikamy na pierwszą klatkę i metodą przeciągnij i upuść przenosimy ją do klatki 11: Będąc w klatce 11 w warstwie obraz zaznaczamy postać, w panelu Właściwości wybieramy znów sekcję FILTRY i dodajemy filtr Blask. Ustawiamy opcje jak na rysunku poniżej: 47

48 Klikamy kolejno na klatkę 12 i 60 i wciskamy klawisz F6. Zaznaczamy klatkę 12, a następnie postać i w sekcji FILTRY usuwamy efekt Blask (używając ikony kosza). Blokujemy warstwę obraz, odblokowujemy warstwę efekt. Na tej warstwie klikamy na klatkę 11 i 61 i wciskamy klawisz F7 (pusta klatka kluczowa). Zaznaczamy równocześnie pierwsze dziesięć klatek warstwy efekt i kopiujemy je (polecenie Kopiuj klatki z menu podręcznego). Idziemy do klatki 61 i wklejamy tam skopiowane klatki (poleceniem Wklej klatki). 48

49 Krok 4 Dodanie skryptu wewnątrz klipu Pozostało tylko w klatce powiedzmy 90-tej klipu teleportacja umieścić skrypt, który będzie odwoływał się do kolejnej klatki na głównej listwie czasowej. Skrypt możemy umieścić na dowolnej warstwie, np. warstwie efekt lub specjalnie utworzonej do tego celu. Jeśli wstawiasz skrypt na warstwie efekt to nie zapomnij o wstawieniu pustej klatki kluczowej (F7) do klatki 71 i następnie klatki kluczowej (F6 lub F7) do klatki 90. Otwórz panel Operacje i wpisz następujący kod: Krok 5 Końcowe ustawienie zawartości warstw na scenie głównej Powróć do głównej sceny filmu. Na warstwie klip wstaw dwie kolejne klatki kluczowe (F6; w ten sposób powiela się zawartość klatki 1). W dodanych klatkach zmień położenie i wielkość klipu. Na warstwie tło wstaw dwie zwykłe klatki kluczowe (F5). Dodaj nową warstwę z trzema klatkami kluczowymi nazwij ją akcja. W każdej klatce oddzielnie umieść akcję stop(); Przetestuj i opublikuj film. 49

50 9.10 Animowany kursor Na pewno nie raz widzieliście, że w niektórych animacjach Flash'a zmieniony jest kursor. Teraz właśnie sprawimy, że podmieniony zostanie on na stworzony przez nas obrazek. ETAPY PRACY: Krok 1: Ustawienie środowiska roboczego Krok 2: Tworzenie klipa i animacja na jego listwie czasowej Krok 3: Praca w scenie głównej dodanie akcji Krok 1 Ustawienie środowiska roboczego Tworzymy nowy film i nadajemy mu określone dowolne parametry. Krok 2 Tworzenie klipa i animacje na jego listwie czasowej Z menu górnego wybierz polecenie Wstaw > Nowy symbol (Windows: Ctrl+F8) i utwórz symbol typu Klip filmowy o nazwie np. kursor. Po zaakceptowaniu ustawień w oknie otwiera się pole robocze symbolu, które posiada taki sam wygląd jak pole robocze sceny. W pole to wstawiamy obrazek który ma zostać wyświetlony zamiast kursora. Tworzenie obiektu odbywa się w sposób standardowy za pomocą narzędzi z przybornika. Można stworzyć obiekt animowany. Wymagane jest wtedy utworzenie tylu warstw ile mamy elementów graficznych, które chcemy animować. Krok 3 Praca w scenie głównej Po narysowaniu obrazka wracamy do naszej głównej sceny - przełącznik między klipem a sceną znajduję się tuż ponad stołem montażowym. Musimy teraz umieścić nasz klip kursor w scenie głównej. Do wstawiania gotowych symboli służy panel Biblioteka (powinien znajdować się np. z prawej strony okna roboczego, jeśli nie jest otwarty, to dostępny jest w menu Okno). 50

51 Aby wstawić obiekt z biblioteki wystarczy zaznaczyć klatkę, do której chcemy wstawić obiekt i z okienka podglądu biblioteki przeciągnąć obiekt w pole robocze sceny. Uwaga! W mojej bibliotece znajdują się też symbole graficzne Animacja 1 i Animacja 2 utworzone dla potrzeb animacji oczu. Efekt animacji oka został utworzony w klipie oko, który z kolei wystąpił dwa razy w klipie kursor (warstwy okol i okop). Jeśli obraz po wstawieniu jest zbyt duży, to można zmienić jego proporcje skalując go narzędziem Przekształcanie swobodne. Wstawionemu klipowi nadajemy nazwę instancji (np. mouse) dzięki niej nasz klip będzie rozpoznawany przez kod ActionScript. Nazwę instancji wpisujemy w oknie Właściwości klipu. Zaznaczamy klatkę z klipem i wybieramy opcję Operacje (Windows: F9). Otworzy się okno do pisania kodu, w którym wstawiamy ciąg poleceń, które ukryją aktualny kursor a w jego miejsce wstawią nasz: Pierwszy fragment kodu ukrywa mysz systemową, drugi zaś mówi, że obrazek ma wodzić za ukrytym kursorem. Jeżeli byśmy pozbyli się fragmentu, który ukrywa kursor był by on widoczny, a obrazek chodziłby za kursorem. Teraz pozostało tylko zapisanie i opublikowanie animacji. 51

52 9.11 Lupa Celem ćwiczenia jest pogłębienie umiejętności posługiwania się warstwami maskującymi oraz dodawania skryptów ActionSctipt 3.0. ETAPY PRACY: Krok 1: Import zdjęcia i przekształcenie go w klip Krok 2: Tworzenie nowego klipa z efektem maski Krok 3: Praca w scenie głównej dodanie akcji do obsługi lupy Krok 4: Tworzenie przycisków Krok 5: Dodanie akcji w scenie głównej Krok 1 Import zdjęcia i przekształcenie go w klip Na początek importujemy dowolne ale niezbyt duże zdjęcie np. z internetu. Jeśli zdjęcia mamy już na dysku stacji roboczej to we Flashu za pomocą polecenia z menu Plik Importuj Importuj do biblioteki umieszczamy zdjęcie w Bibliotece projektu. W panelu Biblioteka pojawia się nowy wpis, który przenosimy na scenę główną. Leżące na scenie głównej zdjęcie zaznacz i przekształć w Klip filmowy (poleceniem z menu kontekstowego Konwertuj na symbol lub skrótem F8 dostępnym tylko w Windowsie). Zdjęciu-klipowi nadaj nazwę instancji zdjecie1 (w okienku <Nazwa instancji> panelu Wlaściwości). UWAGA!! pisane bez polskich ogonków. Krok 2 Tworzenie nowego klipa z efektem maski Wstawi nowy Klip filmowy (Wstaw Nowy symbol <typ: Klip filmowy>, nazwa np. lupka ), w którym skonstruuj lupę powiększającą. Musimy mieć do tego trzy warstwy dodaj je i nazwij jak na rysunku obok. W pierwszej warstwie od góry ( wygląd lupy ) rysujemy kształt naszej lupy: okrąg i rączka lupy. Okrąg może posiadać wypełnienie ale tylko po to, aby je za chwilę wyciąć (Windows: Ctrl+x, Mac: Cmd+x) i wkleić (Windows:Ctrl+v, Mac: Cmd+v) na warstwę maska. Brak wypełnienia. Najlepiej je wyciąć Ctrl + x Na warstwie maska umieszczamy okrąg (wklejamy wypełnienie wycięte wcześniej). Okrąg ten będzie stanowić szkło, przez które będziemy oglądać zdjęcie. Okrąg ten musi leżeć dokładnie w tym samym położeniu jako wypełnienie lupy. Jeśli mamy więc wycięty wcześniej wypełnienie to stosujemy polecenie Edycja > Wklej w miejscu. 52

53 Na warstwie zdjęcie wstaw utworzony w kroku1 symbol Klipu filmowego. Instancji tego symbolu nadajemy nazwę <Nazwa instancji> : zdjecie2. Warstwie maska nadajemy tryb maski (patrz rysunek po prawej). Opcję maska znajdziecie w menu podręcznym po zaznaczeniu warstwy. I to koniec pracy z tym klipem. Całość powinna wyglądać jak na rysunku: Krok 3 Praca w scenie głównej dodanie akcji do obsługi lupy Przechodzimy do sceny głównej, gdzie jest już nasze zdjecie1. Wstaw tu klip filmowy lupka z panelu Biblioteka i nadaj mu nazwę instancji: lupa. Nie trzeba dodawać nowej warstwy. W głównej scenie tworzymy teraz warstwę akcje (rysunek obok). W klatce tej warstwy wpisujemy akcję: 53

54 Wartość 10 wynika z przesunięcia środka "szkiełka" lupy do rzeczywistego środka klipu filmowego. Krok 4 Tworzenie przycisków Tworzymy teraz dwa przyciski, dzięki którym będziemy mogli zmieniać skalę powiększenia. Przycisk to symbol, który wstawiamy poprzez polecenie Wstaw > Nowy symbol: Przycisk ma charakterystyczną listwę czasową. Uzupełniamy tu z reguły wszystkie klatki (Stany przycisku: ). Wypełnijmy klatki grafiką i tekstem (mogą być na osobnych warstwach). Stany (klatki) mogą różnić się między sobą kolorystyką znajdujących się tam elementów. Kolory nie mają znaczenia tylko w klatce HIT oznaczającej pole reakcji przycisku. Z boku przedstawiono ostateczny wygląd listwy czasowej naszego przycisku. Potrzebujemy dwa przyciski. Gotowy przycisk w bibliotece możemy powielić (polecenie Powiel...) i w duplikacie zmienić np. treść tekstu na przycisku. 54

55 Krok 5 Dodanie akcji w scenie głównej Przyciski wstawiamy z biblioteki do sceny głównej i pozostanie nam jeszcze dodanie akcji. Zanim to jednak nastąpi musimy nadać nazwy instancji naszym przyciskom: W klatce 1 warstwy akcji (poniżej już istniejącego tam kodu) wpisujemy akcję: W ramach eksperymentowania wartość przypisaną do zmiennej skala można dowolnie zmieniać (dozwolone są nawet wartości ujemne). 55

56 9.12 Aktywny mur ETAPY PRACY: Krok 1: Tworzenie symboli graficznych Krok 2: Tworzenie przycisku Krok 3: Tworzenie klipu Krok 4: Praca w scenie głównej Krok 1 Tworzenie symboli graficznych Otwórz nowy plik Flasha. Nie zmieniaj właściwości dokumentu. Utwórz kolejno trzy elementy graficzne reprezentujące ściany kostki, przy czym tylko pierwszy element utwórz od podstaw (Wstaw > Nowy symbol) nazwij go przod : Wewnątrz symbolu grafiki narysuj przednią ścianę - kwadrat o wymiarach 50x50 pt. Kolejne ściany można utworzyć na bazie tego prostokąta. W bibliotece duplikuj istniejący symbol (polecenie Powiel) i kopię nazwij bok. Edytuj symbol bok i za pomocą palety Przekształć pochyl kwadrat w pionie o kąt -45 : Jeszcze raz duplikuj symbol przod i duplikat nazwij gora. Edytuj ten symbol i za pomocą palety Przekształć spłaszcz kwadrat tak, aby uzyskać górną ściankę kostki (Pochyl w poziomie o kąt 45 ): 56

57 Krok 2 Tworzenie przycisku Wstaw nowy symbol przycisk - o nazwie kostka : Wewnątrz przycisku w klatce W górze wstaw z biblioteki gotowe ściany kostki i ułóż je w jeden obiekt kostkę: Skopiuj wszystkie elementy przycisku do klatek Over, Down i Hit - wystarczy w omawianych klatkach użyć klawisza F6. W polu Hit przycisku należy pozostawić tylko przednią ścianę kostki: Krok 3 Tworzenie klipu Tworzymy pusty klip o nazwie animacja : W klatce nr 1 na listwie czasowej klipu wstawiamy stworzony przycisk (z Biblioteki) i nadajemy mu nazwę instancji kostka_btn 57

58 Wstawiamy 6 nowych warstw i nazywamy je odpowiednio do ścianek kostki. Umieszczamy w nich obiekty graficzne składające się na elementy kostki (są to wszystkie ścianki, nawet te niewidoczne!). Układamy je dokładnie na przycisku, który znajduje się w najniższej warstwie. Następnie zaznaczamy wszystkie klatki ze ściankami i przenosimy je do klatki nr 5. Tam utworzymy efekt otwieranego pudełka. Na zaznaczonych klatkach otwieramy menu podręczne i wybieramy polecenie Utwórz klasyczną animację. Zaznaczamy teraz klatki nr 10 i wstawiamy tam klatki kluczowe (F6). W klatce 10 każdy element należy przesunąć tak, aby kostka się rozpadała. Dodajemy jeszcze jedną warstwę i nazywamy ją akcje. Otwieramy panel Operacje i wstawiamy na początek akcję stop(); 58

59 Następnie poniżej akcji stop(); wpisujemy funkcję, która uruchomi dalszą część tworzonego klipa: Krok 4 Praca w scenie głównej Teraz wracamy do naszej głównej sceny. Wstawiamy klip z animowaną kostką. Możemy wstawić takich klipów na stronę kilka tworząc z nich jakiś fajny murek (patrz obrazek na początku tego ćwiczenia) - po uruchomieniu filmu jego cegiełki będą się on efektownie rozpadać. 59

60 9.13 Umieszczanie dźwięku na głównej listwie czasowej ETAPY PRACY: Krok 1: Importowanie pliku dźwiękowego do Biblioteki filmu Krok 2: Umieszczenie dźwięku na osi czasu Krok 3: Synchronizacja dźwięku z osią czasu Krok 4: Dodanie efektów dźwięku Krok 1 Importowanie pliku dźwiękowego do Biblioteki filmu Musisz mieć przygotowany plik dźwiękowy na dysku lokalnym pobierz przykładowy plik z lokalizacji wskazanej przez prowadzącego. Otwórz nowy plik Flasha. Nie zmieniaj właściwości dokumentu. Z menu Plik wybierz polecenie Importuj > Importuj do biblioteki... i wybierz plik dźwiękowy do importu. Krok 2 Umieszczenie dźwięku na osi czasu Otwórz panel Biblioteki filmu i przeciągnij stamtąd plik dźwiękowy na stół montażowy. Klatka listwy czasowej głównej sceny po umieszczeniu pliku dźwiękowego na stole montażowym zawiera poziomą kreskę Krok 3 Synchronizacja dźwięki z osią czasu Możesz teraz odtworzyć plik. Zauważ, że dźwięk co prawda słychać ale wraz z kolejnym odtworzenie klatki każdorazowo następuje rozpoczęcie odtwarzania nowego dźwięku, co sprawia że dźwięki zaczynają się nakładać. Aby temu zapobiec i odtwarzać tylko jeden dźwięk musimy zaznaczyć klatkę i sięgnąć do panelu jej Właściwości, gdzie w zakładce Dźwięk znajduje się opcja Synchronizacja. Z listy rozwijanej wybierz opcję Uruchom. Możesz teraz odtworzyć dźwięk. Teraz słychać już tylko pojedynczy utwór. Jeśli chcesz, przetestuj pozostałe opcje synchronizacji Krok 3 Synchronizacja dźwięki z osią czasu W panelu Właściwości jest jeszcze jedna przydatna opcja do modyfikacji dźwięku narzędzie Efekt. Służy ono do ustalania efektów dźwiękowych (pogłośnienie, wyciszenie dźwięku, odtwarzanie pojedynczych kanałów stereo itp.). W istniejącej warstwie z dźwiękiem wstaw zwykłe klatki aż do klatki nr Zaznacz klatkę 1 i w panelu Właściwości w sekcji Efekt wypróbuj wybrane gotowe efekty np. Pojawianie się. Jeśli zaistnieje potrzeba zwiększ liczbę klatek. Teraz utworzymy własny efekt dźwiękowy stopniowe zwiększanie głośności. 60 Widok listwy czasowej jeśli w ujęciu z dźwiękiem zwiększylibyśmy ilość klatek zwykłych

61 klatkę 1 i w panelu Właściwości w sekcji Efekt zaznacz symbol ołówka. Otworzy się okno edycji dźwięku. Na dole tego okna znajdują się opcje wyświetlania listwy czasowej możemy zmienić powiększenie oraz ustawić wyświetlanie w kontekście czasu lub klatek. Wybierz opcje wyświetlania numerów klatek. W obydwu oknach ze ścieżką dźwiękową (okna symbolizują kanał prawy i lewy dźwięków) wstaw na ciągłej linii dwa punkty do edycji linii jeden na początku listwy, drugi umieść w klatce nr 400. Złap punkt początkowy i pociągnij linię na sam dół. Ten zabieg spowoduje wyciszenie dźwięku na samym początku i stopniowy wzrost głośności. Przetestuj film (Ctrl + ENTER). 61

62 9.14 Umieszczanie dźwięku na listwie czasowej przycisku ETAPY PRACY: Krok 1: Importowanie pliku dźwiękowego do Biblioteki filmu Krok 2: Budowanie przycisku i umieszczenie dźwięku na jego osi czasu Krok 3: Synchronizacja dźwięku Krok 1 Importowanie pliku dźwiękowego do Biblioteki filmu Otwórz nowy plik i zaimportuj do biblioteki dźwięk lub po prostu skopiuj plik dźwiękowy z biblioteki pliku flasha z poprzedniego ćwiczenia (w nowym pliku skopiowany dźwięk wklej także do biblioteki). Krok 2 Budowanie przycisku i umieszczenie dźwięku na jego osi czasu Utwórz przycisk i na jego listwie czasowej umieść dźwięk w klatce HIT (taki jak pokazano na ilustracji): Krok 3 Synchronizacja dźwięku Aby dźwięk mógł się odtworzyć musimy jeszcze w panelu Właściwości zmienić opcję Synchronizacja. Zaznacz klatkę HIT przycisku i w panelu Właściwości ustaw Synchronizacja: Zdarzenie. Następnie przetestuj opcję Uruchom. Odpowiedź na pytanie, która z opcji daje lepsze efekty Synchronizacji? 62

63 9.15 Mini-odtwarzacz mp3 W tym ćwiczeniu wszystkie operacje związane z dźwiękiem zostaną wykonane za pomocą kodu ActionScript 3.0 ETAPY PRACY: Krok 1: Tworzenie/pobieranie przycisków Krok 2: Kod Krok 1 Tworzenie/pobieranie przycisków UW nowym dokumencie utwórz zestaw przycisków (lub pobierz gotowe z panelu Składniki) odpowiadających za: wczytanie i odtwarzanie pliku MP3, pauzowanie (w celu ponownego odtwarzania dźwięku, od momentu w którym dźwięk został przerwany), zatrzymywanie odtwarzania dźwięku przy ponownym uruchomieniu dźwięk startuje od początku. Umieść przyciski na scenie filmu i nadaj im nazwy instancji: play_btn, pause_btn i stop_btn. Krok 2 Kod Teraz piszemy kod w panelu Operacje. Fragmenty kodu piszemy jeden pod drugim. Są one opisane komentarzami (//) dla łatwiejszego przyswojenia do czego służą poszczególne części. //Powołujemy obiekty na których będziemy operować (dźwięk, ścieżka dostępu do pliku //dźwiękowego, dźwięk w trakcie odtwarzania) oraz zmienne do przechowywania wartości: //moment odtwarzania dźwięku (w milisekundach) i zmienna logiczna tzw. flaga var mysound:sound = new Sound(); var myrequest:urlrequest = new URLRequest("adeledaydreamer.mp3"); var mychannel:soundchannel = new SoundChannel; var pauseposition:int = 0; var mystatus:boolean = false; //Ładujemy dźwięk: mysound.load(myrequest); //Nasłuchujemy zdarzeń myszy dla przycisków: play_btn.addeventlistener(mouseevent.click, playsound); stop_btn.addeventlistener(mouseevent.click, stopsound); pause_btn.addeventlistener(mouseevent.click, pausesound); //Funkcja do obsługi przycisku play_btn - uruchomi dźwięk od początku lub od miejsca //przerwania, zależnie od wartości zmiennej pauseposition, dźwięk nie uruchomi się jeśli wartość flagi będzie ustawiona na true: function playsound(event:mouseevent):void{ if(pauseposition == 0 && mystatus == false){ mychannel = mysound.play(); mystatus = true; } 63

64 } else if(mystatus == false){ mychannel = mysound.play(pauseposition); mystatus = true; } //Funkcja do obsługi przycisku stop_btn, zatrzymuje dźwięk: function stopsound(event:mouseevent):void{ mychannel.stop(); pauseposition = 0; mystatus = false; } //Funkcja do obsługi przycisku pause_btn, podobnie jak funkcja wyżej zatrzymuje dźwięk //ale z przechwyceniem momentu, w którym dźwięk jest odtwarzany: function pausesound(event:mouseevent):void{ pauseposition = mychannel.position; mychannel.stop(); mystatus = false; } 64

65 9.16 Galeria zdjęć Ćwiczenie prezentuje sposób tworzenia galerii zdjęć z możliwością powiększania miniatur; wystarczy kliknąć na małe zdjęcia a zostanie ono powiększone dzięki ciekawej animacji. ETAPY PRACY: Krok 1: Ustawienie pola roboczego Krok 2: Importowanie zdjęć Krok 3: Tworzenie klipu Krok 4: Dodanie kodu ActionScript Krok 1 Ustawienie pola roboczego W nowym pliku stawiamy wielkość pola roboczego na 800 x 600 pikseli i ustawiamy ciemny kolor tła. Następnie umieszczamy siatkę prowadnic, która wyznaczy położenie miniatur, czyli po prostu klipów, które zostaną utworzone w dalszej części ćwiczenia. Położenie prowadnice pionowych: 50, 56, 122, 126, 198, 202, 274, 744 i 750 Położenie prowadnice poziomych: 50, 56, 122, 126, 198, 202 i 274 Ustawienie prowadnic jest dość proste: musimy mieć widoczne linijki (dostęp przez menu Widok), z których ściągamy linie pomocnicze. Klikając na wprowadzoną linię możemy w oknie ustawić jej dokładne położenie, jak pokazane jest na rysunku obok. Krok 2 Importowanie zdjęć Pobierz zdjęcia do wykorzystania w galerii z lokalizacji podanej przez prowadzącego. Z menu Plik wybierz polecenie Importuj > Importuj do biblioteki... i zaimportuj zdjęcia do biblioteki projektu. Zdjęcia zostały wcześniej przygotowane w programie do obróbki zdjęć. Krok 3 Tworzenie klipu Na początek umieszczamy w pierwszym oczku siatki biały kwadrat o wielkości boku 72 px. Konwertujemy go do symbolu Grafika o nazwie kwadrat (skrót w Windows: F8), a następnie do klipu filmowego, który możemy nazwać np. fot1 ( a kolejne klipy fot2, fot3...). Będzie to pierwszy klip z całej serii klipów, które będą zawierały zdjęcia. 65

66 Edytujemy klip w miejscu kliknij na klipie dwa razy lub wybierz z menu podręcznego polecenie Edycja w miejscu. Dzięki temu będziemy mieli widoczną siatkę prowadnic ustawioną na stole montażowym. Wewnątrz klipu dodajemy warstwę. Warstwy w klipie możemy nazwać foto i tło warstwa tło leży na dole i zawiera już biały kwadrat (symbol typu grafika). Na warstwie foto umieszczamy pierwsze ze zdjęć pobieramy je z biblioteki. Umieszczamy zdjęcie z prawej strony pola roboczego przy pionowej prowadnicy 744 i poziomej 56. Zdjęcie jest duże (330 x 330 px) i taki wymiar będzie zachowany gdy zdjęcie będzie w powiększeniu, natomiast na początku animacji musi wystartować jako miniatura (60 x 60 px). Wobec tego na obu warstwach stosujemy animację ruchu (zaznacz klatki i użyj polecenia Utwórz klasyczną animację z menu podręcznego). Animacja ta powinna przebiegać do klatki nr 15, więc tam dodaj na każdej warstwie klatkę kluczową (F6). Powróć do klatki nr 1 w warstwie foto (zaznacz ją), w której zdjęcie zmniejsz do wielkości 60 x 60 px i umieść je dokładnie pośrodku białego kwadratu. Podobną animację zastosujmy dla białego kwadratu od klatki 1 do 15. W klatce nr 1 zachowujemy rozmiar 72 x 72 px, natomiast w klatce nr 15 powiększamy kwadrat do rozmiaru 342 x 342 px i umieszczamy go przy pionowej prowadnicy 750 i poziomej 50. Oto wygląd osi czasu klipu na tym etapie animacji: A to położenie elementów w klatce 15 obiekty są powiększone: 66

67 Do animacji zastosujemy własne ustawienia Dynamiki. Zaznaczamy obie klatki nr 1 i w panelu Właściwości klatki ustawiamy wartość Dynamiki na 100, a następnie zmieniamy te ustawienia w oknie Niestandardowe zwiększanie / zmniejszanie dynamiki okno to otworzy się po kliknięciu ołówka: Następnie w obu warstwach kopiujemy klatki nr 1 (Kopiuj klatki) i wklejamy ją w klatce nr 30 (Wklej klatki) i tym samy odwracamy animację. Dynamikę możemy zmienić też w klatkach nr 15. Dodajemy warstwę akcje, w której w klatce 1 i 15 wstawiamy akcje stop( ). To koniec pracy z tym klipem. Wracamy więc do głównej sceny. Zaznaczamy umieszczony na scenie klip i w panelu Właściwości wprowadzamy nazwę jego instancji: fot1_mc. W podobny sposób przygotowujemy kolejnych 8 klipów ze zdjęciami. Oczywiście dbając o odpowiednie rozmieszczenie zdjęć w siatce prowadnic. Instancje klipów nazywamy odpowiednio fot2_mc, fot3_mc, fot4_mc itd. Jako biały podkład do zdjęć wykorzystujemy symbol graficzny o nazwie kwadrat. Krok 4 Dodanie kodu ActionScript Na głównej scenie dodaj warstwę i nazwij ją akcje. W klatce tej warstwy umieść I część skryptu: 67

68 import flash.events.mouseevent; import flash.display.movieclip; var currentimg:movieclip; var oldimg:movieclip; function onphotorelease(myevent:mouseevent):void { currentimg = MovieClip(myevent.target); if(oldimg == null){ showfoto(currentimg); oldimg = currentimg;} else{ if(currentimg == oldimg){ hidefoto(currentimg); oldimg = null;} else{ hidefoto(oldimg); showfoto(currentimg); oldimg = currentimg;} } } function showfoto(photo_):void { photo_.gotoandplay(2); } function hidefoto(photo_):void { photo_.gotoandplay(21); } Należy jeszcze określić, że klipy ze zdjęciami umieszczone na scenie głównej i oznaczone nazwami instancji, (po to aby były widoczne dla skryptów AS) będą odbiornikami zdarzenia myszki - MouseEvent. Na koniec poprzedniego skryptu dodajemy więc kod nasłuchujący zdarzenia myszki - klikanie myszką na klipy. Za nasłuch odpowiedzialna jest metody addeventlistener, która ma dwa parametry pierwszym z nich jest typ zdarzenia, które chcemy wykryć (w obecnym ćwiczeniu jest to CLICK), a drugim jest funkcja wykonywana gdy wykryte jest zdarzenie (w naszym przypadku jest to nasza funkcja główna z poprzedniej częsci onphotorelease). Na początek II części kodu wstawiamy tablicę, która w pętli (While) zostanie uzupełniona naszymi klipami. W drugiej pętli (for), która iteracyjnie przegląda elementy tablicy, do każdego elementu tablicy zostanie dodana metoda nasłuchiwania: 68

69 var klipy:array = new Array(); var i:number = 0; while(1){ i++; var nazwa:string = "fot" + i + "_mc"; var obj:displayobject = getchildbyname(nazwa); } if (obj == null){ break; } klipy.push(obj); for each (var element in klipy){ element.addeventlistener(mouseevent.click,onphotorelease); } Przetestuj galerię. Opublikuj ostateczny plik SWF o nazwie galeria.swf. 69

70 9.17 czytanie pliku SWF do pliku kontenera Do aplikacji Flash można załadować dynamicznie (za pomocą ActionScript-u lub gotowych komponentów kontenerów dostępnych w panelu Składniki) poniższe obiekty graficzne: Pliki SWF utworzone w języku ActionScript 3.0 Pliki SWF zapisane w języku ActionScript 1.0 lub 2.0 (ale pod pewnymi warunkami). Pliki obrazu: JPG, PNG i GIF. Plik SWF który, zawiera kod AS ładujący zewnętrzny plik SWF var movieloader:loader = new Loader(); var movieurl:string = "galeria.swf"; var movieurlreq:urlrequest = new URLRequest(movieURL); movieloader.load(movieurlreq); this.addchild(movieloader); Zewnętrzny plik galeria.swf ładowany d0 kontenera (kontenerem jest obiekt Loader zawarty w docelowym pliku SWF) Do ładowania tych zasobów służy klasa Loader. Można także załadować dynamicznie teksty, filmy i dźwięki, do czego służą inne klasy i metody. Aby załadować plik SWF lub plik graficzny należy za pomocą kodu ActionScript 3.0 utworzyć obiekt Loader, następnie wskazać plik do wyświetlenia, a na końcu za pomocą metody AddChild dodać obiekt Loader do listy wyświetlania (uwidocznić go). Wszystkie te etapy zawierają się w krótkim kodzie podanym w etapie 2 ćwiczenia. ETAPY PRACY: Krok 1: Ustawienia nowego pliku Krok 2: Dodanie kodu ActionScript Krok 1 Ustawienie nowego pliku Otwórz nowy plik. Ustaw wielkość pola roboczego 800 x 600 pikseli, ciemne tło i zapisz plik pod nazwą kontener w lokalizacji tej samej co plik galeria.swf. Krok 2 Dodanie kodu ActionScript Zaznacz klatkę i w panelu Operacje wpisz kod. Następnie przetestuj film. var movieloader:loader = new Loader(); var movieurlreq:urlrequest = new URLRequest("galeria.swf"); movieloader.load(movieurlreq); this.addchild(movieloader); 70

71 9.18 Galeria z użyciem pliku XML do wczytania podpisów pod zdjęciami XML to standardowy sposób przedstawiania informacji ustrukturyzowanych, na którym łatwo mogą operować komputery i który jednocześnie jest stosunkowo czytelny i przystępny. XML oferuje ujednolicone i wygodne metody kategoryzacji danych. Zastosowanie zwiększa czytelność danych, ułatwia ich odczytywanie i manipulowanie nimi. Dane XML mają strukturę hierarchiczną i składają się ze znaczników podobnych do stosowanych w języku HTML. Kod XML może mieć także bardziej złożoną postać, obejmującą znaczniki zagnieżdżone w innych znacznikach oraz atrybuty i inne składniki strukturalne. Każdy dokument XML ma jeden element najwyższego poziomu (element główny). Wewnątrz elementu głównego mogą znajdować się pojedyncze elementy danych, jednak zwykle zawiera on inne elementy, które z kolei zawierają jeszcze inne elementy i tak dalej. Typowe zadania wykonywane w związku z operowaniem na danych XML w języku ActionScript: Konstruowanie dokumentów XML (dodawanie elementów i wartości). Uzyskiwanie dostępu do elementów, wartości i atrybutów XML. Filtrowanie (przeszukiwanie) elementów XML. Przeglądanie zbioru elementów XML w pętli. Konwertowanie danych między klasami XML a klasą String. Ładowanie zewnętrznych plików XML. ETAPY PRACY: Krok 1: Ustawienia nowego pliku Krok 2: Dodanie dynamicznych pól tekstowych Krok 3: Dodanie kodu ActionScript Krok 4: Utworzenie pliku XML Krok 1 Ustawienie nowego pliku Otwórz nowy plik i na początek ustal wielkość stołu montażowego 786 x 500 pikseli. Kolor tła zmienimy na koniec po ustawieniu wszystkich elementów. Zaimportuj zdjęcia z lokalizacji podanej przez prowadzącego i ustaw w polu roboczym tak jak na obrazku powyżej. Na stole montażowym zmniejsz ich szerokość do 350 pikseli. 71

72 Krok 2 Dodanie dynamicznych pól tekstowych Poniżej każdego zdjęcia dodaj pole tekstu dynamicznego. Ustaw właściwości wyświetlanego tekstu (np. kolor zielony, wielkość 14 px, pogrubienie, wyrównanie do lewej). Nadaj polom nazwy instancji: textfield1, textfield2, textfield3, textfield4. Osadź czcionkę przycisk Osadź w oknie Właściwości tekstu. Na karcie Opcje zaznacz glify do osadzenia. Na karcie ActionScript zaznacz opcję Eksportuj do ActionScript. Po zaakceptowaniu ustawień może pojawić się ostrzeżenie o konieczności utworzenia nowej klasy dla osadzonej czcionki. Krok 3 Dodanie kodu ActionScript Otwórz panel Operacje i umieść w nim kod: Objaśnienie kodu: Tworzymy obiekt URLLoader i ładujemy do niego zewnętrzny dokument XML. Następnie nasłuchujemy zdarzenia końca procesu ładowania pliku XML (Event.COMPLETE), które to wywoła funkcję o nazwie dataok. Wewnątrz tej funkcji tworzymy obiekt XML i przekazujemy do niego właściwość URLLoader.data (który u nas nosi nazwę myurlloader) jako parametr funkcji konstruktora. Dzięki temu uzyskujemy dostęp do zawartości pliku XML. Dane z zewnętrznego pliku XML są umieszczane w polach tekstowych. Aby uzyskać dostęp do elementów mycaption zawartych w pliku XML używamy notacji kropkowej. textfield1.text = myxml.mycaption[0]; 72

73 Posługujemy się też nawiasami kwadratowymi, w których umieszczamy numer (indeks) aby określić, która pozycja na liście w dokumencie XML ma zostać dopisana do danego pola tekstowego. Krok 4 Utworzenie pliku XML Otwórz Notatnik i w pliku wpisz następującą treść: Zapisz plik pod nazwa data jako plik z rozszerzeniem.xml (plik musi znaleźć się w tym samym katalogu co nasz projekt.fla lub.swf). Można teraz sprawdzić, co osiągnęliśmy. Linki do darmowych szablonów galerii opartych o dokumenty XML: