Создание интерактивной анимации с помощью библиотеки времени выполнения WebGL   

Ниже вы найдете пошаговое руководство, содержащее сведения об использовании библиотеки времени выполнения WebGL для Flash, позволяющей добавить интерактивность к созданным анимациям. В этом руководстве обучение начинается с создания простого файла FLA и использования API для добавления экземпляров MovieClip в рабочую область.

  1. Загрузите файл night_webgl.fla и откройте его в приложении Adobe Flash Professional CC 2014. Вы увидите, что этот файл содержит растровое изображение ночного неба в рабочей области.

  2. Протестируйте ролик, нажав CTRL+Enter (для Windows) или Cmd+Enter (для Mac). В окне браузера отобразится растровое изображение.

  3. Перейдите в папку, в которой находится файл .fla. После публикации становятся доступными следующие файлы и папки.

    • Файл night_webgl.html  
    • Папка «Библиотеки», содержащая библиотеку WebGL для JavaScript
    • Папка «Ресурсы», содержащая ресурсы, необходимые для рендеринга анимации
  4. Вернитесь в приложение Flash Professional. На панели «Библиотека» находится видеоролик MovieClip под названием «Звезда», содержащий анимационное изображение звезды с изменяющейся прозрачностью.  

  5. Дважды щелкните столбец «Связывание» рядом с видеороликом «Звезда» на панели «Библиотека» и введите star. Это действие позволяет задать имя связывания для создания новых экземпляров данного объекта MovieClip во время выполнения с помощью библиотеки (API) WebGL. Кроме того, это гарантирует публикацию ролика в том случае, если он не используется в рабочей области.

  6. Откройте файл HTML и добавьте эти три строки после строки, содержащей тег . Это действие добавляет кнопку в код HTML и создает тег для отображения количества созданных звезд.





  7. Введите следующий код после функции 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"); }

    Произойдет несколько событий:

    • Переменная «player» ссылается на экземпляр проигрывателя WebGL и является фасадом API.
    • Создается ссылка на SceneGraphFactory. Она используется для создания экземпляров MovieClip.
    • Экземпляры MovieClip создаются с помощью функции createMovieClipInstance() с использованием имени связывания, указанного в приложении Flash. 
    • Ссылка на рабочую область (корневая временная шкала) получена от проигрывателя.
    • Новый экземпляр MovieClip добавляется в рабочую область в качестве дочернего экземпляра с помощью функции addChildAt(). Передача этой функции значения 0 добавляет дочерний объект поверх всех остальных дочерних объектов в рабочей области (над растровым изображением).
    • Расположение и размер звезды задаются с помощью класса Matrix. 
  8. Сохраните изменения в файле HTML.

  9. Чтобы запретить Flash перезапись изменений, внесенных в файл HTML при публикации, снимите флажок «Перезаписать HTML» в диалоговом окне «Параметры публикации».

  10. Протестируйте ролик повторно. Теперь кнопка «Добавить» будет отображаться в браузере ниже фонового изображения. Нажмите кнопку Добавить несколько раз для добавления звезд в рабочую область.

Примечание.

Готовый объект можно загрузить здесь.

Загрузить

night_webgl

Примечание.

  • Рендеринг анимации WebGL осуществляется на холсте (элемент canvas) внутри кода HTML, поэтому вы можете свободно редактировать окружающий код HTML. Этот тестовый объект поддерживает подсчет количества созданных звезд.
  • Приведенный выше пример поможет вам начать создание интерактивных анимаций и игр. Дополнительные сведения о других способах управления элементами в рабочей области см. на странице Документация библиотеки WebGL.
  • При публикации любого содержимого Flash преобразует изображение в формат, ориентированный на графический процессор. Эта задача требует большой вычислительной мощности, поэтому ее выполнение может занять несколько минут. Рекомендуется уменьшить количество линий и кривых в изображении. Чтобы упростить изображение путем оптимизации, смягчения и выпрямления элементов, воспользуйтесь параметрами меню «Модификация» > «Фигура». С их помощью можно повысить производительность механизмов рендеринга и сократить время публикации.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет