Ten kurs poświęcony będzie znanemu już chyba wszystkim programowi Flash firmy Macromedia. Tym razem wprowadzę was w tajniki wersji MX przez niektórych nazywaną wersją szóstą.
Mateusz Dutkiewicz
Wstęp
Na początek przedstawię wam kilka ważnych informacji bez których trudno będzie nam zacząć.
Nasze animacje tworzymy a następnie zapisujemy do pliku o rozszerzeniu .fla . Jest to plik projektu animacji. Zawiera on wszystkie składowe jej elementy, umożliwia dokonywanie poprawek. Plik zapisujemy w menu File/Save As... .
Do wyboru mamy dwa formaty Flash MX Document lub Flash 5 Document . Zapisując plik w wersji MX będzie on tylko dostępny dla Flash'a MX jeżeli jednak zapiszemy go w wersji starszej będzie on możliwy do otwarcia i edycji w obu wersjach programu. Uwaga !!! Jeżeli w naszym projekcie będą występowały elementy których nie było w wersji 5 (np. folder na warstwy lub komponenty) nie da się go zapisać dla starszej wersji programu.
Nasze animacje z pliku .fla publikujemy do pliku .swf lub do innych dostępnych formatów m.in. .exe , .gif, .jpg , .png. Plik .swf jednak jest plikiem który osadzamy na naszej stronie www. Plik ten w przeciwieństwie do pliku .fla umieszczamy na serwerze. Razem z plikiem .swf tworzony jest plik .html. Zawiera on osadzoną już nasza animację. Wiele osób jednak chciało by mieć animację w konkretnym miejscu na swojej stronie.
Wygenerowany plik HTML zawiera interesujący nas kod który odpowiada za wyświetlenie animacji flash. Kod zawiera się między znacznikami . Wystarczy, że go przekopiujemy i wkleimy w odpowiednie miejsce na naszej stronie. Przykładowy kod wygląda tak:
Zrozumienie tego kodu jest proste parametry rozmiaru animacji width i height, położenie align, id to oznaczenie naszej animacje przez które możemy się do niej odwoływać np. przy pomocy języka skryptowego JavaScript. Oznaczenia Param oznaczają poszczególne parametry animacji jego jakość, kolor tła i samo położenie pliku .swf.
Tak jak pliki .gif pliki animacji flash mogą mieć przezroczyste tło.
Przykładem jest np. animowana strzałka znajdująca się na tej stronie. By uzyskać taki efekt dodajemy do kodu dodatkowy parametr
oraz dodajemy do znacznika EMBED wartość: wmode=transparent . Możemy to jednak zrobić łatwiej ustawiając w opcji publikacji animacji ( menu File/Publish Settings... ) zakładka HTML Window Mode na Transparent Windowless.
Opcje publikacji pozwalają także dostosować nasz plik .swf (zakładka Flash) ważne jest to by zabezpieczać swoją animacje hasłem gdyż istnieje opcja importu pliku .swf do projektu .fla a nikt z nas nie chciał by ktoś inny posługiwał się jego elementami graficznymi. Robimy to następująco zaznaczamy opcję Protect from import i w polu password wpisujemy hasło. Teraz jeżeli ktoś będzie chciał importować nasz plik .swf poproszony zostanie najpierw o podanie hasła które zna tylko autor animacji.
Ważne jest jeszcze to, że do animacji flash nie dodajemy linków tak jak robi się to do plików .gif czy .jpg dodając odpowiedni kod HTML. Hiperłącza dodajemy przez użycie w animacji tzw. Action Scriptu o który w dalszej części kursu.
Wygląd programu
Gdy uruchomimy program zobaczymy wiele różnych pól i ustawień. Cały ekran można podzielić na kilka sekcji. W samym centrum mamy formatkę na której będziemy tworzyć nasze animacje, ja będę nazywał ją polem pracy.
Po lewej stronie mamy pole narzędziowe ( Tools ) w którym znajdują się narzędzi potrzebne nam w pracy. Na górze mamy pole Timeline. Pole to zawiera warstwy i klatki naszej animacji. Nad polem Timeline znajduje się menu główne programu.
Pozostałe elementy które są otwarte to panele. Najważniejszy dla nas to Properties powinien znajdować się u dołu ekranu. Możemy wyróżnić jeszcze takie panele jak: Action, Color Mixer, Color Swatches, Components i Library o których więcej dowiecie się później. Każdy panel można zamknąć lub uaktywnić.
Panel zamykamy klikając na jego nagłówek prawym klawiszem i wybierając z rozwiniętego menu opcję Close Panel. By zamknięty panel uaktywnić ponownie wchodzimy do głównego menu programu Window i tam wybieramy jego nazwę.
Teraz zajmiemy się bardziej szczegółowym opisem i działaniem poszczególnych elementów.
menu główne
Menu programu ma standardowy wygląd i składa się z 9 elemantów.
Menu File zawiera opcje i ustawienia plików. Możemy tu otworzyć plik, zapisać, importować lub eksportować różne obiekty oraz publikować naszą animację.
Menu Edit to edycja elementów i klatek możemy wklejać, wycinać i kopiować.
Menu View to menu ustawień widoku tu możemy np. włączyć linijki (opcja Rulers) powiększać lub zmniejszać widok naszego pola pracy.
Menu Insert to menu dodawania obiektów, warstw i klatek animacji.
Menu Modify umożliwia nam modyfikację warstw ( Layer... ), scen ( Scene... ) lub całego dokumentu ( Document... ). Dodatkowo umieszczone są tutaj ustawienia naszych obiektów pozwalają one a zmianę ich kształtu, rozmiaru oraz położenia.
Menu Text jak sama nazwa wskazuje zajmować się będzie tekstem. Możemy wybrać czcionkę jej rozmiar położenie tekstu oraz styl.
Menu Control to menu kontroli animacji tu możemy ją uruchomić, zatrzymać, przetestować i sprawdzić poprawność kodu (opcja Debug Movie).
Menu Window wspomniałem już wcześniej tu możemy włączyć lub wyłączyć poszczególne panele.
Menu Help to menu pomocy niestety jak cały program w wersji angielskiej.
pole narzędzi
Teraz zajmiemy się narzędziami jakie udostępnia nam do pracy Flash MX.
Strzałka czarna służy do zaznaczania i przenoszenia obiektów.
Strzałka biała edytuje punkty na obiekcie. Dzięki niej możemy obiekty
swobodnie transformować i zmieniać ich kształt.
Linia to narzędzie do rysowania linii prostych.
Lasso to narzędzi do zaznaczania obszarów w obiekcie.
Pióro to narzędzie do rysowania dokładnych linii i krzywych.
Narzędzie tekstowe pozwala dodawać do naszych animacji napisy.
Koło tworzy obiekty o kształcie koła lub owalu.
Kwadrat rysuje obiekty prostokątne lub obiekty o zaokrąglonych rogach.
Ołówek tworzy linie swobodne.
Pędzel pozwala swobodnie malować nam po polu pracy ma do wyboru różne końcówki i rozmiary.
Narzędzie swobodnej transformacji pozwala nam zmienić szybko i łatwo
skalę, pochylić lub rozciągnąć obiekt.
Transformacja wypełnienia to narzędzie do zmiany wyglądu naszego wypełnienia.
Atrament pozwala nam oblać linią nasze obiekty.
Wiadro z farbą wypełnia obszary zamknięte jednolitym kolorem, gradientem lub mapa bitową.
Pipeta pobiera z dowolnego miejsca na ekranie kolor.
Gumka wyciera nasze obiekty tak jak pędzel posiada różne rozmiary i wyglądy końcówek.
Rączka chwyta nasze pole pracy umożliwiając jego przesuwanie.
Szkło powiększające powiększa lub zmniejsza nam widok obszaru pracy.
Ustawienia kolorów służą do ustawienia kolorów linii oraz wypełnienia.
Dodatkowo w polu opcji ( Options ) po wybraniu każdego narzędzia pokazują się dostępne możliwości ustawień np. dla pędzla wybór jego rozmiaru i kształtu.
warstwy
Warstwy pozwalają rozdzielić nam poszczególne obiekty i je oddzielnie animować. Wyróżniamy sześć rodzajów warstw. Warstw zwykła ( na rys. najniżej ), warstwa aktywnego toru ruchu (druga od dołu), nieaktywnego toru ruchu, warstwa maskowana, warstwa maski i folder.
Warstwy toru ruchu pozwalają utworzyć tor po którym będzie poruszał się obiekt w animacji zawartość tej warstwy nie jest widoczna. Warstwa maski pozwala na pokazywanie fragmentów warstwy maskowanej. Folder to warstwa która ułatwia uporządkowanie warstw. Jeżeli mamy np. animacje napisu gdzie każda jego litera jest w innej warstwie możemy dla porządku zastosować folder i w nim umieścić wszystkie te warstwy.
By ułatwić sobie pracę możemy wyłączać widok warstwy klikając na symbol oka przy warstwie, lub zablokować ja do edycji (symbol kłódki). Przydaje się też widok konturowy obiektu (kolorowy kwadracik). Warstw dodajemy albo z menu Insert albo poprzez klikniecie na jej symbol w polu warstw (trzy ikonki z znakami plus). Warstwy usuwamy poprzez kliknięcie na symbol kosza.
klatki animacji
Każda warstwa zawiera swoje klatki animacji ten rysunek przedstawia jak dane klatki wyglądają w zależności od tego co zawierają. Wyróżniamy różne rodzaje klatek animacji. Najważniejsza to klatka kluczowa. Klatkę tego typu reprezentuje czarna kropka. Jest to klatka która zawiera obiekt.
Animacje trwają od jednej klatki kluczowej do drugiej. Klatki kluczowe dodaje się przez zaznaczenie klatki i wciśnięcie klawisza F6. Wyróżniamy także puste klatki kluczowe reprezentowane przez pustą kropkę. Klatki koloru szarego to klatki które zawierają obiekt który pojawił się w klatce kluczowej i trwa przez pewien okres czasu. Klatki koloru niebieskiego zawierają animację ruchu obiektu od jednej klatki kluczowej do drugiej. Klatki jasno zielone to klatki animacji kształtu.
sceny
Sceny to coś nadrzędnego do warstw, pozwalają one na tworzenie animacji które mają złożoną budowę. Pozwalają na m.in. zbudowanie całej strony internetowej we flashu. Dzięki odwoływaniu się do poszczególnych scen tworzymy coś na wzór linków na zwykłych stronach www. Możemy sprawić np., że po kliknięciu na przycisk uruchomi się określona przez nas scena.
Najczęściej jednak pracuje się na jednej (sama animacja) lub dwóch scenach (np. preloader i animacja). Aby dodać scenę do animacji wybieramy opcję Scene w menu Insert, a aby usunąć Remove Scene. Kolejność występowania i nazwy scen możemy zmienić w inspektorze scen (menu Window,Scene...).
Animacja tekstu
Każdy już z was wie na czym polega tworzenie animacji. W większości polega to na ustaleniu zdarzeń i położenia obiektów od jednej klatki kluczowej do drugiej. Teraz wykonamy animację która jest podobna, ale wymaga od nas większej pracy. Tworzymy nowy plik ustalamy jego wymiary, liczbę klatek na sekundę i kolor tła.
Pamiętajcie o jednym, że im większa liczba klatek na sekundę tym animacje będą bardziej płynne (najlepiej ustawiać liczbę z przedziału od 18 do 30). Gdy wszystko jest już gotowe do pracy wybieramy narzędzie do tworzenia tekstów (symbol A). Tworzymy napis. Jeżeli mamy otwarty panel
Properties to zaraz po wybraniu tego narzędzia ustawi się on na właściwości tekstu. W nim określamy jego wygląd. Mój napis powstał czcionką HandelGotDLig rozmiar 40 pogrubiona. Teraz gdy mamy już napis klikamy CTRL+B. Każda litera powinna zostać rozseparowana i być w oddzielnym niebieskim prostokąciku. Każda litera naszego tekstu jest oddzielnym obiektem.
Teraz musimy je umieścić każdą w oddzielnej warstwie. Z menu Modify wybieramy opcję ostatnią Distribute to Layers (Ctrl+Shift+D). Powstały teraz nowe warstwy każda zawiera jakąś literę lub znak. Warstwa w której powstał tekst jest pusta, możemy ją usunąć klikając na symbol kosza. Mając nadal zaznaczone wszystkie litery (każda litera w niebieskim prostokącie) klikamy na klatkę nr 1 w dowolnej warstwie prawym klawiszem i wybieramy Create Motion Tween.
Teraz podobne jak w poprzedniej lekcji kursu animujemy litery. Ja w klatce nr 90 wstawiam klatki kluczowe kończące animację. Można robić to na piechotę wybieramy warstwę, klatkę nr 90 i wciskamy F6. Jest jednak szybszy sposób. Wybieramy najwyższą warstwę i jej klatkę 90 trzymając lewy klawisz myszki zaznaczamy ciągnąc w dół wszystkie klatki nr 90 potem wystarczy wcisnąć F6 i gotowe.
Teraz przechodzimy do klatki nr 1 i zaznaczamy wszystkie litery w taki sposób jak zaznacza się pliki lub foldery w Windowsie. Zaznaczone wszystkie litery powiększamy (Modify/Transform/Scale and Rotate...) by wyszły poza pole pracy. Ja powiększyłem je 1000%. Animacja prawie gotowa. Teraz należy zsunąć litery, mogą na siebie zachodzić. Napis powinien na szerokość zmieścić się w polu pracy. Dodamy opóźnienie.
Litery będą się zmniejszać jedna po drugiej i na końcu animacji utworzą napis. Pierwsza litera tekstu zaczyna się animować od klatki nr 1 drugą musimy opóźnić o jakiś okres czasu w stosunku do litery pierwszej ja dałem 5 klatek. Przesuwamy klatkę kluczową w warstwie z literą drugą z klatki nr 1 do 5 chwytając ją myszką. Teraz klatkę kluczową litery trzeciej przesuwamy do klatki nr 10.
Postępujemy tak do końca naszego wyrazu zwiększając opóźnienie o 5 klatek. Gdy to już wykonamy przechodzimy do przedostatniej litery i jej klatki kluczowej kończącej animacje u mnie nr 90. Klatkę tą przesuwamy do klatki nr 85. Z pozostałymi warstwami postępujemy podobne zmniejszając położenie klatek kluczowych o 5 w stosunku do warstwy poprzedniej.
Otrzymaliśmy następujący efekt: litery zmniejszają się startując w odstępach czasu i powoli układają nasz napis. Dla większego efektu możemy dodać efekt Alpha pojawiania się liter z jednoczesnym pomniejszeniem. Zaznaczamy pierwszą literę wyrazu w jej pierwszej klatce kluczowej.
Powinna zmienić się nam zawartość panelu Properties na właściwości obiektu graficznego (Graphic). Ustawiamy w nim Color na Alpha 0%. To samo wykonujemy z każdą kolejna literą. Publikujemy i animacja jest gotowa, a wygląda tak:
Animacja po torze
Tym razem wykonamy animację po torze. Stworzony przez nas obiekt będzie miał określona trajektorię po której będzie się poruszał. W tym rozdziale poznamy nowy rodzaj warstwy, jest to warstwa Motion Guide czyli przewodnik ruchu. Warstwa ta nie jest wyświetlana w animacji.
By dodać tego typu warstwę klikamy w polu warstw na mała ikonkę z symbolem . Animacja po torze składa się z dwóch warstw, warstwy toru i warstwy z obiektem który po torze się porusza. warstwa z obiektem powinna znajdować się pod warstwą toru. Jeżeli dwie warstwy są powiązane zmieni się symbol warstwy z torem na .
Jeżeli jednak warstwy nie są powiązane warstwa Motion Guide ma ikonkę .
By zmienić warstwę z obiektem na warstwę która uzależniona jest od toru klikamy na jej nazwę prawym klawiszem myszki i z rozwiniętej listy wybieramy opcję ostatnią czyli Properties... . Tu zmieniamy typ warstwy (Type) na Guided. Zabieramy się do naszej animacji. Mamy już dwie powiązane warstwy.
W warstwie toru przy pomocy narzędzia ołówek rysujemy tor ruchu. Ja narysowałem spiralę . W warstwie niższej rysujemy nasz obiekt który po owym torze będzie się poruszał . Teraz dodajemy animację do obiektu. Jego ruch będzie rozpoczynał się od początku narysowanego toru do jego końca. Umieszczamy środek obiektu na linii toru (powinien do linii się przykleić).
Tworzymy animację klikamy prawym klawiszem na klatkę nr 1 w warstwie z obiektem i wybieramy Create Motion Tween. Teraz musimy określić czas trwania naszej animacji ja ruch obiektu zakończę w klatce nr 200. W tej klatce wstawiam klatkę kluczową (F6). Nasz tor także musi trwać tyle co animacja więc w klatce nr 200 i warstwie z torem wciskamy klawisz F5.
Będąc w klatce 200 warstwy z obiektem przenoszę go na koniec toru. Tak samo jak w klatce nr 1 powinien on przyciągnąć się do linii toru. Można powiedzieć animacja gotowa, ale to jeszcze nie wszystko. Ja jako obiektu użyłem strzałki dobrze by było by obracała się poruszając się po torze. Klikamy na dowolną klatkę w warstwie z obiektem np. 50. Musimy mieć otwarty na ekranie panel Properties. W nim możemy teraz określić ustawienia trwającej animacji.
W opcji Rotate możemy ustawić ilość obrotów obiektu podczas trwania animacji np. Rotate: CW 5 times oznacza 5 obrotów wg. wskazówek zegara lub Rotate: CCW 2 times 2 obroty przeciwnie do wskazówek zegara. Ja ustawiłem Auto i zaznaczyłem opcję Orient to path. Moja strzałka będzie obracać się w zależności od toru animacji. Możemy teraz dodać powrót obiektu do początku.
Klikamy prawym klawiszem na klatkę nr 1 w warstwie z obiektem i webieramy opcję Copy Frames. Teraz klatkę tą wkleimy, ja wkleiłem ją (prawym klawiszem na klatkę i opcja Paste Frames) w klatce nr 400 by animacja powrotu trwała tyle samo co animacja początkowa. Pamiętajcie o przedłużeniu trwania warstwy z torem (F5 w klatce 400). Brak warstwy z torem spowoduje ruch obiektu po linii prostej. Możecie to sprawdzić. Animacja powrotu trwa od klatki 200 do 400.
Tak jak poprzednio możemy zaznaczając jedną z klatek z tego przedziału dodać obrót obiektu. Ja jednak tego nie zrobię by ukazać różnicę. Na potrzeby kursu skopiowałem tor ruchu i umieściłem go w nowej zwykłej warstwie by pokazać jak mój tor wygląda. Całą animację zapisujemy, publikujemy i oglądamy.
Maska
Ten rozdział poświęcony będzie maskom. Dzięki zastosowaniu maski możemy powoli odsłaniać obrazek lub napis. Całą idee maski zrozumiecie po przeczytaniu tej lekcji. Tak jak w wypadku toru taki i w masce animacja odbywa się w dwóch powiązanych ze sobą warstwach. Utwórzcie dwie nowe warstwy.
Teraz narysujcie w warstwie wyższej jakąś figurę geometryczną koło, kwadrat lub romb. W warstwie niższej możecie coś narysować lub wstawić napis. Warstwa wyższa będzie maską, a niższa będzie maskowana, ją będziemy odsłaniać. Ja stworzyłem dla większego efektu bardziej skomplikowaną maskę złożoną z kilku pustych rombów. Maskował będę napis. Mamy już dwie warstwy, w każdej jakiś obiekt.
Teraz musimy zmienić rodzaj warstw na maskę i warstwę maskowaną. Klikamy na nazwę warstwy wyższej prawym klawiszem i wybieramy opcję Properties... . tu ustalamy typ warstwy na Mask i klikamy w OK. To samo robimy z warstwą maskowany tylko jako typ wybieramy Masked. Zmienią się ikonki warstw. Warstwa maski będzie miała ikonkę , a warstwa maskowana .
Teraz możemy animować jedną z warstw. Ja animowałem maskę. Maska na początku mojej animacji była mała, nie zasłaniała obiektu w warstwie niższej powodując jego widoczność. Wraz z trwaniem animacji maska powiększa się by na końcu w całości zasłonić obiekt w warstwie maskowanej powodując całe jego wyświetlenie. Animacja gotowa możecie przetestować. Przy pracy z maskami przydaje się blokada warstw symbol .
Ja dodałem jeszcze jeden efekt maska odsłania mój napis. Napis ten skopiowałem (Edit/Copy) i wkleiłem do zwykłej warstwy dokładnie w to miejsce z którego był kopiowany (Edit/Paste in Place). Warstwę tą umieściłem najniżej tak by na końcu animacji maskowany napis zasłonił mi go w całości. Teraz animowałem tą warstwę. Nie zmieniam położenia napisu tylko tworzę animacje kolorów.
Blokuję warstwy z maską i maskowanym obiektem gdyż są wyżej i przeszkadzały by w pracy. Zaznaczam napis w pierwszej klatce kluczowej w panelu Properties ustawiam opcję Color na Tint i wybieram z palety kolorów kolor żółty. Przechodzimy do klatki kluczowej kończącej animację kolorów. Tu też zaznaczam napis i ustawiam Tint na kolor czerwony.
Napis w tej warstwie zmieni swój kolor z żółtego na czerwony. Teraz animacja wygląda tak: maska odsłania napis który jest biały, a w warstwie najniższej identyczny tekst umieszczony dokładnie w tym samym miejscu zmienia swój kolor. Zapisujemy i publikujemy.
Shape hint's
Nasze poprzednie animacje były oparte na animacji ruchu. Teraz będziemy dokonywać animacji polegającej na zmianie kształtu. Dokonamy płynnego przejścia jednego obiektu w drugi. Cała animacja będzie w jednej warstwie. Tworzymy pierwszy obiekt ja stworzyłem sześcian. Animacja będzie trwała 30 klatek wiec w klatce nr 30 wstawiamy klatkę kluczową (F6). Teraz usuwamy obiekt z klatki nr 30 (Edit/Cut). Klatka zmieniła się w pustą klakę kluczową. W niej rysujemy nowy obiekt ja narysowałem ostrosłup. Animacja będzie polegała na zmianie sześcianu w ostrosłup. Klikamy teraz w dowolną klatkę pomiędzy klatkami 1, a 30. W panelu Properties otworzyły nam się właściwości klatki. Ustawiamy opcję Tween na Shape czyli kształt. Klatki animacji powinny zmienić kolor na jasnozielony. Możecie przetestować to co osiągnęliśmy (Enter lub menu Control/Test Movie). Wszystko działa. Mamy jednak w animacji mały chaos. Nie kontrolujemy przebiegu zmiany kształtu. Dodamy do niej tzw. Shape Hints są to punkty które umieszczamy w pierwszym obiekcie, a następnie w drugim określamy ich położenie na końcu zmiany kształtu. Przejdźcie do klatki nr 1 i z głównego menu programu wybierzcie Modify/Shape/Add Shape Hints lub Ctrl+Shift+H. Pojawił się punkt jest to symbol litery w kółku czerwonym. Taki punkt łapiemy i umieszczamy w dowolnym punkcie obiektu. Najlepiej dodać takich punktów cztery lub pięć i rozmieścić je po rogach obiektu. Teraz przechodzimy do ostatniej klatki. Jak pewnie zauważyliście punkty już tam są rozmieszczamy je tam gdzie mają się znaleźć po zmianie kształtu. Podczas trwania animacji punkt po linii prostej będzie się przemieszczał ciągnąc za sobą róg naszego obiektu. Jeżeli wszystko jest ok punkty zmienią kolor w ostatniej klatce, zrobią się zielone, a w pierwszej żółte. Jeżeli jednak nadal są czerwone znaczy to, że gdzieś jest błąd. Ja w swojej animacji dodałem powrót i kilka opóźnień. Sześcian zmienia się przy użyciu shape hint's w ostrosłup, ostrosłup zostaje na ekranie przez kilka klatek, potem zmienia się z powrotem w sześcian tym razem bez udziału punktów kształtu.
Obiekty
Stworzone przez nas wcześniej animację zawierały obiekty typu grafika (Graphic). Obiekt statyczny który następnie animowaliśmy. Flash udostępnia jeszcze dwa typy obiektów jest to Movie Clip i Button. Movie clip to obiekt animowany, button to przycisk który reaguje na kursor.
Movie clip tworzymy wybierając z menu Insert opcję New Symbol... (CTRL+F8) i wybierając Bahavior: Movie Clip. Zasada tworzenia animacji jest identyczna jak w przypadku tworzenia naszej głównej animacji.
Button dodajemy podobnie jak Movie Clip tylko ustawiamy Bahavior na Button. Tworzenie przycisku polega na określeniu czterech jego stanów. Jak zauważyliście pole klatek jest znacznie inne.
Tu właśnie określamy jak przycisk ma wyglądać gdy jest nie wciśnięty ( Up ), jak ma wyglądać gdy nad nim pojawi się kursor myszy ( Over ), jak gdy się go wciśnie ( Down ), oraz jak ma wyglądać pole w który przycisk reaguje ( Hit ). W polu Hit możemy wstawić przycisk z pola Up lub narysować kwadrat który będzie polem trafienia w przycisk. Pole Hit nie jest wyświetlane.
Nasze obiekty przechowywane są w bibliotece. Otwieramy ją CTRL+L. Obiekty z biblioteki by dodać do animacji wystarczy przeciągnąć przy pomocy kursora na pole pracy. Obiekty możemy łączyć wstawiając np. w pole Over buttona jakiegoś movie clip'a. Przycisk będzie wtedy animowany (przykład poniżej).
Do naszych animacji możemy importować (menu File, Import...) wiele różnych obiektów. Mogą to być pliki dźwiękowe, pliki wideo i grafika.
Formaty dźwiękowe:
WAV (Windows)
AIFF (Macintosh)
MP3 (Windows lub Macintosh)
Jeżeli posiadasz QuickTime'a 4 lub jego późniejszą wersję możesz dodatkowo importować następujące formaty dźwiękowe:
AIFF (Windows lub Macintosh)
Sound Designer II (Macintosh)
Sound Only QuickTime Movies (Windows lub Macintosh)
Sun AU (Windows lub Macintosh)
System 7 Sounds (Macintosh)
WAV (Windows lub Macintosh)
Formaty wideo:
Jeżeli posiadasz QuickTime'a 4 lub jego późniejszą wersję możesz importować następujące formaty wideo (systemy Windows i Macintosh):
Audio Video Interleaved - .avi
Digital Video - .dv
Motion Picture Experts Group - .mpg, .mpeg
QuickTime Movie - .mov
Jeżeli w systemie masz zainstalowany DirectX 7 lub jego nowszą wersję możesz importować (system Windows) :
Audio Video Interleaved - .avi
Motion Picture Experts Group - .mpg, .mpeg
Windows Media File - .wmv, .asf
Formaty graficzne:
Adobe Illustrator (wersja 8 lub wcześniejsze) - .eps, .ai
AutoCAD DXF - .dxf
Bitmapa - .bmp
Enhanced Windows Metafile - .emf
FreeHand - .fh7, .fh7, .fh8, .fh8, .fh9, .fh9, .fh10
FutureSplash Player - .spl
GIF i animowany GIF - .gif
JPEG - .jpg
PICT - .pct, .pic
PNG - .png
Flash Player 6 - .swf
Windows Metafile - .wmf
Jeżeli posiadasz QuickTime'a 4 lub jego późniejszą wersję możesz dodatkowo importować następujące formaty graficzne:
MacPaint - .pntg
Photoshop - .psd
PICT - .pct, .pic
QuickTime Image - .qtif
Silicon Graphics Image - .sgi
TGA - .tga
TIFF - .tif
Komponenty
Komponenty to nowość zastosowana w tej wersji Flash'a. Dzięki nim można bardzo łatwo tworzyć formularze i przewijane pola tekstowe. Program udostępnia nam rozwijane listy, pola wielokrotnego wyboru, checkboxy, radiobuttony i scrolle.
Zasada tworzenia formularzy jest dość trudna zwłaszcza dla początkującego użytkownika. Każdy komponent musimy opisać nadając mu charakterystyczną nazwę, do rozwijanych list musimy wprowadzić dane. Dalej czeka nas rzecz dość trudna, należy napisać Action Script który dane przetworzy. Poniższy przykład jest może banalny, wybrane wartości są po potwierdzeniu wypisywane w polach tekstowych.
Można oczywiście posłużyć się dodatkowo językami skryptowymi np. PHP by otrzymane dane umieścić w bazie danych lub wysłać mailem. Praca z komponentami mnie przypomina pracę z Delphi (język programowania) zasada ogólnie jest bardzo podobna. Panel z komponentami otwieramy z menu Window/Components lub wciskając klawisze Ctrl+F7.
W polu pracy umieszczamy je identycznie jak jest to w przypadku obiektów w bibliotece przeciągając za pomocą kursora. Do ustawień parametrów komponentów służy panel Component Parameters (menu Window/Component Parameters lub Alt+F7). Komponent zbudowane są z buttonów i movie clipów tak więc edycja ich wyglądu nie powinna sprawić wam kłopotów.
Szablony
Szablony to gotowe formaty prezentacji we flashu. Mamy gotowe rozmiary bannerów, okien typu popup, wzorce menu, formaty prezentacji dla telefonów Nokia9200 i komputerów kieszonkowych. Gotowe są wzorce prezentacji zdjęć oraz szablony prezentacji stosowanych w firmach.
Dla tych co lubią elektroniczną rozrywkę jest kategoria szablonów pod nazwą Quiz gdzie możemy w szybki sposób stworzyć prostą łamigłówkę.
By skorzystać z takiego gotowego wzorca wybieramy z menu File/New From Template... ,a następnie interesująca nas kategorię i wzorzec.
Dla tych co często korzystają z jakiegoś wzorca istniej możliwość stworzenia i utworzenia własnego szablonu. Stworzoną przez nas animację zapisujemy wtedy w menu File wybierając opcje Save As Template... . Tu podajemy nazwę szablonu jego kategorię oraz możemy dodać krótki opis co nasz szablon zawiera.
ActionScript
Action Script to język skryptowy umożliwiający dodawanie i wykonywanie wielu różnych elementów takich jak linki do stron www, opcje wyświetlania czasu, kopiowanie obiektów, zmiana lub ukrywanie kursora, tworzenie formularzy i wiele, wiele innych.
Tworzenie skryptu jest dość proste gdyż polega na wstawianiu gotowych już elementów języka. Skrypty możemy stosować do przycisków i klatek kluczowych animacji. By wstawić skrypt klikamy prawym klawiszem na klatkę animacji (skrypt będzie dotyczył klatki) lub obiekt i wybieramy opcję Actions. Otwiera nam się panel skryptowy.
Po lewej stronie mamy dostępne polecenie które możemy zastosować po prawej wyświetla nam się kod. Panel ten ma dwa tryby pracy Normal i Expert. Tryb Normal dodaje wiele ułatwień w pracy z kodem, wyświetla podpowiedzi i dostępne opcję, tryb Expert skierowany jest do użytkowników bardziej zaawansowanych.
Polecenia podzielone są na kategorie, polecenia kontroli animacji (Movie Control), przeglądarka i sieć (Browser/Network), zmienne (Variables), drukowanie (Printing) i inne. By dodać jakieś polecenie klikamy na nie dwa razy. By zrozumieć działanie tego języka trzeba by oddzielnego kursu, ja jednak w tej lekcji wykonam kilka szybkich animacji z użyciem Action Scriptu.
Jak wykonać banner ?
Tworzymy animację o rozmiarach np. 400X50 pikseli animacja jest zapętlona zawiera elementy reklamujące nasz serwis. Tworzymy przycisk który będzie otwierał naszą stronę. Przycisk wykonujemy następująco w polu Up rysujemy prostokąt bez obramowania kolor wypełnienia musi być Alpha na 0% czyli mamy narysować niewidoczny prostokąt.
Ma być on identyczny w pozostałych polach przycisku, więc w polu Hit wciskamy F5. W naszej animacji tworzymy nową warstwę ustawiamy ją najwyżej w stosunku do pozostałych warstw. tu wstawiamy nasz button. Rozciągamy go na całe pole pracy. Teraz klikamy prawym klawiszem na wstawiony przycisk i z menu wybieramy Actions.
Wystarczy w sekcji Browser/Network wybrać komendę getURL. Wtedy pojawi się nam kod który uzupełniamy o adres naszej strony (pole URL) i okno w którym ma się pojawić nasza strona (Window np. _blank). Gdy zaznaczymy pierwszą linijkę będziemy mieli ustawienia wywołania akcji. Button reaguje na kursor myszki, ja ustawiam zdarzenie Event na Release czyli zwolnienie wciśniętego klawisza. Klikamy OK i wszystko gotowe oto mój kod:
on (release) {
getURL("adres strony", "_blank");
}
Przeciąganie obiektów
Tworzymy button może zawierać elementy animowane. Dzięki zastosowaniu Action Scriptu będzie można go przesuwać po polu naszej animacji. Wstawiamy go do animacji i nadajemy mu nazwę która posłużymy się w kodzie. Zaznaczamy button i w panelu Properties pole pod rozwijaną listą rodzaju obiektu wpisujemy jego nazwę (Instance Name) ja nazwałem swój obiekt kulka. Teraz dodajemy kod do przycisku. Klikamy na niego prawym klawiszem opcja Actions i wstawiamy taki kod:
on (press) {
startDrag("kulka");
}
on (release) {
stopDrag();
}
W momencie wciśnięcia klawisza będzie można go przesuwać, gdy klawisz zwolnimy przestaniemy go przenosić. Sterowanie animacją
Wiele osób mnie pyta jak sterować animacją, jak ją zatrzymać. Odpowiedź jest prosta dodajemy polecenia z grupy Movie Control. By zatrzymać animację w dowolnej klatce dodajemy do niej polecenie stop(); by przejść z klatki 10 do 20 możemy dodać akcję w klatce 10 gotoAndPlay(20); . Zasada moim zdaniem jest prosta.
Przykładów można przytaczać bardzo dużo więcej o skryptach i ich zastosowaniu możecie poczytać w pomocy Flash'a w menu Help opcja ActionScript Dictionary. Pomoc niestety w wersji angielskiej.
Inne programy
Do współpracy z flash'em powstało wiele programów i wtyczek. Warto o kilku w tym miejscu wspomnieć gdyż połączenie ich daje zadziwiające efekty.
Jak wiadomo flash nie pozwala na tworzenie animacji i obiektów 3D, ale wielu z was widziało animacje które takie elementy zawierają. Przykładem mogą być niektóre animacje w tym kursie.
Przyznam się teraz, że obiekty te tworzyłem min. przy pomocy programu Swift 3D. Program pozwala także na ich animację której zasada tworzenie jest bardzo podobna do tej w flashu. Wynik pracy publikujemy do pliku .swf który możemy potem importować do naszej głównej animacji we Flashu i tam dalej go obrabiać.
Program pozwala tworzyć obiekty wypełnione kolorem matowym lub z kolorem błyszczącym. Publikacja daje możliwość stworzenia animacji samej siatki tych obiektów lub ich krawędzi. Program jest wart polecenia.
Tworzenie animowanych tekstów też jest bardzo proste jeżeli używa się programów które tego typu animacje tworzą. Do nich należy Swish. Program ten jest bardzo prosty w obsłudze, wstawiamy tekst, a następnie dodajemy do niego efekt i animacja gotowa.
Wynik pracy publikujemy do .swf'a którego następnie importujemy do Flash'a MX. Warto wspomnieć jeszcze o jednym program obsługuje polskie znaki :-) .
FlaX to program o identycznym zastosowaniu jak Swift posiada on jednak więcej efektów, ale ma mniej możliwości. Tu tylko wstawiamy tekst i dodajemy efekt Swish zaś umożliwia dodawanie akcji i praca w nim odbywa się w klatkach animacji. FlaX nie obsługuje polskich fontów.
Uwagi końcowe
W tym kursie przedstawiłem wam podstawowe informację odnośnie pracy z programem Macromedia Flash MX. To co tu zamieściłem pozwoli wam tworzyć efektowne animacje, a nawet całe strony www wykonane we flash'u. Na większość waszych pytań odpowie wam pomoc dołączona do programu ( F1 ).
Zapraszam do eksperymentowania z Flash'em tworzenie animacji to nie koniec jego możliwości. Dzięki zastosowaniu ActionScript'u można tworzyć nawet gry.
. Animacja po torze składa się z dwóch warstw, warstwy toru i warstwy z obiektem który po torze się porusza. warstwa z obiektem powinna znajdować się pod warstwą toru. Jeżeli dwie warstwy są powiązane zmieni się symbol warstwy z torem na 
. 
. 
, a warstwa maskowana 
. 
. 