In Part 1 of this tutorial, you will complete the following tasks:
Examine the completed FLA file. 27 Creating a new document.29 Changing document properties.30 Importing graphics. 33 Introducing layers and the timeline. 36 Test the application.40
The tutorial workflow includes the following tasks:
Examine the completed FLA file on page 27 lets you view the completed Flash document. Creating a new document on page 29 shows you how to create a FLA file that youll use to create the banner throughout the three parts of this tutorial. Changing document properties on page 30 shows you how to change the dimensions of your SWF file. Importing graphics on page 33 shows you how to import assets into your documents library. Introducing layers and the timeline on page 36 shows you how to create and manipulate layers in the main Timeline. Test the application on page 40 shows you how to export and test your documents SWF file, which lets you test your progress so far.
Examine the completed FLA file
As you examine the finished version of an application that youll create, youll also look at the Flash workspace. In this section, you will complete the following tasks:
Open the authoring document on page 163 Review the completed FLA file on page 28 Close the completed FLA file on page 28
In subsequent sections youll go through the steps to create the application yourself starting with a brand new FLA file.
Open the finished FLA file
Its helpful to analyze the completed authoring document, which is a FLA file, to see how the author designed the application. You should examine what kinds of scripts were used to add interactivity, and understand what you are going to create. 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. On most computers, you will find the Flash Banner tutorial folder in the following locations:
In Windows: boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\FlashBanner\. On the Macintosh: Macintosh HD/Applications/Macromedia Flash 8/ Samples and Tutorials/Tutorial Assets/Basic Tasks/FlashBanner/.
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/Part1 folder, you will find a Flash file called banner1_complete.fla. Double-click the file to open it in Flash. You now see the completed tutorial file in the Flash authoring environment.

It's a good idea to save a new document when you start working with it (and often thereafter) so you don't lose any of your hard work.
After you finish saving the file, proceed to the following exercise, Changing document properties.
Changing document properties
At this point you're looking at a blank canvas surrounded by many controls (see the next figure). The large white square is called the Stage, and it's where you place assets you want to display in the SWF file, such as images, buttons, text, or animations. The Stage and panels are commonly called the Flash workspace or authoring environment. The Flash environment consists of the Stage and a variety of panels, tools, and the Timeline above the Stage. For detailed information on each part of the workspace, see Take a tour of the user interface on page 14.
Around the Stage you see a variety of panels. The panel on the left is called the Tools panel (see the following figure). This panel includes tools you can use to create and modify documents, such as tools you use to draw and make selections.
Use the Tools panel to draw and make selections. You use the Selection tool (the black arrow) to make selections in these tutorials. A panel near the bottom of the Flash application is titled Properties. (Select Window > Properties > Properties if you don't see the panel.) This panel is called the Property inspector (see the following figure). This panel lets you change various properties of whatever is currently selected in your document (such as an image or a frame), or set properties for the entire SWF file (such as the frame rate or dimensions). For information on controlling the frame rate of a document, see Change the frames per second speed on page 159.
If you don't have any objects or frames selected, the Property inspector allows you to modify properties for the document itself.
Open the Property inspector (Window > Properties > Properties) and click the button next to the text that says Size to open the Document Properties dialog box.
Make sure that you dont have a frame selected. Click the Stage if you do not see the button mentioned in the previous step.

NO T E NO T E

Click this button in the Property inspector to open the Document properties dialog box. You can then change the size and color of the Stage. The button displays the current dimensions of the FLA file (550 x 400 pixels). By default the Stage size in a new Flash document is 550 pixels wide by 400 pixels high. When you click Size, you open a dialog box where you can change several document-wide properties (such as the Stage dimensions, color, and document frame rate).

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.

10. Select

Go to the directory to which you published the banner's SWF file. Check the file size of the document (it's called banner3.swf). As discussed previously, file size is not a great concern because you're not submitting the banner to an advertising service. If you need to or want to reduce the file size of your banner, you can go to the Publish Settings dialog box again (File > Publish Settings) and click the Flash tab. You can reduce the quality of the bitmap image you use in the background by changing the JPEG quality to a lower number.

12. Move

the slider to 60, and click Publish.
When you check the SWF file again, the file size is smaller. There are other ways to reduce the file size of a SWF file. If you need to design a file to a specific maximum file size, make sure you publish your work regularly and check the current file size. Bitmap images, sounds, and video quickly increase a SWF file's size. If you don't have Dreamweaver installed, then the tutorial series ends with this section. If you dont have Dreamweaver, you can return to the Publish Settings dialog box from this exercise, and make sure you select the HTML option under the Formats tab. When you publish the document, an HTML file exports with the SWF file. You can open this file, copy the HTML code, and paste it into your website. Notice that this file contains some extra tags that you won't need if you have an existing website, such as head and body tags. The tags you need are both the object and embed tags, which contains the information both Internet Explorer and Mozillabased browsers need to display the SWF file. If you have Dreamweaver installed, continue to the next page. In the following exercises, you place and edit the banner in a web page.
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.

Select the SWF file and click Edit in the Property inspector. Flash opens the associated FLA file in the Flash authoring environment, or opens a window for you to locate the associated FLA file.
Make your edits in Flash. Notice that "Editing From Dreamweaver" displays in the authoring environment, to indicate you're editing a file from the Dreamweaver environment.
Click Done next to Editing From Dreamweaver (see the following figure).
You can edit the FLA file directly from Dreamweaver. Click Done when youre finished. Flash updates the FLA file, publishes the SWF file, closes Flash, and then returns you to the Dreamweaver document. Your document is updated in Dreamweaver.
To view the changes to your SWF file in Dreamweaver, either view your site in a browser or select the SWF file in Design view and click Play in the Property inspector.
Checking for Flash Player
Most people who visit your website will have the Flash Player 6 or greater plug-in installed. In rare circumstances, a visitor might not have the plugin installed. There are several different things you can do when a visitor without Flash Player visits your site. When you have a site that uses Flash primarily for functionality, you might want to send that user to a custom page that links to the Macromedia site, where the user can download the player. The Check Plugin behavior in Dreamweaver enables you to check whether visitors to your website have the Flash Player plug-in installed. After the behavior checks for a plug-in, you can route the visitor to different URLs, depending on whether they have the minimum required plug-in. For example, if the visitor doesn't have Flash Player, you can open a page that links the visitor to the Macromedia website to download the latest version.
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.

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 Timeline, select the Background layer and click Insert Layer to create a layer. Name the new layer Notes, and press Enter (Windows) or Return (Macintosh). Right-click (Windows) or Control-click (Macintosh) the Notes layer and select Guide from the context menu. An icon next to the layer name indicates that the layer is a guide layer. With the Notes layer still selected, click the Text tool in the Tools panel. Then, in the area of the Stage above the car and road, enter Production note: Animation with no stop (); actions loop by default. Save your document and select Control > Test Movie. No content that you added to the guide layer appears in the SWF file window.
When you finish viewing the SWF file, close the window to return to the document.

Delete a layer

Because you dont really need the guide layer in your document, youll delete it.
In the Timeline, with the Notes layer selected, click the Delete Layer button.
Congratulations on learning how to work with layers in Flash. In just a few minutes, you learned how to accomplish the following tasks:
Select a layer. Hide and show layers. Lock a layer. Add and name a layer. Change the order of layers. Organize layers in a folder. Add a mask layer. Add a guide layer. Delete a layer.

CHAPTER 7

Basic Tasks: Create an Application
The application that youll create in this lesson lets users view the cost of selecting multiple products. A Calculate button then adds the total cost. 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:
Copy input and dynamic text fields. 99 Name text fields. 99 Add and name a Button component. 100 Declare variables and values for the prices.101 Specify values for input text fields. 102 Write a function. 103 Write an event handler for the component. 104
In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\Create an Application and double-click calculator_start.fla. On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Create an Application and double-click calculator_start.fla.

The Create an Application folder contains completed versions of the tutorial FLA files for your reference. 2.

NO TE NO TE

Select Window > Workspace Layout > Default to set up your workspace for taking lessons. The form already includes an input text field in the QTY column and a dynamic text field in the Price column. Youll copy the text fields for the Shocks and Cover rows.
Copy input and dynamic text fields
Youll use input text fields to create a form.
Click the input text field where users enter the quantity of CD players. Press Alt and drag the copy of the field down to the Shocks QTY area.
Alt-click the input text field that you just dragged; then drag the new copy of the field to the Cover QTY area. Alt-click the dynamic text field for the CD players price; then drag the copy of the field to the Shocks price area. Alt-click the field that you just dragged; then drag the copy to the Cover price area.

Name text fields

Before you can specify values for the text fields in ActionScript, you first need to give each text field an instance name in the Property inspector. Appending the instance name with txt identifies the object as a text object.
Click the top input text field in the QTY column. In the Instance Name text box of the Property inspector (Window > Properties), type qty1_txt. Follow the previous procedure to name the middle and bottom input text fields qty2_txt and qty3_txt, respectively. Click the top dynamic text field in the Price column. In the Instance Name text box of the Property inspector, type price1_txt. Follow the previous procedure to name the middle and bottom text fields in the column price2_txt and price3_txt, respectively.
Add and name a Button component
Components are movie clips that offer an easy way of adding advanced functionality to your document without having to know advanced ActionScript. Youll use the Button component to create a Calculate button that totals prices. Because the component youre using is based onv ActionScript 2.0, you first need to configure your Publish Settings dialog box to ensure your Flash content plays as expected.
Select File > Publish Settings. On the Flash tab of the Publish Settings dialog box, select ActionScript 2.0 in the ActionScript Version pop-up menu, if its not already selected. In the Timeline, click the Components layer to select it. From the Components panel (Window > Components), drag the Button component to the Stage and place it over the Calculate guide. On the Parameters tab of the Property inspector, with the Button component selected, click the Button text on the Label row, and type Calculate. Then press Enter or Return. The text that you type in the Label text box is the text that appears on the component.

On the Stage, click the gray mountains to select them. Shift-click the blue banner at the top of the Stage to add it to the selection. Open the Align panel (Window > Align). Tooltips appear in the Align panel showing the names of alignment options.
In the Align panel, select To Stage; then, under Match Size, select Match Width. The size of the selected art changes to match the width of the Stage. Still in the Align panel, click Align Left Edge. The art aligns to the left edge of the Stage. In the Timeline, click the Bevel layer to select it. From the Library panel (Window > Library), drag the bevel graphic to any area toward the bottom of the Stage. In the Align panel, verify that To Stage is still selected, and click Match Width. Click Align Left Edge and Align Bottom Edge. The bevel aligns to the bottom edge of the Stage. Close the Library panel and the Align panel.

5. 6. 7. 8.

Specify snap alignment settings
Snapping offers a way of precisely placing an object on the Stage by having the object affix itself to other objects and alignment tools. Youll specify snap align settings to show horizontal and vertical guides, which will assist you in placing art on the Stage.

1. 2. 3. 4.

Select View > Snapping > Snap Align to set this option, if it is not already selected. Select View > Snapping > Edit Snap Align. In the Movie Border text box of the Snap Align dialog box, enter 30 px (pixels) to snap objects to a 30-pixel Stage border. Verify that 10 pixels appears in both the Horizontal and Vertical Snap Tolerance text boxes. Snap tolerance determines how close an object must be to another object or alignment tool before it snaps into place.

Click OK.

Align an object using the alignment guides
Now that youve specified snap alignment settings, youll use the snap alignment settings that you specified to assist you in placing an object on the Stage.
In the Tools panel, click the Selection tool. In the Timeline, select the Auto layer. From the Library panel (Window > Library), drag the auto graphic and place it on the Stage, anywhere in the gray area next to the body text. Drag the auto instance again so that the snap alignment guides appear. Move the car close to the body text, and up and down as necessary until the center alignment guide appears. The guide indicates the auto is centered in relation to the body text.
While keeping the car centered with the body text (you should continue to see the center alignment guide), drag the auto in a straight line, toward the left of the Stage, until the guide snaps at the 30-pixel border that you created previously.

Create a graphic symbol.119 Duplicate and modify an instance of a symbol. 120 Modify a symbol.121 Create a movie clip symbol. 122 Assign an instance name to the movie clip. 122 Add an effect to the movie clip. 123
In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\Create Symbols and Instances and double-click symbols_start.fla. On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Create Symbols and Instances and double-click symbols_start.fla.
The Create Symbols and Instances folder contains completed versions of the tutorial FLA files for your reference.
The document opens in the Flash authoring environment.
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 configure your workspace.

About creating symbols

When you create a symbol, you specify one of the following symbol behaviors:
Graphic Movie clip Button
In this lesson, youll work with graphic and movie clip symbols. For a lesson about button symbols, select Help > Flash Tutorials > Basic Tasks: Add Button Animation and Navigation.

Create a graphic symbol

A graphic symbol is well suited for repeated use of static images, or for creating animations associated with the main Timeline. Unlike with movie clip and button symbols, you cannot give instance names to graphic symbols, nor can you refer to them in ActionScript. Youll take vector art on the Stage and turn it into a graphic symbol.
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.

7. 8. 9.

10. This makes the 9ball instance appear larger than the 8ball instance on 11.
Reposition the 9ball instance so it slightly overlaps the right edge of the 8ball instance on the Stage.

Apply a filter

The next step is to apply a blur filter to the 9ball movie clip to make it appear out of focus, as if it is in the foreground of the Stage.
With the 9ball instance still selected, click the Filters tab in the Property inspector. In the Filters tab, click Add Filter and select Blur from the pop-up menu. Drag the BlurX slider until the BlurX and BlurY value is 19. The BlurX and BlurY values are constrained to each other by default. Click the lock icon if they are not.
Click the Properties tab of the Property inspector. In the Property inspector, enter the following values in the W, H, X, and Y text boxes: W: 210 H: 235 X: 315 Y: 155
Click outside the Stage to deselect the 9ball instance.
196 Creating Graphics: Apply Graphic Filters and Blends (Flash Professional Only)
Apply filters and blends to the cue ball
The last step is to use a color effect and a filter to make the cue ball appear to be in the background of the Stage.
Drag the CueBall movie clip from the Library panel to the upper-left corner of the Stage. With the new CueBall instance still selected on the Stage, go to the Transform panel and enter 70 in the W (Width) and H (Height) text boxes. This makes the CueBall instance appear smaller than the 8ball instance.
With the CueBall instance still selected on the Stage, go to the Property inspector and select Brightness from the Color menu. A Brightness Amount slider appears to the right of the Color menu. Drag the Brightness Amount slider until the value is -48%. Enter the following values in the W, H, X, and Y text boxes: W: 105 H: 115 X: 95 Y: 105
With the CueBall instance still selected on the Stage, click the Filters tab in the Property inspector. Click Add Filter and select Blur from the Filter pop-up menu. Drag the BlurX slider until the BlurX and BlurY values are each 13. These text boxes are constrained to match each other by default. Click the lock icon if they are not.
Click outside the Stage to deselect the CueBall instance.
You have now applied the graphic effects to create a realistic look of depth. For more information about using filters and blends, see Chapter 9, Using Filters and Blends (Flash Professional only), in Using Flash.

Create an expanding-width text block
You can define the size of a text block, or you can use a text block that expands to fit the text you write. Youll begin this lesson by simply adding text to a document.
Click in a blank area in the workspace to make sure no Timeline frames or objects on the Stage are selected. In the Tools panel, select the Text tool. In the text Property inspector, set the following options:
In the Text Type pop-up menu, select Static text, if it isnt already selected. For Font, select Arial. For Font Size, enter 13. Click the text color box and select the gray with a hexadecimal value of #666666.
Select Align Left, if it isnt already selected.
In the Timeline, select the Static Text layer. With the Text tool still selected, click the Stage along the left edge of Text 1 guide, and type Trio ZX2004 Safety Features. By typing with the Text tool selected, you create a one-line text block that expands as you type. An expanding-width one-line static text block has a round handle in the upper-right corner.
If necessary, align the text above the Text 1 guide by clicking the Selection tool in the Tools panel and dragging the text that you typed to the guide.
The Text 1 guide is on a guide layer, which doesnt appear in your SWF file.
Create an expanding-width text block 201
Create a fixed-width text block
In addition to creating a line of text that expands as you type, you can create a text block that has a fixed width. Text that you enter into a fixedwidth text block wraps to the next line at the edge of the block. Youll now create a static text block with fixed dimensions.
Verify that the Static Text layer is still selected in the Timeline, and use the Selection tool to deselect any objects on the Stage or Timeline frames (click in the workspace, away from objects) In the Tools panel, select the Text tool. In the Property inspector, change the text size to 10 points. On the Stage, drag your pointer over the area of the Text 2 guide. An extendable one-line static text block has a round handle in the upper-right corner, and a fixed-width static text block has a square handle.
Inside the text block that you created, type Want to learn more?

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:

Select Control > Test Movie. When the SWF file appears, click Submit before typing anything in the input text field. The error message appears. Click Try Again, and then type the URL of a valid website in the input text field. Click Submit. Your default browser opens the web page.

Test your SWF file 253

Congratulations on learning how to write a script with conditional logic and send data. In a few minutes, you learned how to complete the following tasks:
Add an input text field to a document. Create a button symbol. Add a stop() action. Write a script that validates the form with conditional logic. Pass data out of a SWF file. Write a function.
254 ActionScript: Create a Form with Conditional Logic and Send Data

CHAPTER 22

ActionScript: Work with Objects and Classes
Classes are the blueprint for objects in Macromedia Flash Basic 8 and Macromedia Flash Professional 8. All objects in Flash have an underlying class; for example, all movie clips have a method called getURL(), and getURL() is defined in the class definition for a movie clip. Flash contains many predefined classes, such as the MovieClip class, the Array class, the Color class, and the CheckBox class. This tutorial will show you how to create and modify classes. 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:
Set up your workspace. 256 Learn about classes and object types. 256 Create an object from a class.257 Create a custom class. 259 Create two objects from the Product class. 262 Learn about extending existing classes. 263 Extend the MovieClip class to create a new class. 264
This tutorial is designed for Flash developers who are familiar with basic Flash and ActionScript concepts.
First, youll view the finished files and set up your workspace to use an optimal layout for taking lessons.
View the finished files. This lesson does not include start files. You can find finished files of handson1.fla, handson2.fla, handson3.fla, Product.as, and Drag.as, which are examples of the files that youll create in this lesson:
In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\ActionScript\Work with Objects and Classes. On the Macintosh, browse to Macintosh HD/Applications/ Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/ ActionScript/Work with Objects and Classes.

19. In the 20.In

Components panel, open the User Interface category and drag a Button component onto the Stage.
the Property inspector, enter the instance name btn_show. In the Component inspector, click the Parameters tab and change the label to Show Updates. the button selected, open the Actions panel (F9) and enter the following code:
on (click) { _parent.timeInfo_ds.applyUpdates(); }

21. With

22.Test the application (Control > Test Movie). Load the data and make a
change to one or more fields in multiple records.

23.Click 24.Try

Show Updates. Review the XML packet in the TextArea component.
You can copy the XML data into your favorite XML editor to make it easier to read.
setting the includeDeltaPacketInfo parameter of the XUpdateResolver component to true using the Component inspector.
290 Data Integration: Using XUpdate to Update the Timesheet (Flash Professional Only)
Additional information is added to the update packet. This information can be used by the server to uniquely identify this update operation. With this information, the server can generate a result packet that can be used by the XUpdateResolver component and the DataSet component to update the client data with changes from the server.

Flash MX Tutorials

macromedia
Trademarks Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developers Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind and Xtra are trademarks of Macromedia, Inc. and may be registered in the United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words or phrases mentioned within this publication may be trademarks, servicemarks, or tradenames of Macromedia, Inc. or other entities and may be registered in certain jurisdictions including internationally. Third-Party Information Speech compression and decompression technology licensed from Nellymoser, Inc. (www.nellymoser.com). Sorenson Spark video compression and decompression technology licensed from Sorenson Media, Inc.
This guide contains links to third-party Web sites that are not under the control of Macromedia, and Macromedia is not responsible for the content on any linked site. If you access a third-party Web site mentioned in this guide, then you do so at your own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for the content on those third-party sites. Apple Disclaimer APPLE COMPUTER, INC. MAKES NO WARRANTIES, EITHER EXPRESS OR IMPLIED, REGARDING THE ENCLOSED COMPUTER SOFTWARE PACKAGE, ITS MERCHANTABILITY OR ITS FITNESS FOR ANY PARTICULAR PURPOSE. THE EXCLUSION OF IMPLIED WARRANTIES IS NOT PERMITTED BY SOME STATES. THE ABOVE EXCLUSION MAY NOT APPLY TO YOU. THIS WARRANTY PROVIDES YOU WITH SPECIFIC LEGAL RIGHTS. THERE MAY BE OTHER RIGHTS THAT YOU MAY HAVE WHICH VARY FROM STATE TO STATE. Copyright 2002 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced, translated, or converted to any electronic or machine-readable form in whole or in part without prior written approval of Macromedia, Inc. Acknowledgments Director: Erick Vera Producer: Wayne Wieseler Writing: Jody Bleyle, JuLee Burdekin, Mary Burger, Dale Crawford, Marcelle Taylor Instructional Design: Stephanie Gowin, Barbara Nelson Editing: Rosana Francescato, Lisa Stanziano, Anne Szabla Multimedia Design and Production: Aaron Begley, Benjamin Salles, Noah Zilberberg Print Design and Production: Chris Basmajian, Caroline Branch First Edition: February 2002 Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103

CONTENTS

CHAPTER 1 Introduction to Flash MX Tutorial.
What you should know. 5 View the completed movie. 6 Analyze the stiletto.fla file. 6 Define properties for a new document and create a gradient background. 12 Create and mask vector art. 21 Tween bitmap effects within a movie clip. 29 Load dynamic text at runtime. 36 Add animation and navigation to buttons. 40 Add streaming and event sounds. 45 Organize your Library panel. 47 Test download performance and publish the movie. 48 The next steps. 52
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.

Text box

In the Property inspector, you can view the size, style, and color of the text, among other attributes.
If the Property inspector is not fully expanded, click the white triangle in lower right corner.
On the Stage, select the car. Movie clip settings replace the text settings. Movie clips are symbols with their own independent Timelines. You can think of them as movies within movies.
View the movie clip Now youll open symbol-editing mode to view the Timeline for a movie clip.
On the Stage, double-click the movie clip of the car. As you learned in the Creating Tweened Animation lesson, you define changes in animation in keyframes. When you scroll around the Timeline, note which layers have keyframes in them and which frames are keyframes. Beginning and intermediate keyframes that include content are indicated in the Timeline by solid circles, ending keyframes appear as small outlined rectangles.
In the Timeline, select the playhead and drag it slowly across the frames. Watch how changes in action on the Stage correspond to changes in the Timeline. As you drag the playhead, the movie plays sequentially. You can add ActionScript, the Flash scripting language, to movies to make the playhead jump to specific frames.
When you finish viewing the movie clip, do one of the following to return to the main movie:
Choose Edit > Edit Document. Click the Back button. Click Scene 1 above the Stage.
View library assets The Library panel contains the symbols and imported objects in your document.
If the Library panel isnt open, choose Window > Library. Drag the Library panel to enlarge it, if necessary, to view the objects within the library. If the Artwork folder is not expanded, double-click it to view the objects in the folder. Click view1.png to view the image in the preview area at the top of the Library panel. Expand the other folders in the Library panel to view the assets included in the document, such as buttons and movie clips.

With the Free Transform tool guide around the duplicate oval, click anywhere on the Stage or canvass away from the shapes, then click the fill of the inner oval. Press Delete on your keyboard to delete the fill.
The oval now has an outer and an inner stroke. With the Arrow tool, click the outermost stroke on the oval to select it, then Shift-click to select the innermost stroke as well. Drag the strokes slightly to the right of the fill, as shown in the following illustration.
Each area of fill color within the area bisected by the stroke now represents a discrete segment that you can color individually. Select an area of the shape fill, and use the Color Mixer to change the fill color to a brown shade with an R (red) value of 117, a G (green) value of 78, and a B (blue) value of 53. If desired, repeat this step to change another fill area to the lighter shade of brown, as shown in the following illustration:
Select the Free Transform tool. Drag around the oval background shapes to select all the shapes, then drag the right corner handle of the guide to enlarge the shapes, as shown in the following illustration.
Drag the shapes on the Stage so that part of the curve shows on the upper left corner and right side of the Stage.
Note: As you complete the tutorial, remember to save your file frequently.
Create a mask The art that you created on the Shapes layer extends beyond the Stage, well into the canvass area. Although the area on the canvass wont appear in your published movie, the art beyond the Stage can be distracting in the authoring environment. While you can erase the part of the shapes that extend into the canvass, a better solution is to apply a mask over the Stage so that only the area under the maskthe entire Stage, in this caseremains visible. This way, if youd like to return to the shapes to modify them, they will be intact.
With the Shapes layer selected, add a new layer to the Timeline and name it Mask. In the toolbox, select the Rectangle tool and draw a rectangle that extends from the upper left corner of the Stage to the lower right corner. This rectangle is the shape of your mask. Anything under the rectangle will be visible.
Right-click (Windows) or Control-click (Macintosh) the Mask layer name in the Timeline and choose Mask from the context menu.
The layer is converted to a mask layer, indicated by a down arrow icon. The layer immediately below it is linked to the mask layer, and its contents show throughout the filled area on the mask. The masked layer name is indented, and its icon changes to a right-pointing arrow. The art on the canvass is no longer visible on the Stage.

When you drag a button from the buttons.fla Library panel, the button becomes part of the library for your document.
Drag Button 2 and Button 3 from the buttons.fla Library panel, placing them to the left of Button 1. Use the approximate spacing shown in the following illustration:
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.

Test the movie

Save your file, then choose Control > Test Movie to hear the sound. When you finish playing the movie, click the movies close box.
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.
Drag Button 1, Button 2, and Button 3 to the Buttons folder. With the Buttons folder selected, click New Folder again to create a subfolder with the Buttons folder. Name the new folder Button Movie Clips, then drag the remaining button movie clip assets to this folder.
Close the Library panel and save your document.
Test download performance and publish the movie
To complete your document, you will use the Publish command to create a Web-compatible movie with the SWF extension. If you use the Publish command with the default settings, Flash prepares your file for the Web. Flash will Publish the SWF and create an HTML file with the tags necessary to display the SWF. Once you define the necessary Publish Settings options, you can repeatedly export to all selected formats at once by simply choosing File > Publish. Flash stores the publish settings you specify with the document, so each movie can have its own settings.
In this section, youll learn how to complete the following tasks:
Use the Bandwidth Profiler to test movie download performance Publish your movie in one step Review and modify publish settings View your movie in a Web browser
To complete this section, you can either continue to work on your mystiletto.fla file, or you can browse to your Flash MX application folder and open Tutorials/FlashIntro/stiletto7.fla. If you do use the stiletto7.fla file, save the file with a new name in your My_Stiletto folder to maintain an unadulterated version of the original file. Test movie download performance For a Flash movie to play correctly over the Internet, a frame must download before the movie reaches that frame. If the movie reaches a frame that hasnt downloaded yet, it pauses until the data arrives. The low bandwidth of Flash files promotes fast downloads. You can use the Bandwidth Profiler to test your movie and identify where pauses might occur. The Bandwidth Profiler graphically shows how much data is sent from each frame in the movie, according to the selected modem speed.

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.
On the Formats tab of the Publish Settings dialog box, deselect Use Default Names. In the HTML (.html) text box, select the existing text and type a new name, such as stilettoElectric.html. Then click Publish. When the Publishing status window closes, click OK in the Publish Settings dialog box.
View your published movie in a browser You can view the HTML file and SWF movie, which you just published, in your browser.
Open your browser, then open the HTML file that you created. By default, the HTML file is in the same folder as your FLA file. When you open the HTML file, the SWF movie plays within your browser.
In your browser, you can use a command such as View > Page Source or View > Source to view the HTML. OBJECT and EMBED tags ensure that the SWF movie is displayed within the browser.
For additional information about Flash HTML templates, see About HTML publishing templates under Help > Using Flash.

The next steps

By completing all eight sections of the tutorial, youve learned much about creating Flash movies, including how to complete 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 a movie
Continue learning more about Flash capabilities by taking the Introduction to ActionScript Tutorial under Help > Tutorials. Designed for ActionScript novices, the tutorial introduces you to scripting concepts while allowing you to build a jigsaw puzzle with actions. Additionally, you can search for articles and Tech Notes about Flash MX in the Macromedia award-winning Support Center. To access the site, go to www.macromedia.com and click Support.
CHAPTER 2 Introduction to ActionScript Tutorial
ActionScript is the scripting language of Macromedia Flash MX. A scripting language is a way to communicate with a program; you can use it to tell Flash what to do and to ask Flash what is happening as a movie runs. This two-way communication lets you create interactive movies. In this tutorial, you will examine the tasks involved in creating an interactive jigsaw puzzle. This tutorial is designed for Flash users who are ActionScript beginners but who want to work toward advanced abilities. You should already be familiar with basic actions and know how to assign them in the Actions panel. To get the most out of this tutorial, you should first complete the Introduction to Flash MX Tutorial, under Help > Tutorials. You should also be comfortable with the concepts presented in Writing Scripts with ActionScript and Creating Interaction with ActionScript, under Help > Using Flash. This tutorial takes approximately one hour to complete, depending upon your experience, and will teach you how to do the following tasks:

Initialize the movie Save and retrieve information Display information in a dynamic text box Write an expression Control the flow of the movie Create commands and reuse code Use a built-in object Test the movie

View a completed movie

Before you begin work on your own movie, view a completed version of this tutorial to get an idea of what youll create. Additionally, the completed tutorial lets you examine the Timeline, Movie Explorer, Stage, and Actions panel to understand authoring practices.
Within your Flash MX application folder, browse to Tutorials/ActionScript/Finished. Double-click puzzle.swf to open the completed movie in the stand-alone Flash Player.
In the puzzle.swf movie, click the OK button. The puzzle pieces scramble. Click all the Show/Hide buttons. Notice how the different patterns and piece numbers are displayed to guide you in completing the puzzle.
Click a puzzle piece and drag it to the solution area. The piece snaps into place. Shift-click a puzzle piece. The piece number appears in the circle under the solution area. You can match the piece number to its location in the piece number guide if you get stuck.
Alt-click (Windows) or Option-click (Macintosh) a puzzle piece. The piece rotates clockwise. When you finish viewing the SWF file, you can either close the window or leave it open to serve as a reference.

Chapter 2

Analyze the puzzle.fla file Its helpful to analyze the completed FLA file to determine how the author put it together and where the ActionScript elements are located.
In Flash, choose File > Open. Within your Flash MX application folder, browse to Tutorials/ ActionScript/Finished and open the puzzle.fla file. You now see the completed tutorial movie in the authoring environment. To see all the contents on the Stage, choose View > Magnification > Show Frame. The movie contains only one frame, displayed in the main Timeline of the puzzle.fla file. You will use ActionScript to show and hide the various dialog boxes and pattern guides that appear in the puzzle.
To resize the Timeline and Stage, drag the bar that separates the Stage from the Timeline up and down. Scroll through the Timeline to see how the layers are organized.
Move this bar to resize the Timeline.
To see the dialog boxes and guides on the Stage in the authoring environment, click the red X in the Eye column to the right of a layers name. A red X indicates a hidden layer. You click in the Lock column to lock a layer, which prevents it from being selected. This is useful if you are selecting an item on the Stage that is underneath an item in another layer. The Outline column, indicated by a square above the column, turns on outlines of all the elements in a layer; this can make it easier to see shape edges and can cause Flash to work faster.

With the insertion point after _root.edges, enter._visible = false in the Expression text box. This line of code makes the movie clip invisible on the Stage. You can type the code manually, or you can choose ActionScript items from the Properties and Operators folders in the Actions toolbox. If you make an error entering an action and decide youd like to delete it, select the action in the Script pane and click the Minus (-) button in the Actions panel.
In the Actions toolbox, again double-click the evaluate action to add an empty line of code ending with a semicolon. Repeat steps 5 and 6, then choose the pattern movie clip in the Insert Target Path dialog box. Repeat Step 8, again typing._visible = false in the Expression text box. Continue to repeat steps 4 through 8, choosing the image, piecenumbers, scramblebutton, areYouSure, and congrats movie clips in the Insert Target Path dialog box, and typing._visible = false for each movie clip.When you finish, your script should appear as follows:
Choose File > Save As and enter a new filename. Use a consecutive naming scheme, such as mypuzzle3.fla, so you can revert to earlier versions of the file, if necessary.
Use the Reference panel During authoring, if youd like additional information about the ActionScript that you enter, you can select the action in the Actions toolbox or Script pane, then click the Reference button. The Reference panel, a help system organized similarly to the Actions panel, displays information about the selected action.
Test your syntax ActionScript, like written language, depends on correct syntax. If the syntax is incorrect, the action will not execute correctly. Flash offers a variety of ways for you to test your syntax.
Click the Options menu in the upper right corner of the Actions panel title bar and choose Check Syntax. 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 window opens and displays information about the error.
Click OK to close the syntax message.
In normal mode, ActionScript syntax errors appear highlighted in red in the Script pane. If you move your mouse pointer over the error, a tooltip displays the error message. Syntax error messages also appear highlighted along the bottom status area of the Actions panel.

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.

Select the else

line of code. Type Key.isDown(Key.SHIFT) in the Condition text box.
This line of code checks whether a user pressed the Shift key.
In the Actions > Miscellaneous Actions category in the Actions toolbox, double-click the evaluate action to enter a new line of code. Type pieceNumber = whichPiece.slice(5) in the Expression text box. This line of code displays the piece number in the text box on the Stage when a user presses the Shift key. The slice method of the String object removes a specified number of characters (in this case, 5) from the piece numbers instance, so that just the number of the piece appears. In effect, the method slices off the first five characters, then assigns the resulting number to the pieceNumber variable, which is in turn assigned to the text field on the Stage.

Select the else line of code. In the Actions > Movie Clip Control category in the Actions toolbox, double-click the startDrag action. Type _root[whichPiece] in the Target text box and click Expression.
Select Constrain to rectangle. Type 20 in the L (left) and T (top) text boxes. In the R (right) and B (bottom) text boxes, type 780 and 580, respectively. The word false in the script indicates that lockCenter (which indicates that the puzzle piece will always snap to the center of the mouse pointer when clicked) is not specified. The numbers 20, 20, 780, and 580 specify the left, top, right, and bottom coordinates of the text box on the Stage. When a user clicks a piece, the following function that you wrote is called. The function uses the Key object to determine if the Shift, Alt, or Option key is pressed when a piece is clicked. If the Shift key is pressed while a piece is clicked, a dynamic text box displays the puzzle piece number; if the key pressed is Alt (Windows) or Option (Mac), the puzzle piece rotates 90. If Shift, Alt, or Option keys are not pressed, the user can drag the piece. Your code should look like this:
function RotateDisplayOrDrag (whichPiece) { if (Key.isDown(18)) { _root[whichPiece]._rotation += 90; } else if (Key.isDown(Key.SHIFT)) { pieceNumber = whichPiece.slice(5); } else { startDrag(_root[whichPiece],false, 20, 20, 780, 580); } }
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.

// sweepstakes text if (sweepstakes_result==true) { sweepstakes_text = "You have been entered in the Stiletto Fantasy sweepstakes. Winners are announced at the end of each month."; } else { sweepstakes_text = "You have not been entered in the Stiletto Fantasy sweepstakes."; }
Note: Do not cut and paste this ActionScript into the Actions panel. It will not work properly, because there are line breaks between the first and second lines of text.
Test your movie To see what the components look like, run your movie in the Flash Player 6.
Select Control > Test Movie. The movie is run in the Flash Player. Select and deselect the check box to be sure it works. Select a color and make sure it appears on page 2. When you are finished, select File > Close to close the movie in the player. If you noticed any errors, use the Arrow tool to select the component, then make the corrections in the Property inspector. If necessary, retest the movie.
This tutorial has presented the basic steps for creating a simple group of components and then displaying the results. For more information, see Using Flash and the ActionScript Dictionary, both found in the Help menu.