Frame by Frame Animation in Animate 2021

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 various options for Onion Skins which are displayed when you click the two overlapping circles...

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 (the first set of < and >) as well as the next and previous frame (arrows with vertical lines, at the far right end).

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 the Flash Player was removed from many browsers (e.g. Chrome and Edge) by the end of 2020 and thus the swf format is not a good choice for display on a web page. 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.

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.

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

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 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 perhaps the images folder as well.

Revised: February 22, 2021. Comments to William Pegram, bill@billpegram.com