Flash to przede wszystkim ogromne bogactwo możliwości. Oferuje on bowiem nie tylko funkcje tworzenia efektownych animacji graficznych, ale też kompletnych i rozbudowanych aplikacji internetowych. W dokumentach Flasha z łatwością połączymy wszystkie elementy potrzebne do utworzenia witryny WWW w spójną całość.
Pierwszą część naszego kursu rozpoczniemy od zapoznania się z metodą działania Flasha oraz interfejsem użytkownika. Nauczymy się tworzyć podstawowe elementy graficzne i animacje, a także skorzystamy z najprostszych funkcji języka ActionScript.
Flash w skrócie
- Tworzenie animacji we Flashu zaczynamy od ustawienia podstawowych parametrów klipu. Należą do nich np. wielkość okna lub prędkość odtwarzania mierzona w klatkach na sekundę.
- Na głównej linii czasowej (tzw. TimeLine), która obrazuje proces odtwarzania filmu klatka po klatce, umieszczamy przygotowane wcześniej obiekty. Są nimi elementy graficzne, klipy, efekty czy dźwięki.
- Obiekty możemy grupować na poszczególnych warstwach, które układamy w kolejności od najwyższej do najniższej (definujemy w ten sposób hierarchię ich wyświetlania). Obiekty z warstwy położonej wyżej zasłaniają te, które znajdują się pod nimi.
- Na warstwach dokonujemy wszystkich podstawowych operacji. Przede wszystkim rysujemy oraz umieszczamy na nich tzw. symbole i komponenty. Do symboli należą Movie Clip (klip filmowy z niezależnym zbiorem warstw i niezależną listwą czasową), Button (przycisk) oraz Graphic (obiekt graficzny). Warstwy grupujemy też w foldery.
- Klatki każdego filmu dzielą się na zwykłe (Frames) i kluczowe (KeyFrames). Tylko te ostatnie zawierają elementy, które wprowadzają zmiany w animacji.
W pierwszym odcinku naszego kursu pokażemy, jak przygotować animowane logo CHIP-a. Na każdej literze nazwy naszego magazynu zaprezentujemy inny efekt. I tak C będzie się pojawiało w wyniku transformacji kształtów, a litera H poprzez płynną zmianę stopnia przezroczystości. Na przykładzie I nauczymy się, jak wykorzystać tzw. animację poklatkową. W wypadkuP postaramy się zaś przybliżyć ideę dynamicznej zmiany tła danego obiektu.
Parametry klipu
Aby utworzyć nowy projekt w programie Flash, należy skorzystać z funkcji File | New | Flash Document ([Ctrl]+[N]). Jeżeli w głównym oknie programu nie widać panelu Properties, wciskamy skrót [Shift]+[F3] bądź też wybieramy opcję Window | Properties. Następnie zmieniamy rozmiary nowo tworzonego filmu, klikając przycisk Size. Pojawi się wówczas okno, w którym możemy dostosować wymiary (Dimensions): szerokość (Width) ustalamy w naszym projekcie na 250 pikseli, a wysokość (Height) na 80. Tutaj definiujemy też prędkość odtwarzania naszego filmu. Zwiększenie jej spowoduje płynniejsze przechodzenie pomiędzy poszczególnymi ujęciami i scenami, ale powiększy przy tym rozmiar klipu wynikowego. W kolejnym kroku ustawiamy tło dokumentu (Background Color) na czerwone i zapisujemy plik poleceniem File | Save ([Ctrl]+[S]) jako logo.fla.
Przydatna jest też opcja powiększania i zmniejszania widoku elementów klipu, znajdujących się w obszarze roboczym. W tym celu posługujemy się poleceniem View | Zoom | In ([Ctrl]+[=]). Przybliżenie lub oddalenie pulpitu z łatwością wykonamy też narzędziem Zoom Tool z panelu
Tools
(po wybraniu narzędzia należy zaznaczyć obszar powiększenia).
Przygotowanie grafiki
Przyszedł czas na przygotowanie pierwszych elementów graficznych. Import grafiki do dokumentu jest możliwy dzięki poleceniu File | Import | Import to Stage ([Ctrl]+[R]). Wybieramy znajdujący się na płycie CHIP-a plik chip_logo.gif. Klikamy zaimportowany rysunek i wydajemy polecenie Modify | Bitmap | Trace bitmap. Pojawi się wówczas okno dialogowe, w którym wpisujemy następujące wartości:
Color threshold:
128,
Minimum area:
1 pixel,
Curve fit:
pixels,
Corner Threshold:
Few Corners.
Color Threshold
(wartość od 1 do 500) oznacza maksymalną dopuszczalną różnicę pomiędzy kolorami, dla której dwa piksele traktowane są jako punkty o tym samym kolorze. Duże wartości tego parametru powodują redukcję liczby kolorów (znikają delikatne różnice pomiędzy poszczególnymi odcieniami).
Minimum area
(wartość od 1 do 1000) to liczba otaczających dany element pikseli, które są brane pod uwagę, gdy danemu punktowi przyporządkowywany jest kolor. Curve fit umożliwia natomiast dopasowanie stylu krzywych znajdujących się w dokumencie – od bardzo poszarpanych (Pixels) do bardzo wygładzonych (Very Smooth). Za pomocą ostatniej z wymienionych opcji –
Corner threshold
– określimy natomiast, z ilu punktów mają się składać narożniki wszystkich elementów.