• Flash professional CC
  • Choose file type “WebGL”
  • Create animation file & then save file in folder on Desktop
  • (u have to write javascript code to add interactivity to the animation file) So before you write the script, you have to PUBLISH¬†so that all the WebGL files get generated (and can be used for coding)
  • Files that get published are .HTML, .LIB, and all the assets (named in asset folder)
  • Before publishing, you should add linkage names so you can find these specific assets/files later on by searching for the name you gave them
  • You can also add frame labels to allow ppl to jump to dfferent parts in the animation
  • When you are done creating your animation, save the .FLA
  • AND THEN PUBLISH:
    • Press COMMAND ENTER
    • This converts Flash to GPU friendly format
    • Check project folder (which you have saved to your desktop) to make sure all the files were generated properly (.HTML, .LIB, and assets)
    • Open publish settings in Flash CC
    • Uncheck overwrite HTML option (you want to do this b/c once we write javascript code we will be writing/adding onto the HTML file, so we don’t want the original HTML to be republished … THIS WILL ERASE ALL THE SCRIP YOU JUST WROTE! v important.)
  • Now you can start writing code:
    • Open a text autoscript editor
    • Adobe Dream Viewer CC is a good option
    • Open the .HTML file generated by Flash CC in Dream Viewer
    • Look for the canvas stack (looks like this):
      • <canvas id = “canvas” style = “border : none;”></canvas>
    • After that line add this code (to add HTML content with ON CLICK ACTION):
      • <br>
      • <button> ADD </button>
      • <button onclick=”onAdd();”>Add</button>
    • You can also add a paragraph tag, which will show the amount of ___ getting added (where ____ is equal to the¬†specific asset/image you wish to add to the animation)
      • <p id=”count”></p>
    • You are now ready to add a function
    • Look for “function handle complete” in the </head> section of the HTML
    • Right after the function —
      • }
      • {
    • Create a count variable
      • var count = 0;
    • Then create a function (this function controls the player/playback of the movie/animation)
      • function onAdd() {
      • var sgf = player.getScenegraphFactory();
      • var star = sgf.createMovieClipInstance (“Star”);
    • The last line in this function creates an instance of the movie clip using the asset name star which (in this example) would have been given to asset during the creation of the animation in Flash CC — so in this function you are create a reference to that asset
    • Next add:
      • player.getStage().addChildAt(Star,0);
    • In this line of code the “stage” is equal to the movie or animation and the “child” is equal to the movie or animation clip. This code brings the two together.
    • Next add:
      • var x = Math.random() * 540;
      • var y = Math.random() * 180;
      • var s = Math.random();
      • var mat = newflwebgl.geom.Matrix([s,0,0,s,x,y]);Star.setLocalTransform(mat);
      • count++;
    • In these lines of code the function of adding stars is played out. (Once again, “stars” are being used in this example, but in your animation it will be whatever asset name you have given the asset that you would like to add to the animation.)
    • Next, you will update the count (paragraph element you added earlier) by creating the next line:
      • document.getElementById(“count”).innerHTML = count + (count> 1 ? ” Stars” : ” Star”);
    • Then SAVE on Dream View
    • Test your new content by going back to Flash CC and hitting COMMAN ENTER
    • This will play your animation
    • In this example, an “add button” has appeared at the button of the animation. By clicking the button new stars are added to the night sky.