Lekcja 6

Temat: Zmiana rozmiaru animacji flash po najechaniu.

1. Otwórz program Flash Designer i stwórz pustą animację. Ustaw rozmiar ramki ("Ramka" > "Rozmiar Ramki") na 300 x 300.
2. Ustaw pierwszą ramkę jako statyczną, wybierz z menu "Ramka" > "Czas Ramki", zaznacz opcję "Stop" i zatwierdź klikając OK.
3. Narysuj mniejszy prostokąt (około 80 x 80 pikseli) w lewym górnym rogu używając narzędzia "Prostokąt". Później będzie on reagować na zdarzenia myszki. Wciśnij Ctrl+F aby zmienić wypełnienie prostokątu.
4. Wybierz z menu "Ramka" > "Skopiuj" aby utworzyć kopię ramki. Zostanie utworzona druga ramka "Frame 2".
5. Powiększ prostokąt na ramce "Frame 2" używając narzędzia "Edycja" > "Wyrównaj" > "Dopasuj do ramki" (lub przeskaluj używając narzędzia "Wskaźnik" i przeciagając prawy dolny róg prostokąta)
   
   Możesz teraz umieścić dowolne elementy na większym prostokącie, np. tekst.
6. Powróć do ramki 1 "Frame 1" i zdefiniuj akcję "Najechania" dla mniejszego prostokąta. Zaznacz prostokat i wybierz z menu "Obiekt" > "Akcje" > "Najechanie". Wybierz "Skok do ramki: Frame 2" i kliknij OK.
7. Przejdź do ramki "Frame 2" i zaznacz prostokąt (lub zaznacz wszystkie elementy jeśli jest ich więcej i wybierz z menu opcję "Edycja" > "Grupuj") i zdefiniuj akcję "Wyjechanie". Wybierz z menu "Obiekt" > "Akcje" > "Wyjechanie". Wybierz "Skok do ramki: Frame 1" i kliknij OK.
8. Wciśnij kalwisz F9 aby zobaczyć działającą animację. Sprawdź działanie zdarzeń myszki.
9. Stwórz efekt animacji. Przejdź do ramki "Frame 2", zaznacz większy prostokąt i wybierz "Animacja" > "Tween in". Zaznacz "Frame 1:Rectangle" jako początek przejścia i zatwierdź OK.

W następnym kroku wyeksportuj plik swf i użyj pozycjonowania absolutnego aby umieścić animację na sronie HTML.

1. Wybierz "Film" > "Opcje eksportu" i zaznacz opcję "Przezroczysty". Wybierz "Typ preloadera: Brak" w menu "Film" > "Opcje Preloadera". Kliknij OK.
2. Wybierz "Plik" > "Eksport Flash SWF" i zapisz plik flash.

Aby umieścić plik swf na stronie HTML użyj znaczników DIV:

<DIV STYLE="position:absolute">
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
...
</DIV>
<P>&nbsp;
<P>&nbsp;

Pozycjonowanie absolutne pozwala umieścić zawartość tej warstwy DIV nad właściwą zawartością strony zawartą poza tą warstwą, poza znacznikami DIV. Aby stworzyć miejsce dla mniejszego prostokąta, aby nie nachodził na tekst użyj kilkukrotnie twradej spacji "&nbsp;" i/lub znaku akapitu "<P>"