Select File > Import > Import to Library to import an image into the current document.
You'll see the Import dialog box (see the following figure), which enables you to browse to the file you want to import.
Browse to the folder on your hard disk that contains an image to import into your Flash document.
Navigate to the directory where you saved the tutorials source files, and locate the bitmap image saved in the FlashBanner/Part1 directory. Select the gnome.png image, and click Open (Windows) or Import (Macintosh). The image is imported into the document's library.
You can drag assets from the library onto the Stage several times if you want to see several instances of the artwork. Your file size doesn't increase if you use several instances on the Stage. The SWF file only stores the information of the original symbol or asset from the library, and treats each instance like a duplicate. 4.
Select Window > Library to open the Library panel. You'll see the image you just imported, gnome.png, in the document's library.
Select the imported image in the library and drag it onto the Stage. Don't worry about where you put the image on the Stage, because you'll set the coordinates for the image later. When you drag something onto the Stage, you will see it in the SWF file when the file plays.
Click the Selection tool, and select the instance on the Stage. If you look at the Property inspector you'll notice that you can modify the image's width and height, as well as the image's X and Y position on the Stage. When you select an object on the Stage, you can see and modify the current coordinates in the Property inspector (see the following figure).
The X and Y coordinates match the registration point, which is the upper left corner of this movie clip symbol.
Type 0 into the X text box, and type 0 into the Y text box. Typing these values in sets the X and Y coordinates both to 0, as shown in the following figure.
Set the X and Y coordinates using the Property inspector. Set the X and Y values to 0.
Setting new coordinates moves the upper-left corner of the image to the upper-left corner of the Stage. You can drag the bitmap image around the Stage using the Selection tool instead of changing coordinates in the Property inspector. Use the Property inspector when you need to set a specific position for an object, like you did in this step.

By the end of Part 3 of this tutorial, you will add the graphics, animation, and interactivity to the banner. Then, youll insert the banner on a website using Dreamweaver.
To close the document, select File > Close. If you prefer to keep the finished file open as a reference while working with your banner file, be careful not to edit it or save any changes to it. Now youre ready to start creating your own banner file in the next section, Adding text.

Adding text

You need to add some additional text to your banner for decorative purposes. You can add several types of text to a Flash document: static text, dynamic text, or input text. Static text is useful when you need to add decorative text to the Stage, or any text that doesn't need to change or load from an external source. Use dynamic text when you need to load text from a file, database, or change the text when the SWF file plays in Flash Player. Use input text when you want the user to type into a text field. You can take that text and send it to a database, have it manipulate something in the SWF file, and more.
You can add any of these types of text using the Text tool. For this exercise, you will add some static text to the Stage for decorative purposes. To add static text, follow these steps: Open the banner.fla file you created in Part 1 of this tutorial, and rename the file banner2.fla.
If you didn't finish Part 1 of this tutorial, or lost your file, open the source files ZIP archive that accompanies this tutorial. Inside the start folder, find banner2.fla and use this file to begin the tutorial. 1. 2. 3. 4. 5. 6.
Select Insert > Timeline > Layer to insert a new layer. Double-click the layer's name and type text to rename the layer. Select the Text tool in the Tools panel, which looks like a large letter A button. Click near the top of the Stage, and type Overworked? into the field that's on the Stage. Select the text field (a bounding box appears around the text when you select it). Open the Property inspector (Window > Properties > Properties), and make sure Static Text appears in the Text type pop-up menu. Change the font of the text to whatever font you prefer. You change the font using the Font pop-up menu (next to the A icon, seen in the following figure).
Select Bitmap text (no anti-alias) in the Font rendering method pop-up menu. Anti-alias options help small text appear clearly in your applications, but it makes large text look jagged. Because youre creating large text for the banner, you should use bitmap text which appears smooth when you create large text.

If you send your banner to a company to host, they usually have special requirements for how you add button code to your FLA file. Often, they want you to add a specific variable (such as clickTAG) instead of a URL. Refer to the advertising service, client, or website guidelines for the correct button code to add to your FLA file. Some companies also limit what frames per second (fps) rate you can use in the SWF file. When you design a banner, try to keep your fps rate as low as possible. I recommend using 18 fps or lower; ideally, use 12 fps.
Checking your publish settings
Often you need to save banners to earlier versions of Flash Player. Many sites you might advertise with now accept Flash Player 6 files. You might also create a website that targets a wide audience, and you need to target an older player. The simple ActionScript you added to your file can play in Flash Player 6. Therefore, you can change your player settings to Flash Player 6 for your website.
In earlier parts of this tutorial, you made changes in the Document Settings dialog box. You set the dimensions and frame rate (fps) for the SWF file. In this final section, you will make sure that the Flash Player setting you want to target is correct, and that you export the files you need. Many Flash developers make these settings when they start the FLA file, because they are aware of what they need to output and target.
Open the banner2.fla file from Part 2 of this tutorial (Basic Tasks: Creating a banner, Part 2). If you don't have banner2.fla, open banner3.fla from the tutorial source files (see Open the finished project on page 65). Look inside the start folder.
Select File > Save As and then rename the file banner3.fla. Select File > Publish Settings. The Publish Setting dialog box opens, where you can change many different settings for publishing your files.
Click the Formats tab, and then make sure that the Flash (.swf) check box is selected. Deselect the HTML option. For this exercise, you don't need to output an HTML page. Click the Flash tab, and select Flash Player 6 from the Version pop-up menu. When you add Flash advertisements to an HTML page, use Flash Player 6 or earlier (as of the time of writing). Many Flash developers still use Flash Player 5, although sites are starting to use Flash Player 6, which enables you to add additional functionality in your Flash advertisements.
Select ActionScript 1.0 from the ActionScript version pop-up menu. For this example, you wrote ActionScript 1.0 style code (in Part 2), and although this setting does not matter it's a good habit to check which version you have selected. You can write ActionScript 2.0 and publish to Flash Player 6 if you want.
In the Options section, select Compress movie. You do not need to make any other selections on the Flash tab. When you finish, click OK to accept the changes to your document. File > Publish when you have finished editing your FLA file. This publishes the SWF file to the directory where you saved the SWF file.

Now you have completed your first Flash site and inserted it into a Dreamweaver web page. You have learned how to create a new file, import content, create new assets in Flash, add simple animation and ActionScript, and publish your work for the web. You also learned how to use Dreamweaver to insert the SWF file into an existing web page, probably one that's similar to a simple page you've created in the past. In Part 3 of this tutorial, you learned how to use Flash and Dreamweaver to accomplish the following tasks:
Modify publish settings for a SWF file. Publish a SWF file. Insert a SWF file on a web page using Dreamweaver. Use roundtrip editing to open, modify, and republish a FLA file from Dreamweaver. Add a Dreamweaver behavior to check for Flash Player.
This introductory step of learning Flash and adding a SWF file to a web page is an important one when you're learning to use Flash. You now have the fundamentals and understand the essential nature and workflow of creating content with Flash. Hopefully, you'll feel better equipped to learn how to create increasingly interactive, entertaining, functional, or instructional content using Flash.

CHAPTER 5

Basic Tasks: Create Accessible Flash Content
With knowledge of a few design techniques and accessibility features in Macromedia Flash Basic 8 and Macromedia Flash Professional 8, you can create Flash content that is accessible to all users, including those with disabilities. This lesson demonstrates how to create an accessible document, designed for use with screen readers (which read web content aloud for visually impaired users) and other assistive technologies. You can print this tutorial by downloading a PDF version of it from the Macromedia Flash Documentation page at www.macromedia.com/go/ fl_documentation. In this tutorial, you will complete the following tasks:
Make your document accessible to screen readers. 81 Provide a document title and description. 81 Provide a title and description for instances. 82 Specify that screen readers ignore elements in your document. 83 Change static text to dynamic text for accessibility. 83 Control the tab order and reading order. 84
The lesson offers an introduction to basic techniques of making your Flash content accessible. For detailed and comprehensive information about incorporating accessibility features in your Flash content, see Creating Accessible Content in Using Flash.

In the Timeline, select the Buttons layer. Click Insert Layer Folder, which is below the layer names.
If the Property inspector shows properties for the frame rather than for the movie clip, click the Background movie clip on the Stage. 3. 4.
Double-click the layer folder name and rename the folder Navigation. Drag the Navbar layer and the Buttons layer to the Navigation folder. The layers appear indented to indicate that theyre within the folder.
You can click the expander arrow to expand and collapse the folder and included layers.

Add a mask layer

Using a mask layer provides a simple way to selectively reveal portions of the layer or layers below it. Masking requires making one layer a mask layer and the layers below it masked layers. Youll use the rectangular shape on the Stage to mask part of the road graphic and animation so that the animation fits better on the Stage.
On the Stage, with the Selection tool selected, click the rectangular shape below the road. Drag the shape straight up and align the left edge of the shape with the left edge of the road. Right-click (Windows) or Control-click (Macintosh) the Mask layer in the Timeline and select Mask from the context menu. The layer converts to a mask layer, indicated by a blue diamond-shaped icon. The layer immediately below the layer is linked to the mask layer. The masked layers name is indented, and its icon changes to a blue layer icon.
In the Timeline, drag the Road layer to the Mask layer, placing it below the Car layer. The mask layer and the layers it masks are automatically locked. To view the mask effect, select Control > Test Movie. When you finish viewing the mask effect, close the SWF file window to return to your document.

Add a guide layer

So far youve learned about regular layers and mask layers. The third type of layer is a guide layer. You use guide layers to hold content that you dont want to appear in your published or exported file. For example, you could place instructions to others working on your document on a guide layer. As you take lessons in Flash, youll notice that many of the lesson FLA files contain placeholders, which indicate where to place a Stage object, on guide layers. Youll create a guide layer now.

In the Tools panel, click the Selection tool. On the Stage, drag around the car to select it.
Select Modify > Convert to Symbol. In the Convert to Symbol dialog box, enter CarGraphic as the name and select Graphic as the behavior. The Registration grid uses a small black square to indicate where, within the symbol bounding box, the registration point is located. A registration point is the axis around which the symbol rotates, and the point along which the symbol aligns. Click the upper-left square on the grid to select the registration point location, and click OK. The car on the Stage is now an instance of the CarGraphic symbol. The Property inspector shows properties for the graphic symbol instance.
Open the Library panel (Window > Library) to view the symbol. Youll find the CarGraphic symbol in the Library panel. Flash stores symbols in the library. Each document has its own library, and you can share libraries between different FLA files.
Duplicate and modify an instance of a symbol
After youve created a symbol, you can use instances of it repeatedly in your document. You can modify the following instance properties for an individual instance without affecting other instances or the original symbol: color, scale, rotation, alpha transparency, brightness, tint, height, width, and location. If you edit the symbol later, the instance retains its modified properties in addition to acquiring the symbol edits. Youll now duplicate the instance of the car, and change the tint for the duplicate.
On the Stage, select the car. Press Alt and drag the car up to create another instance.
With the duplicate selected, select Tint from the Color pop-up menu in the Property inspector. In the RGB area, enter 0 in the Red Color pop-up menu, 0 in the Green Color pop-up menu, and 255 in the Blue Color pop-up menu. Then press Enter (Windows) or Return (Macintosh). The duplicate instance turns blue, but the original instance remains unchanged.
120 Basic Tasks: Create Symbols and Instances

Modify a symbol

With the playhead still on Frame 15, select the button shape on the Stage, and in the Property inspector select a bright shade of red from the Fill Color pop-up menu. In the Timeline, click any frame between Frames 1 and 15. In the Property inspector, select Shape from the Tween pop-up menu. Drag the playhead from Frames 1 to 15 to see the color change.
Add an action to a button
When the user clicks the button and the tweened animation plays, you want the playhead to move to the end of the Button Animation Timeline and then stop. Youll use ActionScript to control playhead movement in a Timeline.
Add a new layer to the Button Animation Timeline and name it Actions. On the Actions layer, add a keyframe to Frame 15 by pressing F6. Open the Actions panel (Window > Actions) and if necessary, enlarge it to view both the Actions toolbox and the Script pane. With Frame 15 of the Actions layer selected, go to the Global Functions > Timeline Control category of the Actions toolbox and double-click stop. The stop action lets you specify that the playhead stop when it reaches Frame 15. In the Button Animation Timeline, Frame 15 of the Actions layer now displays a small a, which indicates that an action is attached to that frame.

5. 6. 7. 8. 9.

Click Scene 1, above the Stage, to exit symbol-editing mode and return to the main document. Click the pop-up menu control in the upper-right side of the Actions panel, and select Close Panel. Select Control > Enable Simple Buttons so you can test the animated button. On the Stage, move the pointer over the button and click the button. Select Control > Enable Simple Buttons to deselect that feature.
Add navigation to a button
With behaviors, you can quickly add navigation to a button without having to know ActionScript. Youll add navigation to open a web page when the user clicks a button.
On the Stage, select the instance of Button 1. In the Behaviors panel (Window > Behaviors), click Add Behavior and select Web > Go to Web Page.
In the Go to URL dialog box, select _blank in the Open In pop-up menu to open the URL in a new browser window. In the URL text box, either accept the default setting of http://www.macromedia.com or enter a different URL. Click OK. If desired, repeat the previous steps, selecting Button 2 and then Button 3, to add navigation to those buttons as well. Click the pop-up menu control in the upper-right side of the Behavior panel, and select Close Panel.
132 Basic Tasks: Add Button Animation and Navigation

Test the SWF file

Inside the text block that you created, type Want to learn more?
You can drag the square handle for a text block to change its width. Additionally, you can double-click a square handle to convert it into a round expanding handle. 6.
202 Text: Add Text to a Document
If necessary, align the text by clicking the Selection tool in the Tools panel and dragging the text that you typed above the Text 2 guide.
Edit text and change font attributes
When you select text, the Property inspector displays standard type formatting features. You can use the Property inspector to change font and size properties for a selected text object.
In the Tools panel, click the Selection tool. Double-click the text on the Stage that reads Submit your contact information. Select the letter S then type Please s, so that the text now reads Please submit your contact information.
In the Tools panel, click the Selection tool. Use the Property inspector to select the bold style. Click the text Fill Color control and select a different text color, such as another shade of gray.

Select device fonts

When you use a font installed on your system in a Flash document, Flash embeds the font information in the Flash SWF file to ensure that the font is displayed properly. In addition to embedding fonts, you can use the device fonts option. This option finds the fonts on a viewers computer that most closely resemble the specified device font. You can use device fonts only with static text. Youll specify that the selected text uses device fonts.
With the Please submit your contact information text still selected on the Stage, in the Font pop-up menu in the Property inspector, select _sans. In the Property inspector, select Use Device Fonts. You will not see a difference in the text if you have the Arial font installed on your computer.

Add an input text field

You can use an input text field to allow viewers an opportunity to interact with your Flash application. For example, input text fields offer an easy way to create forms. In a later lesson (select Help > Flash Tutorials > ActionScript: Create a Form with Conditional Logic and Send Data), youll learn how to use an input text field to send data from Flash to a server. Now, youll add a text field where viewers will enter their first name.
In the Timeline, select the Input Text layer. Use the Selection tool to click in the workspace, away from the objects on the Stage. In the Tools panel, select the Text tool.
Add an input text field 203
In the text Property inspector, set the following options:
Select Input Text in the Text Type pop-up menu Select Arial in the Font pop-up menu. For the font size, enter 8. Click the text color box and select a shade of dark blue. Select the Alias Text button. The Alias Text button renders text so that it appears more readable at small sizes. For input text, this option is supported if the end user has Macromedia Flash Player 7 or later.

Click the Selection tool in the Tools panel. On the Timeline, select the menu and button layer. If the layer is locked, unlock it. In the upper-right corner of the Stage, select the Home button.
Add a script to a button by using Script Assist mode 213
In the Actions panel, youll see the Script Assist button above the ActionScript editor. Click Script Assist to display Script Assist mode.
With no functions selected, the Script Assist pane is blank. Initially, the Script Assist portion of the Actions panel is blank. Script Assist mode prompts you to select options and set parameters for the functions that you add to the selected button. The parameters are displayed when you add an ActionScript function.
You may notice that when Script Assist mode is enabled, you cannot directly edit code in the ActionScript editor, because it is read-only. All interaction with the code in the editor is through Script Assist mode with one important exception: you can highlight functions in the ActionScript editor and delete them. 5.
To add a function to the button, click Add on the toolbar.
Clicking the Add button displays all of the predefined ActionScript functions.
214 ActionScript: Use Script Assist mode
From the Movie Clip Control option, select the on event handler.
An alternative method of adding ActionScript functions is to browse for and then select them from the Actions toolbox. The Add button on the Actions panel toolbar and the Actions toolbox display the same categories of functions and you can add functions to the editor from both.
Script Assist mode prompts you to set the functions parameters. The release event of the on event handler is selected by default. Youll use the release event to trigger the script action when the user clicks Home.
Add a script to a button by using Script Assist mode 215
Click Add again and then select the goto() function from the Global Functions > Timeline Control option.
Adding the function that is triggered when the event occurs The goto() function is added as the action of the on event handler. In other words, when the Home button is pressed (the on handler) and released (the release event), the goto() action is executed. When the Home button is clicked, the movie clip should move to and stop at the Home frame of the Timeline. To do this, you use Script Assist mode to modify the default parameters of the goto() function.
In the Script Assist panel, select the Go To and Stop option. Set the Type to Frame Label by selecting it from the Type pop-up menu.
216 ActionScript: Use Script Assist mode

Using the Actions toolbox or the Add button on the Actions panel toolbox, select Global Functions > Timeline Control and insert the goto function. In the Script Assist pane, select the Go To and Stop option. Set the Type to Frame Label by selecting it from the Type pop-up menu. In the Frame text box, enter about.
The completed Timeline script Repeat this process for the Products and Contacts buttons. In each case, when the buttons are clicked, you want to display the related frames on the Timeline; therefore, set the frame target of the gotoAndStop() function to the Products and Contacts frames as you did for the About button.
220 ActionScript: Use Script Assist mode
Add a frame script to the Title movie clip
The final step is to add a script to the last frame of the Title movie clip. This script is used to display the text Home in the Title movie clip when its animation has completed.
From the Library panel, select the Title movie clip and its timeline is displayed.
Selecting the Title movie clip timeline to add a script to the last frame
With the Actions layer selected, select the last frame (14) on the Timeline. In the Actions panel, click Script Assist to display Script Assist mode. Using either the Actions toolbox or the Add button on the Actions panel toolbar, select Global Functions > Timeline Control and insert the stop() function.
Add a frame script to the Title movie clip 221
Next, using either the Actions toolbox or the Add button, select ActionScript 2.0 Classes > Movie > MovieClip > Methods > gotoAndStop.
Modifying function parameters to complete the script

6. 7. 8. 9.

In the Script Assist panel, select the gotoAndStop action on line 2. Click in the Object text box. Click the Insert Target Path button. In the Insert Target Path dialog box, click the _root object and click OK. the Frame text box, enter home. Deselect the Expression checkbox. Now, when the Title movie clip reaches the last frame and the animation is complete, Home is displayed. This is the initial state of the application, after it loads and before the user clicks any of the buttons.

10. In 11.

12. Save

your work.

All of the scripts needed to run the sample application are now complete and the application is ready to be tested.

Specify the data type for method return values
You must indicate data types for values returned by methods after the method name and list of parameters, as in the following example:
The following ActionScript is an example only. Do not enter the script in your lesson FLA file. public function getProductName() :String { return name; }
If no value is returned (for example, a property is being set), the data type is Void:
public function setProductName(productName:String) :Void { this.productName=productName; }
260 ActionScript: Work with Objects and Classes

Build a custom class

Youll now build a new Product class with getter and setter methods and create an object from the Product class.
Create an ActionScript file by selecting File > New > ActionScript File (Not Flash Document). Save the document with the name Product.as. Create a constructor for a Product class by creating a function called Product that takes the arguments id, prodName, and description:
function Product (id:Number, prodName:String, description:String) {}
In the constructor function, set the properties of the Product class equal to the setter methods that you will create:
setID(id); setProdName(prodName); setDescription(description);
Surround the class keyword with the constructor function. Declare each variable used in the class:
class { var var var Product id:Number; prodName:String; description:String
function Product (id:Number, prodName:String, description:String) { setID(id); setProdName(prodName); setDescription(description); } } 5.
Define getter and setter methods for each property of the class, as in the following example. Specify Void as the return type for the setter methods, and indicate the data type returned for the getter methods.
class Product { var id:Number; var prodName:String; var description:String
Create a custom class 261
function Product (id:Number, prodName:String, description:String) { setID(id); setProdName(prodName); setDescription(description); } public function setID (id:Number) :Void { this.id = id; } public function setProdName (prodName:String) :Void { this.prodName = prodName; } public function setDescription (description:String) :Void { this.description = description; } public function getID () :Number { return id; } public function getProdName () :String { return prodName } public function getDescription () :String { return description; } } 6.

A finished sample file of the file you just created, named Product.as, is located in your finished files folder. For the path, see Set up your workspace on page 256.
Create two objects from the Product class
Youll create a new FLA file, and then create two objects from the Product class.
Open a new Flash document and save it in the same location where you saved Product.as. In the new document, select Frame 1 in the Timeline.
262 ActionScript: Work with Objects and Classes
In the Actions panel, create two objects from the Product class using the data shown in the following table (the ActionScript that youll create appears after the table).

pedals

id prodName description 0 Clipless Pedals Excellent cleat engagement 1 ATB Available in comfort and aero design

handleBars

id prodName description
Verify that you created the objects as follows:
var handleBars:Product = new Product (1, "ATB", "Available in comfort and aero design"); var pedals:Product=new Product(0,"Clipless Pedals","Excellent cleat engagement");
Trace the description property of pedals:
trace (pedals.getDescription ());
Save and test the document. You should see the description of pedals in the Output panel.
A finished sample file of the document you just created, named handson2.fla, is located in your finished files folder. For the path, see Set up your workspace on page 256.
Learn about extending existing classes
The extends keyword in ActionScript 2.0 allows you to use all the methods and properties of an existing class in a new class. For example, if you wanted to define a class called Drag that inherited everything from the MovieClip class, you could use the following:
class Drag extends MovieClip {}
Learn about extending existing classes 263
The Drag class now inherits all properties and methods from the existing MovieClip class, and you can use MovieClip properties and methods anywhere within the class definition, as in the following example:
The following ActionScript is an example only. Do not enter the script in your lesson FLA file. class Drag extends MovieClip { // constructor function Drag () { onPress=doDrag; onRelease=doDrop; } private function doDrag():Void { this.startDrag(); } private function doDrop():Void { this.stopDrag(); } } The Convert to Symbol dialog box now offers a class field in which you can associate visual objects (such as movie clip) with any class that you define in ActionScript 2.0.

N OT E NO TE

Extend the MovieClip class to create a new class
Youll create a new class by extending the built-in MovieClip class.
Create a new Flash document and name it Shape.fla. Using the drawing tools, draw a shape on the Stage. With the entire shape selected, right-click (Windows) or Control-click (Macintosh) the shape and select Convert to Symbol from the context menu.

21. On

the Stage, select the DataSet component. In the Component inspector, click the Schema tab.
22.Click Add a Component Property (+) and enter id for Field Name and

Integer for Data Type.

Create the user interface 283

23.Using

the same method, create the following new fields:
Field Name = billable, Data Type = Boolean Field Name = date, Data Type = Date Field Name = duration, Data Type = Number Field Name = rate, Data Type = Number
The field names must exactly match the names of their corresponding properties within the XMLConnector component (@date = date, @billable = billable, @duration = duration), including capitalization.
284 Data Integration: Using XML for a Timesheet (Flash Professional Only)
24.Select the Date field that you just created. Select the encoder setting and
change it to DateToNumber.
The DataSet component needs to store date values internally in their numeric format so that they can be sorted correctly. The DateToNumber encoder converts a date into a number whenever the value is set. It converts a number into a date whenever the value is accessed. 25.With the Date field still selected, double-click the Formatter field in the
Component inspector and select Date from the pop-up menu.
26.Double-click the Formatter Options field in the Component inspector. 27. In the Date Formatter Settings dialog box that appears, enter MM-DD-
YYYY in the Format text box.
Add DataGrid and Button components
Next you will add components for displaying the data.
From the Components panel, open the User Interface category and drag a DataGrid component to the Stage. In the Property inspector enter the instance name timeInfo_grd. Still in the Property inspector, set the Width to 360.
In the Component inspector, click the Bindings tab. Click the Add Binding button. In the Add Binding dialog box, select the dataProvider: Array item and click OK. In the Bindings tab, click the Bound To property. In the Bound To dialog box, click the Data Set component, and then select the dataProvider: Array schema location and click OK. In the Bindings tab, set the Direction to In. the Data Grid still selected, go to the Component inspector Bindings tab and click the Add Binding button. In the Add Binding dialog box, select the selectedIndex: Number item and click OK. the Bound To property. In the Bound To dialog box, click the Data Set component, and then select the selectedIndex: Number schema location and click OK. the Direction property set to In/Out. Drag a Button component to the Stage, and give it the instance name loadData_btn in the Property inspector. In the Component inspector, click the Parameters tab. In the Label field, type Load Data. With the button still selected on the Stage, open the Behaviors panel (Window > Behaviors). Click Add Behavior (+), and select Data > Trigger Data Source. In the Trigger Data Source dialog box, select the timeInfo_con component, and click OK. the file in the same folder where the data.xml file resides. the application, and click Load Data.

Although you will not change any of the default settings on the Component Parameters panel, view the options that the panel lets you specify:
Randomize, if selected, specifies that questions appear to the user in random order, not
necessarily in the order in which they appear across the Timeline.
Questions to ask, if set to 0, presents the user with all questions included in the quiz. You can
also set the number to be less than the number of questions in the quiz. If you specify a number less than the total number and select Randomize, each launch of the quiz presents a subset of the total number of questions, in random order. If you specify a number larger than the number of questions in the quiz, the quiz presents all of the questions without duplicating them.
The Login File URL redirects users to the specified URL to login if the user has not logged in
through an AICC-compliant LMS.
Note: If the user does login through an AICC-compliant LMS, but the HTML parameters that launch the movie do not exist, the login file URL redirects users to the specified URL.
Activity ID and Activity Name fields correspond to the activity name and Activity ID in your LMS.
If youre not using a LMS, you can either accept the default entries, or the fields can be blank.
The Show Results Page option, if selected, displays the quiz results on Frame 8 of the quiz
template to users upon completion of the quiz.
When you finish viewing the Component Parameters panel, close it.
Analyze a learning interaction Learning interactions immerse users in e-learning content by requiring active participation. The interactions included in Macromedia Flash MX offer you the choice of using several types of interactions in a movie.
In the Timeline, select Frame 3 of the Interactions layer. The Stage includes dynamic text fields, and one input text field, all grouped within the fill in the blank interaction movie clip. During run time, the text that you specify in the Component Parameters panel for the interaction populates the dynamic text fields.
If the Library panel is not open, choose Window > Library and expand the panel, if necessary. Expand the 2_Learning Interactions folder to view the six interactions included in the template. Click any of the six interactions, such as Drag and Drop, to see in preview that the interaction is really a set of objects, such as movie clips, graphics, and components, grouped together. To use a learning interaction, you break it apart, then modify the individual objects that comprised the group.

Drag the objects to targets again and click Check Answer. View the response and click Next.
Select a hot object The Hot Object interaction lets you respond to a question by clicking one or more objects to select them. You can think of a Hot Object interaction as a graphical version of a multiple choice question. The Hot Object interaction is designed for you to add graphics to the template. Object 4 is specified as the correct object in the component parameters.
Click object 4, to see how the interaction offers visual feedback when an object is clicked. A red tint appears over the clicked object. Click Check Answer. View the response and click Next.
Select a hot spot The Hot Spot interaction lets users respond by clicking a region on the Stage. For example, youll use the Hot Spot interaction in this tutorial to have users click the part of the camera that allows you to take a picture. Youll add an image of a camera to the Stage, and configure the interaction so that the user can click a variety of camera parts, with the shutter release specified as the correct part to click.
Click one of the numbered areas on the Stage, then click Check Answer. View the response and click Next.
View the quiz results The quiz template is designed to automatically track results and send them to a learning management system configured for your quiz.
When you finish viewing the quiz results, close the SWF movie. View a completed version of the quiz tutorial file
Now youll view a completed version of the file youll create from the quiz template.
In Macromedia Flash MX, choose File > Open. Browse to the QuizTutorial folder that you downloaded and double-click learning.fla to open the quiz in the authoring environment. Choose Control > Test Movie. Take the quiz to see how the designer modified the template. When you finish taking the quiz, close the SWF window and learning.fla, and return to MyQuiz.fla.

Modify the Welcome page

Youll delete the existing background, and replace it with a gradient background. Youll then add and modify text, and use an external library to add assets to the document.
In the Timeline, hide the Instructions layer if its not already hidden. Lock all layers except the _bckgrnd layer, and select Frame 1 of that layer. On the Stage, verify that the background is selected (a bounding box appears around the Stage) and press Backspace or Delete.

Create a gradient background A gradient displays subtle variations of a color, or transitions between two or more colors. Youll create a gradient that blends white and blue. Draw a rectangle Youll now draw a simple rectangle as the first step in creating a gradient background.
In the toolbox, select the Rectangle tool. In the toolbox, click the Stroke Color control. Select No Stroke (the button with the red diagonal line above the color palette). The selected fill color of the shape is unimportant; youll soon change the color. Starting from the upper left corner of the Stage, drag to the lower right corner of the Stage to draw a rectangle that covers the Stage.
Note: While completing the tutorial, you may find it useful to undo a change youve made. Macromedia Flash can undo several of your recent changes, depending on the number of undo levels you have set in Preferences. To undo, choose Edit > Undo or press Control+Z (Windows) or Command+Z (Macintosh). Conversely, you can redo what youve undone by choosing Edit > Redo or pressing Control+Y (Windows) or Command+Y (Macintosh).
Specify a color for the gradient White is the first color youll add to your gradient.
In the toolbox, select the Pointer tool. On the Stage, click inside the rectangle to select the fill. If the Color Mixer is not open, choose Window > Color Mixer. To expand the Color Mixer, click the white arrow in the panel title bar. If the Color Mixer is not fully expanded, click the arrow in the lower right of the panel. In the Fill Style pop-up menu, select Radial. If the gradient slider to the left of the color bar is not selected, with a small triangle above it, click it.

Gradient slider

Click the color box in the upper left corner of the window to open the color palette. Use one of the following methods to select white: of FFFFFF, then click the swatch to select it.
Move the eyedropper over the color swatches until you find white with the hexadecimal value Type FFFFFF in the hexadecimal value text box and press Enter or Return.
Add a second gradient color Youll now add blue to the gradient.
In the Color Mixer, click the gradient slider to the right of the gradient bar to select it. Click the color box to open the color palette and select the blue with a hexadecimal value of 003366. Remember, you can either type the hexadecimal value in the Hexadecimal text box and press Enter or Return, or you can find and select the color swatch with the same hexadecimal value.
In the toolbox, select the Fill Transform tool. On the Stage, click anywhere inside the rectangle. An ellipse that indicates the shape and location of the gradient appears around the Stage (resize the Stage view, as necessary). The ellipse has controls for the location, width, scale, and rotation of the radial gradient.
Center control Circular middle handle

In the LearningAssets.fla library, go to the 1_Quiz Files > 0_Assets sub folder and drag mc, frameNav to anywhere on the Stage or on the work area. A Resolve Library Conflict dialog box appears because you dragged an instance of a symbol that already exists in your MyQuiz library.
In the Resolve Library Conflict dialog box, select Replace existing items (not undoable) and click OK.
In addition to dragging a new instance of the button on to the Stage, youve replaced the original mc, frameNav button with the new version.
Note: You can also drag symbols directly from one library to another.
On the Stage, select the button that you just dragged to the Stage and press Backspace or Delete. You do not need the second instance on the Stage once the first instance, in the lower-right corner of the Stage, is replaced.
With the Pointer tool, select the mc, frameNav button and use the Property inspector to give it an X coordinate of 464.6 and a Y coordinate of 369.4. Select Frame 1 of the Interactions layer. Drag Camera1.png from the Images folder in the LearningAssets library to the Stage, placing the camera slightly off center, within the light area of the gradient background.
Modify a True or False interaction
Each interaction has a component that you modify in the Component Parameters panel. To modify the True or False component, youll add the question text and specify if the statement is true or false.
In the Timeline, select Frame 2 of the Interactions layer. On the Stage, verify that the True or False component, as well as the grouped Stage objects, are selected. (A bounding box surrounds the objects.)

Bounding box

True or False component
Choose Modify > Break Apart. Bounding boxes appear around individual objects on the layer.
Note: Throughout the tutorial, you will break apart the learning interactions to modify the template. Be careful to use the break apart command once only, with each interaction. If you choose Break Apart a second time for an interaction, the interaction becomes unusable and you must replace it with the stand-alone interaction from the library.
Deselect all selected objects by pressing Control+Shift+A or clicking an empty space in the work area. To the left of the Stage, select the True or False component. In the Property inspector, click Launch Component Parameters Panel. Select the text in the Question text box and type The higher the aperture setting, the more light passes through the lens.

Note: The question text appears in the dynamic text field on the Stage during runtime; you do not type question text on the Stage.
Select the False distractor (choice).
Click Options, along the bottom of the panel, and change the Feedback text: answering the interaction. For the Initial Feedback text box, select the existing text and type Click a radio button.
Initial feedback is the text the user sees in the Template_Feedback dynamic text field before The correct feedback is the text the user sees after answering the question correctly and clicking
Check Answer. For Correct feedback, select the existing text and type Correct!
Incorrect feedback is the text the user sees after answering a question incorrectly and clicking
Check Answer. Select the existing text in the Incorrect Feedback text box and type Sorry. Your answer is incorrect.
Verify that Off is selected for Navigation, and close the Component Parameters panel. Because the template has its own built-in navigation, you do not specify navigation in the Component Parameters panel. The Knowledge Track options are for use with your LMS.
Note: You will use the Component Parameters panel for each interaction. You can either close the panel after configuring the parameters, or move it out of the way until youre ready to use it again.
Modify text and add a graphic to the true or false question With the True and False interaction, youll move both the question text and the checkbox components.
In the Timeline, verify that Frame 2 of the Interactions layer is still selected. Use the Pointer tool to select the Your question will appear here text. Use the Property inspector to make the text Arial 14 point bold, with an X coordinate of 10.7 and a Y coordinate of 14.5. With the Pointer tool, select the True component on the Stage. Give it an X coordinate of 11.7 and a Y coordinate of 49.5. Select the False component on the Stage and place it so that X = 11.7 and Y = 70.8. In the LearningAssets.fla library, drag lens.png from the Images folder toward the center of the Stage, where the background gradient is lightest.
Note: As you complete the tutorial, remember to save and test your work frequently. Testing is especially important when modifying learning interactions to ensure your quiz works as expected.
Modify a Fill in the Blank interaction
To modify the Fill in the Blank component part of the interaction, you specify the question text, then specify all answers that are acceptable as correct.

In the Timeline, select Frame 3 of the Interactions layer. On the Stage, verify the objects on the layer are selected. Choose Modify > Break Apart. Deselect all selected objects by pressing Control+Shift+A or clicking an empty space in the work area. To the left of the Stage, select the Fill in the Blank component. If necessary, launch the Component Parameters panel from the Property inspector. Select the text in the Question text box and type What does the number 125 on the camera indicate?
In the first Responses text box, type Shutter speed, and select the Correct check box. Verify that Case Sensitive is not selected and Exact Match is selected. Click Options, along the bottom of the panel. To give the user two chances to answer the question correctly, type 2 in the Tries text box. When you give the user more than one chance to answer the question correctly, feedback specified in the Additional Tries text box appears if the user first answers incorrectly.
Select the text in the Additional Tries text box and type Incorrect. Please try again. Change the text in the other feedback text boxes, as desired. For example, you can select the text in the Correct Feedback text box and type Yes! Youre right!
Arrange text and graphics To give the interaction a consistent look, youll modify the text fields, move the graphic representation of the input text field, and add an image to the interaction.
With Frame 3 of the Interactions layer selected, Use the Pointer tool to select the Your Question Will Appear Here text. As you did with the previous interaction, make the text 14 point Arial bold. Give the text an X coordinate of 10.7 and a Y coordinate of 14.5.
On the Stage, select the instance of Field_Background, with the text that states Enter your answer here, and place it so that X = 11.1 and Y = 45.1.
Drag input text field to this location

Input text field

The actual input text field appears on Stage bounded by dotted lines. Drag the input field within Field_Background instance. In the LearningAssets.fla library, drag Camera_top.png from the Images folder to the Stage. Place the image below the input text field.

In the LearningAssets.fla library, drag 125_glow.png from the images folder to the Stage. Place the image over 125 on the cameras shutter speed selector.
Note: As you complete the tutorial, remember to test and save your work frequently.
Modify a Multiple Choice interaction
To modify the Multiple Choice component, youll add the question text, the answer text, and specify which answer is correct.
In the Timeline, select Frame 4 of the Interactions layer. On the Stage, verify that objects on the layer are selected, and choose Modify > Break Apart. Press Control+Shift+A or click an empty space in the work area. Select the Multiple Choice component. If the Component Parameters Panel isnt open, launch it from the Property Inspector. Select the text in the Question text box and type Which camera part affects the amount of light that passes through the lens? In the Label text box for Checkbox 1, select Apple and type Shutter speed. Click the check mark in the Correct column to indicate that the choice is now an incorrect answer. In the Label text box for Checkbox 2, select Zucchini and type Film advance lever. Do not click the check mark in the Correct column. In the Label text box for Checkbox 3, select Tomato and type Aperture, and verify that the corresponding Correct check box is selected to indicate that this is a correct answer. In the Label text box for Checkbox 4, select Potato and type Film counter. Do not click the check mark in the Correct column. You will have four choices, instead of the five that the template provides. To delete the last choice, select Checkbox 5 in the Instance Name category and press Delete or Backspace.
If desired, click Options and change the correct and incorrect feedback text. The user will have one try to answer the question correctly; you do not need to change the additional tries feedback text since that text will not appear to the user.
Arrange text and graphics Youll modify the question text, delete one of the answers, and add an image to the interaction.
On the Stage, use the Pointer tool to select the Your Question Will Appear Here text. Use the Property Inspector to make the text Arial 14 point bold, with X and Y coordinates of 10.7 and 14.5, respectively. Select and delete the instance of Checkbox5 (Label E). Select the Label A component (Checkbox1). Press Shift and click the Label B through D objects to add them to the selection. In the Property inspector, select the text in the Width (W) text box and type 160 to resize the choice labels, then press Tab. Drag the four selected labels to just below the question text.

In the Drag Object Name and Matches Target Name categories, type the letter N, for new, at the end of each name. Youre registering the unique instance name that you will give to your replacement instances.
To specify that drag objects snap to a target, verify that Snap To Start is selected.
Arrange text Youll give the question text the same attributes that you specified in previous frames.
On the Stage, use the Pointer tool to select the question text. Use the Property inspector to
make the text Arial 14 point bold, with X and Y coordinates of 10.7 and 14. 5, respectively.
Assign instance names to the new drag symbols Youll place the new drag symbols in the LearningAssets library, and give them the same instance names in the Property inspector that you specified in the Component Parameters panel.
From the LearningAssets library, go to 2_Learning Interactions > 0_Assets > DragDrop folder, and drag DD_D3 toward the upper left area of the Stage, as shown in the following illustration.
Place DD_D1 next to it, then DD_D2 at the end of the row.
On the Stage, select DD_3. In the Property inspector, enter Drag3N in the Instance Name text box. On the Stage, select DD_1. Use the Property inspector to give it the instance name of Drag1N. On the Stage, select DD_2. Use the Property inspector to give it the instance name of Drag2N.
Assign instance names to the new target symbols Youll follow a process similar to the one you just used for the drag symbols, to now drag the new target symbols from the LearningAssets library, and give them the same instance names in the Property inspector that you specified in the Component Parameters panel.
From the LearningAssets library, go to 2_Learning Interactions > 0_Assets > DragDrop folder, and drag DD_T1 toward the lower left area of the Stage, as shown in the following illustration.
Place DD_T2 next to it, then DD_3 at the end of the row.
On the Stage, select DD_T1. In the Property inspector, select the text in the Instance Name text box and type Target1N. On the Stage, select DD_T2. Use the Property inspector to give it the instance name of Target2N. On the Stage, select DD_T3. Use the Property inspector to give it the instance name of Target3N.

Align Drag objects and Target objects To align the Drag objects and Target objects, youll use the Align panel.
On the Stage, with the Pointer tool, click DD_D3, then Shift+click to also select DD_D1 and DD_D2. If the Align panel isnt open, choose Window > Align. Verify that To Stage is not selected and click Align Vertical Center and Distribute Horizontal Center. Press Control+Shift+A or click an empty space in the work area. On the Stage, click DD_T1, then Shift+click to also select DD_T2 and DD_T3. Click Align Vertical Center and Distribute Horizontal Center.
View the Drag and Drop movie clip in the Library window
In the MyQuiz (not LearningAssets) library, select the Drag and Drop movie clip in the
2_Learning Interactions folder. The symbols remain unchanged; you can use the interaction again, if desired.
Modify a Hot Object interaction
To modify the Hot Object interaction, you first modify the component to specify the question text, and you specify the object that will register as a correct choice when clicked.
In the Timeline, select Frame 6 of the Interactions layer. On the Stage, verify that all objects on the layer are selected and choose Modify > Break Apart. Deselect all selected objects by pressing Control+Shift+A or clicking an empty space in the work area. Select the Hot Object component. If the Component Parameters panel isnt open, launch it from the Property inspector. Select the text in the Question text box and type Click the part of the camera you would press to take a picture. Select Correct for HotObject1 and deselect Correct for HotObject4. When users click the HotObject1 area, the response will register as correct.
Arrange text Youll give the question text the same attributes that you specified with previous interactions.
make the text Arial 14 point bold, with X and Y coordinates of 10.7 and 14. 5, respectively. Replace hot object images Although you can use the same process that you used with the Drag and Drop interaction, to delete and register instances, youll use a different process for the Hot Object interaction. Instead, you will replace existing movie clips with new ones that have the same name. Because this process changes all instances of the symbols, it works best when you know youll only use the interaction type once in a document.

Add a hot spot image Users click hot spot areas that overlay an image. Youll add that image now.
On the Stage, select the instance of Image_Area; the rectangular border that surrounds the hot spot areas. Refer to the Property inspector to verify that youve selected the correct instance, and press Backspace or Delete.

Image_Area instance

With Frame 7 of the Interactions layer selected, drag Camera_top.png from the images folder of the LearningAssets.fla library, placing it in the approximate center of the Stage. In the Property inspector, you can specify the X and Y coordinates for the image that the finished file uses: X= -5.5 and Y=70.8.
On the Interactions layer, the image covers the hot spot areas. To change the stacking order of objects on the layer so that the hot spot areas cover the image instead, verify that Camera_top.png is still selected, and choose Modify > Arrange > Send to Back. The hot spot areas now appear over the camera image.
On the Stage, use the Pointer tool to drag HS_Area6 to cover the film advance lever.
With the Pointer tool, continue to select and place hot spot areas over the camera, as follows:
Place the instance of HS_Area3 so that it covers the shutter release.
Note: It does not matter that the Hot Spot area is larger than the shutter release. The size of the Hot Spot areas will change when you add images to the Hot Spot symbols.
Place the instance of HS_Area5 so that it covers the shutter speed selector.
Place the instance of HS_Area2 so that it covers the lens.
Place the instance of HS_Area4 so that it covers the aperture.
Place the instance of HS_Area1 so that it covers the film rewinder.
Add an image within a hot spot area When the user clicks a hot spot area, visual feedback should let the user know that the clicked area is selected. Youll provide that feedback by adding glow images that initially have an alpha transparency of 0, as specified in the component parameters, but become opaque in the movie upon mouse click. To add the images, you delete and replace the images within each hot spot movie clip.

On the Stage, double-click HS_Area1. In symbol-editing mode, use the Pointer tool to select the graphics by dragging from above the upper-left corner to below the lower-right corner of the group, selecting all graphics in the movie clip. Press Backspace or Delete. From the Images folder of the LearningAssets.fla library, drag rewind_glow.png and place it within HS_Area1 so that the glow outlines the film rewinder.
Note: The bounding box reflects the new Hot Spot area.
Click Scene 1, above the Stage. On the Stage, double-click HS_Area2. In symbol-editing mode, use the Pointer tool to drag around the hot spot graphics, selecting all of the graphics as you did in step 1, then press Backspace or Delete. From the Images folder of the LearningAssets.fla library, drag lens_glow.png and place it within HS_Area2 so that the glow outlines the lens, then click Scene 1, above the Stage.
Repeat the previous steps 4 and 5 to open a hot spot in symbol editing mode, delete the existing group of graphics, then drag and position the corresponding glow image from the Images folder in the LearningAssets.fla library, as follows (remember to click Scene 1 when youve finished with a hot spot):
For HS_Area3, use Shutter_glow.png. Place the glow image around the shutter release button. For HS_Area4, use Aperture_glow.png. Place the glow image around the aperture. For HS_Area5, use Shutter_speed_glow.png. Place the glow image around the shutter

speed selector.

For HS_Area6, use Advance_glow.png. Place the glow image around the film advance lever.
Add an interaction to the Timeline
To add an interaction to the Timeline, you add frames across all layers in the Timeline. You can then either use an interaction from the library, or you can use the streamlined process that youll follow now, to copy the interaction from one frame to another.
In the Timeline, select Frame 7 in the top layer, the Instructions layer. Hold Shift and select Frame 7 in all of the layers below the Instructions layer.
Right-click (Windows) or Control-click (Macintosh) a selected frame and choose Insert Frame from the context menu.
The Timeline extends evenly across all layers.
Select Frame 8 of the Interactions layer and choose Insert > Blank Keyframe. Select Frame 3 of the Interactions layer, and choose Edit > Copy Frames. Select Frame 8 of the Interactions layer and choose Edit > Paste Frames. A copy of the Fill in the Blank interaction appears on the Stage. Deselect all selected objects, then select and delete the camera image and the glow image.
Arrange text and graphics Youll arrange text and graphics on the Stage, just as you did for the first Fill in the Blank interaction.

Note: All of the assets that you used from the LearningAssets library are now part of your MyQuiz library. Youve finished modifying the interactions; this would be a good time to organize your MyQuiz library. For example, you can create an Images folder for the PNG files.
Publish the quiz for AICC Tracking
Macromedia Flash quiz templates allow communication with both AICC and SCORMcompliant learning management systems. Code built into the Macromedia Flash document and the HTML file created during the publish process send formatted data, including the score and time spent taking the quiz, to the LMS. For an overview of the AICC and SCORM communication process, see Using Macromedia Flash MX learning interactions at http://www.macromedia.com/support/flash/applications/ learning_interactions/.
Choose File > Publish Settings. In the Publish Settings dialog box, verify that Flash (.swf ) and HTML are selected in the Formats panel. On the HTML tab of the Publish Settings dialog box, select the Flash w/AICC Tracking template, then click Publish and close the dialog box. The publish process creates a Macromedia Flash SWF file and HTML file, which are saved in the same directory as the FLA file. You can open the MyQuiz.html file in a browser to see how your quiz appears in a web page.
Other tracking processes To continue configuring your quiz for AICC tracking, you would complete the following process.
Place the Macromedia Flash SWF file and HTML file that you just created on the web server, with both files in the same directory. In your Macromedia Flash MX application folder, browse to First Run/HTML/Learning Extensions Srvr Files. Within the folder, copy frameset.htm, result.htm, and the scripts sub folder to the same web server directory where you copied the SWF and HTML files that you published. In a text editor, open the copy of frameset.htm. In the second line of text, change Untitled-1 to the name of your HTML file, which should be MyQuiz.html. Either launch your LMS or create the AICC Course Descriptor Files that reference the frameset.htm file.

Moving on

To find out more about creating instructional media with Macromedia Flash, visit the Macromedia Flash Support Center at http://www.macromedia.com/support/flash/.