Przykład użycia rysunkowego interfejsu API: algorytmiczny generator efektów wizualnych

Flash Player 9 i nowsze wersje, Adobe AIR 1.0 i nowsze wersje

Przykładowy algorytmiczny generator efektów wizualnych rysuje na stole montażowym klika „satelitów” lub kół poruszających się po orbicie kołowej. Przykład ilustruje między innymi następujące zagadnienia:

  • Użycie rysunkowego interfejsu API do rysowania podstawowego kształtu o dynamicznie zmieniającym się wyglądzie.

  • Powiązanie właściwości używanych do rysowania z działaniami użytkownika.

  • Uzyskiwanie animacji poprzez czyszczenie stołu montażowego i ponowne rysowanie grafiki w każdej kolejnej klatce.

Przykład zaprezentowany w poprzednim punkcie rysował jednego „satelitę”, wykorzystując do tego zdarzenie Event.ENTER_FRAME . Ten przykład stanowi jego rozwinięcie. Udostępnia użytkownikowi panel sterowania z szeregiem suwaków, które natychmiast wpływają na wygląd kilku satelitów. Kod przykładu został napisany z zachowaniem pewnych zasad formalnych — kod jest rozmieszczony w klasach zewnętrznych, a proces tworzenia satelitów ma postać w pętli. Odwołanie do każdego satelity jest zapisywane w tablicy satellites .

Aby pobrać pliki tej przykładowej aplikacji, należy przejść na stronę www.adobe.com/go/learn_programmingAS3samples_flash_pl . Pliki aplikacji znajdują się w folderze Samples/AlgorithmicVisualGenerator. Folder ten zawiera następujące pliki:

File

Opis

AlgorithmicVisualGenerator.fla

Główny plik aplikacji w formacie Flash Professional (FLA).

com/example/programmingas3/algorithmic/AlgorithmicVisualGenerator.as

Klasa realizująca zasadniczą funkcjonalność aplikacji, w tym rysowanie satelitów na stole montażowym i reagowanie na zdarzenia z panelu sterowania poprzez aktualizację zmiennych wpływających na rysowanie.

com/example/programmingas3/algorithmic/ControlPanel.as

Klasa zarządzająca interakcją z użytkownikiem. Obsługuje kilka suwaków i wywołuje zdarzenia w odpowiedzi na ich użycie.

com/example/programmingas3/algorithmic/Satellite.as

Klasa reprezentująca obiekt wyświetlany, który krąży po orbicie wokół punktu centralnego i zawiera właściwości związane ze swoim bieżącym stanem na rysunku.

Konfigurowanie detektorów

Aplikacja najpierw tworzy trzy detektory zdarzeń. Pierwszy wykrywa zdarzenie wywołane z panelu sterowania i powoduje odbudowanie satelitów, jeśli zachodzi taka konieczność. Drugi wykrywa zmiany rozmiaru stołu montażowego pliku SWF. Trzeci wykrywa każde przejście do kolejnej klatki pliku SWF i wymusza ponowne rysowanie przy użyciu funkcji doEveryFrame() .

Tworzenie satelitów

Po przygotowaniu tych detektorów wywoływana jest funkcja build() . Najpierw wywołuje ona funkcję clear() , która opróżnia tablicę satellites i usuwa wszystkie elementy narysowane uprzednio na stole montażowym. Jest to konieczne, ponieważ funkcja build() może być wywołana w odpowiedni na zdarzenie z panelu sterowania, np. po zmianie ustawień kolorów. W takim przypadku satelity należy usunąć i odtworzyć.

Następnie funkcja tworzy satelity, nadając początkowe wartości niezbędnym właściwościom, taki jak zmienna position , która jest inicjowana losowym położeniem na orbicie, oraz zmienna color , której wartość nie ulega zmianie po utworzeniu satelity.

Odwołania do poszczególnych utworzonych satelitów są dodawane do tablicy satellites . Wywołanie funkcji doEveryFrame() powoduje zaktualizowanie wszystkich satelitów w tablicy.

Aktualizowanie pozycji satelitów

Funkcja doEveryFrame() jest centralnym elementem procesu animacji w aplikacji. Jest wywoływana w każdej klatce, z częstotliwością równą częstości klatek pliku SWF. Ponieważ wartości zmiennych rysunku są nieznacznie modyfikowane w każdej klatce, uzyskuje się w ten sposób efekt animacji.

Funkcja najpierw usuwa wszystkie narysowane wcześniej elementy i odtwarza tło. Następnie w pętli przegląda wszystkie kontenery satelitów i inkrementuje właściwość position każdego satelity oraz aktualizuje właściwości radius i orbitRadius , które mogły ulec zmianie w wyniku interakcji użytkownika z panelem sterowania. Na koniec satelita jest rysowany w nowym położeniu poprzez wywołanie metody draw() klasy Satellite.

Należy zwrócić uwagę, że licznik i jest inkrementowany tylko do wartości zmiennej visibleSatellites . Wynika to stąd, że jeśli użytkownik za pomocą panelu sterowania ograniczył liczbę wyświetlanych satelitów, pozostałe satelity w pętli nie powinny być rysowane, lecz ukryte. Odbywa się to w pętli następującej bezpośrednio po pętli rysującej.

Po zakończeniu działania funkcji doEveryFrame() satelity w liczbie visibleSatellites są widoczna na ekranie w nowych położeniach.

Reagowanie na działania użytkownika

Interakcja z użytkownikiem odbywa się za pośrednictwem panelu sterowania, który został zrealizowany za pomocą klasy ControlPanel. Klasa ta definiuje detektor zdarzeń oraz wartości minimalne, maksymalne i domyślne każdego suwaka. Funkcja changeSetting() jest wywoływana w odpowiedzi na przesuwanie suwaków. Funkcja ta aktualizuje właściwości panelu sterowania. Jeśli zmiana skutkuje koniecznością odbudowania rysunku, wywoływane jest zdarzenie obsługiwane przez główny plik aplikacji. Po zmianie ustawień panelu sterowania doEveryFrame() funkcja rysuje poszczególne satelity na podstawie zaktualizowanych zmiennych.

Dalsze dostosowywanie

Omówiony przykład ilustruje tylko podstawowy schemat generowania efektów wizualnych za pomocą rysunkowego interfejsu API. Stosunkowo krótki kod umożliwił stworzenie interaktywnej aplikacji, która z perspektywy użytkownika wygląda na stosunkowo rozbudowaną. Wprowadzenie drobnych zmian pozwoli jednak na dalsze zwiększenie funkcjonalności aplikacji. Oto kilka propozycji:

  • Funkcja doEveryFrame() może inkrementować kolor satelity.

  • Funkcja doEveryFrame() może stopniowo zwiększać lub zmniejszać promień satelitów.

  • Satelity nie muszą poruszać się po orbicie kolistej. Odpowiednie metody klasy Match pozwalają na zdefiniowanie innej orbity, np. sinusoidalnej.

  • Możliwe byłoby wykrywanie zderzeń satelitów.

Rysunkowy interfejs API stanowi alternatywę dla tworzenia efektów wizualnych w narzędziu Flash do tworzenia treści i pozwala na rysowanie prostych kształtów w trakcie wykonywania kodu. Może jednak posłużyć także do tworzenia efektów wizualnych o różnorodności i skali nieosiągalnej w przypadku narzędzi interaktywnych, obsługiwanych ręcznie. Korzystając z rysunkowego interfejsu API oraz odrobiny wiedzy matematycznej, programista może ożywić rozmaite interesujące formy wizualne.