Frame by Frame Animation in Animate 2023

• Timeline area
  
• Keyframe is a potential point of change in animation - a blank keyframe is represented by a hollow circle in the timeline, when the keyframe has content, the circle becomes solid.
• F5 - Insert>Timeline>Frame - the content from the previous keyframe will continue to be displayed
• F6 - Insert>Timeline>Keyframe - the content (except for actions and sounds) is copied from the previous keyframe.
• F7 - Insert>Timeline>Blank Keyframe
• Modify>Timeline>Clear Keyframe (Shift+F6) - removes the content but leaves the frame.
• Deleting frames - Click and drag or shift-click to select them and then Edit>Timeline>Remove Frames or right-click.
• Previewing movie - (1) Scrub the playhead, or (2) Hit Enter, or (3) Control>Test Movie.
  

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 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 and the position of the orange and purple vertical bars above the Timeline.

Exercise 3 - Inserting and Deleting Frames - Adjusting the frame rate affects the speed of the animation, but that 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 (triangles with adjacent vertical lines, at the far right end).

The native file format in Animate is a .fla file but what is placed on a web page is the output which can be in several formats, discussed next.

Output Formats

Although Animate can export to Windows or Mac projector formats, this use is probably limited to stand-alone applications such as a kiosk. Our interest is in web applications. The export options appear to have increased over the years, so that by Animate 2021 (and now Animate 2023), one can export in several ways:

• the HTML5 Canvas format which consists of HTML and JavaScript code on a web page
• an animated gif or an ordinary gif, jpg, or png file which can be placed on a web page with the <img> tag just like any other image or can be incorporated into a Premiere Pro project (which can then be exported to a mp4 format movie that can be part of a web page)
• a mp4 format movie that can be part of a web page; the mp4 movie can also be incorporated into a Premiere Pro project (which can then be exported to a mp4 format movie that can be part of a web page)

A new feature (probably introduced in Animate 2021) called "Quick share or publish" which can be accessed by clicking the icon at upper right in Animate (pointed to by the red arrow below)

When you click on this, the options are Social Share (Twitter or YouTube) and Publish. The options under Publish for the HTML5 Canvas format are

-Video (.mp4)
-Animated Gif (.gif)
-HTML Canvas (.html)

When placing the HTML Canvas html in a web page, one must include any JavaScript files or images folder created.

For more control over the .mp4 export, choose File>File Export>Export Video/Media.

For more control over the Animated Gif, e.g. controlling looping in the animated gif, choose File>File Export>Export Animated Gif. Note that an animated gif cannot have some features (e.g. sound) that one would have in a .mp4 file or an HTML Canvas web page

Revised: March 1, 2023. Comments to William Pegram, bill@billpegram.com