Go to Module: - Select Module - 1 -- Disabilities 2 -- Access Plan 3 -- Powerpoint 4 -- Video 5 -- Flash 6 -- Word 7 -- Excel 8 -- PDF 9 -- HTML 10 -- Scripts/Java

Flash
Page 6 of 11

1. Introduction
2. Files You Need
3. Interface of Flash MX
4. Accessibility Issues
5. Text Equivalents
6. Speaking Order
7. Animation
8. Closed Captioning
9. Publish to Blackboard
10. Publish to WebCT
11. Resources

Speaking Order of Elements in Flash

Estimated Time to Complete:

30 minutes

Objectives:

In this lab, you will learn:

• How to change the speaking order of elements in Flash MX Professional 2004.
• How to change the speaking order of elements in Flash MX using ActionScript.

Prerequisites:

A basic working knowledge of Flash and completion of the previous page: Text Equivalents in Flash.

Version Information:

Flash MX Professional 2004 and Flash MX only.

Files:

• smiley.gif (, 3 KB)
• hammer.jpg (, 4 KB)
• Example of the finished .html file (, 1 KB)
• Example of the finished .fla file (, 28 KB)

Introduction

One thing that you must consider is the order in which things are read by the screen reader. Elements are not guaranteed to be read top to bottom, or left to right; therefore, there is no guarantee as to how a screen reader will behave. It is trivial to order elements in Flash MX Professional 2004 using the TabIndex field in the accessibility panel but with Flash MX you will use a small amount of ActionScript. It is simple to write ActionScript even if you do not have prior programming experience because the amount of code you have to type is only about 12 characters per object. Again, if you have not downloaded a screen reader, you will want to go ahead and do that here. (JAWS from Freedom Scientific)

Getting Started

Creating the Setting and Adding Images

Assume that you are still working for the "Happy Hammer Company" from the previous lab, yet they did not like our previous design. Instead of having the hammer and smiley face images on the side, they would prefer them in the middle, with "The Happy" at the top, and "Hammer Company" at the bottom (see Image 7).

This re-design has forced you to break the text into two separate elements, and this is what causes a speaking order problem.

To Begin:

1. Import the hammer and smiley image.
2. Open the accessibility panel.
3. Give the hammer image the name 'A hammer hitting a nail.' and the description of 'This image depicts a hammer hitting a nail, which is our company logo.'
4. Hide the smiley image from the screen reader by deselecting the 'Make Object Accessible' checkbox. .

Adding the text

Now that you have added the two images, it is time to add the text. Two very important things need to happen for you to correctly change the reading order of elements on the screen:

• Make sure all text is either dynamic or input text.
• Every piece of text, every movie clip and button must have a name.

Knowing this, you can now add your text, making sure that it is either dynamic or input, and checking to make sure that your images have names, which they should from the previous step.

To add text to an image:

1. Add the text 'The Happy' to the top of the screen.
2. Add the text 'Hammer Company' to the bottom of the screen.
3. Make sure both text elements are either dynamic or static by changing them in the Properties Panel (see Image 8).
4. Make sure all elements have a name, including the text, which can be changed in the Properties Panel. In this example, change the name of the two text elements to 'The_Happy' and 'Hammer_Company'. The image of the hammer is named 'Hammer', and the name of the smiley image is 'Smiley.'

   
   Image 8: Property Panel for Text with type (Dynamic Text) and name of text (The_Happy)

Before you change the order, you should check and see how our presentation would be read by a screen reader. Notice how the order in which the elements are being read is shuffled.

• Listen to a screen reader interpreting a Flash file with incorrect reading order (, 618 KB)
• Or, read the transcript of a screen reader interpreting a Flash file with incorrect reading order (, 1 KB).

Changing the Order

Flash MX Professional 2004:

1. Click on the first object that has to be read by the screen reader. In our example that is ‘The_Happy’ dynamic/input text.
2. Bring up the accessibility panel (Alt + F2) and type 1 in the TabIndex field.
3. Now click on the next object to be read which is ‘Hammer_Company’.
4. Now type 2 in the TabIndex field of the accessibility panel and so on for the rest of the elements in the order that they must be read. (see Image 9)
   
   

   Image 9: Setting the value of the TabIndex field.
   
   

Flash MX:

Adding a New Layer

Once all the text has been converted to dynamic or input text, and all elements have a name (including the text), you can use the Action Panel to help us with the ordering.

To add a new layer:

1. Start by adding an 'action' layer to your movie. While it is not always required to add an additional layer, it will help organize your presentation.
   Note: The default keyframe that is added in frame one should remain there.
2. 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'. This should insert the stop command (see Image 10).
   
   

   Image 10: Adding new layer and stop command to existing Flash Application
   
   

Working with ActionScript

To work with ActionScript to change the speaking order of the elements:

1. Begin by selecting in the code window, below the stop command.
2. Select on the target button which is highlighted in the image above; this will bring up a dialog box like the one below.
3. Select on the element whose order you wish to change. Since the text element 'The_Happy' should be the first thing read, go ahead and select that. Make sure that the 'Dots' checkbox is selected, as well as the 'Absolute' checkbox. (see Image 11)
   
   

   Image 11: Insert Target Path dialog box
   
   

4. Select 'OK.'
5. You should now see some code that appears below the stop code. It should say something like _root.The_Happy. All that is necessary now is for you to append the text .tabindex = 1;. So the total piece of code should read _root.The_Happy.tabindex = 1;. This has now assigned the screen reading priority of 'The_Happy' text element to 1.
6. Repeat steps 2-5 for the 'Hammer_Company' text element, assigning it the value 2.
7. Repeat steps 2-5 for the 'Hammer' movie clip, assigning it the value 3. Your code window should look like the one in Image 12.
   
   

   Image 12: Completed code for 'Hammer' and 'The_Happy'
   
   

You may be asking yourself why you did not add a tab index for the smiley image. This image was hidden from the screen reader in previous steps, so it was essentially skipped. Now that the order has been successfully changed:

• Listen to a screen reader interpreting a Flash file with correct reading order (, 525 KB)
• Or, read the transcript of a screen reader interpreting a Flash file with correct reading order (, 1 KB).

Summary

In this lab, you were taught:

• To change the speaking order of elements on the screen.
• That two important things need to happen before you change the order: all elements need to have names, and all text must be either input or dynamic text.
• How to use the target button to partially generate ActionScript code, while filling in the rest of the code to determine the tab index value.

The next lab will discuss animation.

Previous Page Page 5: Text Equivalents

Top of Page        Page 6

Next Page Page 7: Animation

Georgia Tech Research on Accessible Distance Education (GRADE)
Center for Assistive Technology and Environmental Access (CATEA)
Georgia Institute of Technology (GT) College of Architecture (COA)
Email: gradeproject@coa.gatech.edu Fax: 404-894-9320 Phone: 404-894-4960 (v/tty)

Accessibility User Agreement
Developed in collaboration with IDET Communication (IDET).
Funded by the Office of Post Secondary Education (OPE) under Grant #P333A020050.
© Copyright 2003-2006 All Rights Reserved, Georgia Tech Research Corporation.