Getting Flash right the first time - detailed instructions

[Why?]

[How?]

[To create a presentation ]

[Making a movie accessible ]

[Changing the speaking order of elements ]

[Adding text to the image ]

[Converting an animation to a movie clip ]

[To make this animation accessible ]

[References]

If you are interested in making your Flash presentations accessible, it is highly recommended that you purchase or upgrade to Flash MX, as Flash content created with versions 5 and earlier is not accessible.

When you design Flash presentations, you should be familiar with the basic accessibility issues in Flash and strive for usability for all, however, as having Flash MX does not guarantee that your presentation will be completely accessible; poor design can create as many obstacles as inaccessible elements.

Why?

Students with cognitive disabilities need to be able to view the information at a slower rate and as many times as possible.
Students with motor skill limitations need to be able to access presentations that do not require precision, so elements need to be large rather than too close together.
Students with a visual impairment need to be able to access text equivalents of images, buttons and text fields that are properly sized and spaced, and text with sufficient contrast and size, just to name a few.
Students with a hearing impairment need captions wherever a Flash presentation contains audio.
Students with some types of disability (colour deficient vision, poor vision, dyslexia) may not see colours clearly, so avoid using colour to convey meaning, such as Click on the Red button Note: ten percent of men are colour-blind.

[return to index]

How?

A basic working knowledge of Flash is required:

[return to index]

To create a presentation

Start Flash MX.
Create a new file.
Select the File menu.
Select import to begin importing the images.
Browse to the directory containing the images (i.e. .jpg's, .gif's, etc) you wish to import.
Select the first one and press the Open button.
Slide this image to the upper left part of the stage.
Repeat the process for the second image.
Slide the second image below the first image.
Add some static text to the right of both images.
Add some more static text underneath the above text.
Select the image using the arrow tool, then right-click on the image.
Select from the submenu Convert to Symbol.
For the behaviour, select Movie Clip from the Convert to Symbol dialogue box.
Give it an appropriate name.
Press the OK button.
If the Properties Panel isn't showing, press Ctrl + F3.
Select the image that you created in the previous step.
Select the icon of a little man in the properties window on the right-hand side.
You should now see the Accessibility Panel, and how the Make Object Accessible checkbox is selected, allowing you to type in a descriptive name.
Deselect Make Child Objects Accessible.
Type in the name to briefly (one or two short sentences) describe the object, then
Type in the description (longer than the name).
Leave the shortcut blank.
Close the dialogue box.
Give it an appropriate name.
Press the OK button.

[return to index]

Making a movie accessible

Deselect all elements by selecting in a blank space somewhere on the stage, such as the upper-left or lower-right part of the screen.
In the Properties Panel select the accessibility icon, the same way you did for the first image.
For this slightly different dialogue box, make sure the Make Movie Accessible checkbox is selected, as well as the Make Child Objects Accessible
Ensure the Auto-Label checkbox is unchecked.
Type in the name field.
Type in the description field.
Close the dialog box.

[return to index]

Changing the speaking order of elements

Understanding this technique provides a logical audio layout to your presentation, which is especially important when the objects on your screen do not generally flow top to bottom, left to right.

Import the first and second images, as you did in the previous section.
Open the Accessibility Panel.
Give the first image the name you did in the previous section and then the description, also as previously done.
Hide the second image by deselecting the Make Object Accessible checkbox.

[return to index]

Adding text to the image

Add the first-half of the text (that you entered in the previous section for static text) to the top of the screen.
Add the other-half of the text (that you entered in the previous section for static text) to the bottom of the screen.
Ensure both text elements are either dynamic or static by changing them in the Properties Panel.
Ensure all elements have a name, including the text, which can be changed in the Properties Panel. For this example, change the name of the two text elements, placing an underscore (i.e. "_") between each word of both.
Now, to begin changing the order, first, start by adding an action layer to your movie. This will also help organise your presentation.
In the action layer at frame 1, add a stop command by selecting frame 1, then in the Actions Panel, select Action, Movie Control, then double-click on stop.
Below the stop command, select in the code window.
Choose the target button which is highlighted in the image above, which will bring up a dialogue box.
Select the element whose order you wish to change. Since the text at the top of the screen should be the first thing read, select that text element, ensuring that the Dots and the Absolute checkboxes are selected.
Choose OK.
Some code should now appear below the stop code. It should say something like _root…_... (the top of the screen text with the underscore). All that is necessary now is for you to append the text .tabindex = 1;. So the total piece of code should read _root. (the top of the screen text with the underscore).tabindex = 1;. This has now assigned the screen reading priority of "the top of the screen text with the underscore" text element to 1.
Repeat Steps 2 to 5 for the text element to the bottom of the screen, assigning it the value 2.
Repeat Steps 2 to 5 for the movie clip, assigning it the value 3.

[return to index]

Converting an animation to a movie clip

Select the File menu, then Import.
Browse to the first image file.
Select Open.
Double-click on Layer 1 and rename the current layer to Animation.
Go to the Insert menu and select Layer, to insert a new layer.
Rename this new layer Text.
With the text layer still selected, add the appropriate text.
Select the animation layer.
Right-click on the image and select Convert to Symbol.
Make this a Movie Image, and name it.
Insert a keyframe in the text layer at frame 15 by right-clicking on frame 15 in the text layer, and selecting Insert Keyframe.
Then repeat this step for the Animation layer.

[return to index]

To make this animation accessible

Select the entire Animation layer, making all the frames 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 … Animation, ensuring it is a movie clip.
Press the OK button.
In the symbol editing mode, select frame 1 of Layer 1 to select it.
Right-click to bring up the sub-menu.
Select Paste Frames, which should show all the frames of your original animation, as well as the renaming of the layer.
Select frame 15, then right-click to bring up the sub-menu.
Select Actions.
In the Actions Panel, go to Actions then Movie Control.
Double-click the stop action; this will add a small a in frame 15.
Select Scene 1, located right above the stage, and exit symbol edit mode.
Press F11.
You should now see a symbol in the Library named … Animation (that you named earlier).
Select the Animation layer, then drag-and-drop the animation to its original position.
With the … 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 … Animation. and in the description field type This animation depicts a …. Note: Don't forget the periods at the end of the sentences. No periods causes screen readers to run sentences together.
Deselect the Make Child Objects Accessible checkbox. Your animation now has a text equivalent.

[return to index]

References

Mueller, John Paul. "Accessibility for Everyone: Understanding the Section 508 Accessibility Requirements"

W3C Web Accessibility Guidelines: http://www.w3.org/WAI/

Section 508 Requirements: http://www.section508.gov/index.cfm?FuseAction=Content&ID=12

Bobby Validation Tool: http://bobby.watchfire.com/bobby/html/en/index.jsp

W3C Web Accessibility Initiative Curriculum for Web Content Accessibility: http://www.w3.org/WAI/wcag-curric/

Dive Into Accessibility: 30 Days to a More Accessible Web Site: http://www.diveintoaccessibility.org/

Access IT Knowledge Base Q & A on distance learning: http://www.washington.edu/accessit/faqs.php?Button=QA

[return to index]