Pierwsze kroki

Pierwsze kroki

Szukaj
Flash Professional Podręcznik użytkownika
Ma zastosowanie wobec: Flash Professional

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Tworzenie animacji interaktywnej przy użyciu interfejsu API środowiska wykonawczego WebGL

Poniższy samouczek krok po kroku ułatwia rozpoczęcie dodawania elementów interaktywnych do animacji przy użyciu interfejsu API środowiska wykonawczego WebGL. Samouczek zaczyna się od prostego pliku FLA, do którego stołu montażowego są za pomocą omawianego interfejsu API dodawane wystąpienia klasy MovieClip.

  1. Pobierz plik night_webgl.fla i otwórz go w programie Adobe Flash Professional CC 2014. Na stole montażowym tego pliku znajduje się obraz bitmapowy nieba w nocy.

  2. Przetestuj film, naciskając klawisze Ctrl+Enter (Windows) lub Cmd+Enter (Mac OS). Bitmapa zostanie wyświetlona w oknie przeglądarki.

  3. Przejdź do folderu z plikiem FLA. Po opublikowaniu można znaleźć następujące pliki i foldery:

    • Plik night_webgl.html
    • Folder „libs” z biblioteką JavaScript środowiska wykonawczego WebGL
    • Folder „assets” z zasobami wymaganymi do renderowania animacji

  4. Wróć do programu Flash Professional. W panelu Biblioteka będzie widoczny obiekt MovieClip o nazwie „Star” zawierający prostą animację gwiazdy ze zmienną przezroczystością.

  5. W panelu Biblioteka kliknij dwukrotnie kolumnę połączenia obok obiektu MovieClip gwiazdki i wpisz tekst „star”. W tym kroku określana jest nazwa połączenia, która będzie stosowana podczas tworzenia wystąpień tej klasy MovieClip przez środowisko wykonawcze za pośrednictwem interfejsu API. Gwarantuje to również, że obiekt MovieClip jest publikowany nawet w przypadku, gdy nie użyto go na stole montażowym.

  6. Otwórz plik HTML i dodaj te trzy wiersze po wierszu ze znacznikiem . Zostanie dodany przycisk HTML z elementem zastępczym wyświetlający liczbę utworzonych gwiazd.





  7. Dodaj następujący kod po funkcji handleComplete():

    var count = 0; function onAdd() { var sgf = player.getScenegraphFactory(); var star = sgf.createMovieClipInstance("star"); player.getStage().addChildAt(star, 0); var x = Math.random() * 540; var y = Math.random() * 180; var s = Math.random(); var mat = new flwebgl.geom.Matrix([s, 0, 0, s, x, y]); star.setLocalTransform(mat); count++; document.getElementById("count").innerHTML = count + (count > 1 ? " stars" : " star"); }

    Dzieje się tu kilka rzeczy:

    • Zmienna „player” odnosi się do wystąpienia odtwarzacza WebGL i jest fasadą interfejsu API.
    • Kod uzyskuje odniesienie do obiektu SceneGraphFactory. Za jego pomocą są tworzone wystąpienia klasy MovieClip.
    • Za pomocą metody createMovieClipInstance() są tworzone wystąpienia klasy MovieClip. Jest przekazywana nazwa połączenia określona w programie Flash.
    • Od odtwarzacza jest uzyskiwane odniesienie do stołu montażowego (głównej osi czasu).
    • Nowe wystąpienie klasy MovieClip jest dodawane jako element potomny stołu montażowego przy użyciu metody addChildAt(). Przekazanie wartości 0 do tej metody dodaje element potomny powyżej wszystkich elementów potomnych stołu montażowego (powyżej bitmapy).
    • Położenie i rozmiar gwiazdy są ustawiane przy użyciu klasy Matrix.

  8. Zapisz zmiany w pliku HTML.

  9. Aby zapobiec nadpisaniu zmian wprowadzonych w pliku HTML podczas publikowania w programie Flash, wyczyść pole wyboru Nadpisz HTML w oknie dialogowym Ustawienia publikowania.

  10. Ponownie przetestuj film. Tym razem w przeglądarce poniżej obrazu tła będzie wyświetlany przycisk Dodaj. Kliknij przycisk Dodaj kilka razy, aby dodać gwiazdy na stole montażowym.

Uwaga:

Tutaj można pobrać gotowy przykład.

Pobierz

Pobierz plik
night_webgl.zip
night_webgl

Uwaga:

  • Animacja WebGL jest renderowana w obszarze roboczym (obiekcie Canvas) pliku HTML, dzięki czemu można zmienić otaczającą ją zawartość HTML. W tym przykładzie może ona zawierać liczbę utworzonych gwiazd.
  • Powyższy przykład pozwala zapoznać się z podstawami tworzenia animacji interaktywnych i gier. Więcej informacji i inne sposoby sterowania elementami sceny można znaleźć w dokumentacji interfejsu API środowiska wykonawczego WebGL.
  • Podczas publikowania zawartości program Flash konwertuje kompozycję na format obsługiwany przez GPU. Operacja ta wymaga złożonych obliczeń, dlatego może potrwać kilka minut. W ramach sprawdzonych procedur warto ograniczyć liczbę linii i krzywych kompozycji. Kompozycję można zoptymalizować, wygładzić i wyprostować przy użyciu opcji w menu Modyfikuj > Kształt. Pozwalają one poprawić wydajność renderowania i skrócić czas publikowania.