Frame by Frame Animation in Animate 2020

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 - Above the timeline, click the the two overlapping circles (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 vertical lines 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.

There are icons above the timeline (< and >) that will take you to next and previous keyframe in that layer as well as the next and previous frame (arrows with vertical lines).

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.

Over the years, several formats were available but beginning with Animate 2020, there are only two options - ActionScript 3.0 and HTML5 Canvas. All of these formats have used a .fla format as the native file format, i.e. that used within the program.

Placing ActionScript 3.0 format output on web page

The ActionScript 3.0 option can export a .swf file which plays in the Flash Player. However, the Flash Player has not been supported on mobile devices for several years and support for the Flash player in many browsers is ending in 2020 and thus the swf format no longer is an attractive choice. However, the ActionScript 3.0 option can also be exported to an animated gif. Although the functionality of the animated gif format is less than the swf file, the animated gif will continue to work in browsers and an animated gif can be brought into a Premiere Pro project whereas a swf file cannot.

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 within Animate 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 if the browser permits Flash. 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 Animate movie is published, Animate will generate the HTML necessary to display the Animate movie in a web page. To use this Animate movie inside a web page, one needs to use all the HTML generated by Animate between the <object>and </object> tags. One can copy all this information to a web page, or edit the HTML file generated by Animate.

Exercise: Create a frame by frame animation where the content is additive - i.e. use F6. Generate the swf file and the html to reference it by choosing Control>Test Movie>In Browser. Open the generated html file in different browsers to see if any will play the animation.

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. So that your Animate 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 Animate movie doesn't play in the browser but that browser does allow the Flash Player, 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 Flash Player.

Exercise: In Dreamweaver, select Insert>HTML>Flash SWF to create a reference to the swf from an html file. Open the generated html file in different browsers.

Exercise: In Animate, choose File>Publish Settings and choose an animated gif as the output and specify that it should not loop. Insert the .gif file into a web page using the img tag. Display the html file in a browser.

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 Animate or Dreamweaver and is dependent on the browser supporting the Flash Player.

Placing HTML5 Canvas output on web page

The HTML5 Canvas option generates html and JavaScript which can play in the browser in desktops, laptops, and mobile devices. You cannot export to an animated gif from the HTML5 Canvas option but you can export to an svg file which supports animation. The svg file can't be imported into Premiere Pro, but the svg file can be converted into an mp4 file using various programs and the resulting mp4 file can be imported into a Premiere Pro movie..

When one creates an Animate file, one can choose HTML5 Canvas. With this choice, when one publishes the movie, Animate will create the html file, a JavaScript file, and an images folder. To view the animation on the web, you must upload the html file, any JavaScript files created, and the images folder created. A swf file and the Flash Player are not used and thus the animation can play on mobile devices, desktops, etc.. To eliminate looping, choose File>Publish Settings and uncheck the "Loop Timeline" box.

Unlike 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.

Exercise: In Animate, choose HTML5 Canvas as the format at the outset. Do a frame by frame animation and choose File>Publish Settings and uncheck the "Loop Timeline" checkbox. Then File>Publish. Copy and paste the existing code into Dreamweaver or a text editor and modify the HTML. Note that when you upload the html file to your webspace, you will need to upload a .js file and the images folder as well.

Revised: March 20, 2020. Comments to William Pegram, bill@billpegram.com