Zoom-Down Letters Using Adobe Animate CC 2019


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. Note that I recommend that you use a lighter interface because the timeline frames may be difficult for you to see with the darker interface settings:
    1. Make this menu selection:
      Windows: Edit > Preferences
      Mac: Animate > Preferences
    2. In the Preferences dialog box: User Interface > ...then try the different interfaces to select the one you want to work with. My personal preference is Lightest because it provides the most contrast.
  3. Then select in the menu at the top right of the interface Classic. That is my preference.
  4. File > New > ...the New Document dialog box will open.
  5. Make the following settings:
    1. Select Web at the top.
    2. In the Details section on the right side make the following settings:
      1. Width 550
      2. Height 400
      3. Platform Type: HTML5 Canvas

  6. Click Create
  7. Save the file
    1. File menu > Save
    2. Select a folder where you will be able to locate it when you are done.
    3. 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 the traditional Flash format: .fla
  8. As with any computer work, during the exercise save the file periodically: File > Save (Ctrl-S / ⌘-S)
  9. Enter your first (given) name using the Text tool as follows:
    1. First, decide on what form of your name you want to use.
      1. Limit the letters you use to no more than about seven otherwise you will have to do more work than required.
      2. You do not need to use your exact name. You can use your familiar name. For example, my name is, formally, Daniel. But my friends call me Dan or Danny. I could use any of those. But if my name were Alexander I may want to use Alex.
    2. Find the Tools panel. It is a vertical panel and is probably on the far right.
      1. If you do not see it, open it using: Window > Tools
    3. Select the text tool: it is the T in the Tools panel. Click on it to select it.
      the text tool selected in the tools panel
    4. Before you begin to enter your name, Select a font, font size, and color using the Properties panel, which will probably be on the right side. If you do not see it, use Window > Properties to open the panel.
      1. For the font, please use a common font and not anything exotic. For example, Arial or Times New Roman.
      2. I recommend using bold text.
      3. Set the size to about 50.
        • To set the size, double click on the current value (probably 12) and type in 50.
        • Don't be concerned with the size now. The size can be easily adjusted later using subsequent instructions.
      4. You can also select a color for the text in the Character section of the Properties panel.
    5. Now type in your name.
  10. After you have created the letters, select the Free Transform tool. It is the third tool from the top of the toolbar, beneath the black and white arrow tools. As with all tools, you can hover over the tool and a tooltip will appear identifying it.The free transform tool selected in the tools panel
    1. There will now be a bounding box surrounding your name.
    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.
      • Adjust the size of the name to be as big as possible without going beyond the edges of the white background.
  11. Modify > Break Apart
    1. This will "break" the word into individual letters.
  12. You will now put each letter on its own layer
    1. First create enough layers by clicking on the little "page" icon on the top left edge of the Timeline panel.
    2. Create a layer for each letter.
      • For example, if your name was Jimmy you would need to add four more layers.

    3. Select the first letter.
    4. Cut it using Ctrl-X or, on a Mac ⌘-X
    5. Select the top layer
    6. Edit > Paste in Place
      • Using Paste in Place will paste the letter in the same position as it was when you cut it.
      • Do not use Paste because it will paste the letter in to the center.
    7. Select the second layer.
    8. Cut the second letter and again use Paste in Place to paste it into the second layer.
      • Be certain that you have selected the second layer before you do.
    9. Continue the process until every letter is in its own layer.
    10. Name each layer for the letter that it contains:
      • Double click on the layer name and enter the single letter that is on that layer.
      • If you have more than one of the same letter, add a 1 or 2 after the name as in the example below.
    11. Each letter needs to be on its own layer because there can only be one animation per layer and we will be animating each letter independently
      • Check that there is only one letter per layer by clicking the black dot in the layer in the "eye column" to turn off the visibility of the content of the layer. The proper letter ought to disappear. Then click on the "X" to restore the layer visibility.
      • For example, if you want to be sure that the first letter is in the top layer, turn its visibility off and on.

  13. 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.
  14. In the Timeline, carefully click, 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.

  15. 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 a frame rectangle.
    3. Keyframes are used to store information about the animation such as important positions used to calculate (interpolate) the frames between keyframes.
  16. You have now established the end position of your animation. Next you will modify the positions in frame one to establish the starting position of the animation:
    1. Click on the number 1 in the timeline.
    2. This will bring the playhead (a reddish indicator) to the first frame.
  17. Open the Align panel: Window > Align
  18. Select all: Edit > Ctrl-A
  19. 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

  20. The alignment puts the letters in front of one another so that they occupy the same space.
  21. All of the letters ought to remain selected, if not press Ctrl-A
  22. From the menu bar select Modify > Transform > Scale and Rotate
  23. In the Scale field enter 600%
  24. Press Ctrl-A to ensure that all the letters are selected.
  25. Then select the Free Transform tool again.
  26. The Properties panel ought to be open, if not: Window > Properties
  27. In the Color Effect section of the Properties panel select Style > Alpha
  28. Use the slider to set the Alpha value to 0%
  29. The letters will now be invisible. This is temporary.
  30. 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.
    1. Do NOT include the last frames (the end keyframes) in the selection.
    2. You can have more than one frame selected in each layer.
    3. You need to have at least one frame in each layer selected.
  31. Right-click on any of the selected frames.
  32. Select: Create Classic Tween
  33. You can preview your animation in Adobe Animate by pressing the Enter key (Mac: Return key). This will play the animation only once, but you can press the Enter/Return key again and again to play it as many times as you like.
  34. 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, starting with the first letter and ending with the last.
    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 do likewise at increasingly delayed intervals thus staggering the animations.
    3. Doing this will make the animation more interesting.
    4. The animation at the top of this page was accomplished using this technique.
  35. To do this you will need to do the following for each and every keyframe, one at a time: Before you begin please read each of the steps in this section. After reading the steps, execute them.
    1. Click to select the first, left-most keyframe in the top layer, which is the layer containing the first letter of your name.
    2. Then release the mouse button.
    3. The frame will now appear selected – but very subtly.
    4. Then, click again on that selected keyframe, but now continue to press down your mouse button and simultaneously drag the keyframe sideways (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.
      • However, note that you will not yet have the Actions layer that is shown at the top of the illustration. That special layer will be created in subsequent steps.
    5. Using the same technique, reposition each of the remaining starting and ending keyframes to be similar to the illustration at the end of this tutorial.
    6. If you want to reposition a keyframe, click on that keyframe to select it, then release the mouse button, then click-drag it to the location you want, being sure to keep it within the same layer.
    7. 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.
    8. Please note that when you done, the last frame in all of the layers except the bottom layer (layer Y in the illustration) is not a keyframe. It has a little vertical rectangle in it. That frame represents the end of the visibility of the content of that layer. In this case it is frame 85.
  36. Move the playhead (the reddish vertical marker in the frame numbers row) to the last frame, 85.
  37. From your menu select: Window > Actions
  38. In the upper right part of the Actions panel there are a pair of angle brackets < >
    • If you hover over the angle brackets a tooltip will appear indicating that it is the Code Snippets button.
  39. 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 your by simply double-clicking an action in the panel.
    2. We want the last frame to stop the animation, which would otherwise Loop - which means to play repeatedly without stopping.
  40. Use the triangular arrow toggle to open the HTML5 Canvas folder.
  41. Then open Timeline Navigation
  42. Double click on Stop at this Frame
    1. You will see that a /* comment */ describing what the action does has been added.
    2. Beneath it is the script that stops the animation: this.stop();
    3. This code will stop the animation when the last frame has been reached during playback. This prevents the animation from eternally looping.
  43. Close the Actions and the Code Snippets dialog boxes.
    1. Note that a new Actions layer has been created above the existing timeline layers.
    2. 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 in that frame.
  44. Save your file: File > Save
  45. Next: File > Publish Settings...
  46. In the Publish Settings dialog box, beneath the word PUBLISH, enable (check) JavaScript/HTML
  47. Click Publish then OK
  48. Animate will create an HTML (.html) and a JavaScript (.js) file in the same folder as the .fla file that you are currently working with.
  49. Open the html file in your browser suing: Ctrl-O
Below is the timeline in its final state.