Animation in Flash

Estimated Time to Complete:

20 minutes

Objectives:

In this lab, you will learn how to:

Convert an animation to a movie clip.
Deal with the consequences involved in making an animation accessible.

Prerequisites:

A basic working knowledge of Flash.

Version Information:

Flash MX Professional 2004 and Flash MX only.

Files:

Introduction

In this lab, you will learn how to make your animations more accessible. Typically, animations convey little information; but sometimes, in the case of short intros or logos, an animation may relate to the content. It is up to you to determine whether or not an element conveys meaningful information.

Getting Started

To begin, you will need to create an animation that starts small and gets larger over 15 frames. Also, it is recommended to create two separate layers:

One layer that contains the animation.
Another layer that contains the text 'The Happy Hammer Company.'

To import the file:

Select the File menu, then Import.
Browse to the hammer.jpg file.
Select 'Open'.

To setup up layers:

Rename the current layer to 'Animation' by double-clicking on 'Layer 1.'
Insert a new layer by going to the Insert menu, then selecting Layer.
Rename this new layer 'Text.'
With the text layer still selected, add the text 'The Happy Hammer Company.' (See Image 12).

Image 12: Setting up the Flash Animation

To setup the keyframes:

Select the animation layer.
Right-click on the hammer image, and select 'Convert to Symbol.'
Make this a Movie Image, and name it 'Hammer_Image.'
Now, insert a keyframe in the text layer at frame 15 by right-clicking on frame 15 in the text layer, and selecting 'Insert Keyframe.'
Repeat step 4 for the Animation layer. Your timeline should look similar to Image 13.

Image 13: Timeline for the Flash Animation

To setup the animation:

Select frame 1 in the Animation layer.
Make sure the hammer image is selected.
Choose the free transform tool from the toolbar.
Hold down the Shift key, then drag the lower right-hand corner towards the middle of the image; this makes the image smaller than it was.
Select frame 7 of the animation layer, then right-click to bring up the menu and select 'Create Motion Tween.'
Select various frames of the animation layer, and you should see that an animation of a hammer getting bigger over time has been created.

Making the Animation Accessible

To make this animation accessible:

Convert the animation to a symbol.
Use the Accessibility Panel to provide text equivalence to the animation.

To convert the animation to a symbol:

Select the entire Animation layer. All the frames should turn black.
Right-click on any of the frames to bring up the sub-menu. Select 'Cut Frames.'
From the 'Insert' menu, select 'Insert New Symbol.'
Name the clip 'Hammer Animation' and make sure it is a movie clip. Then press the 'OK' button.
You will now be in symbol editing mode. Select frame 1 of Layer 1 to select it, then right-click to bring up the sub-menu. Select 'Paste Frames.' You should now see all the frames of your original animation, as well as the renaming of the layer.

You are now ready to make the animation, but it is extremely important to remember to keep the animation from looping. A looping animation causes the screen reader to start at the beginning each time the animation loops.

To stop the loop:

Select frame 15, then right-click to bring up the sub-menu, and select 'Actions.' The Actions Panel should now pop up on the screen.
In the Actions Panel, go to 'Actions' then 'Movie Control.'
Double-click the 'stop' action; this will add a small 'a' in frame 15. Your project should look like Image 14.

Image 14: Adding an action to stop the loop
Exit symbol edit mode by selecting 'Scene 1,' which is located right above the stage.

To add the animation back to the stage:

Go to the Library by pressing F11.
You should now see a symbol in the Library named 'Hammer Animation.'
Make sure the Animation layer is selected, then drag-and-drop the animation to its original position.

To Add the Text Equivalent:

With the hammer animation selected, you can now access the control panel for this item in the Properties Panel. Look on the right side for a little icon of a man.
In the name field, type 'Hammer Animation.' and in the description field type 'This animation depicts a hammer getting larger over time, which is our company logo.'

Note: Do not forget the periods at the end of the sentences. No periods cause the screen reader to run sentences together.
Normally, you will want to cover up any child objects from the screen reader, so deselect the 'Make Child Objects Accessible' checkbox. Your animation now has a text equivalent (see Image 15. ).

Image 15: Accessibility Panel to add text equivalent to animation

The next lab will discuss closed captioning.

Previous Page
Page 6:
Speaking Order

Top of Page arrow up

Page 7

Page 8:
Closed Captioning