Creating an animation with playback controls

Before using this lesson, you should be acquainted with the timeline, frames, keyframes, drawing shapes, modifying objects, symbols, and symbol instances.

Animations can be of two types: frame-by-frame, and tweened.

Frame-by-frame animations are similar to creating a flipbook animation, where the drawing on each page is incrementally different from the page that proceeds it. When you flip through the book rapidly, your drawing appears to move. Frame-by-frame animations are created the same way, except frames in the timeline take the place of pages in the flipbook. Frame-by-frame animations require little explanation, and usually, considerable drawing skill.

Tweened animations are more likely to be of use to instructional designers. A tweened animation is one in which you create a beginning state and an ending state for an object, and Flash determines the changes that need to be made to change from one to the other in the number of frames that you allow for the transition.

This lesson will cover the basics for motion and shape tweens. If you would like more detailed information, see Tweened animation.

The lesson will also discuss how to create buttons to control the playback of your animation. Try out the sample animation below.

Download the sample file: animation.zip (20 KB).

To create a motion tween:

Motion tweens can be used for moving objects from point to point; for scaling objects up and down; for transitioning between different visual effects: alpha, tint, brightness.

Create a beginning state symbol instance (graphic, movie clip, button).
Insert a new keyframe (F6, or Alt/Opt-drag).
Modify the instance on the new keyframe (scale, move, change visual effect).
Click in the frames between the two keyframes. Insert a motion tween (right-click and choose Create motion tween or choose Motion tween in the Properties panel).

To create a shape tween:

Shape tweens can be used to "morph" shapes or to change colors of shapes directly.

Draw a shape. Do not convert to symbol.
Insert a new keyframe.
Modify the shape on the new keyframe.
Insert a shape tween on the timeline between the keyframes (right-click and choose Create shape tween or choose Shape tween in the Properties panel).

Shape hints mark points on a shape to guide the tween. To use shape hints:

Select the keyframe of the beginning state of the shape.
Choose Modify > Shape > Add Shape Hint.
Move the red shape hint to a point on the shape. The shape hint will turn yellow when it touches a point on the shape.
Repeat steps 2 and 3 until you have as many shape hints as you desire.
Select the keyframe of the ending state of the shape.
Move the shape hints to corresponding points on the ending shape. The shape hint will turn green when it touches a point on the shape.
Play the animation to see the results. Adjust the shape hints as necessary.

To create playback controls:

In the example ActionScript below, you will see lines marked with "//" and highlighted. These lines are comments, which explain the purpose of the preceding line of script.

Create play, pause, stop buttons on new layer. Draw the buttons, convert them to symbols (buttons), and name the instances on the main timeline (play_btn, pause_btn, stop_btn).

Script the buttons and timeline.

Insert an "actions" layer. Insert this script on the first frame.

stop();
play_btn.onRelease = function() {
// when the play button is clicked
	play();
	// play the main timeline
}
pause_btn.onRelease = function() {
// when the pause button is clicked
	stop();
	// stop the main timeline
}
stop_btn.onRelease = function() {
// when the stop button is clicked
	gotoAndStop(1);
	// move the playhead to frame 1 (back to the beginning of the animation) and stop
}

To create skip back and skip forward controls:

Skip back/forward controls are appropriate when your animation more than one section, as, for instance, in an animation with several steps.

Label the keyframes in which each step begins.
Create skip buttons. For a stepwise animation, you can use numbered buttons, or skip back/skip forward buttons, or both.

Script the buttons.

For numbered buttons, have each button skip to the appropriate step:

step1_btn.onRelease = function() {
// when the button instance named "step1_btn" is clicked
	gotoAndPlay("step1");
	// move the playhead to the frame labeled "step1" and play the animation
}

For skip back/skip forward buttons:

Create a variable to keep track of which step is playing.
stepplaying = 1;
In each labeled step keyframe, reassign the variable to the new step.
stepplaying = 2;

Script the skip buttons.

previous_btn.onRelease = function() {
// when the button instance named "previous_btn" is clicked
	skipNum = stepplaying - 1;
	// create a skip number variable that is one less than the current step
	if (skipNum > 0) {
	// if this skip number is larger than 0 (the current step is greater than 1),
		skiptostep = "step" + skipNum;
		gotoAndPlay(skiptostep);
		// move the playhead to the previous step
	}
}
next_btn.onRelease = function() {
// when the "next_btn" is clicked
	skipNum = stepplaying + 1;
	// create a skip number variable that is one greater than the current step
	if (skipNum <= 3) {
	// if this skip number is less than or equal to the total number of steps,
		skiptostep = "step" + skipNum;
		gotoAndPlay(skiptostep);
		// move the playhead to the next step
	}
}

HTML and Flash for Instructional Designers

Technical Instruction for R541 Students