快速入門

搜尋
Flash Professional 使用手冊
適用於: Flash Professional

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

使用 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.zip
night_webgl

註解：

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