Symbole w Adobe Flash. Przeglądanie bazy gotowych elementów. Importowanie gotowych grafik do programu Adobe Photoshop. 1. Symbole i ich znaczenie.

Transkrypt

1 Symbole w Adobe Flash. Przeglądanie bazy gotowych elementów. Importowanie gotowych grafik do programu Adobe Photoshop. 1. Symbole i ich znaczenie. Symbole w środowisku Flash mają bardzo duże znaczenie. Ich główną zaletą jest możliwość ponownego użycia w dowolnym momencie animacji, na nowej scenie tworzonego projektu bądź w zupełnie nowym, niezależnym projekcie symbole można bowiem importować. Każdy utworzony symbol automatycznie dołącza do biblioteki aktualnie edytowanego projektu. Czym jednak jest sam symbol? Niczym więcej jak graficznym obiektem, na który może składać się grafika, film bądź utworzona animacja w programie Adobe Flash/Photoshop/Illustrator. Możliwe jest także tworzenie symboli z fragmentów aktualnie modelowanej sceny (nawet z kilku/kilkudziesięciu warstw jednocześnie!) by potem powielić dany efekt/grafikę/warstwę w rożnych jej miejscach. Ponadto tworzenie i używanie symboli ma niewątpliwą zaletę zmniejsza objętość generowanego pliku swf, a każde kolejne użycie danego symbolu nie powoduje konieczności ładowania go ponownie do pamięci komputera (zwiększa się efektywność naszej animacji oraz pomniejsza jej zasobożerność). Każde umieszczenie symbolu w naszej animacji tworzy jego nową instancję. INFORMACJA: Instancja to w informatyce inaczej pojedynczy, niezależny byt od innych bytów powstałych na wspólnej bazie. Bytem może być np. uruchomiona aplikacja, okno danej aplikacji (np. przeglądarki internetowej, w tym najnowsze przeglądarki każdą zakładkę traktują jako osobny, niezależny być 10 kart oznacza 10 instancji przeglądarki), serwer bazy SQL (proszę pamiętać, że na pojedynczym komputerze może być uruchomionych kilka serwerów SQL, tj. kilka instancji, posiadających ODMIENNE bazy danych). W programowaniu instancją jest z kolei pojedynczy obiekt. Oznacza to, że jeżeli stworzymy 10 obiektów na podstawie jednej klasy to będziemy mieć 10 instancji danej klasy. To samo dotyczy się instancji symbolu z chwilą włączenia go do naszej sceny staje się on na niej nowym, niezależnym od pierwowzoru, bytem. Jeden symbol może być wielokrotnie powielany każda jego kopia stanie się nową instancją. Każda instancja może mieć inne ułożenie, kolory, animacje, klatki. Jednak zmiany dokonane w symbolu będą automatycznie przekładane na każdą utworzoną instancję! Symbole posiadają swoje osie czasu oraz swoje warstwy (stanowią więc coś na kształt podanimacji). Ich edycja wygląda tak samo jak edycja sceny w naszej animacji. Symbole dzielą się na cztery typy: - graficzny może zawierać grafikę statyczną (plik bmp/jpg/itp.) bądź fragment animacji do wielokrotnego użycia. - przycisk pozwala na tworzenie interaktywnych przycisków. Przyciski posiadają w sobie kilka instancji, które wywoływane są na odpowiednie zdarzenia (najechanie myszą, wybranie itp.) - klip filmowy wyspecjalizowany symbol dla fragmentów animacji do wielokrotnego użycia. O ile animacja jako symbol graficzny jest zależna od głównej osi czasu dla danej sceny, o tyle klip filmowy jest w pełni niezależny działa tylko i wyłączenie w oparciu o swoją oś czasu. Klip może posiadać w sobie zagnieżdżone inne symbole graficzne, przyciski oraz klipy filmowe (wielokrotne zagnieżdżenie). - czcionki każdy wprowadzony tekst jest traktowany przez Flash jako symbol. Symbole można tworzyć od podstaw (wstawianie nowego, pustego symbolu), tworzyć na podstawie zaznaczonych obiektów/importu z zewnętrznego źródła (inne pliki animacji, filmy, grafiki statyczne) bądź poprzez powielanie już istniejących symboli (w bibliotece animacji tworzy się niezależna kopia wskazanego symbolu; zmiana w jednym symbolu nie ma wpływ na drugi symbol). Symbole można eksportować do kodu ActionScript (ten temat zostanie podjęty w innych materiałach). Więcej na temat symboli można przeczytać tutaj:

2 Przykład tworzenia symbolu na podstawie wycinania części z edytowanej sceny dokumentu animacji Flash Najpierw należy utworzyć animację. W celu dalszego ćwiczenia proponuję utworzyć klasyczną, animowaną scenę trawę, niebo, chmury oraz słońce. Efekt może wyglądać tak jak na zrzucie poniżej (rozmiar dokumentu dowolny): Trawa to prostokąt, któremu nadano odpowiedni kształt. Kształty wstawianym figurom można nadawać poprzez deformację ich linii. Wystarczy najechać do konturu/brzegu danego elementu aż pojawi się odpowiedni kursor, wcisnąć lewy przycisk myszy i trzymając go przesuwać w dowolnym kierunku aż do uzyskania pożądanego efektu. Proszę pamiętać, że pożądany kształt można uzyskać poprzez wielokrotną deformację danego brzegu/linii (jednorazowa deformacja może nie dać efektu, jaki zakładamy). Deformacji nie można wykonać jeżeli mamy zaznaczoną daną figurę! Deformacji dokonuje się gdy kursor przy brzegu figury uzyska taką ikonę:

3 Niebo to po prostu prostokąt z nadanym gradientem (kolory dowolne). Kolory przy wypełnianiu nadaje się w następujący sposób: 1) wybieramy warstwę z elementem, dla którego chcemy nadać gradient (ważne, by ta warstwa była niezablokowana) 2) wybieramy wiadro z farbą (lub na klawiaturze klawisz K) 3) w oknie/zakładce Kolor wybieramy typ Liniowy. W tym momencie możemy zmieniać co najmniej dwa kolory w naszym gradiencie. 4) aby zmienić dany kolor wystarczy kliknąć na niego dwa razy lewym przyciskiem myszy przy jego suwaku 5) chmury rysujemy za pomocą narzędzia owal nakładając na siebie kilka tychże figur:

4 Słońce złożymy z dwóch warstw. Pierwsza z nich ma zawierać owal (foremny). Na drugiej warstwie kształt rysowany poprzez narzędzie Gwiazda-wielokąt 6) we właściwościach narzędzia wybieramy Opcje..., a w nowym oknie ustawiamy Styl na gwiazda oraz wpisujemy Liczbę boków na 20 (rozmiar wierzchołka możemy zostawić domyślny) 7) teraz rysujemy gwiazdę tak by ostatecznie uzyskać podobny efekt (w tym wypadku została wyłączona warstwa chmur) Proszę pamiętać, że warstwa gwiazdy musi być poniżej wcześniej utworzonego koła. 8) teraz musimy ustalić co w naszej animacji ma się ze słońcem dziać. Przyjmijmy, że ma ono zmieniać kolor, jego promienie mają się zmniejszać i zwiększać, a także ma się poruszać chować i pokazywać się zza chmury. Dodatkowo chcemy by animacja wykonywała się przez cały okres trwania animacji, Przyjmijmy, że chcemy utworzyć 56 klatek animacji. Ponieważ w międzyczasie nasza animacja ma się zmieniać polecam utworzenie w 57 klatce ramki kluczowej w końcu w tej pozycji ma być nasze słońce co w ramce 1 (aby zachować płynność odtwarzania w pętli). Następnie przyjmijmy, że wstawiamy klatki kluczowe w następujące kolejności: 1 (już jest), 15, 30, 45, 57 (już wstawiona). Wybierzmy ramkę 1 i zmieńmy ustawienie słońca na przedstawione poniżej:

5 Teraz wybierzmy klatkę 15 i zmieńmy parametry na następujące: Teraz na przemian należy ustawienia powielać dla kolejnych ramek (można posłużyć się następującą metodą: przykładowo klikamy prawym przyciskiem myszy na ramce numer 1, wybieramy opcję kopiuj ramki, po czym na ramce 30 oraz 57 klikamy prawym przyciskiem myszy i wybieramy opcję wklej ramki). 9) analogicznie postępujemy z warstwą gwiazdy. W warstwie gwiazdy dodatkowo naprzemiennie (klatka 15 oraz 45) proszę zmienić skalę gwiazdy na 90% (menu Modyfikuj->Przekształć-> Skaluj i obróć... bądź należy kliknąć CTRL+ALT+S). Dodatkowo dobrze byłoby pochylić naszą gwiazdę o ok. 20 stopni. W celu dokonania tego można, zamist szukać po menu odpowiednich opcji, w menu Okno zaznaczyć opcję Przekształć (lub użyć skrótu CTRL+T). Od tego momentu opcje przekształcania będą dostępne bezpośrednio w na panelu roboczym (możemy to okno/zakładkę przenosić w dowolne miejsce). Dla klatki 15 ustawienia przekształcenia będą wyglądać następująco:

6 10) jeżeli chodzi o chmury to ich układ na osi czasu powinien wyglądać następująco: Co drugą klatkę proszę zmieniać ich skalę do 80% (proszę pamiętać, że zmiana ma dotyczyć każdej chmury aby zaznaczyć je wszystkie trzeba na nie klikać zaznaczeniem z wciśniętym klawiszem SHIFT bądź kliknąć na nazwie warstwy lewym przyciskiem myszy) Na koniec dodajemy pomiędzy klatkami kluczowymi (wszystkimi!) animację kształtu. Proszę teraz przetestować animację. Efekt powinien być podobny do tego. Dla 1 klatki:

7 Dla 15 klatki: Teraz stwórzmy z naszego słońca symbol. Aby tego dokonać należy wybrać element, bądź w naszym wypadku warstwy (aby wybrać jednocześnie kilka warstw należy na nie klikać z przyciśniętym klawiszem SHIFT). Następnie wybieramy menu Modyfikuj->Konwertuj na symbol... (lub wybieramy na klawiaturze F8). W otwartym oknie podajemy nazwę (dowolna) i klikamy Ok

8 Efekt widać w Bibliotece. Dodajmy teraz symbol do animacji i ją uruchommy (symbol dodaje się poprzez przeciągnięcie go w dowolne miejsce animacji). Proszę pamiętać by utworzyć dla niego osobną warstwę! Niestety po dodaniu symbolu nie jest on animowany... Dzieje się tak dlatego, że skopiowaliśmy tylko jego grafikę bez klatek animacji (do tego prawdopodobnie uszkodziliśmy pierwsze klatki animacji kopiowanych warstw). W celu skopiowania elementu/elementów z ruchem trzeba wykonać inną operację. Wybieramy w obu warstwach klatki animacji (klikamy pierwszą klatkę animacji, z wciśniętym klawiszem SHIFT klatkę animacji z drugiej warstwy po czym z nadal trzymanym klawiszem SHIFT klikamy na ostatniej klatce jednej z dwóch warstw program powinien zaznaczyć wszystkie klatki obu warstw). Teraz wybieramy menu Edycja->Oś czasu->kopiuj klatki (bądź klikamy klawisze CTRL+ALT+C). BARDZO WAŻNE! Po skopiowaniu klatek musimy wszystko odznaczyć (kliknąć gdziekolwiek np. na stole montażowym). Jeżeli tego nie zrobimy przez wstawieniem symbolu to nasza kopia w schowku ulegnie uszkodzeniu. Wybieramy menu Wstaw->Nowy symbol... (lub wybieramy na klawiaturze CTRL+F8). Pojawi okno niemal identyczne do tego, które było przy konwertowaniu na symbol (inna nazwa okna

9 reszta bez zmian). Nazwijmy go Slonce2. Otworzy się edycja nowego, pustego symbolu (nowy stół montażowy). Musimy być pewni, że posiadamy dwie warstwy oraz pierwsza klatka na obu warstwach symbolu jest zaznaczona! Teraz możemy wstawić nasze wcześniej skopiowane klatki (Edycja->Oś czasu->wklej ramki bądź klikamy CTRL+ALT+V). Przed skopiowaniem Po skopiowaniu: Aby wrócić do trybu edycji animacji możemy np. kliknąć na strzałkę w ramce bądź na nazwę naszej sceny (Scena1). Ponownie testujemy nasz nowy symbol dodajemy go do sceny i uruchamiamy ją. Tym razem oba słońca powinny się animować. Proszę zwrócić uwagę, że słońce-obiekt ma inną animację niż jego pierwotna wersja. To najlepiej obrazuje niezależność klipu filmowego od osi czasu wygenerowanej sceny. Dzięki temu ćwiczeniu wiadomo już jak dodawać zarówno nowe symbole (tworzone od podstaw) jak i skopiować pewne grafiki/warstwy do nowego symbolu i tam nadać im odpowiednie animacje, wartości itp. INFORMACJA: Proszę pamiętać, że każdy utworzony symbol można edytować (prawy przycisk myszy na symbolu i wybranie opcji Edytuj..., łączyć ze skryptami ActionScript (prawy przycisk myszy na symbolu i wybranie opcji Łączenie...), zmieniać jego typ (prawy przycisk myszy na symbolu, opcja Typ), eksportować oraz usunąć (zaznaczenie lewym przyciskiem myszy i kliknięcie na ikonę kosza bądź wybranie przycisku DELETE). 2. Biblioteka Biblioteka kojarzona (dołączana) jest przeważnie do tworzonego/edytowanego pliku dokumentu Adobe Flash (projekt/animacja). W bibliotece zawarte są wszystkie używane w danym projekcie zasoby multimedialne zarówno te utworzone przez projektanta jak i importowane ze źródeł zewnętrznych. Ze źródeł zewnętrznych można importować: pliki wektorowe (np. Adobe Illustrator), pliki rastrowe (np. Adobe Photoshop), obiekty wideo, dźwięki oraz symbole (utworzone

10 w innych plikach Flash/importowane z gotowych baz i bibliotek wbudowanych w edytor Adobe Flash). Wszelkie obiekty dodane do biblioteki mogą być dynamicznie dołączane do naszej animacji/scen w dowolnym momencie zapewnia to język skryptowy ActionScript. Istnieje także możliwość tworzenia tak zwanych bibliotek stałych. Biblioteki stałe pozwalają na importowanie z nich obiektów do dowolnego dokumentu/projektu. Biblioteki tego typu zapisuje się jako pliki URL lub, w przypadku posiadania własnego serwera WWW, pod adresem URL. Więcej o bibliotekach w Adobe Flash można dowiedzieć się pod adresem: Aby otworzyć w programie Adobe Flash przykładowe wspólne biblioteki należy wybrać menu Okno->Wspólne biblioteki. Otworzy się podmenu z trzema opcjami do wyboru: Klasy, Nauka oraz Przyciski. 1) Klasy- zawiera gotowe, kompleksowe rozwiązania przykładowych aplikacji, w tym serwisu WWW. Niestety dostępne klasy są pisane na ActionScript 2.0. Nie polecane jest ich uczenie się/stosowanie. 2) Nauka zawiera wiele gotowych przykładów pojedynczych symboli-aplikacji, które można połączyć w większe aplikacje (bądź dołączyć je jako ich integralne części). Zaletą tych komponentów jest opis jak je wykorzystać. Przykład: - Wybierzmy z otwartego okna Biblioteka - Learning Interactions symbol True or False (aby dodać go do naszej biblioteki po prostu trzeba go wybrać lewym przyciskiem myszy i przeciągnąć do naszej biblioteki). - Okno wspólnych bibliotek można zamknąć. Teraz dodajmy go do naszej animacji (tak jak poprzednio dodawaliśmy słońce). Dobrym pomysłem jest ustawić symbol tak by nie było widać podpowiedzi (żeby była poza sceną).

11 - Teraz postępujemy zgodnie z instrukcją elementu (tabelka z tekstem). - Podpowiedź 3 jest błędna. Owszem, trzeba kliknąć na panel z opisem (ten, z którego czytamy instrukcję), jednak narzędzie nie nazywa się Inspektor składnika a Inspektor Komponentów. Można dostać się do niego na 3 sposoby: z zakładki Parametry kliknąć przycisk Uruchom Inspektora komponentów, wybrać Okno->Inspektor komponentów bądź kliknąć na klawiaturze SHIFT+F7 - Otworzy się nowe okno. Wybieramy w nim zakładkę Parametry.

12 - Okno jest bardzo małe; dostosowujemy je do pożądanego rozmiaru poprzez przeciągnięcie lewego rogu myszą. - Niestety przykład jest nieprzetłumaczony. Można się jednak domyślać jakie są jego opcje. Zmieniamy je według naszego gustu - Uruchamiamy naszą animację (bądź możemy ją np. opublikować). Można sprawdzić działanie przykładu. UWAGA! Wszystkie przykłady są niestety dostępne w przestarzałym ActionScript 2.0. Wersja 2.0 nie jest w żaden sposób kompatybilna z wersją 3.0. Aby można było poprawnie utworzyć animację i zobaczyć jej efekty niezbędna będzie zmiana właściwości publikacji (menu Plik->Ustawienia publikowania... bądź skrót CTRL+SHIFT+F12). W otwartym oknie klikamy zakładkę Flash i ustawiamy odpowiednią wersję ActionScript

13 Innym rozwiązaniem jest po prostu utworzyć nowy dokument zgodny z ActionScript ) Przyciski ostatnia wspólna biblioteka. Tutaj znajdują się gotowe, przykładowe przyciski, które można używać do własnych celów. Jest to zarazem najbogatsza w przykłady biblioteka. W celu dodania przycisków do swojej biblioteki można dodawać je pojedynczo (przeciągając je do biblioteki) bądź poprzez przeciągnięcie danego folderu. Tak przeniesione przyciski możemy edytować (jako symbole), dodawać do naszych animacji oraz nadawać im odpowiednie właściwości/zmienne itp. INFORMACJA: Proszę pamiętać, że prócz edycji przycisków w bibliotece możemy także edytować je jako dodane instancje na naszej animacji. Wtedy zmiany będą dotyczyć tylko edytowane instancji. Tyczy się to także innych komponentów. Opcje wstawiania przycisków, ich edycji oraz tworzenia własnych przycisków poznamy w następnym materiale poświęconym przyciskom. 3. Import gotowych grafik/bibliotek/animacji Flash do nowego projektu Program pozwala także na importowanie gotowych, stworzonych w innych programach animacji, filmów czy grafik. Zewnętrznym źródłem może być także inna animacja fla bądź tylko jej biblioteka wszystko zależy od naszej wyobraźni i potrzeby. Aby zacząć import należy wybrać menu Plik->Importuj. Mamy do wyboru: 1) Import na stół montażowy... (skrót klawiaturowy CTRL+R) importuje dowolne dozwolone źródło zewnętrzne bezpośrednio na stół montażowy, z pominięciem biblioteki 2) Importuj do biblioteki... importuje dowolne dozwolone źródło zewnętrzne do biblioteki naszego projektu. Od tego momentu możemy je wybrać i przeciągnąć na nasz stół montażowy, tworząc tym samym jego nową instancję. W przypadku importu innych plików fla do biblioteki, prócz samej sceny w nich zawartej, zostaną zaimportowane wszystkie symbole znajdujące się w ich bibliotece

14 3) Otwórz zewnętrzną bibliotekę... (skrót klawiaturowy CTRL+SHIFT+O) importuje tylko bibliotekę ze wskazanego pliku do naszej animacji. Program jako dopuszczalną preferuje pliki fla, chociaż można próbować zaimportować także inne typy plików (jako filtr wybieramy wszystkie pliki). 4) Importuj wideo... - pozwala na import do animacji tylko plików wideo. Można importować zarówno pliki znajdujące się u nas na dysku, w otoczeniu sieciowym (sieć Windows, sieć SAMBA) bądź na jakimś serwerze (np. mojadres.pl). Należy tylko pamiętać by podawać pełne adresy wraz z nazwą i rozszerzeniem pliku (np. mojadres.pl/katalog/film.avi). Importowanie pliku jpg oraz wav Do chwili, kiedy nie opublikujemy naszego projektu, jego biblioteka jest wirtualna - to, co w niej jest zawarte powinno najlepiej znajdować się w tym samym katalogu (bądź podkatalogu), w którym znajduje/ją się plik/pliki projektu (czyli fla oraz as). Spróbujmy importować obrazek jpg. Skopiujmy go do katalogu naszego projektu. Otwieramy menu Plik->Importuj->Importuj do biblioteki... i wskazujemy nasz plik jpg. Teraz można dodać naszą importowaną grafikę do animacji. Można też dodać jej animację ruchu (tym razem jednak nie animację kształtu, a ruchu bo grafika jako taka nie może być kształtem!). Teraz dodajmy jakiś plik wave do naszej biblioteki. Możemy poszukać takich plików w katalogu

15 systemowym Windows (przeważnie katalog C:\Windows\Media). Jak widać na powyższym zrzucie w bibliotece znajduje się już jeden dźwięk notify (dodany przed aktualnie wybranym Windows Ding). A jak teraz dodać dźwięk do animacji? Nie jest to specjalnie trudne. Można wybrać daną klatkę kluczową i przeciągnąć dźwięk gdzieś w obręb stołu montażowego. Na osi czasu pojawi się dodatkowa kreska symbolizuje, że w tle odegrany będzie dźwięk (jej długość pokazuje mniej więcej jej pokrycie względem animacji). Po uruchomieniu animacji będzie słychać przypisany dźwięk. Usunięcie tak dodanego dźwięku jest równie proste jak dodanie go. Klikamy dowolną część naszej animacji, do której dodaliśmy dźwięk (na osi czasu). Przechodzimy do okna/karty Właściwości. Będzie tam pole Dźwięk z nazwą symbolu, jaki reprezentuje dodany przez nas dźwięk. Wystarczy to pole ustawić na brak, a pozbędziemy się niechcianej muzyki przy danej klatce kluczowej. Proszę zauważyć, że mamy także możliwość dodania efektu dźwięku, a także zmianę startu jego odtwarzania, możliwość wielokrotnego odtworzenia (podajemy konkretną ilość) bądź odtwarzać symbol w pętli (do następnej klatki kluczowej bądź końca animacji). Zadania: 1. Proszę tworzoną animację przetworzyć tak, by wszystko, łącznie z chmurami, było symbolami. Dodatkowo proszę poprawić symbol słońca nie jest w nim wymagane, by miał wielokrotnie dodawane klatki kluczowe (animacja sama zadba o powielenie ruchów symbolu). Proszę skopiować symbol chmur tak, by niebo wyglądało na bardziej zachmurzone (odpowiednio ustawić symbol i/lub przerobić aktualnie używany). 2. Proszę do animacji dorobić nowy symbol ptaka, który będzie przelatywał na niebie podczas

16 animacji. Efekt może wyglądać następująco: 3. Proszę nadać animację ptaka w symbolu (np. ruch skrzydłami czy dziobem). Następnie proszę nadać na osi czasu ruch tegoż ptaka po niebie. Czy animacja będzie widoczna? 4. Proszę dodać ze współdzielonej biblioteki jakiś przykład naukowy i sprawdzić metodę jego działania (inny niż opisany True or False). 5. Proszę stworzyć nową animację, której podstawą będzie nasz animowany plener. W nowej animacji proszę dodać jakieś dźwięki + np. nowy symbol ruszające się na wietrze drzewo (najlepiej z tworzone w osobnym pliku fla). Grafiki z Photoshop/Corel mile widziane.