Zabłyśnij w Sieci

Twoja strona WWW jest nudna i statyczna? Chciałbyś wzbogacić ją atrakcyjnymi elementami graficznymi? Skorzystaj z Flasha - dzięki niemu każdy serwis internetowy staje się małym dziełem sztuki

Każdy z nas podczas przeglądania stron internetowych z pewnością zetknął się z obiektami graficznymi wygenerowanymi dzięki programowi Flash. Nie każdy jednak miał okazję zobaczyć, jak takie filmy powstają. Okazuje się, że ich tworzenie nie jest bardzo trudne, chociaż wymaga czasu i zaangażowania.

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.

0
Zamknij

Choć staramy się je ograniczać, wykorzystujemy mechanizmy takie jak ciasteczka, które pozwalają naszym partnerom na śledzenie Twojego zachowania w sieci. Dowiedz się więcej.