Przygotowanie przycisku
Zaczynamy od utworzenia projektu w programie Flash, korzystając z funkcji
File | New | Flash Document
(
[Ctrl]+[N]
). Za pomocą polecenia
File | Import | Import to Stage
([
Ctrl]+[R]
) importujemy znajdujący się na płycie CHIP-a plik europa.gif. Następnie po dwukrotnym kliknięciu nazwy warstwy Layer 1 zmieniamy ją na Europa i zapisujemy plik, korzystając z polecenia
File | Save
(
[Ctrl]+[S]
) pod nazwą mapa.fla. W kolejnym kroku dodamy nową warstwę. Klikamy znak dodawania warstwy (“+”) lub wybieramy polecenie Insert | Timeline | Layer. Zmieniamy jej nazwę na Przycisk. Klikamy narzędzie
Zoom Tool
(
[Z]
), powiększamy obraz, tak aby na ekranie znajdowało się terytorium Polski, a następnie przełączamy się w tryb
Pen Tool
(
[P]
). Jeżeli w głównym oknie programu nie jest widoczny panel Properties, otwieramy go za pomocą kombinacji klawiszy [Shift]+[F3] lub wybierając Window | Properties. Mamy tu możliwość zmieniania domyślnych ustawień wybranego narzędzia, w tym wypadku Pen Toola. Jako kolor obrysu z listy barw wybieramy czarny, jego grubość ustawiamy na 1, a typ na Solid. Kolor wypełnienia definiujemy jako żółty.
Następnie obrysowujemy kształt Polski, pamiętając, aby zakończyć dokładnie w tym samym punkcie, w którym zaczęliśmy. Gdy już się z tym uporamy, zaznaczamy narzędziem
Selection Tool
(
[V]
) utworzony właśnie kształt i przekształcamy go w symbol. W tym celu wydajemy polecenie
Modify | Convert to Symbol
(
[F8]
). Pojawi się wówczas okienko, w którym zmieniamy nazwę z Symbol 1 na Polska_btn, a następnie wybieramy typ symbolu Behavior | Button .
Zamieniliśmy utworzony obiekt graficzny w przycisk (
Button
). Jest to jeden z symboli Flasha, który cechuje się swoją niezależną, charakterystyczną tylko dla niego listwą czasową, składającą się z czterech klatek o nazwach:
Up, Over, Down
i Hit. Odpowiadają one poszczególnym akcjom, które będą wykonywane odpowiednio, kiedy wskaźnik myszy nie jest nad przyciskiem, znajduje się nad nim i kiedy przycisk jest wciśnięty. Właściwość Hit pozwala natomiast zdefinować akcję dla określonego obszaru, np. kiedy wskaźnik zbliża się do przycisku.
Edycja symbolu
Aby przejść do trybu edycji symbolu, należy go dwukrotnie kliknąć. W klatce o nazwie Over, korzystając z polecenia Insert | Timeline | Frame, wstawiamy klatkę kluczową, czyli miejsce, w którym możemy wprowadzać zmiany w filmie. Następnie wracamy do klatki Up. Zaznaczamy kształt Polski i przekształcamy go w symbol. Tym razem jako Behavior wybieramy Graphic, a w polu nazwy pliku wpisujemy Polska_up. Następnie przechodzimy do panelu Properties i właściwość Color ustalamy na Alpha, a wartość krycia na 50%. Dzięki temu zabiegowi utworzyliśmy przycisk, którego wartość krycia będzie się zmieniała po najechaniu na niego wskaźnikiem myszy.
Wracamy do głównej listwy czasowej, klikając napis Scene_1. Kod odpowiedzialny za akcję, którą wywoływać ma naciśnięcie przycisku, dodamy później.
Maski i warstwy
Teraz zajmiemy się utworzeniem animacji, która będzie odtwarzana po kliknięciu na mapie Europy obszaru Polski. Do listwy czasowej dodajemy nową warstwę, zaznaczamy na niej klatkę nr 2 i wstawiamy w tym miejscu klatkę kluczową, a następnie importujemy z płyty CHIP-a plik polska_cala.eps. Korzystając z panelu Properties, ustawiamy grafikę na współrzędnych X=85 i
Y=30
i zmieniamy nazwę warstwy na Polska .
Dodajemy kolejną warstwę i nazywamy ją Maska1. Przesuwamy ją tak, aby znajdowała się powyżej utworzonej przed chwilą. W drugiej klatce warstwy Maska1 wstawiamy klatkę kluczową. Za pomocą narzędzia Rectangle Tool rysujemy na scenie, powyżej znajdującej się tam grafiki, prostokąt o szerokości 400 i wysokości 10 pikseli. Kolor wypełnienia nie ma znaczenia, gdyż nie będzie on widoczny podczas odtwarzania filmu. Ważne jest natomiast to, żeby dla obrysu wybrać opcję No Color. Następnie zaznaczamy narysowany właśnie prostokąt i przekształcamy go w symbol. Nadajemy mu nazwę maska_mc i wybieramy typ symbolu Movie Clip. Później edytujemy klip, dwukrotnie go klikając. Zaznaczamy klatkę nr 10 i wstawiamy do niej klatkę kluczową, a następnie przesuwamy prostokąt tak, aby znajdował się mniej więcej w połowie wysokości grafiki przedstawiającej obszar Polski. W klatce 25. wstawiamy kolejną klatkę kluczową i przesuwamy prostokąt trochę do góry. To samo powtarzamy dla klatki 50, ale tym razem prostokąt powinien znajdować się na dole.
Przyszedł czas na dodanie płynnego przejścia prostokąta pomiędzy utworzonymi klatkami kluczowymi. W tym celu zaznaczamy klatkę nr 1 i na panelu Properties wybieramy opcję Tween | Shape. Tę samą czynność wykonujemy dla klatek nr 10 i 25.
Do listwy czasowej dodajemy nową warstwę i wykonujemy podobne operacje jak na warstwie Layer 1, zmieniając jednak położenie prostokąta w poszczególnych klatkach kluczowych. Tworzymy kolejne warstwy i animujemy kolejne prostokąty aż do momentu, w którym w klatce nr 50 pokryją one cały kształt Polski (rysunek poniżej).
Gdy już się z tym uporamy, opuszczamy tryb edycji symbolu i wracamy na główną scenę naszego filmu, klikając Scene_1. Na warstwie Polska zaznaczamy klatkę nr 51 i wstawiamy klatkę zwykłą, korzystając z polecenia
Insert | Timeline | Frame
(
[F5]
). To samo powtarzamy na warstwie Maska1 .
| Import grafiki do Flasha |
| Flash pozwala na import m.in. plików graficznych, a następnie wykorzystywanie ich podczas animacji. Pliki zawierające grafikę wektorową możemy po imporcie przekonwertować do postaci rastrowej. Podczas wstawiania grafiki rastrowej dysponujemy opcją sterowania sposobem kompresji i wyboru formatu (PNG, GIF czy JPEG). Wybierając tę drugą opcję, ustalamy stopień kompresji. Flash poinformuje nas o objętości zaimportowanego pliku. Domyślny stopień kompresji wynosi 50%. Co ważne, Flash pamięta oryginalną grafikę i przechwuje ją w tzw. bibliotece symboli (ramka: “Biblioteka symboli Flasha”). Kompresja jest widoczna dopiero w wyeksportowanym filmie. Jeśli uznamy, że stopień kompresji, który ustaliliśmy, ujemnie wpływa na jakość filmu, możemy go zmienić bez konieczności ponownego importowania. Kolejną opcją, która wpływa na jakość klipu, jest wybór pomiędzy wygładzaniem (smoothing) a jego brakiem. Oczywiście wybierając wygładzanie, otrzymujemy “lepszy” obrazek kosztem (nieznacznego) zwiększenia objętości. Jeśli możemy wybrać format importowanej grafiki, warto skupić się na PNG. Zwiększa on rozmiar pliku wynikowego, podobnie jak pliki JPEG, jednakże w przeciwieństwie do nich obsługuje również przezroczystość i maskowanie, co można wykorzystać w tworzeniu wielu efektów. Możemy mieć też problemy z dynamicznym ładowaniu grafiki przez Flasha – ładowane są bowiem tylko pliki JPEG (i to te, które nie wykorzystują zapisu progresywnego) i GIF-y pod warunkiem, że nie wyeksportujemy filmu do formatu Flash 6). Z plikami, które są zaimportowane “na stałe”, takie problemy nie występują. |
