Przykład: Animowana prezentacja prac (Flash Professional)

Przejdźmy teraz do przykładu, który będzie pierwszą okazją do zapoznania się z różnymi elementami języka ActionScript połączonymi w kompletną aplikację. Animowana prezentacja prac jest przykładem wykorzystania istniejącej animacji liniowej oraz dodawania mniejszych elementów interaktywnych. Na przykład: animację utworzoną dla klienta można wprowadzić do prezentacji online. Elementy interaktywne dodawane do prezentacji obejmują dwa przyciski dla użytkownika: przycisk służący do uruchamiania animacji i przycisk powodujący przejście pod inny adres URL (np. do menu prezentacji lub na stronę główną autora).

Proces tworzenia aplikacji można podzielić na następujące główne etapy:

  1. Przygotowanie pliku FLA do uzupełnienia o kod ActionScript i elementy interaktywne.

  2. Utworzenie i dodanie przycisków.

  3. Napisanie kodu w języku ActionScript.

  4. Testowanie aplikacji.

Przygotowanie do dodania elementów interaktywnych

Zanim dodamy do naszej animacji elementy interaktywne, wskazane będzie przygotowanie pliku FLA poprzez utworzenie miejsc przeznaczonych na dodanie nowej treści. To zadanie obejmuje utworzenie miejsc na stole montażowym, w których zostaną umieszczone przyciski. Konieczne jest również utworzenie „miejsca” w pliku FLA w celu przechowywania różnych elementów osobno.

Aby przygotować plik FLA na dodanie elementów interaktywnych:

  1. Utwórz plik FLA z przykładową animacją, taką jak pojedyncza animacja ruchu lub animacja kształtu. Jeśli istnieje już plik FLA zawierający animację prezentowaną w projekcie, otwórz ten plik i zapisz go z nową nazwą.

  2. Wybierz na ekranie miejsce dla dwóch przycisków. Jeden przycisk służy do uruchamiania animacji, a drugi jest łączem do prezentacji prac lub strony głównej. W razie potrzeby wyczyść lub dodaj przestrzeń na nowe elementy na stole montażowym. Jeśli animacja nie zawiera ekranu startowego, można go utworzyć w pierwszej klatce. W takim przypadku wymagane będzie przesunięcie animacji w taki sposób, aby zaczynała się od klatki 2 lub dalej.

  3. Dodaj nową warstwę nad pozostałymi warstwami na osi czasu i nadaj jej nazwę buttons . Na tej warstwie zostaną dodane przyciski.

  4. Nad warstwą buttons dodaj nową warstwę i nadaj jej nazwę actions . Na tej warstwie można dodawać kod ActionScript do swojej aplikacji.

Tworzenie i dodawanie przycisków

Następnie zostaną utworzone i ustawione przyciski, które będą stanowiły istotną część tej interaktywnej aplikacji.

Aby utworzyć i dodać przyciski w pliku FLA:

  1. Korzystając z narzędzi rysunkowych, stwórz formę graficzną pierwszego przycisku (przycisku odtwarzania) na warstwie buttons. Np. narysuj poziomy owal z nałożonym tekstem.

  2. Za pomocą narzędzia Zaznaczanie zaznacz wszystkie elementy graficzne jednego przycisku.

  3. Z menu głównego wybierz polecenie Modyfikuj > Konwertuj na symbol.

  4. W konie dialogowym jako typ symbolu wybierz Przycisk, nadaj symbolowi nazwę i kliknij przycisk OK.

  5. Po zaznaczeniu przycisku nadaj mu nazwę instancji playButton w Inspektorze właściwości.

  6. Powtórz kroki od 1 do 5, tworząc przycisk przenoszący użytkownika na stronę główną autora. Nadaj temu przyciskowi nazwę homeButton .

Pisanie kodu

Kod ActionScript tej aplikacji można podzielić na trzy grupy funkcji, mimo że będzie w całości wprowadzany w jednym miejscu. Trzy operacje, jakie wykonuje kod:

  • Zatrzymanie głowicy odtwarzania natychmiast po załadowaniu pliku SWF (gdy głowica odtwarzania znajdzie się w klatce nr 1).

  • Wykrywanie zdarzenia w celu rozpoczęcia odtwarzania pliku SWF, gdy użytkownik kliknie przycisk odtwarzania.

  • Wykrywanie zdarzenia w celu przejścia pod odpowiedni adres URL, gdy użytkownik kliknie przycisk strony głównej autora.

Aby utworzyć kod zatrzymujący głowicę odtwarzania, gdy znajdzie się ona w klatce nr 1:

  1. Zaznacz klatkę kluczową pokrywającą się z klatką nr 1 na warstwie actions.

  2. Wybierz polecenie Okno > Operacje z menu głównego, aby otworzyć panel Operacje.

  3. W panelu Skrypt wprowadź następujący kod: 

    stop();

Aby napisać kod rozpoczynający animację po kliknięciu przycisku odtwarzania:

  1. Na końcu kodu wprowadzonego w poprzednich krokach dodaj dwa puste wiersze.

  2. Wprowadź następujący kod na końcu skryptu: 

    function startMovie(event:MouseEvent):void 
{ 
    this.play(); 
}

    Ten kod zawiera definicję funkcji o nazwie startMovie() . Wywołanie funkcji startMovie() powoduje rozpoczęcie odtwarzania głównej osi czasu.

  3. W wierszu następującym po kodzie dodanym w poprzednim kroku wprowadź następujący wiersz kodu: 

    playButton.addEventListener(MouseEvent.CLICK, startMovie);

    Ten wiersz kodu rejestruje funkcję startMovie() jako detektor zdarzenia click obiektu playButton . Innymi słowy powoduje, że za każdym razem, gdy użytkownik kliknie przycisk playButton , wywoływana będzie funkcja startMovie() .

Aby napisać kod powodujący przejście pod adres URL po kliknięciu przycisk strony głównej:

  1. Na końcu kodu wprowadzonego w poprzednich krokach dodaj dwa puste wiersze.

  2. Wprowadź ten kod na końcu skryptu: 

    function gotoAuthorPage(event:MouseEvent):void 
{ 
    var targetURL:URLRequest = new URLRequest("http://example.com/"); 
    navigateToURL(targetURL); 
}

    Ten kod zawiera definicję funkcji o nazwie gotoAuthorPage() . Ta funkcja najpierw powoduje utworzenie instancji URLRequest, która reprezentuje adres URL http://example.com/. Następnie przekazuje ten adresu URL do funkcji navigateToURL() , co powoduje otwarcie tego adresu URL w przeglądarce.

  3. W wierszu następującym po kodzie dodanym w poprzednim kroku wprowadź następujący wiersz kodu: 

    homeButton.addEventListener(MouseEvent.CLICK, gotoAuthorPage);

    Ten wiersz kodu rejestruje funkcję gotoAuthorPage() jako detektor zdarzenia click obiektu homeButton . Innymi słowy powoduje, że za każdym razem, gdy użytkownik kliknie przycisk homeButton , wywoływana będzie funkcja gotoAuthorPage() .

Testowanie aplikacji

Aplikacja jest już całkowicie gotowa do użytku. Przetestujmy ją, aby przekonać się, czy tak jest w istocie.

Aby przetestować aplikację:

  1. Z menu głównego wybierz polecenie Sterowanie > Testuj film. Program Flash Professional utworzy plik SWF i otworzy go w oknie odtwarzacza Flash Player.

  2. Wypróbuj oba przyciski, aby sprawdzić, czy działają zgodnie z oczekiwaniami.

  3. Oto kilka sugestii na wypadek, gdyby przyciski nie działały:

    • Czy przyciski mają różne nazwy instancji?

    • Czy w wywołaniach metody addEventListener() użyto tych samych nazw, co nazwy instancji przycisków?

    • Czy w wywołaniach metody addEventListener() użyto prawidłowych nazw zdarzeń.

    • Czy dla każdej z funkcji określono prawidłowy parametr? (Obie metody potrzebują jednego parametru typu MoseEvent).

    Wszystkie te pomyłki oraz większość innych pomyłek powoduje wyświetlenie komunikatu o błędzie. Komunikat o błędzie może się pojawić po wybraniu komendy Testuj film lub po kliknięciu przycisku podczas testowania projektu. Błędy kompilatora (takie, które występują przy pierwszym wykonaniu polecenia Testuj film) są przedstawione w panelu Błędy kompilatora. W panelu Wyjście przedstawione są błędy powstające w czasie wykonywania, które pojawiają się podczas odtwarzania treści — na przykład po kliknięciu przycisku.