Getting Started with Timeline and Symbols
Graphic symbols, Movie Clips, and Classic Tweens in Adobe Animate.
Step 1: Interface and New Document
Open Adobe Animate and create a new HTML5 Canvas document if your goal is web export — it offers flexible output for modern workflows. Set width to 1920, height to 1080, and frame rate to 24 fps for standard film timing.
Learn the main panels: Stage for drawing, Timeline for frames and layers, and Library for saved symbols. Rename Layer 1 to background, add an object layer, and save the .fla file before you animate — the source file is your master archive.
Step 2: Draw and Convert to Symbol
Draw a circle with the Oval Tool, set fill color, and select it. Press F8 or choose Modify > Convert to Symbol. Name it Ball and choose Graphic Symbol with center registration for natural rotation and motion.
Symbols live in the Library. Drag from Library to Stage to create instances. Double-click an instance to edit the symbol definition — changes there update all instances. Click Scene 1 in the breadcrumb to return to the main timeline.
Step 3: Classic Tween on the Timeline
Place Ball on the left at frame 1. Go to frame 30, insert a keyframe with F6, and move Ball to the right. Select the tween span and create a Classic Tween. Press Ctrl+Enter to preview.
Adjust Ease in the Properties panel for natural acceleration and deceleration. Shape Tween morphs between raw shapes on one layer; Classic Tween moves symbols and is the best starting point for object animation.
Step 4: Movie Clip and Nested Animation
Convert Ball to a Movie Clip or duplicate as Movie Clip type. Movie Clips have independent timelines that can loop while the main scene continues — ideal for spinners, idle loops, and nested motion.
Inside the Movie Clip, tween scale from 50% to 100% over 15 frames while the main timeline moves the clip across Stage. You get combined motion: travel plus internal pulse. Graphic symbols sync with the main timeline; Movie Clips run on their own clock.
Step 5: Onion Skin and Timing
Enable Onion Skin to see ghost frames before and after the current frame. This helps you judge spacing and avoid robotic linear motion. Use pose-to-pose workflow: key poses first, then breakdown frames between them.
Hold frames — duplicate keyframes with no change — add anticipation before big moves. Set a Work Area on the timeline to loop-test a short segment quickly instead of playing the entire file every time.
Step 6: Save and First Export
Save the .fla with a clear name such as lesson01_ball.fla. Test Movie previews output; detailed web and video export settings are covered in a later tutorial.
Organize the Library into folders and delete unused assets. Final exercise: compare a Graphic symbol with position tween against a Movie Clip with internal rotation — note when each type fits best.
FAQ
Graphic Symbol or Movie Clip?
Use Graphic for animation synced to the main timeline and direct stage preview. Use Movie Clip for independent loops, nested animation, and interactive or repeatedly playing elements like loading icons.
Classic Tween or Motion Tween?
Motion Tween is object-based with editable motion paths in newer Animate versions. Classic Tween is legacy but simple for start/end keyframes. Pick one approach per project and stay consistent.
Which frame rate should I use?
24 fps feels cinematic, 30 fps is common for web and TV, and 12 fps suits stylized limited animation. Keep frame rate consistent across the project unless you have a deliberate artistic reason to change it.