DIGI 260 - Lab 03 Home

Timeline Animation
Working with Properties

  1. Create a new Animate Document - HTML5 Canvas - and save it in a sensible location on your computer. Modify the Document Properties. Change the Background colour and the Stage Dimensions to something other than the default. Set the Frame Rate to 15fps.

  2. Create a character; use whatever tools you like. Try to make your character have some recognizable features such as eyes or a mouth, and some appendages such as arms or legs. As you build your character, place each body part on a separate Layer, and name each Layer appropriately. When you're finished, regardless of what your character looks like, your timeline should look something like this:

    layers for each body part

  3. Next we'll turn each body part into a Symbol. A Symbol is a reusable element in Animate. Whenever you think you might need a graphic more than once, perhaps in different sections of an animation, or different parts of a website, turn that graphic into a Symbol. (It isn't just easier, it's also more efficient, as the software gets to reuse the vectors as well.)

    Lock all the Layers except for one, and select the body part on that Layer. Be sure to select all the components of the body part, all the Strokes and Fills. With all that selected, choose Modify > Convert to Symbol... Give an appropriate name to your Symbol, and click OK. This Symbol should now appear in the Library panel. Repeat this for each of the other body parts. When you're finished, your Library should look something like this:

    shot of body parts in the Library

    Notice that the Library tells you how your Symbols have been used. If you see anything in your Library with a "Use Count" of 0, you can and should delete it, as it's only taking up space!

  4. Now comes the fun part, the animation! If you right-click or control-click on a frame in the Timeline, you get a contextual pop-up menu for the timeline which looks like this:

    shot of the contextual menu for the timeline

  5. If you choose either Insert Frame or Insert Keyframe, whatever content is on the current Keyframe will be repeated. The difference is that content on Keyframes (the frames with little dots in them) can be modified, and content on regular Frames is static. Frame-by-frame animation is created by having a sequence of Keyframes, with slightly different content on each of those frames. If you want the content to sit still for a period of time, you only need a regular Frame.

  6. Create a short animation of your character moving on the spot: walking, hovering, jumping, undulating, etc. You may wish to use a combination of frame-by-frame and tweening animation to make this happen. Your animation and timeline might look something like this:

    bot walk cycle

    bot walk cycle timeline

    There aren't many frames required, but you might need some fine tuning to make your animation seem natural. Think about some of those animation principles: gravity, squash and stretch, etc.

  7. In the timeline, select and copy all the frames which contain that animation. Use the timeline's contextual menu.

  8. Choose Insert > New Symbol... Select the Movie Clip type. Name the Symbol after your character. When you use this command, the Symbol appears in the Library, and you enter Symbol Editing Mode. This can be confusing, as it looks as though your whole timeline has disappeared, and your Stage is empty! In the picture below, I'm editing a Symbol called "bot".

    As the above picture suggests, choose the empty frame in that new timeline, and paste. Animate recreates all the layers and frames in the new timeline. To return to the main timeline (which is called "Scene 1"), choose Edit > Edit Document, or press Command/Control-E. You can now safely delete all the Layers there, as your animation is inside a Symbol.

  9. Create a new Layer in the main timeline. Drag a copy of the character you created from the Library to the Stage. This copy of the character is called an Instance. If you check in the Properties panel, it will confirm this:

    You can Test Movie to see the animation pretty much the same as before.

  10. Now that you have a Symbol on the main timeline, you can animate it the same as you would with any other Symbol. Create a Tween or Classic Tween and make your character move around the Stage. Your timeline looks simple, as the complex animation is hidden, Nested, inside a Symbol.

    If you like, you can now go back to any of the Symbols in the Library and modify them, or add nested animation; they'll be updated whenever they're used in the main timeline.

  11. Create some other moving elements on the main timeline to be part of your animation. Your character could be moving through its environment, in which case the character and environment might both move, or the environment might just move by while the character walks on the spot. Your character could also meet another character, perhaps another version (Instance) of itself!

When you choose Test Movie from the Control Menu, you produce a number of files which are stored, by default, in the same place as your .fla file. Place copies of your .fla and other files in a folder named with your first and last names, and the number of the lab. .zip this folder and upload it using the D2L page for the labs. Don't forget to have fun!

This lab is worth 10 marks. This lab is due at the beginning of next class.