Zoom-Down Letters Using Motion Tweening
in Adobe Animate (version 22)

Introduction

In this exercise you will create an animation similar to the one above except that you will use your name instead of DANNY.

Important!

In order to do this exercise:

Adobe Animate file formats

Introduction to Animation in Adobe Animate

Introduction to the Exercise

RECOVER_   files

You may see an .fla file with the same name as the .fla file you were working on but with RECOVER_ at the start of the file name. For example, RECOVER_myAnimation.fla

Warning Messages

During the exercise, you may get one or more messages in the Output panel similar to the following:

Warnings generated while copying/importing in zoom-down-lastname-firstname.fla:
* AntiAlias is not supported in HTML5 Canvas document, and has been converted to CanvasFonts in an instance of Text.

WARNINGS:
Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (6)

Note that other similar output messages may appear. They are often inscrutable but can generally be ignored unless they relate to some impediment to your progress.

Return to the Timeline panel using the Window > Timeline (it is near the top of the menu).

IMPORTANT NOTE:

Exercise Procedure

  1. I suggest that download these demo files if you want to see completed example files.
  2. Start Adobe Animate
  3. If you want to use a lighter or darker interface:
    1. Make this menu selection:
      Windows: Edit > Preferences
      Mac: Animate > Preferences
    2. In the Preferences dialog box in the category of General > UI Theme > ...try the different themes.
      • I use Dark but don't really like any of them because the Timeline frame boxes can be hard to discern.
      • The illustrations in this tutorial use the Dark theme.
  4. As with any computer work, during the exercise save your file periodically. Get into this habit if you aren't already otherwise you may lose hours of work:
    The workspaces button and menu
    setting workspace to classic workspace.
  5. Next, make this menu selection: Window > Workspaces > Classic
  6. To ensure that your interface will match the illustrations in this tutorial: reset the Classic workspace:
    • Window > Workspaces > Reset Classic...
    • A dialog box will open asking you: Are you sure that you want to reset 'Classic' to its original layout?
    • Click Yes
    • Note that you can save a customized workspace for your own projects.
      • For example, if your project involves extensive use of a few panels, position them to your liking.
      • Then use the button illustrated on the top right side of the Animate app as shown in the illustration.
      • In the New Workspace field, enter an appropriate name for your new workspace such as the project name. Then, click the down-pointing arrow-in-a-box to save your new workspace.
      • You will note that there is a restore button in the selected Classic row. This will reset your user interface to the default Classic layout when needed.
  7. The right side of the New Document dialog box
    New document dialog box with settings to be made indicated.
    Next, select: File > New >
  8. The New Document dialog box will open.
  9. Make the following settings: (see illustration)
    1. Select Web in the top row.
    2. In the Details section on the right side enter the following settings:
      • Width: 550
      • Height: 400
      • Platform Type: HTML5 Canvas
  10. Click Create
  11. Then save the file.
    1. By default the file will be saved in the native format of Adobe Animate .fla
      • fla is a vestige of the Flash app which was the basis of Animate.
    2. File menu > Save
      • During the file save process, create a new folder to contain the files related to this assignment.
      • Name that folder zoom-down-yourlastname-yourfirstname ...in lowercase letters.
        • Replace yourlastname and yourfirstname with YOUR last and first names!
        • For example, I would name my folder:
          zoom-down-vaughan-daniel
    3. Now, you will use that new folder to save your .fla file in.
    4. Name the file the same as the folder name:
      1. zoom-down-yourlastname-yourfirstname.fla
        • Replace yourlastname and yourfirstname using YOUR last and first names.
        • For example, I would name my file:
          zoom-down-vaughan-daniel.fla
  12. You will be animating your name for this exercise.
    • Determine what form of your first (given) name you want to use for this exercise.
    • Limit the letters to a minimum of three but no more than seven letters, otherwise you will have to do more work than required.
    • I recommend that you use four to five letters, all upper case.
    • You do not need to use your exact name.
    • You can use your familiar or "nick" name.
    • For example, my name is, formally, Daniel.
    • But my friends call me Dan or Danny. I could use any of those three spellings.
    • If my name were Alexander I may want to use Alex.
      The Text tool location in the toolbar with its tooltip
      the text tool selected in the tools panel
  13. In the next several steps you will be creating what will result in the end position of the animation of the letters of your name, the point where your name is zoomed down and spelled out into the positions you create next.
  14. Select the Text Tool tool in the toolbar, the vertical panel on the left side of the Animate app, or use the keyboard shortcut "T".
  15. On the right side of the UI (user interface) you will see the Properties panel.
    • If not, Window > Properties
  16. Select the Tool tab at the top of the Properties panel.
    Text tool properties to set
    Text tool properties to set
  17. Make the following settings pertaining to the text tool. These are also as seen in the illustration:
    • Tool: Static Text
    • Character: Arial Black
      • Note that you can use any font, but I recommend that you use Arial Black or a similar sans-serif bold font.
    • Size: 150px
      • You will be able to easily change the size and the position of the font subsequently using the Free Transform tool, as will be shown.
    • Fill: select black
  18. Click on the Stage (that is, the background - the big white area).
  19. An insertion box will appear.
  20. Enter the name you decided to use.
  21. After you have created the letters, select the Free Transform tool.
    The Free Transform tool and its tooltip
    The Free Transform tool and its tooltip
    • It is the second tool from the top of the toolbar which is on the left of the UI.
    • Click on your name to select it.
    • A bounding box will now surround your name (see illustration below).
    • There will be nine handles on the edges of the bounding box.
    • Click-drag on any corner or mid-line handle of the bounding box to increase or decrease the text size. The letters will remain sharp because they are actually mathematical lines.
    • The bounding box of the Free Transform tool.
      The name DANNY in what will be the end position of the animation.
  22. Adjust the size of the name to be as big as possible without going beyond the edges of the white background.
  23. Continue to use the Free Transform tool to position your name.
  24. Next, you will divide up your name into individual letters.
  25. With the letters still selected make this menu selection: Modify > Break Apart
  26. The letters will all be selected after they are broken apart. Leave them selected.
  27. Then right click on any of the letters.
  28. In the context menu that appears, select Distribute to Layers
  29. Each letter will now be on its own layer and the layer will be named for the letter it contains.
  30. Look at the list of layer names on the left side of the Timeline panel.
  31. Note that the stacking order of the letters, from top to bottom, is in the reverse order of the spelling.
    • In the illustration below you will see that the letters in my name are listed in the Layer panel from top to bottom: YNNAD.
    • For the purposes of this exercise, it will be better to have the letters in the proper order from top to bottom.
    • Therefore, click and drag on the individual layers to move it up and down as needed so that your name is spelled properly from top to bottom as I have done in the illustration.
    • NOTE: Below is information about how to add numbers to the layer names when there are more than one of a letter.
      Layer stacking order of my name DANNY before and after re-stacking
      The layer stacking order of my name DANNY before and after re-stacking into the proper order of the spelling of my name.
  32. If you have two of the same letter in you name, as I do (DANNY) with the letter "N" twice, name the layers discretely so they can be more readily identified and properly positioned in the list of layers. This is particularly important if the letters are adjacent.
    • First, make sure that the letters in the list of layers actually does correspond with the position of the letters in your name.
    • For example, when I re-stacked the layers containing the letters of my name I had the two letter "N"s in reverse order. This would adversely affect the smoothness of the zoom down.
    • The way to test the positions of the letters of your name is by clicking in a layer directly under the slash/eye icon hidden layer icon .
    • Then that same icon will appear on the layer to indicate that its content is hidden. Please see illustration:
      The slash/eye icon hidden layer icon in the "N1" layer indicates that the layer content is now hidden. Click on the layer's eye again and the eye will go away and the content will be visible again.
      Hidden layer setting in the layers panel
    • Using this method you can see the relative positions of the letters.
    • Then you can re-stack the layers as needed to get the letters in the in the proper stacking order.
      • I had to switch from the original "Break Apart" positions the two "N" layers in my name so that they would be in the proper order, top to bottom.
      • NOTE: Do not move the letters to accomplish the proper position because without more experience you may have difficulty precisely positioning them.
    • Double-click on the layer name of the layers that have the same letters in them and add a number after the letter that indicates its relative position in your name.
      • Example: See the illustration above. It demonstrates how the two "N" layers got renamed: N1 N2
    • Be sure to UN-hide any hidden layers.
  33. Next, you will use the Move tool (shortcut key: V) to position individual letters so that their position looks correct relative to the other letters. It is important to enhance the visual appearance of words by adjusting the distances between them when the word(s) are large and prominent. The term for adjusting the gap is kerning.
  34. Next, you will convert each letter into a symbol.
    1. Symbols facilitate the animation process.
    2. Click on the first letter.
    3. Press F8 (or Modify > Convert to Symbol)
    4. Name each symbol for the letter that it contains.
    5. As soon as you create a symbol from a letter the letter on the stage becomes an instance of the symbol.
      1. To see the actual symbol: Window > Library
      2. In the Library the symbols will be listed in alpha-numeric order, not in the order of the spelling of your name.
      3. You will not need to use the Library for this exercise.
    Frame 85 selected in all five of my five layers (left) .Then converted to keyframes
    Frame 85 selected in all 5 layers   Frame 85 converted to a keyframe in all 5 layers
  35. In the Timeline, carefully click in your top layer, under the 85 to select frame 85 in that first layer.
  36. Then, hold down the Shift key and click on frame 85 in your bottom layer.
  37. This will select frame 85 in all of your layers (see illustration).
  38. Then select Insert > Timeline > Keyframe
  39. This will create a single keyframe in frame 85 in each of the layers.
  40. Creating the keyframes here makes duplicates of the instances of the letters in frame 1 of each layer and puts those duplicate instances in frame 85 in each respective layer.
    • Frame 85 now contains unique, different instances of the same symbols (the letters).
    • Visually, the letter in frame 85 will look identical to the letter in frame 1 on the same layer, but they are different, discrete instances that got created automatically when you created the keyframes in frame 85.
    • When a keyframe is created it will make a duplicate of the content of the immediately preceding keyframe on that layer.
    • In this case, the new keyframe made a duplicate instance of the instance of the letter in frame 1, which is the closest preceding keyframe on that layer.
    • The duplicate instance was put into frame 85. Again, it is not the same instance as the one in frame one but rather an instance created in the same location of the stage but saved in frame 85.
    • Therefore, each of the two keyframes on the layer will have a different instance of the same symbol on them.
    • I know that symbols and instances can be a difficult concept to comprehend. It took me some time to grasp it.
  41. The keyframes on frame 85 also establish the end position of the zoom-down of your name. We have not yet created the frame 1 positions for the letters to zoom down from.
  42. In addition to the creation of the keyframes in frame 85, you will see that the space in the Timeline between frame 1 and frame 84 is now filled with gray.
    • These are referred to simply as frames which is somewhat a misnomer because they do not actually have visual information in them. Their purpose is to maintain the visibility of the keyframe before it in the Timeline (to is left).
    • This perpetuates the appearance of the instances of the letters in frame 1 through frame 84.
    Keyframe with content (left),
    empty keyframe (right)
    Images of a keyframe and empty keyframe
  43. More about keyframes:
    • Keyframes are used to store objects and information that can be used for an animation.
    • This includes information, such as positions, that can be used as the basis of calculations (interpolations) for creating the images that will be seen in subsequent frames.
    • A keyframe is visually indicated by a small black circle near the bottom of the rectangular shape of a frame.
    • The little black circle indicates that the frame has content.
    • If the circle is hollow it would indicate that there is no content in that frame.
      • This is referred to as an empty keyframe.
      • Anything in the Timeline layer that had been visible before the empty keyframe (such as an instance of a letter symbol) would no longer be visible from the empty keyframe forward in time (unless another keyframe with content were put in the same layer in a subsequent frame).
    The blue playhead and the "F" (frame) number indicate that the current frame is frame 1.
    Selected frame 1
  44. Next, you will modify the positions in frame one to establish the starting positions for the animation:
    1. Click above the first frame in the Timeline.
    2. This will bring the playhead to the first frame.
      • The playhead is a light blue vertical rectangle that has a pointer indicating the current frame number.
  45. Select all the instances in frame 1:
    • Edit > Ctrl-A (⌘-A Mac)
    • This will select all of the instances of letters in the first frame.
    • It will also temporarily add a blue color to all the frames in the Timeline up to, but not including, the end keyframes in frame 85.
    • Note that I am not aware of what the purpose is of highlighting those frames other than it may convey that those frames are a part of the first frame in the sense that the content in frame 1 remains visible though frame 84 but not frame 85.
    The Align Panel  
    The Alignment panel showing the proper settings to make.
  46. You will now align the letters in frame 1 so that they are on top of one another.
  47. Open the Align panel: Window > Align
  48. First, enable (check) Align to stage (see illustration).
  49. Then click on the middle button in each of the two top groups of three, as indicated in the illustration, Those two top align buttons will center the letters:
    1. Relative to the vertical center of the stage.
    2. Relative to the horizontal center of the stage.
  50. The alignment puts the letters in front of one another so that they occupy the same space.
  51. All of the instances ought to remain selected, if not press Ctrl-A (⌘-A Mac).
  52. Before you continue, I suggest you temporarily zoom away from the stage so that you can see how big the letters will be for the start of the animation:
    View magnification
    Stage zoom setting
    • In the upper right corner of the stage area, beneath the Timeline, there are three buttons and a field for specifying the magnification of the stage area.
    • Manually enter how much you want to zoom back from the image.
    • I suggest 15% magnification for this.
    • Return to 100% magnification or larger when done viewing the larger letter sizes you will create in the next steps.
    • Do not confuse this with the zoom-down of the letters we will be creating.
    • This is merely a viewing tool.
  53. Next, from the menu bar select Modify > Transform > Scale and Rotate
  54. In the Scale field enter 800%
  55. The white stage area ought to be invisible now because it is covered with the enlarged, solid black letters.
    The Object tab of the Properties panel
    Letter transparency alpha settings
  56. We will now make the letters in the first keyframes totally transparent for the start of the animation.
    • When we add classic tweens (further down on this page) the result will be that the transparent letters will gradually become opaque as they move down into their final position.
  57. Press Ctrl-A (⌘-A Mac) once again to ensure that all the letter instances in frame 1 are selected.
  58. The Properties panel ought to be open, if not: Window > Properties
  59. In the Properties panel > Object > Color Effects > Alpha
  60. Use the slider to set the Alpha value to 0%
  61. The letters will now be invisible. This is temporary.
  62. Arbitrarily selected ordinary frames in each of three layers. Do not select keyframes.
    arbitrarily selected contiguous frames in all layers.
  63. Next, you will select a few of the ordinary, non-keyframes, in the top layer and drag down to the bottom layer so that you have selected a few ordinary frames in all the layers:
    • Do not include keyframes in this selection.
    • In the Timeline click and hold on a few frames anywhere in the first layer and then continue to hold down on your mouse button and drag down to the last layer.
    • You could also click an ordinary frame in the top layer, hold down Shift, then click a frame in the bottom layer to select frames in all the layers.
    • You can have more than one frame selected in each of the layers.
    • You need to have at least one frame in each layer selected but no keyframes.
  64. Right-click on any of the selected frames.
  65. In the contextual menu that appears, select: Create Classic Tween
    • A purple color with an arrow will appear in each layer to indicate there is a classic tween.
  66. You can preview your animation using Adobe Animate two basic ways:
    1. Press the Enter key (Mac: Return key). This will play the animation only once inside Adobe Animate. Repeat using that method as needed.
    2. You can use Adobe Animate to preview your animation in your browser.
      • Press Ctrl-Enter (Mac: ⌘-Return) in Animate.
      • The animation will play repeatedly because that is the default behavior. You will be limiting it to play only once later in this tutorial.
      • If you do play the animation in your browser you may get the following warning in the Output tab. As far as I know, this warning can be ignored.
      • If you do get this warning, click on the Timeline tab to return to the Timeline panel in order to continue your work.
      • The warning means that the JavaScript code used for any non-linear (not equally divided) animation speed (referred to as an "ease"- meaning it tapers the speed of the zoom-down) begins its frame count at 0. Our animation is linear.
        After you preview your animation in your browser, you may get this WARNING message in the Output tab
        (which is grouped with the Timeline panel). Be sure to switch back to the Timeline tab.
        EaselJS warning
  67. Next, you will take steps to cause each individual animated letter to start its zoom down, and also its arrival at its end position, at discrete 5 frame intervals, starting with the first letter and ending with the last.
    • This will be done so that the first letter will zoom down and arrive at its final position before the other letters do.
    • The other letters will move likewise but at increasingly delayed intervals thus staggering start and end of each letters animation.
    • Doing this will make the animation more interesting.
    • The animation at the top of this page was accomplished using this technique.
  68. To do this, you will need to do the following for each keyframe, one at a time.
    • Read the following steps first before doing them!
      • Note that you will not move the keyframe on the right end of your bottom layer.
      • To reposition a keyframe, click on the keyframe to select it, then release the mouse button. Then click-drag it to the new location you want it to be in, being sure to keep it within the same layer.
      • Move each keyframe to be in positions similar to those shown in the bottom illustration which shows the final state of my animation.
      • Each keyframe is to be moved in increments of 5 frames, move the keyframes in frame 1 to the right. Move the keyframes in the end positions to the left.
      • Please note:
        • You will not yet have the actions layer that is shown at the top of the Timeline in that illustration. That special layer will be created in subsequent steps.
        • Also, you may have a different amount of layers depending on the amount of letters in your name.
      • When done, the animations of each letter ought to be staggered in time (offset in time relative to each other).
        • That offsetting is depicted in the illustration at the end of the page.
      • Please note that when you are done, the last frame in all of the layers except the bottom layer (layer Y in the illustration) will not be a keyframe. They will be ordinary frames. At the end of each will be a little vertical rectangle them. They represent the end of the visibility of the content of that layer. In our Timeline it is frame 85.
  69. Now you will add a layer at the top of the Layers panel and add a keyframe at the end to contain some ActionScript to stop the animation from repeating.
  70. Click anywhere in the top layer.
  71. Then execute: Insert > Timeline > Layer
    • The top layer is traditionally used for containing ActionScript
    • We could add the action to an existing keyframe in our content layers. However, having a discrete layer for actions provides an easy way to locate frame actions.
  72. Double-click on the name of the new layer and change the name to actions.
  73. In the new layer, click beneath the 85 in your new actions layer.
  74. Then execute: Insert > Timeline > Blank Keyframe
    In the Actions panel, click on Add using wizard;
    in the Select and action menu select Stop
    Setting up in the last frame of the new actions layer the frame action for stopping the animation.
  75. With that blank keyframe still selected, use the menu to select: Window > Actions
  76. The Actions panel will open. This is used to help write ActionScript. It has two modes, one is totally manual and the other is an assisted Wizard mode.
  77. Near the top of the Actions panel click on: Add using wizard.
  78. The dialog box will change. There will now be a Select an action menu.
  79. Select Stop - you may need to scroll down in that menu to see it.
  80. Then the option This timeline will appear. It is a button but may not seem to be. Click on it.
  81. Then click on Next
  82. Then click on With this frame - this is also a button.
  83. Then click on Finish and add
  84. Now there ought to be a little white a in the keyframe:
    The small white a indicates that
    an action is assigned to the frame
    Close up of the frame containing the action, showing a small letter a that represents the action.
  85. When you use Ctrl-Enter (Mac: ⌘-Return) to preview the animation in your browser, the animation should stop at the last frame and not loop (keep repeating).
  86. Note that your Output panel might, once again, have the following message, which in, my experience, is safe to ignore, unless you are working on a critical site in which case you will need to use software that can test it in many different browsers, resolutions, platforms, and so forth. Prices for such software vary from very cheap to hugely expensive.
  87. WARNINGS:
    Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls.
  88. Save your file: File > Save
  89. Next, prepare to publish your work - which means to export the various files needed to make it viewable in a browser.
  90. File > Publish Settings...
  91. This will open the Publish Settings dialog box. Read instructions below.
    Publish Settings dialog box showing the settings to be made in the Basic tab.Publish Settings dialog box showing the default settings of the HTML-JS tab.Publish Settings dialog box showing the default settings of the Image Settings tab.
  92. On the left side, enable (check) JavaScript/HTML
  93. There will be three main sections to the right. Make the settings indicated:
    • Basic
      • Output Name:
        • This will be the root name of the files that get published. Use the same name as used previously: zoom-down-lastname-firstname
        • Select the folder for where you want the published files to go. Select the folder you created for this assignment that uses the same name: zoom-down-lastname-firstname
      • Make Responsive
        • This setting means that the animation will shrink or expand if the container it is in does likewise.
        • However, it will only change size if the container it is in becomes smaller than the original file dimensions. Then it will shrink gracefully and the image will remain sharp as it does.
        • Scale to fit visible area will do precisely that, usually making it much larger as in a desktop browser.
      • Export image assets
        • Enable this and accept the default settings of putting the images into an images folder that will be created within your project folder.
        • Also, leave Texture selected.
        • Note that .png files with transparency will be created for each letter in your name.
          • Those files will be named CachedBmp_1.png - the number at the end of the file name of each .png file will go up incrementally to the amount of letters you have in your name.
          • Those .png images are animated by the JavaScript file that will be created when you publish. You may want to open one or more of the images in Photoshop if you are curious.
    • HTML/JS
      • Use the settings in the illustration which, as far as I know, are the default settings.
    • Image Settings
      • Again, use the settings in the illustration which, as far as I know, are the default settings.
  94. You MUST test your animation before submitting it by opening the HTML file in a web browser. To do this:
    1. Open a new tab in your browser.
    2. Press Ctrl-O (⌘-O Mac).
    3. A file browser will open.
    4. Locate your file and select it, then open it.
    5. Be sure that the animation works before you send it to me.
  95. If it looks correct, submit your work as follows:
    1. Your exercise folder ought to contain .fla, .html and .js files and an images folder.
    2. The .fla, .html and .js files ought to have the same root name but with the three different file extensions.
    3. Compress that folder into a .zip or .rar file.
  96. The zip file ought to have the same name as the root name. If not, please change it to match.
  97. Submit the compressed file.
Below is the Timeline for this exercise in its final state - based on using my 5 letter name"DANNY"
The final state of the Timeline panel.