Frame by Frame Animation

Exercise 1 - Frame-by-Frame Animation with Keyframes - use F6 if you want the frames to accumulate content, e.g. spelling out your name but use F7 if you want a frame to have only new content, with nothing from earlier frames.

Exercise 2 - Onion Skinning - At the bottom of the timeline, click the second button from the left (Onion Skin). You will be able to see a ghost image of the content of other frames on the stage. This allows you to change the current artwork relative to the ghost images. Which frames you see through onion skinning are controlled through the Onion Skin Markers, which are the draggable brackets that appear at the top of the Timeline after you click the Onion Skin button.

Exercise 3 - Inserting and Deleting Frames - Adjusting the frame rate affects the speed of the animation, but it affects the entire movie. By inserting and deleting frames, one can adjust the speed of parts of the movie. You can insert frames by hitting F5. To remove frames, you can select them by clicking and dragging and then choosing the keyboard shortcut Shift-F5 or by right clicking and choosing Remove Frames.

Creation of Different Output Formats in Flash and Animate

In versions of Flash prior to CC, the authoring tool customarily generated an .swf file which is what was displayed in a web browser. In Animate, this option is selected at file creation by choosing the ActionScript 3.0 alternative.

Beginning with Flash CC 2014 and now with Animate, when one creates the Flash file, one can choose between several options including ActionScript 3.0, HTML5 Canvas, and Web GL (Preview).

The advantage of HTML5 Canvas is that it runs on mobile devices unlike the ActionScript 3.0 alternative which does not.. One disadvantage is that the available documentation for the JavaScript scripting is much less than for ActionScript. WebGL (Preview) is not supported on IE10 and does not support the Text tool.

Using an .swf file

If one creates an ActionScript 3.0 file, selecting Control>Test Movie generates a .swf file. If one chooses Test Movie>In Animate, the .swf file plays in the Flash Player and the movie will loop by default. One can control looping by choosing, within the Player, Control>Loop Playback.

If one chooses Test Movie>In Browser, the swf file is displayed within the browser. Choosing Control>Test Movie>In Browser generates the .swf file plus an html file to display the .swf file and launches the html file in the default browser. To eliminate looping when the movie is displayed in the browser, choose File>Publish Settings. If HTML Wrapper is not checked, then check it and uncheck the Loop option under Playback on the right.

Note: If HTML Wrapper is already checked, you will need to click on it to uncheck it and then click again to check it to display the Loop option on the right.

When the Flash movie is published, Flash will generate the HTML necessary to display the Flash movie in a web page. To use this Flash movie inside a web page, one needs to use all the HTML generated by Flash between the <object>and </object> tags. One can copy all this information to a web page, or edit the HTML file generated by Flash.

An alternative way to display the .swf movie in an existing web page is to open the existing page in Dreamweaver, put the insertion point at the appropriate place in the file, and select Insert>HTML>Flash SWF. Dreamweaver will generate the reference to the .swf file and to an external JavaScript file. To ensure that your Flash movie can be viewed in a web page on the internet, you must upload the HTML file, the .swf file, and the external JavaScript file to the locations specified in the relative addresses for each. If the Flash movie doesn't play in the browser, the problem may be the <param name="swfversion" ...> line in the code. This problem can be fixed by deleting the line entirely (it appears in two places) or by lowering the version to the current version of the FlashPlayer

Still another way to display the .swf move in an existing web page is to use the <embed> tag, e.g.

<object>
<param name="slideshow" value="splash.swf">
<embed src="splash.swf">
</embed>
</object>

Although this code appears to work in current browsers, it may not function in older browsers as well as the code generated by Flash or Dreamweaver.

Using HTML5 canvas

When one creates an Animate file, one can choose HTML5 Canvas. With this choice, when one publishes the movie, Animate will create the html and associated JavaScript files. A swf file and the Flash Player are not used. To eliminate looping, choose File>Publish Settings and uncheck the "Loop Timeline" box.

Unlike with the .swf file approach, from within Dreamweaver there is not a simple insert command -- instead one will need to take the html and insert it at the proper place in the web page and utilize the JavaScript as well.

Using WebGL (Preview)

When one creates an Animate file, one can choose WebGL (Preview). To eliminate looping, choose File>Publish Settings and uncheck the "Loop timeline" box. With WebGL (Preview), when one publishes the movie, Flash will create the html and associated JavaScript and .json files.

As with the HTML5 canvas approach, from within Dreamweaver there is not a simple insert command.

Revised: October 3, 2018. Comments to William Pegram, bill@billpegram.com