Macromedia Flash - proste programowanie w ActionScript

Środowisko Macromedia Flash udostępnia język skryptowy ActionScript, dzięki któremu możemy tworzyć dowolne aplikacje użytkowe, a nie tylko same efekty graficzne. Na dzisiejszych zajęciach poznamy podstawowe operacje na klipach filmowych. Sprawimy, że animacja stanie się interaktywna - użytkownik będzie mógł wpływać na jej przebieg.

 

Ćwiczenie nr 1 - pozycjonowanie klipu wideo na scenie.

1. Uruchamiamy Macromedia Flash i tworzymy nowy dokument. Ustawiamy szybkość odtwarzania filmów na 25 klatek na sekundę.

 

2. Wybieramy Rectangle Tool (narzędzie prostokąta):
    obrazek

    Ustawiamy kolory linii oraz wypełnienia wg gustu i rysujemy na scenie niewielki prostokąt:

 

    obrazek

 

3. Zaznacz całą grafikę (markizą lub kliknij dwukrotnie w wypełnienie prostokąta) i naciśnij klawisz F8 - zamiana na symbol. Symbolowi nadaj nazwę mc_rect i wybierz dla niego typ Movie clip (klip filmowy):

 

obrazek

 

Kliknij przycisk OK - symbol mc_rect powinien pojawić się w bibliotece po prawej stronie sceny.

Na panelu Properties (własności) zastąp napis <Instance Name> (nazwa egzemplarza) nazwą rect:

 

obrazek

 

Akcje w języku ActionScript mogą być dołączane jedynie do nazwanego egzemplarza obiektu.

Umieść symbol po lewej stronie poza sceną:

 

obrazek

 

4. Na początek napiszemy fragment kodu ActionScript, który umieszcza symbol na scenie. W Macromedia Flash akcje mogą być dołączane do wyświetlanych klatek animacji na linii czasu lub do obiektów obecnych na scenie. Obiekty reagują na tzw. zdarzenia (ang. events), czyli wybrane sytuacje, które mogą się zdarzyć. Każde zdarzenie posiada swoją nazwę. W przyborniku wybierz Selection Tool (narzędzie wyboru), kliknij nim w prostokąt poza sceną, następnie kliknij w napis Actions ponad panelem Properties. Otworzy się panel wprowadzania kodu w języku Action Script:

 

obrazek

 

Po lewej stronie masz listę dostępnych funkcji, które możesz wprowadzać do swojego kodu. Funkcje te są związane z różnymi elementami animacji oraz środowiska jej pracy. Funkcje możesz wybierać z tej listy lub wpisywać ręcznie.

Większą część panelu zajmuje edytor kodu. Ważną rzeczą jest, aby na dolnej zakładce znajdował się napis rect, czyli nazwa naszego symbolu. Zakładka ta informuję cię, do jakiego elementu zostaną przypisane akcje, które wprowadzisz w edytorze.

Kliknij w okienko edytora i wprowadź następujący kod programu:

 

onClipEvent (load)
{
    this._x = 100;
    this._y = 100;
}

 

onClipEvent jest funkcją, która obsługuje wybrane zdarzenie dla obiektu rect. Rodzaj zdarzenia wpisujemy jako parametr. W tym przypadku jest to zdarzenie load (ładowanie). Zdarzenie load występuje w momencie, gdy obiekt zostaje załadowany na scenę, czyli gdy po raz pierwszy pojawia się na klatce kluczowej. Zatem, gdy nasz symbol pojawi się na scenie, to zostaną wykonane dwa wiersze kodu:

 

this._x = 100;
this._y = 100;

 

Obiekty w Macromedia Flash posiadają tzw. własności. Obiekt typu Movie clip posiada własności o nazwie _x oraz _y. Określają one współrzędne punktu rejestracji (tego czarnego krzyżyka na naszym prostokącie). Własnością tym nadajemy wartości 100. Spowoduje to umieszczenie symbolu rect na współrzędnych (100,100). Słowo this odnosi się do obiektu, dla którego stworzona została funkcja obsługi zdarzenia, czyli do naszego prostokąta.

 

Wypróbuj animację, naciskając Ctrl + Enter. Zmień współrzędne na inne, sprawdź jak to oddziałuje na obiekt.

 

5. Teraz napiszemy kod, który umieści nasz prostokąt dokładnie na środku sceny. W tym celu wpisz w okienko kodu następujący kod:

 

onClipEvent (load)
{
    this._x = Stage.width / 2;
    this._y = Stage.height / 2;
}

 

Obiekt Stage odnosi się do sceny. Ona również posiada wiele różnych własności:

 

Stage.width - aktualna szerokość sceny
Stage.height - aktualna wysokość sceny.

 

Obiekt pozycjonujemy w połowie szerokości i wysokości sceny. Uruchom animację (Ctrl + Enter). Zauważ, że w środku sceny znalazł się lewy górny narożnik prostokąta, czyli jego punkt rejestracji. Aby było dobrze, musimy uwzględnić szerokość i wysokość naszego obiektu. Zmodyfikuj kod na poniższy:

 

onClipEvent (load)
{
    this._x = (Stage.width - this._width) / 2;
    this._y = (Stage.height - this._height) / 2;
}

 

W kodzie użyliśmy dwóch nowych własności naszego klipu:

 

this._width - aktualna szerokość obiektu
this._height - aktualna wysokość obiektu.

 

Teraz środek sceny wypada dokładnie w środku naszego prostokąta. Sprawdź to (Ctrl + Enter).

 

6. Kolejnym krokiem będzie pozycjonowanie naszego prostokąta w przypadkowych miejscach sceny. W tym celu musimy użyć liczb pseudolosowych. Dostęp do nich daje nam funkcja Math.random(). Zwraca ona liczbę pseudolosową w przedziale od 0 (domknięty) do 1 (otwarty). Zmień kod następująco:

 

onClipEvent (load)
{
    this._x = (Stage.width - this._width) * Math.random();
    this._y = (Stage.height - this._height) * Math.random();
}

 

Uruchom animację (Ctrl + Enter). Gdy pojawi się okienko, możesz ponownie nacisnąć Ctrl + Enter - spowoduje to uruchomienie animacji od początku. Zauważ, że za każdym razem nasz prostokąt pojawia się w innym miejscu sceny.

 

Ćwiczenie nr 2 - obsługa zdarzeń związanych z myszką

1. Do tego ćwiczenia wykorzystamy obiekt rect, który utworzyliśmy w poprzednim ćwiczeniu. W panelu Actions dodamy dla naszego obiektu kolejną procedurę obsługi zdarzeń:

 

onClipEvent (load)
{
    this._x = (Stage.width - this._width) * Math.random();
    this._y = (Stage.height - this._height) * Math.random();
}

onClipEvent(mouseDown)
{
    this._x = (Stage.width - this._width) * Math.random();
    this._y = (Stage.height - this._height) * Math.random();
}

 

Druga procedura obsługuje zdarzenie mouseDown, które powstaje, gdy użytkownik kliknie w scenę myszką (właściwie w momencie wciśnięcia lewego klawisza myszki). Wtedy zostaje wykonany kod zawarty w procedurze obsługi tego zdarzenia - teraz jest dokładnie taki sam jak dla load, ale zaraz to zmienimy. Uruchom animację za pomocą klawiszy Ctrl + Enter i poklikaj myszka w scenę - przy każdym kliknięciu nasz obiekt przenosi się w inne miejsce sceny, ponieważ procedura obsługi tego zdarzenia zmienia jego współrzędne.

 

2. Zmień zdarzenie z mouseDown na mouseMove:

 

onClipEvent (load)
{
    this._x = (Stage.width - this._width) * Math.random();
    this._y = (Stage.height - this._height) * Math.random();
}

onClipEvent(mouseMove)
{
    this._x = (Stage.width - this._width) * Math.random();
    this._y = (Stage.height - this._height) * Math.random();
}

 

Zdarzenie mouseMove powstaje przy każdym ruchu myszką. Uruchom ponownie animację (Ctrl + Enter) i poruszaj po niej myszką.

 

3. Dobrze by było, gdyby nasz prostokąt nie szalał po scenie przy każdym ruchu myszki, lecz jedynie wtedy, gdy kursor myszki go dotknie. W tym celu w obsłudze zdarzenia mouseMove musimy śledzić aktualne położenie kursora myszki i reagować zmianą położenia naszego obiektu, gdy ten kursor znajdzie się w obszarze zajmowanym przez obiekt. Do tego celu wykorzystamy dwie własności:

 

this._xmouse - położenie w osi X kursora myszki względem naszego obiektu.
this._ymouse - położenie w osi Y kursora myszki względem naszego obiekty.

 

Względne położenie oznacza tutaj położenie względem punktu rejestracji. Aby kursor myszki był wewnątrz obszaru prostokąta, muszą być spełnione warunki:

 

this._xmouse musi być w zakresie od 0 do this._width - 1
this._ymouse musi być w zakresie od 0 do this._height - 1

 

Inne wartości tych współrzędnych oznaczają, że kursor myszki jest poza obszarem naszego prostokąta i nie powinniśmy na nie reagować. Zmień zatem kod na następujący:

 

onClipEvent (load)
{
    this._x = (Stage.width - this._width) * Math.random();
    this._y = (Stage.height - this._height) * Math.random();
}

onClipEvent(mouseMove)
{
    if((this._xmouse >= 0) && (this._xmouse < this._width) &&
       (this._ymouse >= 0) && (this._ymouse < this._height))
    {
        this._x = (Stage.width - this._width) * Math.random();
        this._y = (Stage.height - this._height) * Math.random();
    }
}

 

Uruchom animację (Ctrl + Enter) i spróbuj "złapać" prostokąt myszką.

 

 

Ćwiczenie nr 3 - ruch obiektu.

W tym ćwiczeniu sprawimy, że nasz prostokąt zacznie poruszać się po scenie odbijając się od jej krawędzi. Ruch ten będzie polegał na cyklicznym modyfikowaniu współrzędnych _x i _y obiektu. Cykliczność osiągniemy obsługując zdarzenie enterFrame, które występuje przy każdej klatce animacji. W obsłudze zdarzenia load (ładowanie) dodamy do obiektu dwie własności: dx i dy. Własności te będą przechowywały przesunięcia odpowiednio wzdłuż osi X i Y, które należy dodawać do współrzędnych _x i _y obiektu.

Po zmodyfikowaniu współrzędnych musimy sprawdzić, czy obiekt nie wyszedł poza scenę. Jeśli tak, zmieniamy znak przesunięć, aby w następnej klatce obiekt zaczął poruszać się w przeciwnym kierunku - da to efekt jakby odbicia od krawędzi sceny. Wpisz następujący kod do zdarzeń związanych z obiektem rect:

 

onClipEvent (load)
{
    this._x = (Stage.width - this._width) * Math.random();
    this._y = (Stage.height - this._height) * Math.random();
    // teraz definiujemy przesunięcia
    this.dx = 10 * (Math.random() - Math.random());
    this.dy = 10 * (Math.random() - Math.random());	
}

onClipEvent(mouseMove)
{
    if((this._xmouse >= 0) && (this._xmouse < this._width) &&
       (this._ymouse >= 0) && (this._ymouse < this._height))
    {
        this._x = (Stage.width - this._width) * Math.random();
        this._y = (Stage.height - this._height) * Math.random();
    }
}

onClipEvent(enterFrame)
{
    // przesuwamy obiekt wzdłuż X i Y
    this._x += this.dx;
    this._y += this.dy;
    // sprawdzamy, czy nie wyszedł poza scenę
    if((this._x < 0) || (this._x > Stage.width - this._width)) this.dx = - this.dx;
    if((this._y < 0) || (this._y > Stage.height - this._height)) this.dy = - this.dy;
}

 

Uruchom aplikację (Ctrl + Enter).

 

 

Ćwiczenie nr 4 - dodawanie kodu ActionScript do klatek kluczowych

1. Kliknij klatkę kluczową nr 1. Panel Actions (akcje) nieco się zmieni - zniknie kod związany z obiektem rect i dostaniemy czyste okienko edytora. Na zakładce w lewym dolnym rogu zamiast rect pojawi się teraz Layer 1 : 1. Oznacza to edycję kodu dla klatki kluczowej nr 1 na warstwie Layer 1. W edytorze wprowadź kod:

 

for(i = 1; i <= 100; i++) duplicateMovieClip(this.rect,"",i);

 

Kod ten jest pętlą znaną nam z języka C++. Pętla wykonuje się 100 razy. W każdym obiegu wywoływana jest funkcja duplicateMovieClip(). Funkcja ta tworzy kopię klipu wideo, czyli przy każdym obiegu petli na scenie pojawia się kolejny obiekt. Funkcja posiada trzy parametry:

- kopiowany obiekt, w naszym przypadku jest to this.rect - tutaj this odnosi się do sceny, na której "żyje" nasz prostokąt rect.
- nazwę dla kopii - nie interesuje nas, pozostawiamy nazwę pustą
- warstwa, na która trafi kopia. Na scenie każdy obiekt posiada osobną warstwę. Na jednej warstwie nie mogą istnieć dwa obiekty. Jeśli dana warstwa jest już zajęta, to poprzedni obiekt zostanie usunięty ze sceny.

Gdy uruchomisz animację (Ctrl + Enter), zobaczysz całą chmarę prostokątów, które samodzielnie poruszają się po scenie. Każda kopia trafia w inne miejsce sceny, ponieważ w momencie jej utworzenia zostaje uaktywniona dla niej procedura obsługi zdarzenia load (ładowanie), którą stworzyliśmy w poprzednim ćwiczeniu. Również dla każdego są osobno wywoływane procedury obsługi zdarzeń mouseMove oraz enterFrame.

Zwróć uwagę, iż klatka kluczowa z kodem ActionScript jest oznaczana na linii czasu małą literką a.

 

2. Dodaj kolejną warstwę do linii czasu. Na warstwie tej utwórz klatkę kluczową nr 2 (kliknij klatkę 2 myszką i naciśnij klawisz F6). Panel Actions możesz chwilowo zamknąć - kliknij w napis Actions. W ten sposób zobaczysz scenę. Z biblioteki wciągnij na scenę symbol mc_rect i umieść go po lewej stronie sceny:

 

obrazek

 

3. Wybierz w przyborniku FreeTransform Tool (narzędzie swobodnej transformacji) i rozciągnij nim w pionie prostokąt (operację tę wykonuj z wciśniętym lewym Alt):

 

obrazek

 

4. Na linii czasu w dodanej warstwie zrób klatkę kluczową nr 75 (kliknij ją myszką i naciśnij F6). W klatce 75 przeciągnij prostokąt na prawo od sceny:

 

obrazek

 

5. Pomiędzy klatkami 2 a 75 dodaj Motion Tween. Jeśli teraz uruchomisz animację (Ctrl + Enter), to zauważysz, że po przejściu z tyłu prostokąta, obraz mruga. Dzieje się tak dlatego, iż Flash odtwarza cyklicznie animację od klatki nr 1, w której jest nasz kod tworzący kopie obiektu rect. Nowe kopie zastępują na warstwach poprzednie kopie, ale z innymi współrzędnymi. Dobrze by zatem było, aby animacja nie wykonywała powtórki od klatki nr 1, lecz od klatki nr 2. Kliknij zatem klatkę nr 75 i uaktywnij panel Actions. Pod oknem edytora zakładka powinna zawierać tekst: Layer 2 : 75 - warstwa 2, klatka nr 75. Jeśli tak jest, wpisz kod:

 

gotoAndPlay(2);

 

Spowoduje to przejście z klatki nr 75 do klatki nr 2 i odtwarzanie animacji. Klatka nr 1 z naszą pętlą będzie odtworzona tylko jeden raz na początku całej animacji. Animacja jest gotowa:

Możesz się jeszcze zastanawiać, dlaczego myszka działa na małe prostokąty, a na ten duży nie. Otóż z tym dużym nie związaliśmy żadnych akcji. Akcje dotyczą jedynie egzemplarza rect, który znajduje się w klatce nr 1 na warstwie Layer 2. Egzemplarz na warstwie Layer 2 jest nowym obiektem i nie posiada żadnych akcji - zawsze możesz je dodać postępując wg opisanych kroków.

 

 


   I Liceum Ogólnokształcące   
im. Kazimierza Brodzińskiego
w Tarnowie

©2024 mgr Jerzy Wałaszek

Dokument ten rozpowszechniany jest zgodnie z zasadami licencji
GNU Free Documentation License.

Pytania proszę przesyłać na adres email: i-lo@eduinf.waw.pl

W artykułach serwisu są używane cookies. Jeśli nie chcesz ich otrzymywać,
zablokuj je w swojej przeglądarce.
Informacje dodatkowe