使用 WebGL 執行階段 API 建立互動式動畫   

下列是逐步教學課程,可協助您開始使用 Flash WebGL 執行階段 API,為您的動畫新增互動功能。在這個教學課程中,您會從簡單的 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 元件庫的「libs」資料夾
    • 包含顯示動畫所需資源的「assets」資料夾
  4. 返回 Flash Professional。在「元件庫」面板中,您會看到 MovieClip「Star」,其中包含已調整透明度的星形動畫。

  5. 在「元件庫」面板中,按兩下 Star MovieClip 旁邊的「連結」欄,並輸入「star」。這個步驟利用可以使用 API 在執行階段為這個 MovieClip 建立的實體,藉此指定連結名稱。此外,也確保即使未用在舞台中,也會發佈這個 MovieClip。

  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 中指定的連結名稱而建立的。
    • 從播放程式取得舞台 (根時間軸) 的參考。
    • 使用 addChildAt() 函數,加入新的 MovieClip 實體做為舞台的子系。將 0 傳遞至這個函數會在舞台的所有其他子系上加入子系 (上面的點陣圖)。
    • 使用 Matrix 類別設定星形的位置和大小。
  8. 將您的變更儲存至 HTML 檔案。

  9. 發佈時,若要防止 Flash 覆寫對 HTML 所做的變更,請清除「發佈設定」對話方塊中的「覆寫 HTML」核取方塊。

  10. 再次測試影片。這次,您的瀏覽器會在背景影像下方顯示「新增」按鈕。按一下「新增」按鈕數次,在舞台上增加星形。

註解:

您可以在這裡下載完成的範例。

下載

night_webgl

註解:

  • 由於您在 HTML 內的畫布上顯示 WebGL 動畫,因此,您可以隨意修改周圍的 HTML。在這個範例中,我們會維持所建立的星形數目。
  • 上述範例為您示範如何建立互動式動畫和遊戲,以便快速入門。請造訪 WebGL 執行階段 API 文件頁面,進一步了解其他控制場景元素的方法。
  • 當您發佈任何內容時,Flash 會將圖案轉換為 GPU 格式。由於耗費運算資源,此工作可能需要幾分鐘的時間才能完成。最佳作法是,將圖案的線條和曲線數目減到最少。使用「修改 > 形狀」選單底下的選項將圖案最佳化、平滑化及直線化,可協助您使圖案簡化。這有助於提高顯示效能並減少發佈所花費的時間。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策