Zoom-Down Letters Using Adobe Animate


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-letters.fla:
* AntiAlias is not supported in HTML5 Canvas document, and has been converted to CanvasFonts in an instance of Text.

Exercise Procedure

  1. Start Adobe Animate
  2. File > New > HTML5 Canvas
  3. The New Document dialog box opens.
    1. Use the default settings. They include a width of 550px, a height of 400px, and a white background color.
    2. Click OK
  4. Save the file
    1. File menu > Save ...and name the file:
      1. zoom-down-yourlastname-yourfirstname
        1. Replace yourlastname and yourfirstname using YOUR last and first names.
        2. For example, I would name my file:
      2. The file will be saved automatically in the native format of Animate which is the same as Flash's original format: .fla
        • Note that you will not be exporting a Flash .swf file for use on the web but rather an HTML and a JavaScript file that will display the animation. This precludes operating systems and browers from refusing to load the animation.
  5. As with any computer work, during the exercise save the file periodically: File > Save (or Ctrl/⌘-S)
  6. Create your name using uppercase (capital) letters using the Text tool.
    1. The text tool is the T in the Tools panel.
      1. The panel is a vertical panel and is probably on the far right. If you do not see it: Window > Tools
    2. Limit the letters you use to about seven otherwise you will have more work do to. You do not need to use your name.
    3. Use the font Arial Black (or a different common, simple font - nothing complex or overly "busy")
    4. You can change the color of the text in the Properties panel. The Character section has a Color selector.
  7. After you have created the letters, select the Free Transform tool (it's the third tool from the top of the toolbar, beneath the black and white arrow tools; hover over the tool and the tooltip will identify it).
    1. There will now be a bounding box around the outside of the word.
    2. Click and drag on the word to position it in approximately the center of the white background.
    3. Click-drag on any corner of the bounding box to increase or decrease the text size.
      1. Make the word as big as possible without going outside the edges of the white background.
  8. Modify > Break Apart
    1. This will "break" the word into individual letters.
  9. You will now put each letter on its own layer
    1. First create enough layers by clicking on the little "page" icon on the lower left edge of the Timeline.
    2. Create a layer for each letter.
    3. Cut the first letter.
    4. Select the top layer
    5. Edit > Paste in Place
      • This will paste the letter in the same position as it was when you cut it.
    6. Select the second layer.
    7. Cut the second letter and again use Paste in Place to paste it into the second layer
    8. Continue the process until every letter is in its own layer.
    9. This needs to be done because there can only be one animation per layer and we will be animating each letter independently
  10. Name each layer for the letter that it contains:
    1. Double click on the layer name and enter the single letter that is on that layer.
  11. 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.
  12. In the Timeline, carefully click and hold and drag from frame 85 in the first layer down to frame 85 in the bottom layer so that only frame 85 is selected in every layer.
  13. Press F6 (or Insert > Timeline > Keyframe in the event that F6 does not work).
    1. This will create a single keyframe for each of those frames, thus establishing the end position of the zoom-down.
    2. A keyframe is indicated with a small black circle in the frame rectangle.
    3. Keyframes are used to store information about the animation such as when it stops.
  14. You have now established the end position of your animation. Next you will modify the positions in frame one for the starting position of the animation:
    1. Click on the number 1 in the timeline.
    2. This will bring the playhead (the vertical rectangular red border) to the first frame.
  15. Open the Align panel: Window > Align
  16. Select all: Edit > Ctrl-A
  17. In the Align panel, click on the two buttons with a red outline shown in the illustration. The buttons have tool-tips if you hover over them. They are:
    1. Align horizontal center
    2. Align vertical center

  18. The alignment puts the letters in front of one another so that they occupy the same space.
  19. All of the letters ought to remain selected, if not press Ctrl-A
  20. The Free Transform tool should still be selected. If not, select it again.
  21. Drag a corner of the bounding box of the Transform tool and drag to make the letters very big, bigger than the white background area.
    1. You may need more space around the white background to be able to increase the size of the text sufficiently.
    2. Press Z to select the zoom tool.
    3. Then hold down Alt/option and click on the image to zoom out to see more area around the white background.
    4. There is also a zoom menu in the upper right of the image area that you can use.
  22. When you are done zooming, use Ctrl-A to be sure all the letters are selected.
  23. Then select the Free Transform tool again.
  24. The Properties panel ought to be open, if not: Window > Properties
  25. In the Color Effect section of the Properties panel select Style > Alpha
  26. Use the slider to set the Alpha value to 0%
  27. The letters will now be invisible. This is temporary.
  28. In the Timeline click and hold on any frame or frames in the first layer and drag down to the last layer. You can select more than one frame in each layer as you drag. But do NOT include the first or last frames (the keyframes).
    1. You can have more than one frame selected in each layer.
    2. You need to have at least one frame in each layer selected.
  29. Right-click on any of the selected frames.
  30. Select: Create Classic Tween
    1. A lavender color with an arrow ought to appear in each layer between the layer's keyframes.
  31. You can preview your animation by pressing the Enter (Mac: Return) key.
    1. You can preview your animation in your browser by pressing the Ctrl (⌘ Cmd) and the Enter (Return) keys at the same time.
  32. Next, you will take steps to cause each individual animated letter to start its zoom down, and also arrive at its end position, at discrete intervals.
    1. This will be done so that the first letter will zoom down, and also arrive at its final position, before the other letters do.
    2. The subsequent letters will follow likewise at increasingly delayed intervals.
    3. Doing this will make the animation more interesting.
  33. To to this, for each and every keyframe, one at a time:
    1. First, please familiarize yourself with the following steps: read each of the steps in this section before you execute them. Then do the steps.
    2. Click to select any keyframe and release the mouse button.
    3. The frame will now appear selected.
    4. Then, click again on that selected keyframe, but now continue to press down the mouse button and simultaneously drag the keyframe sideways to the right within the same layer (not up or down!) until the keyframe position is similar to what you see in the illustration at the bottom of this page.
    5. Using the same technique, reposition each of the remaining keyframes to be similar to the illustration.
      • However, you will not yet have the Actions layer that is at the top. That special layer will be created in subsequent steps.
    6. Your individual letters' animations are now staggered (offset relative to each other) as depicted in the illustration below.
  34. Select the top layer.
  35. Click the last frame of the top layer to select that last frame.
    1. In the illustration below, the second layer is the equivalent of your current first layer. Again, the Actions layer you see in the illustration will be created in subsequent steps.
    2. Note that the last frame in that layer (the D layer in the illustration) is not a keyframe, but it has a little vertical rectangle in it. That would be the frame to select in your top layer.
  36. Window > Actions
    1. The term Actions refers to ActionScript, the scripting language used by Adobe Animate.
  37. In the upper right part of the Actions panel there is a pair of angle brackets < >
    1. If you hover over the angle brackets a tooltip will appear indicating that it is the Code Snippets button.
  38. Click on the angle brackets < > button. The Code Snippets panel will open.
    1. Code Snippets is a library of commonly used script code that can be added to the file easily by double-clicking an item in the panel.
    2. We want the last frame to stop the animation which will otherwise Loop - which means to play repeatedly without stopping. Continue below...
  39. Use the triangular arrow toggle to open the HTML5 Canvas folder.
  40. Then open Timeline Navigation
  41. Double click on Stop at this Frame
  42. You will see the code that has been inserted.
  43. Also, a new Actions layer has been created above the existing timeline layers.
  44. Look closely at the last frame in that layer and you will see a small a which indicates that a frame action has been placed there.
  45. Save your file: File > Save
  46. File > Publish Settings...
  47. In the Publish Settings dialog box select: PUBLISH: JavaScript/HTML
  48. Click Publish
  49. Animate will create an html and a JavaScript file in the same folder as the .fla file that you are currently working with.
  50. Open the html file in your browser: Ctrl-O
Below is the timeline in its final state.