The advanced Motion Editor in Adobe Animate makes creating complicated animation with motion tweens fast and easy. Use the Motion Editor to view how the properties of your motion tween change over time, and apply eases for sophisticated effects.
Start by viewing the finished movie file to see the animated infographic that you’ll create in this lesson.
Double-click the 04End.html file in the Lesson04/04End folder to play the animation in a browser.
The project is a short, animated infographic illustrating the idea of China as an emerging economic threat to the highest-traded currencies in the world. The animation is something you might see accompanying a story in the business and economy section of a news site. In the animation, blocks with the American, European Union, and Japanese flags, representing the Dollar, the Euro, and the Yen, respectively, stack themselves up. A moment later, a large hand with the Chinese flag bumps the stack, sending them tumbling down. In this lesson, you’ll use the Motion Editor to make refinements in the motion tweening of the blocks, including the bouncing movements as they fall.
Close the 04End.html file.
Double-click the 04Start.fla file in the Lesson04/04Start folder to open the initial project file in Animate. This file is an HTML5 Canvas document that already contains all the graphics created for you, with movie clip symbols saved in the library. Each of the graphics has its own layer, and instances of the symbols have been placed on the Stage in their initial positions.
Choose View > Magnification > Clip To Stage to deselect the option (or deselect the Clip Content Outside The Stage button above the Stage) to enable the pasteboard so that you can see all the graphics positioned just off the Stage.
Choose File > Save As. Name the file 04_workingcopy.fla, and save it in the 04Start folder.
Saving a working copy ensures that the original start file will be available if you want to start over.