Skip to Page Content

Chris Cassell Dot Net

• Home
• Log
• Portfolio
• Projects
• Classes
• Contact

• GDT 260 Home
• Class Information
• Assignments
• Notes & Handouts
  • September 3
  • September 8
  • September 10
  • September 15
  • September 17
  • September 24
  • September 29
  • October 8
  • October 13
  • October 15
  • October 20
  • November 3
  • November 5
• Student Work

GDT 260 Animation for the Web: Fall 2003

Notes & Handouts September 24

Motion Tweening

• keyframe — in-between frames — keyframe
• Motion tweens: move objects around stage, change properties
• Shape tweens: morph shapes
• Motion tweens only work on symbols or groups
• Each object that's moving needs to be on its own layer

Applying a Motion Tween

1. Place content on stage, either a symbol or a group
2. Create an end keyframe and move the object where it should end up
3. Select a frame between the keyframes
4. On the Properties panel, select "Motion" tweening

A dotted arrow in the timeline means your tween is not working.

Scaling

Motion tweening can change size of objects.

Ensure that "Scale" checkbox is checked on Frame panel

Rotation

On Frame panel, Rotate dropdown has four options:

• None
• Auto
• CW (clockwise)
• CCW (counter-clockwise)

If you rotate your object at one keyframe, "Auto" rotates the simplest direction. CW forces clockwise rotation, CCW, counter-clockwise. To change the number of times the object rotates, put a number in the "times" box.

Easing

Easing controls acceleration and deceleration

• Easing in (negative value) starts slow, accelerates
• Easing out (positive value) starts fast, slows down

Onion Skinning

Onion skin buttons at bottom of timeline allow you to see multiple frames at once. The buttons are:

• Onion Skin
• Onion Skin Outlines
• Edit Multiple Frames
• Modify Onion Markers
  • Always Show Markers
  • Anchor Markers
  • Onion 2
  • Onion 5
  • Onion All

Dragging the markers at top of timeline controls which frames are showing in the onion skin.

Editing Multiple Frames

Markers indicate which frames are being edited. This is ideal for fine-tuning complex animations and moving an entire animation at once.

Tweening Effects

Any of the effects from the Color dropdown menu on the Properties panel can be tweened between keyframes. Effects can only be applied to symbols, not groups.

Motion Guides

Paths for objects to follow while moving through a motion tween.

1. Make sure Snap to Objects is on
2. With your tween layer selected, Insert > Motion Guide
3. Draw a line for the object to follow. Make sure that the ends are reasonably close to the start and end point of the motion
4. Drag the center/ registration point of the object and snap it to the motion guide at each keyframe
5. Apply the motion tween

The tweened object's registration point must snap to the motion guide at each keyframe, otherwise it won't follow the path. The motion guide must exist through every frame that the tween runs.

In-class Assignment

Create an animated banner ad for Apple’s iTunes Music Store. The idea of the store is that you can buy songs for 99¢ and download them directly into iTunes. Use whatever text and images you’d like. The stage size of the banner should be 468x60 and your animation probably shouldn’t last more than 15-20 seconds (just a rule of thumb). Decide whether it should loop or not and set the option in your publish settings. Turn it in via your webspace.