Getting Started

Search
Flash Professional User Guide
Applies to: Flash Professional

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

Creating an interactive animation using the WebGL Runtime API   

The following is a step-by-step tutorial to help you get started with using the Flash WebGL Runtime API to add interactivity to your animation. In this tutorial, you start with a simple FLA file and use the API to add MovieClip instances on stage.

  1. Download the file night_webgl.fla and open it in Adobe Flash Professional CC 2014. You can see that the file contains a bitmap image of a night sky on stage.

  2. Test the movie by pressing CTRL+Enter (on Windows) or Cmd+Enter (on Mac). A browser window displays the bitmap.

  3. Navigate to the folder that contains the .fla file. You can find the following files and folders after publishing:

    • The night_webgl.html file 
    • The ‘libs’ folder that contains the WebGL runtime JavaScript library
    • The ‘assets’ folder that contains the assets required to render the animation

  4. Return to Flash Professional. In the Library panel, you can see a MovieClip “Star” that contains an animation of a star with modulated transparency.  

  5. In the library panel, double-click the ‘linkage’ column next to the Star MovieClip and type “star”. This step specifies the linkage name using which instances of this MovieClip can be created at runtime using the API. It also ensures that this MovieClip is published even if it is not used on stage.

  6. Open the HTML file and add these lines after the line containing the <canvas> tag. This adds a button to the HTML and creates a placeholder to display the number of stars created.

    <button onclick="onAdd();">Add</button>
<p id="count"></p>

  7. Add the following code after the handleComplete() function:

    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");
}

    Several things happen here:

    • The variable ‘player’ references an instance of the WebGL player and is the façade of the API.
    • A reference to the SceneGraphFactory is obtained. It is used to create instances of the MovieClip.
    • MovieClip instances are created using the function createMovieClipInstance() and passing the linkage name specified in Flash. 
    • A reference to the stage (root timeline) is obtained from the player.
    • The new MovieClip instance is added as a child of the stage using the addChildAt() function. Passing 0 to the this function adds the child on top of all other children of the stage (above the bitmap).
    • The position and size of the star are set using the Matrix class. 

  8. Save your changes to the HTML file.

  9. To prevent Flash from overwriting the changes made to the HTML while publishing, clear the 'Overwrite HTML' checkbox in the Publish Settings dialog box.

  10. Test the movie again. This time, your browser displays the Add button below the background image. Click Add multiple times to add stars on stage.

Note:

You can download the finished example here.

Download

Get file
night_webgl.zip
night_webgl

Note:

  • Since you render the WebGL animation on a canvas within the HTML, you are free to modify the surrounding HTML. In this example, we maintain a count of the number of stars created.
  • The above example is meant for you to get started on creating interactive animations and games. Visit the WebGL runtime API documentation page to learn more about the other ways to control the elements on your scene.
  • When you publish any content, Flash converts the artwork to a GPU-friendly format. Being computationally intensive, the task may take a few minutes to complete. As a best practice, minimize the number of lines and curves in your artwork. Optimizing, smoothening, and straightening the artwork using the options under the Modify > Shape menu helps you simplify your artwork. This helps increase the rendering performance and reduce the publishing time.