使用 WebGL 运行时 API 创建交互式动画

以下是一个分步教程,有助于您快速了解如何使用 Flash WebGL 运行时 API 为动画添加交互性。在本教程中,我们将从一个简单的 FLA 文件入手,并使用 API 在舞台上添加电影剪辑实例。

  1. 下载文件 night_webgl.fla 并在 Adobe Flash Professional CC 2014 中将其打开。可以看到该文件在舞台上包含一个夜空的位图图像。

  2. 按下 CTRL+Enter (Windows) 或 Cmd+Enter (Mac) 测试该影片。将打开一个浏览器窗口,显示该位图。

  3. 浏览到包含 .fla 文件的文件夹。发布后您可找到下列文件和文件夹:

    • night_webgl.html 文件 
    • “libs”文件夹,它包含 WebGL 运行时 JavaScript 库
    • “assets”文件夹,它包含显示动画所需的资源
  4. 返回 Flash Professional。在“库”面板中,可以看到一个电影剪辑“Star”,它包含一个简单的星星(透明度经过调整)。

  5. 在“库”面板中,双击电影剪辑 Star 旁边的“链接”栏,键入“star”。该步指定链接名称,使用这一名称,便可以使用 API 来在运行时创建此电影剪辑的实例。它还会确保此电影剪辑即便没有在舞台上使用也可以发布。

  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 的引用。这用于创建该电影剪辑的实例。
    • 使用函数 createMovieClipInstance() 创建电影剪辑实例,并传递在 Flash 中指定的链接名称。
    • 从播放器获取对舞台的引用(根时间轴)。
    • 使用 addChildAt() 函数添加作为舞台的子对象的实例。将 0 传递给此函数会在舞台所有其他子对象的顶层(位图之上)添加子对象。
    • 星星的位置和大小使用 Matrix 类来设置。
  8. 保存对 HTML 文件所做的更改。

  9. 若在发布期间不希望 Flash 覆盖对 HTML 所做的更改,可清除“发布设置”对话框中的“覆盖 HTML”复选框。

  10. 再次测试影片。这次,您的浏览器将在背景图像下方显示“Add”(添加)按钮。单击几次 Add 即可在舞台上添加星星。

注意:

您可以从这里下载已完成的示例。

下载

night_webgl

注意:

  • 由于是在 HTML 中的画布上显示 WebGL 动画,因此无需修改周围的 HTML。在此示例中,我们为创建的星星进行计数。
  • 上例旨在让您快速了解如何创建交互式动画和游戏。若想了解有关控制场景图中元素的其他方法的更多信息,可访问 WebGL 运行时 API 文档页面。
  • 发布任何内容时,Flash 都会将作品转换为 GPU 友好的格式。由于计算量较大,该任务可能需要几分钟才能完成。因此最好的做法是,尽量减少作品中直线和曲线的数目。通过使用更改 > 形状菜单中的选项,可以对图形进行优化、使之流畅或拉直,从而简化图形。这样可以帮助提高渲染性能,减少发布所耗时间。

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略