View the Library panel

Flash content that you import or that is a symbol is stored in your Library panel. To learn more about symbols and instances, select Help > Flash Tutorials > Basic Tasks: Create Symbols and Instances.
To view the Library panel, select Window > Library. Weve already imported library items and created symbols for objects that youll use in this lesson.
Flash also contains a library of buttons that you can use in your document. To view this library, after taking this lesson, select Window > Common Libraries and select the Buttons library.
Add graphics to the Stage
To add library items to your document, you verify that youre adding the object to the correct layer, and then drag the item from the Library panel to the Stage.
In the Timeline, click the Content layer name to select that layer. With the Selection tool selected, drag the Title movie clip, which contains a bitmap image and vector graphic, from the Library panel to the Stage and align it on top of the gray bar at the top of the Stage that contains the word Title. In Flash, you can work with bitmap images, which describe graphics using pixels, and vector art, which uses mathematical representation to describe art. For more information, see About vector and bitmap graphics in Using Flash.
With the Content layer still selected, drag the text symbol from the Library panel to Stage, and align it with the Trio ZX2004 text thats already in place as a guide. You can use your keyboard arrow keys to nudge the text into place. The title text is actually a graphic created from text.

Add video

The Library panel includes an imported Flash video file (FLV). Youll add the video to your document, and Flash will add the necessary frames to play the video. To learn more about using video in Flash, see Working with Video in Using Flash.
Verify that the Content layer is still selected in the Timeline. From the Library panel, drag the ggb_movie_for_trio_new video to the dark gray Video guide on the Stage. A dialog box appears that indicates Flash will add 138 frames to the Timeline for the video. Click Yes. Drag the playhead across the Timeline to view the video.

View object properties

Select the instance on the Stage at Frame 15 again, and then select the Free Transform tool in the Tools panel. Select the lower right handle and drag it towards the center of the image to make it smaller (see the following figure).
Resize the instance using the Free Transform tool. As shown in this figure, you can also rotate the image using the Free Transform tool.
You can create several kinds of animation in an FLA file, such as motion tweens, shape tweens, and frame-by-frame animation. In this tutorial, you will create a motion tween. A motion tween is an animation where you define properties such as position, size, and rotation for an instance at one point in time, and then you change those properties at another point in time. In this animation, you change the brightness and size of the instance.
12. Select any frame between Frames 1 and 15, and then select Motion from
the Tween pop-up menu in the Property inspector. The span of frames changes color and an arrow appears between Frames 1 and 15 (see the following figure). Notice how the options in the Property inspector are different when you select a frame compared to when you select a movie clip instance.
Create a motion tween between Frames 1 and 15 on the movie clips timeline.
You can also right-click (Windows) or option-click (Macintosh) the frame and select Create Motion Tween from the context menu instead. 13.
Select any frame between Frames 15 and 30, and then select Motion from the Tween pop-up menu in the Property inspector to create a second animation. scrub) the animation.
14. Click the playhead and drag it across the movie clip's timeline to test (or

N OT E NO T E

Select Control > Test Movie.
A quicker way to test your SWF file is to use keyboard shortcuts. Press Control + Enter (Windows) or Command + Return (Macintosh) to test the file
The test environment opens where you can see the animation. Notice how it loops, appearing to fade in and out because of the change in brightness. By default, the playhead returns to Frame 1 and replays the animation after it reaches the final frame on the Timeline. This means the animation loops repeatedly, unless you tell it to stop. You will find out how to do this below in the exercise called Writing simple actions.
Select File > Save to save your progress before moving on. After you finish saving the file, proceed to the following exercise, Creating a button.

Creating a button

When you create a banner, you need to let your user click anywhere in the banner area and open a new browser window. You can create buttons very easily in Flash. Your button can either have a graphic with rollover graphics, sounds, and even animations of their own. Or, you can create an invisible button. Invisible buttons are useful when you want to create "hot spots" on your website, or make the entire banner clickable without obscuring your graphics. In the following exercise, you'll add an invisible button over your banner graphics.

For more information on creating visible buttons with graphics and rollover effects, search creating buttons in the Flash Help panel (F1). 1. 2. 3. 4.
Click Scene 1 in the edit bar to make sure that youre on the main Stage. Select Insert > Timeline > Layer to create a new layer, and rename the new layer to button. Select the Rectangle tool in the Tools panel (the button's icon looks like a square). Find the Colors section of the Tools panel (see the following figure), and click the pencil icon to select the Stroke color control.
Select No Color, as shown in the following figure. Doing so disables the rectangle's outline.
Select No Color for the stroke color control.
Drag the mouse diagonally across the Stage to create a rectangle. The size of the rectangle does not matteryou'll resize it later using the Property inspector.
Click the Selection tool in the Tools panel, and click the rectangle on the Stage to select it. A cross-hatch pattern appears over the rectangle when you select it. Open the Property inspector (Window > Properties > Properties). Change the value in the W (width) text box to 160 and the H (height) text box to 600. Then change the X text box and the Y text box both to 0 (see the following figure).
Change the width and height of the rectangle, and then set the location of the rectangle to cover the Stage.

10. With 11.

the rectangle still selected on the Stage, press F8 to change the rectangle into a symbol. In the Convert to Symbol dialog box, type inv btn in the Name text box, select Button, and then click OK.

12. Double-click

the new button on the Stage to enter the Symbol-editing
mode. The rectangle is currently on the first Up frame of the button you created. This is the Up state of the buttonwhat users see when the button sits on the Stage. Instead, you want the button not to have anything visible on the Stage. Therefore, you need to move the rectangle to the Hit frame, which is the hit area of the button (the active region that a user can click to activate the button's actions).
Click the keyframe at the Up frame, and hold down the mouse button while you drag the keyframe to the Hit frame (see the following figure).
Drag the rectangle keyframe from the Up frame to the Hit frame on the Timeline. Now the entire area of the banner is clickable, but there is no visual appearance of the button on your banner.

14. Click

Scene 1 to return to the main Timeline.
Now there is a teal rectangle over the banner area. This refers to the invisible button's Hit area. If it's distracting to you, you can hide the button layer in the authoring environment.

Select Insert > Timeline > Layer to insert a new layer, and then rename the new layer to actions. Open the Actions panel (Window > Actions), and then select Frame 1 of the actions layer. Type the following ActionScript into the script pane (the editable text field) in the Actions panel:
inv_btn.onRelease = function(){ getURL("http://gnome.deseloper.com", "_blank"); };
Notice how you target the inv_btn instance in the first line of code. The event is the onRelease event in your ActionScript code, which refers to the action when a user clicks and then releases the mouse over the inv_btn instance. Then you tell the button to open a particular web page (http://gnome.deseloper.com) in a new window (_blank) using the getURL() method. Obviously, you would replace this URL with whatever website you want the banner to open. If you want the banner to open the website in the current page, replace _blank with _self. This is a simple piece of ActionScript code that reacts to a button click. There is a lot of additional information on learning the ActionScript language in the Flash 8 documentation. Refer to the documentation's Table of Contents, and find Learning ActionScript 2.0 in Flash.
Select File > Save to save your progress before moving on. After you finish saving the file, proceed to the following exercise, Test the application.
Now you have a Flash banner, with graphics and animation, which also reacts to button clicks. You have completed your first interactive and animated Flash document. Let's take a look at it in action, within a browser window.
Return to your banner2 document, and then select File > Publish Preview > HTML. The default browser on your computer opens and displays the banner. By default, the banner appears at the upper-left corner of the HTML document.
Click the banner to open the web page. A new browser window should open and display the gnome website. Close both browser windows and return to the Flash authoring environment. If you are happy with your document, then save your changes and stay posted for Part 3 of this tutorial. You might want to change the animation or text, or modify the code as necessary.
If you want to compare your results to the tutorial source file, open the banner2_complete.fla from the FlashBanner/Part2 folder that you saved on your hard disk in Open the authoring document on page 163.
Congratulations for completing the next step of creating a banner in Flash. You used the Flash authoring tool to add text, create symbols, animate on a timeline, and add interactivity to your application. In Part 2 of this tutorial, you learned how to use the Flash workspace to accomplish the following tasks:

The files for this tutorial are located in the Samples and Tutorials folder in the Flash installation folder. For many users, particularly in educational settings, this folder is read-only. Before proceeding with the tutorial, you should copy the entire FlashBanner tutorial folder to the writable location of your choice. In Part 1 or Part 2, you might have already copied the FlashBanner source files to another location of your hard disk. On most computers, you will find the Flash Banner tutorial folder in the following locations:
Copy the FlashBanner folder to another location on your hard disk to which you have access. Inside this folder are three directories for each part of this tutorial: Part1, Part2, and Part3. In the FlashBanner/Part3 folder, you will find an HTML file called gnome.html inside the finished folder. Double-click the file to open it in your default browser. You now see the completed SWF and HTML files in the browser window.
Review the completed project
In the completed project, you will see the structure that makes up the finished project for Part 3 of this tutorial. The application, a Flash banner inserted into an HTML page for a gnome website, looks like this at the end of Part 3:
The completed banner for Part 3 By the end of Part 3 of this tutorial, you will add the banner that you created which contains graphics, animation, and interactivity to a website using Dreamweaver.
Close the completed project
To close the document, click the close button on your browser window, in the upper right (Windows) or left (Macintosh) corner of the window. You might prefer to keep the finished file open as a reference while working with your banner file. Now youre ready to start creating your own banner file in the next section, Considering your audience.
Considering your audience
When you create a site, you often need to follow certain guidelines for submitting a Flash banner. For the purposes of this article, following established advertising guidelines is not a great concern because you're not submitting the banner to a company for advertising purposes. This section briefly explores some of the considerations you might have when creating a banner in a real-life project, or a project for wide distribution. When you create a banner that you submit to an advertising company, often you need to make sure the file meets their specified file size, dimension, target Flash Player version, and frame-rate guidelines. Sometimes, you have to consider other rules about the kinds of media you can use, button code you use in the FLA file, and so forth. You have created the banner and resized its dimensions. When doing so, you actually set the banner to established and standardized dimensions for what the Interactive Advertising Bureau calls a "wide skyscraper." The file size is also reasonable for a Flash ad of this size. You will discover how to reduce the file size in an upcoming exercise. For information on standard advertising dimensions (and many other useful guidelines), check out the Interactive Advertising Bureau's Standards and Guidelines page here: www.iab.net/standards/adunits.asp. However, ensure you confirm the advertising guidelines for the advertising service, client, or website that you're advertising with first. Guidelines might include standards for file size, dimensions, sound and video usage, and buttons.

Inserting Flash on a Dreamweaver site
You might have a web page already created for a banner. We have created a page for you to use for the purposes of this exercise, which is ready to have a banner of this size placed on it. Make sure that you have the FlashBanner/Part3 directory available (see Open the finished project), and find the website folder inside this directory. Inside the website folder are the documents that you need to edit in Dreamweaver. You will modify the gnome.html web page in the following exercise.
You can find a finished version of the website in the finished folder in the FlashBanner/Part3 directory. 1.
Open the page called gnome.html in Dreamweaver MX 2004 or Dreamweaver 8 (this tutorial uses Dreamweaver 8). You can find this document in the website folder of this article's source files. Look inside the start folder (FlashBanner/Part3/website/start).
Save a copy of gnome.html in the same directory as the SWF file you published in the previous exercise (banner3.swf). Save a copy of rightnav.css in the same directory as the SWF file you published in the previous exercise. Look inside the start folder to find rightnav.css. This document adds styles (such as text color and margins) to the gnome.html file.
In Dreamweaver, make sure that you're in Split view (View > Code and Design). When in Split view, you can see and edit the code you're working on, and also select the SWF file easily in Design view.
Select the large 160 x 600 image placeholder on the right side of the web page (see the following figure).
This is where you want to add the Flash banner to the website.
Select the large image placeholder on the right side of the web page in Dreamweaver. Notice that the dimensions are the same as your banner file.
Press the Backspace or Delete key to delete the image. Leave the text selection pointer at that position in the HTML document. Select Insert > Media > Flash. This opens the Select File dialog box, where you can select the SWF file of the banner you created.
Select the banner3.swf file, which should be in the same folder your web page is in (see Step 2). Click OK. The SWF file is inserted into the web page. (See the gnome.html document in the finished folder to reference the code that's added to the document).

In gnome.html, click inside the body tag (click between the "y" the closing angle bracket) and open the Behaviors panel in Dreamweaver (Window > Behaviors). Click Add (+) and select Check Plugin from the behaviors pop-up menu. Select Flash from the Plugin pop-up menu. Leave the If Found, Go To URL text box blank. This text box controls which page the visitor with the specified plug-in sees. Leaving the text box blank ensures that users stays on the same page if they have Flash Player installed.

2. 3. 4.

Type a URL into the Otherwise, Go To URL text box. Specify an alternative URL for visitors who don't have the Flash Player plug-in. Type noflash.html into the text box.
There is a noflash.html document for you with the source files, included in the sample files that accompany this tutorial; it's inside the finished folder. Either save this document in the same folder as the gnome.html document you're working on, or create your own file in this location. Ideally, you would create a custom web page for users without Flash Player.
Select the Always go to first URL if detection is not possible option. When selected, this option effectively means "assume that the visitor has the plug-in, unless the browser explicitly indicates that the plug-in is not present." Because you add an alternate ad for visitors without the plug-in, this option is preferable for this exercise. The following figure shows the selections you have made up to this point to add Flash Player detection.
Make these selections to add Flash Player detection in Dreamweaver using a behavior.
Click OK. When you finish, Dreamweaver adds the following code to the <body> tag:
<body id="container" onLoad="MM_checkPlugin('Shockwave Flash','','noflash.html',true);return document.MM_returnValue">
Save your changes to the document before you proceed to Test the application.
You can find the finished files in the FlashBanner/Part3 file directory, inside the finished folder.
You can also add Flash Player detection in Flash authoring if you aren't using Dreamweaver. Go to the Publish Settings dialog box (File > Publish Settings) and make sure that you select HTML in the Formats tab. Then select the HTML tab, and select the Detect Flash Version option. Click Settings next to the check box. You can set the target, content, and alternate pages in this dialog box.

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.

Set up your workspace

First, youll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons.
In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\Create Accessible Content and double-click accessibility_start.fla. On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Create Accessible Content and double-click accessibility_start.fla
Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file.
As you complete this lesson, remember to save your work frequently.
Select Window > Workspace Layout > Default to set up your workspace for taking lessons.
Make your document accessible to screen readers
Youll now specify that your document is accessible to screen readers, and provide a name and description of your document that a screen reader can read aloud.
With nothing selected on the Stage, select Window > Other Panels > Accessibility. In the Accessibility panel, verify that the following options are selected:

Make Movie Accessible is

selected by default and allows Flash Player to pass accessibility information to a screen reader.
allows Flash Player to pass accessibility information nested inside a movie clip to a screen reader. If this option is selected for the entire document, you can still hide child objects for individual movie clips.
Auto Label associates text next to another Stage object, such as an input text field, as a label or title for that element.
Make Child Objects Accessible
Provide a document title and description
In the Accessibility panel for the document, you can enter a name and description for your document for screen readers.
In the Name text box, enter Trio ZX2004. In the Description text box, enter Corporate website about the Trio ZX2004. Includes 6 navigation buttons, overview text, and an animated car.
Provide a title and description for instances
Now that youve provided information about the entire document, you can provide information about Stage objects included in the document.

Add and name a slide

You can easily add slides to your presentation using the context menu in the Screen Outline pane.
In the Screen Outline pane, select the title thumbnail. Right-click (Windows) or Control-click (Macintosh) and select Insert Screen from the context menu.
A new screen appears in the Screen Outline pane, at the same level as the title slide. The new slide automatically inherits media from the presentation slide.
Double-click the new slides name in the Screen Outline pane, and name the slide features.

Select and move slides

You can copy, cut, paste, and drag screens in the Screen Outline pane to change their order in the presentation. Youll select three screens, cut them, and paste them so that theyre nested as children of the features slide.
In the Screen Outline pane, select the performance slide. Shift-click the safety and handling slides to add them to the selection. Right-click (Windows) or Control-click (Macintosh) the selected slides and select Cut from the context menu. In the Screen Outline pane, right-click (Windows) or Control-click (Macintosh) the features slide and select Paste Nested Screen from the context menu. The three slides now appear as children of the features slide.
Add content to a new slide
The features slide, as a child of the presentation slide, inherits properties from that slide. Additionally, because the features slide is a parent to the three slides that you copied and pasted, content that you add to that slide appears on the three children slides.
In the Screen Outline pane, select the features thumbnail. From the Library panel, drag the Features Content symbol to anywhere in the Document window. In the Property inspector, give the instance of Features Content an instance name of features_mc. In the Property inspector, enter -275 in the X text box and -130 in the Y text box to place the instance.

Add transition behaviors

Although your presentation is fairly complete, youll add transition behaviors to make the presentation more interesting. Specifically, youll add behaviors that make content fade and appear to fly off the Document window.
In the Screen Outline pane, select the features slide. In the Behaviors panel, click Add (+) and select Screen > Transition from the menu. In the Transitions dialog box, select Fade from the list of transitions and view the preview in the lower-left side of the dialog box. Verify that 2 seconds is selected as the duration and that In is selected as the direction, and then click OK. In the Behaviors panel, click Reveal in the Event column to open the pop-up menu and select revealChild. The revealChild option specifies that the behavior will reveal the next child screen.

In the copied function, change the visible property of the screen_mc movie clip from true to false. In the copied function, change the commented text after the slashes to read function to hide animation. Your entire script should appear as follows:
// Initialize document to hide screen movie clip. this.screen_mc._visible = false; // function to show animation this.onButton_btn.onRelease = function(){ screen_mc._visible = true; }; // function to hide animation this.offButton_btn.onRelease = function(){ screen_mc._visible = false; };
232 ActionScript: Write Scripts
Check syntax and test your application
As you learned earlier in this lesson, ActionScript depends on correct syntax to execute properly. Flash offers a variety of ways for you to test your syntax.
To check the syntax, do one of the following:
Click the pop-up menu in the upper-right corner of the Actions panel title bar and select Check Syntax. Click Check Syntax along the top of the Actions panel.
If the syntax is correct, a message appears stating that the script contains no errors. If the syntax is incorrect, a message appears stating the script contains errors; the Output panel opens and displays information about the error.
Click OK to close the syntax message. After youve verified that your ActionScript does not contain syntax errors, save the document and select Control > Test Movie. When the SWF file appears, the animation should not appear in the Global Positioning System screen, because its initial visible property is set to false. When you click and release the top green button, you call the function that sets the movie clips visible property to true. Does the animation play then? Finally, click the red Off button to see if the visible property for the animation is again false. You can test your SWF content throughout authoring to confirm that it plays as expected.
Check syntax and test your application 233
Congratulations on learning a few basics about writing scripts with ActionScript. In a short amount of time, you learned how to accomplish the following tasks:

Press Enter (Windows) or Return (Macintosh) twice and type the following comment. Then write the function that takes users to Scene 2 upon release of the goScene_btn instance:
// This script takes the user to Scene 2 when goScene_btn // is released. goScene_btn.onRelease = function (){ gotoAndStop("Scene 2", 1); };
In the script that you just typed, you used the onRelease() method for the button object. The gotoAndStop() function is a timeline control function that lets you specify the scene and frame number. In this case, you specified Frame 1.
Add navigation to return to Scene 1
The function that youll add to the button in Scene 2, to return the user to Scene 1, is similar to the function that you wrote to take the user to Scene 2.
In the Scene panel, select Scene 2. In the Timeline, create a new layer and name it Actions. Select Frame 1 of the Actions layer. In the Actions panel, enter the following in the Script pane:
// function takes user to Scene 1 when back_btn instance // is released back_btn.onRelease = function (){ gotoAndStop("Scene 1", 1); };
The only differences between this function and the function in Scene 1 are the name of the button and the name of the scene.
In the Scene panel, select Scene 1.
Add navigation to return to Scene 1 239

Play a movie clip

You can configure your document to play a movie clip at runtime. Using the attachMovie() method, you can attach an instance of a movie clip in the Library panel to the Stage even though you have not placed an instance on the Stage. With the attachMovie() method, you must export the symbol for ActionScript and assign it a unique linkage identifier, which is different from the instance name.
In the Library panel, right-click the MCTrio symbol and select Linkage from the context menu. In the Linkage Properties dialog box, select Export for ActionScript. In the Identifier text box, verify that MCTrio appears as the linkage name. Verify that Export in First Frame is selected, and then click OK. Movie clips that are exported for use with ActionScript load, by default, before the first frame of the SWF file that contains them. This can create a delay before the first frame plays. When you assign a linkage identifier to an element, you can specify that the movie clip loads on the first frame to avoid playback delays.
Use the attachMovie() method to play a movie clip
Youll now use the attachMovie() method to load the movie clip and provide the symbol with an instance name. Since the instance of the symbol does not exist on the Stage, youll create the instance name programmatically.
In the Timeline, select Frame 1 of the Actions layer for Scene 1. In the Script pane of the Actions panel, place the insertion point at the end of your last line of code. Press Enter (Windows) or Return (Macintosh), and then type the following to add a comment and create a new function:

unloadMovie("trio_mc");
Your entire function for the goScene_btn should appear as follows:
// This script takes user to Scene 2 when goScene_btn // instance is released. goScene_btn.onRelease = function() { gotoAndStop("Scene 2", 1); unloadMovie("trio_mc"); };
Your entire script should appears as follows:
// Stops the playhead at Frame 1. stop(); // This script takes user to Scene 2 when goScene_btn // instance is released. goScene_btn.onRelease = function (){ gotoAndStop("Scene 2", 1); unloadMovie("trio_mc"); }; // This function plays trio_mc when attachMovie_btn // instance is released. attachMovie_btn.onRelease = function(){ this._parent.attachMovie("MCTrio", "trio_mc", 1); trio_mc._x = 275; trio_mc._y = 200;
242 ActionScript: Add Interactivity
Use a behavior to play an MP3 file
When you want to add interactivity to your document with ActionScript, you can often rely on behaviors to add the ActionScript for you. Youll use a sound behavior to play an MP3 file from the library.

1. 2. 3. 4. 5. 6.

In the Library panel, right-click (Windows) or Control-click (Macintosh) ping.mp3 and select Linkage from the context menu. In the Linkage Properties dialog box, select Export for ActionScript and verify that Export in First Frame is selected. Verify that ping.mp3 appears in the Identifier text box, and click OK. On the Stage, select the playSound_btn instance. In the Behaviors panel (Window > Behaviors), click Add (+) and select Sound > Load Sound from Library. In the linkage ID text box, enter ping.mp3, and in the Name text box below, enter ping. Then click OK.

Test your document

Test your document to verify that the interactivity works as expected.
Select Control > Test Movie. In the SWF file, click the left button to play Scene 2. When you finish viewing Scene 2, click Back. Click the middle button in Scene 1 to see the movie clip play. Click the right button to play the MP3 sound. Click the left button again to verify that the movie clip unloads.

Test your document 243

Congratulations on learning how to create an interactive document. In a few minutes, you learned how to accomplish the following tasks:
Create a new scene. Write ActionScript to navigate between scenes. Write ActionScript to play an animated movie clip at runtime. Use a behavior to play an MP3 file.
244 ActionScript: Add Interactivity

CHAPTER 21

ActionScript: Create a Form with Conditional Logic and Send Data
You can create a form with conditional logic that allows the SWF file to respond to user interaction and send the form data from the SWF file to an external source. This tutorial shows you how to create a simple form. Before taking this lesson, you should be familiar with writing functions and variables; to learn about these, select Help > Flash Tutorials > Basic Tasks: Create an Application. 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:

Create the user interface.278 Edit the data. 286
This tutorial uses a public web service and therefore requires that you have an Internet connection. In addition, the tutorial wont work in a browser because of sandbox restrictions, but will work in the Flash authoring environment or the stand-alone Flash Player.
The use of a public web service in this tutorial does not imply that you should use one for real-world applications. In fact, Macromedia does not recommend using public web services directly from within any client-side application. For more information, see About data connectivity and security in Flash Player in Using Flash.
For this tutorial, you will need to the data.xml file provided in the Tutorial Assets folder. This file can be found in one of the following locations:
In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Data Integration\Using XML for a Timesheet\data.xml On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Data Integration/Using XML for a Timesheet/data.xml
For demonstration purposes, you will access the XML data from your hard disk and display the DeltaPacket property within your screen. In the real world, the XUpdate would be sent to the server for processing.
278 Data Integration: Using XML for a Timesheet (Flash Professional Only)
Create the user interface
You will begin by creating a user interface, which displays the information in the XML file.
Add XMLConnector and DataSet Components
First you will add the components that will manage the data.
Create a new Flash document using Flash Professional 8. Make sure your computer is connected to the Internet. From the Components panel, open the Data category and drag an XMLConnector component on the Stage. In the Property inspector, enter the instance name timeInfo_con.
In the Component inspector or the Property inspector, click the Parameters tab. For the URL parameter, enter data.xml, and for the Direction parameter, select Receive from the pop-up menu. From the Components panel, drag a DataSet component on the Stage. In the Property inspector, enter the instance name timeInfo_ds. On the Stage, select the XMLConnector component. In the Component inspector, click the Schema tab. Select the results:XML property, and then click Import a Schema from a Sample XML File on the upper-right side of the Schema tab.
Alternatively, you can select Import XML Schema from the Component inspector title bar menu. 6.
Browse to where you saved the data.xml file, and select the file. The Schema tab now shows the structure of the data in the file. The row node is mapped to an ActionScript array of anonymous objects, because it repeats several times within the XML file. Any subnodes or attributes directly under the row node are considered properties of the anonymous objects contained within the array. For more information about how Flash translates XML documents into an internal schema representation, see Data Integration (Flash Professional Only) in Using Flash.

CHAPTER 2 Introduction to ActionScript Tutorial.
View a completed movie. 54 Initialize the movie. 56 Save and retrieve information. 61 Display information in a dynamic text box. 63 Write an expression. 64 Control the flow of the movie. 66 Create commands and reuse code. 68 Use a built-in object. 73 Test the movie. 75 The next steps. 77
CHAPTER 3 Introduction to Components Tutorial.
Types of components. View the completed form. Create a form. The next steps.

Contents

CHAPTER 1 Introduction to Flash MX Tutorial
This tutorial guides you through the process of creating a compelling Web experience with Macromedia Flash MX. By completing the tutorial, youll learn how to design a movie, from opening a new document to publishing the movie for Web playback. The tutorial takes approximately three hours to complete, depending on your experience, and will teach you how to do the following tasks:
Analyze a completed movie Define document properties and create a gradient Create and mask vector art Tween bitmap effects within a movie clip Load dynamic text Modify buttons and add navigation Add streaming and event sounds Test and publish the movie
We recommend that you complete the eight sections that comprise the tutorial in sequence, although you may choose to review only the sections that interest you. If you do complete the tutorial out of sequence, keep in mind that later sections assume youve mastered skills introduced in earlier sections.

What you should know

Before taking the tutorial, complete the seven lessons found in Flash Help. These interactive lessons created in Flash introduce you to the concepts you need to know to complete the tutorial. Lesson topics include the following:
Getting Started with Flash MX Illustrating in Flash Adding and Editing Text Creating and Editing Symbols Understanding Layers Creating Buttons Creating Tweened Animation
To take a lesson, choose Help > Lessons, then select from the list.

View the completed movie

You can open a completed version of the tutorial movie to better understand how your finished file will appear. In this section, youll accomplish the following tasks:

Analyze the completed movie using the Property inspector and Movie Explorer Examine a movie clip and discern its relationship to the main movie View the types of assets included in the movie
Within your Flash MX application folder, browse to Tutorials/FlashIntro and double-click stiletto.swf to open the completed movie in the stand-alone Flash Player. Published Flash movies have the SWF extension; documents in the authoring environment have the FLA extension.
When the movie opens, watch the three views of the car fade in and out. Youll create this animation by tweening bitmap effects within a movie clip. Listen to the sound that plays continuously while the movie plays. This is an example of a streaming sound. Roll over the three buttons along the lower right edge of the window to view the rollover effect, and to hear the event sounds included in each button. Click a button to see where it links, then close the browser that opened and return to the SWF file. After viewing the movie, click its close box.
Analyze the stiletto.fla file
Its helpful to analyze the completed FLA file to see how the author designed the document. To analyze the file, you can view the properties for an object, view the Timeline and Stage, look at library assets, and use the Movie Explorer.

Chapter 1

In Flash, choose File > Open. Navigate to your Flash application folder and open Tutorials/ FlashIntro/stiletto.fla. You now see the completed tutorial movie in the authoring environment.
Drag the bar that separates the Stage from the Timeline
To view all layers in the main Timeline, drag down the bar that separates the Stage from the Timeline. In the Timeline, unlock the Copy layer and the Images layer.
View document properties The Property inspector lets you view specifications for selected objects. The specifications depend on the type of object selected. If you select a text object, for example, settings to view and modify text attributes appear.
If the Property inspector isnt open, choose Window > Properties.
Introduction to Flash MX Tutorial
On the Stage, scroll down if necessary and select the rectangular block where descriptive text appeared in the finished SWF file. The text does not appear in the FLA file because it loads from an external TXT file into a dynamic text field.

Define document properties Configuring document properties is a common first step in authoring. You can use the Property inspector and Document Properties dialog box to specify settings that affect the entire movie, such as the frames per second (fps) playback rate, and the Stage size and background color.
If the Property inspector isnt open, choose Window > Properties. In the Property inspector, verify that 12 is the number in the Frame Rate text box. The movie will play at 12 frames per second, an optimal frame rate for playing animations on the Web.
Note: If the Property inspector is not fully expanded, click the white triangle in lower right corner.
The Background Color box indicates the color of the Stage. Click the down arrow on the Background Color box, then move the Eyedropper tool over the color swatches to view their hexadecimal values in the Hexadecimal text box. Find and click the gray color swatch with the hexadecimal value of 999999.

Hexadecimal text box

Select this shade of gray
To resize the Stage, click the Size button, which indicates the size of the Stage. In the Document Properties dialog box, type 640 px in the first Dimensions text box and 290 px in the second Dimensions text box. Verify that Pixels is selected in the pop-up menu, and click OK.
The Stage dimensions change to reflect the new settings of 640 x 290 pixels. Specify grid settings On the Stage, you can align objects along horizontal and vertical grid lines. Even when the grid is not visible, you can snap objects to it. Now youll modify the distance between the horizontal and vertical grid lines, and create a grid in alignment with the Stage borders.
Choose View > Grid > Edit Grid. In the Grid dialog box, type 10 px in the grid width text box and 10 px in the grid height text box. Select Snap to Grid and verify that Show Grid is not selected. Objects will now snap to the grid, even when the grid is not visible.
Verify that Normal is selected for Snap Accuracy, and click OK. Snap accuracy determines how close an object must be to a grid line before snapping to it.
Create a gradient background A gradient displays subtle variations of a color, or transitions between two or more colors. In the finished tutorial file, the background is a gradient that blends black and dark blue with a transparent area that allows part of the gray Stage color to be displayed. You achieve this effect using the Color Mixer.
Note: While gradients offer interesting effects in movies, overuse of gradients can adversely affect computer processor speeds and decrease the speed at which an animation plays. When designing a movie, consider both your artistic and performance requirements to determine the best use of gradients.

Draw a rectangle Earlier in the tutorial, you created a grid that aligned against the Stage and allowed you to snap objects to the grid lines. Now youll draw a rectangle that snaps to the area of the grid bordering the Stage.
In the pop-up menu above the right side of the Stage, enter 75% to view the entire Stage. This setting indicates your magnified or scaled-down view of the Stage. The setting does not affect the actual size of the Stage in your movie, which you specified in the Document Properties dialog box.
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. When you release the pointer, the rectangle snaps to the edges of the Stage, along the hidden grid.
Note: While completing the tutorial, you may find it useful to undo a change youve made. 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 Dark blue is the first color youll add to your gradient.
In the toolbox, select the Arrow tool. On the Stage, click inside the rectangle to select the fill. When you drew the rectangle, the Property inspector displayed properties for the Rectangle tool. When you select a shape that has already been created, the Property inspector displays properties for the shape.
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.
Click here to expand the panel
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. Click the gradient slider to the left of the gradient bar to select it.
Gradient bar 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 dark blue:
Type 000066 in the hexadecimal value text box and press Enter or Return.
Move the eyedropper over the color swatches until you find the dark blue with the hexadecimal
value of 000066, then click the swatch to select it.

Click this shade of blue

Change the alpha value In the Color Mixer, the Alpha text box indicates the transparency of the color, with 0% indicating that the color is completely transparent, and 100% indicating the color is completely opaque. Youll specify an alpha value of 0% to create a gradient that includes dark blue and black along with the gray Stage color that shows through the transparent areas of the gradient.
In the Color Mixer, either type 0 in the Alpha text box and press Enter or Return, or move the

Alpha slider to 0.

Add a second gradient color Youll now add black 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 black with a hexadecimal value of 000000. 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.
Transform the gradient fill When you transform an object, you rotate, scale, or skew it. You can transform a fill using the Fill Transform tool.
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. The ellipse has controls for the location, width, scale, and rotation of the radial gradient.
Center placement Width Scale Rotation
Drag the center control to the left of the Stage so that its approximately 1/3 of the distance from the left edge of the Stage, as shown in the following illustration.
As you change the shape and placement of the ellipse, the shape and placement of the color transitions on the Stage change accordingly.
Drag the square handle on the ellipse, which controls gradient width, to the left to make the ellipse narrower; the approximate shape of the ellipse is shown in the following illustration.

Return to the Library panel. Double-click view2.png and repeat step 3, then click OK. In the Library panel, double-click view3.png and specify Lossless (PNG/GIF), then click OK.
Create a movie clip symbol In the finished file, three views of the electric car fade in and out in the opening scene. This effect is achieved by creating a movie clip symbol that has a Timeline independent of the main Timeline. Next, you tween the alpha transparency between three views of the car to create a fade in/fade out effect. To begin to create the effect, youll create the movie clip.
With the Images layer still selected in the Timeline, drag the view1.png object from the Library panel to the Stage, placing the car within the area where the gradient background is lightest.
Choose Insert > Convert to Symbol, or press F8. In the Convert to Symbol dialog box, name the symbol Car Animation. Verify that Movie Clip is selected and that the center square is selected in the Registration indicator, and click OK. Bitmaps, like other Flash objects, have registration points used for positioning and transformation. When you align the three views of the car within the movie clip, all three views should align relative to a center registration point.

Registration point

Edit a symbol To view the Timeline of the movie clip, you must be in symbol-editing mode. You can open symbol-editing mode by double-clicking the symbol either on the Stage or in the Library panel.
On the Stage, double-click the car to open symbol-editing mode. The name of the symbol appears above the canvass area, along with a Scene 1 link that returns you to the main movie. In symbol-editing mode, youre now viewing the Timeline for the movie clip rather than the Timeline for the main movie.
Rename Layer 1 View 1 Fade.
The car that you see on the Stage is a bitmap image, not a symbol, within the Car Animation symbol. Make the car a symbol by selecting it on the Stage and pressing F8. In the Convert to Symbol dialog box, name the symbol View 1 Car, then verify that Movie Clip is selected. Verify that the center square is selected in the Registration indicator and click OK. Scroll horizontally across the Timeline until you get to Frame 105. Select the frame and choose Insert > Keyframe, or press F6 to add a keyframe. The Current Frame indicator displays the selected frame.

Current frame

Add keyframes to Frames 25 and 35. Add a keyframe to Frame 34, then click anywhere on the layer between Frames 36 and 104, and press Delete on your keyboard. An empty keyframe appears in Frame 35, and the car does not appear on the Stage from frame 35 on.

In the Timeline, Flash created a layer named Logo. Drag the Logo name to move the layer below the Copy layer. You can specify Stage coordinates for the logo. In the Property inspector, with the logo selected, type 10 in the X text box and 20 in the Y text box. Then press Enter or Return. In the Timeline, lock the Logo layer.
Create a dynamic text field Now youll create a dynamic text field. Instead of typing text into the field, youll specify the variable text that loads into the field at runtime.
In the Timeline, select the Copy layer. In the toolbox, select the Text tool. In the Property inspector, select Dynamic Text from the Text Type pop-up menu. In the Font pop-up menu, select _sans. _sans is a device font appropriate for small text that appears on multiple computer platforms. For more information about device fonts, see Using device fonts (horizontal text only), under Help > Using Flash.
In the Point Size text box, type 12. Click the Text (fill) Color box and select yellow, with a hexadecimal value of FFCC00.
In the Line Type pop-up menu, select Multiline, which is for multiple lines of text that will wrap.
Text Type pop-up menu Font pop-up menu Point size text box

Line Type pop-up menu

On the Stage, click below the logo. Drag the pointer to create a text field the width of the logo text and the approximate depth of the vertical line thats grouped with the logo, as shown in the following illustration.
In the Property inspector, type textField in the Var text box.
The text file that will load into the dynamic text field, as seen in the following illustration, includes text that names the variable: textField=. When you enter this name in the Var text box, you are naming the variable that the movie should load.
Use the loadVariables action to load text The loadVariables action includes a parameter to specify the path to the variable text. The text is in a file named copy.txt, within your Tutorials/FlashIntro/Assets folder.
In the Timeline, add a new layer and name it Actions. If necessary, drag the Actions layer to the top of the Timeline. A good practice is to keep actions on the top layer in a Timeline. If the Actions panel is not open, choose Window > Actions. Enlarge the Actions panel, if necessary, by clicking the white arrow in the title bar to expand the window, and by dragging the lower right corner of the panel to view the Actions toolbox and Script pane. The type of Actions panel that is displayed depends on the object to which youre adding an action. If youve selected a frame, for example, the Actions panel displays actions for frames. If youve selected a button, the Actions panel displays actions for buttons.
Click the triangle in the upper right corner of the panel title bar to display the pop-up menu. Verify that normal mode, rather than expert mode, is selected. Expert mode offers features useful to those experienced with ActionScript. In normal mode, parameter fields and controls guide you in creating ActionScript.

With the Arrow tool, drag to select all three buttons.
To open the Align panel, choose Window > Align. Verify that To Stage is not selected. You do not want to align the buttons relative to the Stage. Click Align Vertical Center, and then click Distribute Horizontal Center.

Align Vertical Center

To Stage Distribute Horizontal Center
The buttons align on the Stage.
Enable simple buttons When the Enable simple buttons feature is active, you can hear the sounds included with Buttons 2 and 3, and you can view the colors used for the button states. More complex button design, such as animation, does not play.
Choose Control > Enable Simple Buttons, then roll over and click each button. The right button, Button 1, is not finished. You will modify that button next. When you finish testing the buttons, choose Control > Enable Simple Buttons to deselect that feature.
Modify a button state Youll create a movie clip within the Over state of Button 1, then create a shape tween in the movie clip. The shape tween creates an effect that changes the color from gray to red.
On the Stage, double-click the right button, Button 1, to open symbol-editing mode. In the Button 1 Timeline, hide all layers except the Color layer. In the Color layer, select the Over keyframe. On the Stage, select the black oval shape for the right button. Press F8 to make the oval a symbol. In the Convert to Symbol dialog box, name the symbol Button Animation. Select Movie Clip, and click OK. On the Stage, double-click the Button Animation symbol to open symbol-editing mode. Rename Layer 1 Color Change, and add a keyframe to Frame 15. With the playhead still on Frame 15, select the button shape on Stage and choose a bright shade of red from the Fill Color pop-up menu in the toolbox. In the Timeline, click any frame between Frames 1 and 13. 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 actions to buttons 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, then stop. You use ActionScript, the Flash scripting language, 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. If the Actions panel is not open, choose Window > Actions. Enlarge the panel, if necessary, to view both the Actions toolbox and the Script pane.
With Frame 15 of the Actions layer selected, go to the Actions > Movie Control category of the Actions toolbox and double-click stop. The stop action lets you specify that the playhead will stop when it reaches Frame 15.

Add an event sound to a button In addition to dragging a sound to the Stage, you can select a sound from the Property inspector. You will use this method to add an event sound to a button. As you learned in the Creating Buttons lesson, when you create a button symbol, Flash creates frames for the different button states in relation to the mouse pointer. The Over frame, for example, represents the buttons state when the pointer is over the button. Other button frames/ states are Up, Down, and Hit. Now youll add an event sound to a button, which causes the sound to play during the Over state. Because youre adding the sound to the button symbol in the library, not just to an instance of the symbol, the sound will play for each instance of the button.
In the Library panel, double-click the Button 1 instance to open symbol-editing mode. In the Timeline for Button 1, add a new layer and name the new layer Sound. Select the Over frame (Frame 2) of the Sound layer and choose Insert > Keyframe or press F6. To define the sound properties, click Frame 2 of the Sound layer. In the Property inspector, select Ping.mp3 from the Sound pop-up menu. Verify that Event is selected in the Sync pop-up menu. Save your document and choose Control > Test Movie to hear the button sounds. When you finish viewing the SWF file, close its window to return to the document.
Organize your Library panel
You currently have quite a few assets in your Library panel. To keep these assets organized, easy to find, and categorized by type, youll create folders, then move the assets into the folders.
Tip: Keeping your library panel organized is a good practice for any movie that you author, especially because others working on the same file can then locate assets easily.
If the Library panel is not open, choose Window > Library. Expand and enlarge the window, as necessary, to view all the assets in the Library panel. At the bottom of the Library panel, click the New Folder button four times, to create four new folders.
Double-click the name of untitled folder 1, and rename it Car Animation Movie Clips. Rename the other three folders Sounds, Artwork, and Buttons. Drag View 1 Car, View 2 Car, View 3 Car, and Car Animation to the Car Animation Movie Clips folder. Drag ping.mp3 and track1.mp3 to the Sounds folder. Drag view1.png, view2.png, and view3.png to the Artwork folder.

Save your document and choose Control > Test Movie. From the Debug menu, select a modem speed to determine the download rate that Flash will simulate. You can also choose Customize to enter a download rate. Choose View > Bandwidth Profiler to see the SWF with a download performance chart.
The shaded bar represents the first and only frame in your main movie. Movies with multiple frames will have multiple shaded bars. The height of the bar represents the frames size in bytes and kilobytes. Bars that extend above the red line, especially if the bar represents a frame other than the first frame, indicate there could be delays in movie playback. You can optimize your movie for faster downloads. For details, see Optimizing movies under Help > Using Flash.
When you finish viewing the Bandwidth Profiler, choose View > Bandwidth Profiler to deselect it. Close the SWF window to return to the authoring environment.
Use the Publish command You can publish your Flash document for Web playback in one step.
With your document saved, choose File > Publish.
Flash publishes your movie by creating a SWF file, and possibly additional files, based on the attributes in the Publish Settings dialog box. Youll find the published files, by default, in the same folder where you saved your FLA. View publish settings Using the Publish Settings dialog box, its easy to reconfigure the way your file publishes.
To view your publish settings, choose File > Publish Settings.
Flash is configured, by default, to create a supporting HTML file that displays the Flash movie. When you select a format that requires additional settings, a new tab appears.
On the Formats tab, verify that Flash (.swf ) and HTML (.html) are selected. Click the Flash tab. By default, the movie publishes for the Flash Player. The publishing process also applies movie and JPEG compression.
Click the HTML tab. By default, the publishing process creates an HTML document that inserts your SWF file in a browser window. Settings on the HTML tab of the Publish Settings dialog box determine how the movie appears in the browser.
Change publish settings By default, Flash gives the SWF file the same name as the FLA file. You can tell Flash to change the name.

Choose File > Save As and enter a new filename. Use a consecutive naming scheme so you can revert to earlier versions of the file if necessary.
Create commands and reuse code
ActionScript has actions that let you control a movie in specific ways. For example, the play action moves the playhead forward in the Timeline, and the loadMovie action loads another Flash movie into the Flash Player. Each of these actions instructs Flash to perform a certain task. You may want to create your own commands in your movies. For example, in puzzle.fla, you need a command to scramble the puzzle pieces. To figure out how to write such a command with ActionScript, you must determine each step required to scramble the puzzle pieces and determine which ActionScript elements can be used to achieve those goals. First, the pieces must be spread out within a certain area on the Stage; each movie clip has an _x and _y property that you can use to set its position and a _rotation property that you can use to set its rotation. To place and rotate each piece randomly, you need to generate a random number to use in an expression. ActionScript has a built-in Math object with a random method that you can use for this purpose.
A command in ActionScript is called a function. A function is a script that you can use over and over again in a movie to perform a certain task. For example, in puzzle.fla, every time a user clicks a Scramble Pieces button, the function Scramble is run, or called. This function places the puzzle pieces in random positions on the Stage. Instead of rewriting that same script on each of the two Scramble Pieces buttons, the function is written, or declared, once and called from each button. To examine the Scramble function, select Frame 1 in the main Timeline and open the Actions panel. Scroll down the Script pane until you see the Scramble function. You can think of a function as a machine that does extra work for you. The machine can produce different results depending on what you put into it. For example, if you put bananas in a blender, you get mashed bananas, not mashed peaches. The elements you pass to a function to work on are called parameters or arguments. Parameters are passed inside the parentheses that follow the function. For example, the function RotateDisplayOrDrag(whichPiece) is passed the name of a puzzle piece, and it operates only on that piece. Parameters allow you to reuse functions in many different situations. Functions are usually declared in the first frame of a movie. In the puzzle.fla files, the functions are declared in Frame 1. Write a function Now youll declare a function that will rotate, display, or drag each puzzle piece when the user clicks it.

Note: You can also browse to your Flash MX application folder and open Tutorials/ActionScript/Finished/ puzzle6.fla. If you do use the puzzle6.fla file, save the file with a new name in your My_Puzzle folder to maintain an unadulterated version of the original file.
Select the first frame of the Actions layer and open the Actions panel if its not already open. Scroll down the Script pane and select line 31. The following commented line should be highlighted:
// ENTER RotateDisplayOrDrag() function here
From the Actions > User Defined Functions category in the Actions toolbox, double-click the function action. Type RotateDisplayOrDrag in the Name text box. Type whichPiece in the Parameters text box. The code for line 32 now looks like this:
function RotateDisplayOrDrag (whichPiece) { }
The whichPiece parameter, which identifies the selected puzzle piece, will be called three times in the body of the function. When the function is called, the passed parameter is substituted for whichPiece in each statement.
From the Actions > Conditions/Loop category in the Actions toolbox, double-click the if action, the else if action, and the else action.
Note: You can also select the actions from the Plus (+) pop-up menu
The code looks like this:
function RotateDisplayOrDrag (whichPiece) { if (<not set yet>) { } else if (<not set yet>) { } else { } }
This code creates the logical structure of the function. You will fill in the conditions to be checked in each if statement. You will also fill in the code within each set of curly brackets that is executed when the conditions are true.
Select the if statement line of code. Enter Key.isDown(18) in the Condition text box. Key is a built-in ActionScript object, which you can also find in the Objects > Movie > Key > Methods category. Key lets you determine what key a user pressed on the keyboard. The number 18 is the numerical representation of the Alt (Windows) and Option (Macintosh) keys. This line of code checks whether a user pressed those keys. To learn more about built-in objects, see Use a built-in object on page 73.
From the Actions > Miscellaneous Actions category in the Actions toolbox, double-click the evaluate action to enter a new line of code. Type _root[whichPiece]._rotation += 90 in the Expression text box, with no space between the + and =. This line of code rotates the selected piece 90 if the user presses the Alt (Windows) or Option (Macintosh) key. The brackets let you dynamically retrieve the value of an instance name. For more information, see Dot and array access operators under Help > Using Flash.

Call a function Functions can be called from any frame in a movie where you need a task completed. You must use a target path to call a function, just as you must use a path to access a variable or a movie clip. All functions in the puzzle.fla movie are declared in the first frame of the Actions layer, in the main Timeline, so the absolute path to each begins with _root. Now youll call the function that scrambles the puzzle pieces on the Stage.
In the Timeline, hide the Scramble dialog and Start dialog layers, if theyre not already hidden. Select the Congrats dialog layer.
On the Stage, double-click the DialogCongratulations symbol.
DialogCongratulations symbol
On the Stage, select the OK button. If the Actions panel isnt open, choose Window > Actions. In the Actions > User-Defined Functions category of the Actions toolbox, double-click the call function action. With the insertion point in the Object text box of the Actions panel, click the Insert Target Path button. Verify Dots and Absolute are selected. Select _root and click OK. Type Scramble in the Method text box. The Scramble function doesnt require any parameters; you can leave the Parameters text box empty. The code now looks like this:
on (release) { _root.Scramble(); }
This is the ActionScript that calls the function. Youll also need to add a few additional lines of code that belong inside the on(release) handler. Youll do that in the next steps. With the _root.Scramble. line of code selected in the Script pane, double-click evaluate from the Actions > Miscellaneous Actions category in the Actions toolbox. Type _root.scramblebutton._visible = true in the Expression text box.
Double-click the evaluate action again, to add another blank line. Type _root.dialog = false in the Expression text box.
From the Actions > Miscellaneous Actions category of the Actions toolbox, double-click the evaluate action. From the Properties category in the Actions toolbox, double-click _visible. With the insertion point after _visible, type = 0 in the Expression text box. This code specifies that the dialog box is not visible after the user clicks the OK button. The final code appears as follows: