Flash Tutorial and Help

Resources

2009-02-07T17:53:00.000-08:00

Creating Graphics: Applying Gradients

2009-01-28T16:18:00.001-08:00

This tutorial guides you through the process of using the gradient tools in Macromedia Flash Basic 8 and Macromedia Flash Professional 8. With Flash, you can create simple color gradients and complex gradient effects. In this tutorial, you learn how to do some of both.

A gradient is an area of a graphic where one color changes into another color. Flash can create two main types of gradients: linear and radial. Linear gradients change color along a single axis, such as horizontal or vertical. A radial gradient changes color in an outward direction starting from a focal point. You can adjust the direction of the gradient, its colors, the location of the focal point, and many other properties of gradients.

The following illustrations show the two types of gradients:

A two-color linear gradient from red to black

A two-color radial gradient from red to black

This tutorial takes you through the steps to create an illustration using an assortment of gradients.

After examining the completed illustration, you'll begin by opening a starter Flash document and end by publishing the document for web playback. The tutorial should take approximately 20 minutes to complete.

Before you take this tutorial you should read Flash Basics, in Getting Started with Flash.

In this tutorial, you will complete the following tasks:

Examine the completed FLA file

Open the starter document

Apply a linear gradient

Create a radial gradient

Apply the finishing touches

Test the application

The tutorial in this chapter follows the order of a typical workflow for creating a Flash application. Other workflows are also possible.

The tutorial workflow includes the following tasks:

Examine the completed FLA file allows you to look at the completed Flash document.
Open the starter document lets you begin the tutorial with a FLA file that has some graphics already created for you. You will apply gradient effects to these graphics.
Apply a linear gradient shows you the steps needed to apply a linear gradient with specific colors.
Create a radial gradient shows you the steps needed to apply a radial gradient and make adjustments to its focal point.
Apply the finishing touches shows you the steps for performing a transform operation on a gradient. A transform operation is a change in an object's size or shape. You will also add a few more gradient effects to complete the illustration.
Test the application shows you how to publish your Flash document to a SWF file and view it in a web browser.

Applying Gradients > Examine the completed FLA file

2009-01-28T16:17:00.001-08:00

As you examine the finished version of an application you'll create, you will also look at the Flash workspace.

In this section, you will complete the following tasks:

Open the authoring document
Review the completed FLA file
Close the completed FLA file

In subsequent sections, you'll go through the steps to create the application yourself.

Open the authoring document

It's helpful to analyze the completed authoring document, which is a FLA file, to see how the author designed the illustration and understand what you are going to create.

The files for this tutorial are located in the Samples and Tutorials folder in the Flash application folder. For many users, particularly in educational settings, this folder is read-only. Before proceeding with the tutorial, you should copy the entire gradient tutorial folder to the writable location of your choice.

On most computers, you will find the Gradients tutorial folder in the following locations:

In Windows: boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Creating Graphics\Gradients.
On the Macintosh: boot drive/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/Gradients.

Copy the Gradients folder to another location on your hard disk that you have write-access to. In the Gradients folder, you will find a Flash file called gradients_finished.fla. Double-click the file to open it in Flash. You now see the completed tutorial file in the Flash authoring environment.

Review the completed FLA file

In the completed FLA file, you will see the combined effects of several gradients. The illustration looks like this:

There are five gradients in the illustration:

A gradient from black to green on the background.
A gradient from black to green to black on the bottom of the eight ball.
Another from white to black in the highlight on the top of the eight ball.
A subtle gradient on the white circle surrounding the number "8."
A radial gradient in the shadow beneath the eight ball.

Close the completed FLA file

To close the document, select File > Close.

If you prefer to keep the finished file open as a reference while working with the starter file, be careful not to edit it or save any changes to it.

Applying Gradients > Open the starter document

2009-01-28T16:16:00.002-08:00

Now that you have seen the completed file, it is time to create your own Flash document. To get started, you'll open a starter file that contains a few graphics to which you will apply gradients.

In Flash, select File > Open.
Navigate to the following directory:
- In Windows: Hard Disk\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Creating Graphics\
- On the Macintosh: Hard Disk/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/
Open the gradients_start.fla file.

Apply a linear gradient

2009-01-28T16:16:00.001-08:00

In this section you will add a linear gradient to the background.

Click the Selection tool in the Tools panel.
Select the gray box in the layer named Background.
Select Window > Color Mixer to display the Color Mixer panel.
In the Color Mixer's Type pop-up menu, select Linear.
Double-click the right gradient color swatch and select the color green (#006600).

Selecting the right gradient color swatch in the Color Mixer

Selecting the color green #006600 in the Color Picker
Double-click the left gradient color swatch and select the color black (#000000).
Select the Gradient Transform tool from the Tools panel. The Gradient Transform controls appear on the Stage around the gradient.

The Gradient Transform tool
Drag the Gradient Rotate handle to rotate the linear gradient clockwise as shown.
The Gradient Rotate handle

Rotating the gradient clockwise
Lock the Background layer in the Timeline to prevent further changes to this layer.
Select File > Save to save your FLA file.

Create a radial gradient

2009-01-28T16:15:00.000-08:00

Next, you will add a radial gradient to the black eight ball.

Double-click the black circle in the layer called Ball. This opens the group containing the eight-ball shape.
Select the black circle shape. You will apply a gradient to this shape. Do not select the number "8" on the eight ball.
In the Color Mixer panel select Radial from the Type pop-up menu. Select Mirror Overflow mode from the Overflow pop-up menu.

The correct Radial Type and Mirror Overflow settings
Double-click the left gradient color swatch and select the color black (#000000).
Double-click the right gradient color swatch and type 002200 into the color text box. Press Enter.
Drag the left gradient color swatch to the right about three-fourths of the way as shown in the following illustration. This makes the green part of the gradient appear only in the outer 25% of the ball shape.

Dragging a gradient color swatch
Select the Zoom tool from the Tools panel and click the circle shape to magnify it.
Select the Gradient Transform tool in the Tools panel.
Rotate the radial gradient 90º clockwise by dragging the Gradient Rotate handle.

Dragging to rotate the gradient 90º clockwise.
Select the Focal Point control and drag it near the top of the circle.

Dragging the Focal Point control toward the top of the circle shape
Select the center control point and drag the entire gradient upward a short distance as shown in the following illustration. The mirrored overflow gradient is at the bottom of the circle.

Dragging the center control point upwards
Select the Selection tool in the Tools panel.
Double-click the Zoom tool to return the Stage area to a view of 100%.
Double-click the Stage area to deselect the eight-ball group.
Select File > Save to save your FLA file.

Create a transform gradient with a shape

2009-01-28T16:14:00.004-08:00

In this section, you will create a gradient and then use the Free Transform tool to change its shape.

Select the Shadow layer in the Timeline.
Select the Oval tool in the Tools panel.
Hold down Shift and then drag on the Stage with the Oval tool to draw a circle approximately 150 pixels square. This should be about the same diameter as the eight ball.
In the Color Mixer's Type menu, select Radial.
Move the left gradient color swatch all the way to the left. You should have one swatch all the way to the left and one all the way to the right.
Double-click the left swatch and select the color black (#000000) in the Color Picker.
Double-click the right swatch to display the Color Picker.
Select the color black (#000000).
In the Color Picker, drag the Alpha slider down to zero. This creates a gradient from black to transparent, allowing the green background to show through the edge of the circle you just drew.
Select the Gradient Transform tool from the Tools panel and drag the Focal Point control of the gradient back to the center of the circle.
Select the Free Transform tool and scale the circle along the y (vertical) axis by dragging the top-center handle downward as shown in the following illustration.
Select the Selection tool from the Tools panel.
Drag the shadow shape under the eight ball with the Selection tool.
Click outside the Stage to deselect the shadow.
Select File > Save to save your FLA file.

Applying Gradients > Apply the finishing touches

2009-01-28T16:14:00.003-08:00

To complete the illustration, you will apply two more linear gradients: one to the white circle on the eight ball and one to make a highlight on the top of the eight ball.

Apply a gradient to the white circle on the eight ball

Next you will add a gradient to the white circle on the eight ball graphic.

Select the Selection tool from the Tools panel.
Double-click the eight ball group to edit the group.
Double-click the white circle group.
Select the white circle shape.
In the Color Mixer panel, assign the white circle shape a linear gradient by selecting Linear from the Type menu.
Select Nonrepeating from the Overflow menu.
Drag the left gradient color swatch all the way to the left and double-click it.
Select the color white (#FFFFFF) from the Color Picker.
Set the Alpha value for the white color swatch to 100%.
Drag the right color swatch all the way to the right and double-click it.
Select the color black (#000000) from the Color Picker.
Set the Alpha value for the black color swatch to 100%.
Your gradient settings should match those in the following illustration:

The Color Mixer with the correct settings for the gradient on the white circle
Select the Gradient Transform tool from the Tools panel.
Drag the Gradient Rotate handle approximately 120º clockwise.

The gradient rotated 120º
Select the Selection tool in the Tools panel.
Double-click the Stage twice to exit the white circle group and the eight-ball group.
Select File > Save to save your FLA file.

Apply a linear gradient to the highlight

In this section you will apply a linear gradient.

Click the red X icon in the layer named Highlight to reveal the shape in that layer. The shape appears at the top of the eight ball.
With the Selection tool, double-click the highlight shape to edit its group.
Select the highlight shape.
In the Color Mixer, select Linear from the Type menu.
Select Non-repeating from the Overflow menu.
Drag the left gradient color swatch all the way to the left and double-click it.
Select the color white (#FFFFFF) from the Color Picker.
Set the Alpha value for the left swatch to 0%.
Drag the right gradient color swatch all the way to the right and double-click it.
Select the color white from the Color Picker.
Set the Alpha value for the right swatch to 75%.
Your gradient settings should match those in the following illustration:

The Color Mixer with the correct settings for the gradient on the highlight shape
With the highlight shape still selected, select the Gradient Transform tool from the Tools panel.
Drag the Gradient Rotate control 90º counterclockwise.
Drag the Gradient Scale control downward until it touches the top of the highlight shape.

The Gradient Scale control

Dragging the Gradient Scale control downward to touch the highlight shape
Select the Selection tool from the Tools panel.
Double-click outside the Stage twice to deselect the highlight group.
The finished Flash illustration looks like this:
Select File > Save to save your FLA file.

Applying Gradients > Test the application

2009-01-28T16:14:00.001-08:00

At any point during authoring, you can test how your application plays as a SWF file. Because this tutorial contains no animation or interactivity, the file will look the same in test mode as it does in authoring mode.

Select File > Save to save your FLA file.
Select Control > Test Movie.
When you finish viewing the application, close the SWF file by clicking the close box in the test window.

You have now successfully applied a variety of gradients in Flash and created an attractive and realistic-looking illustration. By using the gradient tools in Flash, you can create an infinite range of visually interesting graphics and effects.

Creating Graphics: Apply Graphic Filters and Blends (Flash Professional Only)

2009-01-28T16:13:00.003-08:00

This tutorial guides you through the process of creating eye-catching graphic effects using some of the authoring features in Macromedia Flash Professional 8 (Filters are not available in Flash Basic). By using the graphic filters and blend modes available in Flash, you can transform ordinary graphic objects into much more visually compelling content.

A graphic filter is a method that processes the pixels of a graphic object to produce a specific effect. For example, you can apply a blur filter to an object to make its edges appear softer, or you can apply a drop shadow filter to an object to make it appear with a shadow behind it.

A blend mode is a method of making the colors of a graphic object interact with the colors of other graphic objects beneath it. For example, by using the Lighten blend mode, you can make the parts of an object appear lighter in color to varying degrees depending on the colors of the objects beneath it.

If you have not already done so, Macromedia recommends that before you take this tutorial you read Flash Basics in Getting Started with Flash.

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:

Review your task

Open the starter document

Apply filters and blends

Review your task

2009-01-28T16:13:00.001-08:00

In this tutorial, you will add some graphics to the Stage and apply filters to them to create a realistic-looking image of a pool table with a narrow depth of field. The balls in the foreground and background will appear out of focus, as if seen through a camera.

The completed FLA file

To see the completed FLA file (Filters&Blends_finished.fla), browse to one of the following locations:

In Windows: Hard Disk\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Creating Graphics\Filters and Blends
On the Macintosh: Hard Disk/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/Filters and Blends

Apply Graphic Filters and Blends (Flash Professional Only) > Open the starter document

2009-01-28T16:12:00.005-08:00

Open the starter document

Now that you have seen the document you will create, it is time to create your own version of the document. The first thing to do is open the starter document, which contains the graphic objects you will use with the filter and blend features of Flash.

In Flash, select File > Open.
Browse to one of the following locations:
- In Windows: Hard Disk\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Creating Graphics\Filters and Blends
- On the Macintosh: Hard Disk/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/Filters and Blends
Select the file named Filters&Blends_start.fla and click Open.

NOTE

As you complete the tutorial, remember to save your work frequently.

Apply a filter

2009-01-28T16:12:00.003-08:00

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.

Apply filters and blends to the cue ball

2009-01-28T16:12:00.001-08:00

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 Using Filters and Blends (Flash Professional only) in Using Flash.

Text: Add Text to a Document

2009-01-28T16:11:00.005-08:00

Macromedia Flash Basic 8 and Macromedia Flash Professional 8 provide a variety of text features and options. This lesson introduces you to the three primary types of text you can add to a document. You can add static text for titles, labels, or other text content you want to appear in a document. You can also use input text options to allow viewers to interact with your Flash application--for example, to enter their name or other information in a form. The third type of text is dynamic text. You use dynamic text fields to display text that changes based on criteria you specify. For example, you might use a dynamic text field to add values stored in other text fields, such as the sum of two numbers. This tutorial shows you how to add text and text fields to a Flash document.

After taking this lesson, be sure to explore additional text options described in "Working with Text" in Using Flash.

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

Create an expanding-width text block

Create a fixed-width text block

Edit text and change font attributes

Select device fonts

Add an input text field

Copy a text field

Assign instance names to text fields

Create a dynamic text field

Specify format options

View ActionScript for the dynamic text field

Test the SWF file

Check spelling

Text: Add Text to a Document > Set up your workspace

2009-01-28T16:11:00.003-08:00

First, you'll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons.

To open your start file, in Flash select File > Open and navigate to the file:
- In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Text\Add Text to a Document and double-click text_start.fla.
- On the Macintosh, browse to Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Text/Add Text to a Document and double-click text_start.fla.
NOTE

The Add Text to a Document folder contains completed versions of the tutorial FLA files for your reference.
Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file and to preserve the file's link to dependent files.
Select Window > Workspace Layout > Default to modify your workspace for taking lessons.
In the Stage View pop-up menu, in the upper-right side of the Timeline, select Show Frame to view both the Stage and the workspace.
In the Tools panel, click the Selection tool. Then in the Timeline, click the Static Text layer to select the layer you'll work in.

Create an expanding-width text block

2009-01-28T16:11:00.001-08:00

You can define the size of a text block, or you can use a text block that expands to fit the text you write. You'll 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 isn't 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 isn't 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.

NOTE

The Text 1 guide is on a guide layer, which doesn't appear in your SWF file.

Create a fixed-width text block

2009-01-28T16:10:00.005-08:00

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 fixed-width text block wraps to the next line at the edge of the block.

You'll 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?

NOTE

You can drag the square handle for a text block to change its width. Additionally, you can double-click a square handle to convert it into a round expanding handle.
If necessary, align the text by clicking the Selection tool in the Tools panel and dragging the text that you typed above the Text 2 guide.

Edit text and change font attributes

2009-01-28T16:10:00.003-08:00

When you select text, the Property inspector displays standard type formatting features. You can use the Property inspector to change font and size properties for a selected text object.

In the Tools panel, click the Selection tool. Double-click the text on the Stage that reads "Submit your contact information."
Select the letter S then type Please s, so that the text now reads "Please submit your contact information."
In the Tools panel, click the Selection tool. Use the Property inspector to select the bold style.
Click the text Fill Color control and select a different text color, such as another shade of gray.

Select device fonts

2009-01-28T16:10:00.001-08:00

When you use a font installed on your system in a Flash document, Flash embeds the font information in the Flash SWF file to ensure that the font is displayed properly. In addition to embedding fonts, you can use the device fonts option. This option finds the fonts on a viewer's computer that most closely resemble the specified device font. You can use device fonts only with static text.

You'll specify that the selected text uses device fonts.

With the "Please submit your contact information" text still selected on the Stage, in the Font pop-up menu in the Property inspector, select _sans.
In the Property inspector, select Use Device Fonts.
You will not see a difference in the text if you have the Arial font installed on your computer.

Add an input text field

2009-01-28T16:09:00.006-08:00

You can use an input text field to allow viewers an opportunity to interact with your Flash application. For example, input text fields offer an easy way to create forms.

In a later lesson (select Help > Flash Tutorials > ActionScript: Create a Form with Conditional Logic and Send Data), you'll learn how to use an input text field to send data from Flash to a server. Now, you'll add a text field where viewers will enter their first name.

In the Timeline, select the Input Text layer.
Use the Selection tool to click in the workspace, away from the objects on the Stage.
In the Tools panel, select the Text tool.
In the text Property inspector, set the following options:
- Select Input Text in the Text Type pop-up menu
- Select Arial in the Font pop-up menu.
- For the font size, enter 8.
- Click the text color box and select a shade of dark blue.
- Select the Alias Text button.
  The Alias Text button renders text so that it appears more readable at small sizes. For input text, this option is supported if the end user has Macromedia Flash Player 7 or later.
- Select Single Line in the Line Type pop-up menu, and verify that Show Border Around Text is selected.
  Single Line displays the text as one line. Show Border Around Text indicates the boundaries of the text field with a visible border.
On the Stage, drag the pointer in the area to the right of the First Name text to create an input text field.
If necessary, use the Selection tool to reposition the input text field.

Copy a text field

2009-01-28T16:09:00.005-08:00

One way to quickly duplicate an object on the Stage is to press Alt while dragging the object. The original object remains in place, allowing you to drag the duplicate. You'll press Alt to create two copies of the input text field that you created.

On the Stage, with the Selection tool selected, click the input text field that you created and press Alt. Drag a copy of the text field to the right of Last Name.
Alt-click the input text field that you just dragged, and then drag the new copy of the field to eMail Address.

Assign instance names to text fields

2009-01-28T16:09:00.003-08:00

An input text field on the Stage is an instance of the ActionScript TextField object, to which you can apply properties and methods. As a best practice, you should name text field instances so that you or others working on the project can refer to the instance in ActionScript.

Select the input text field that you placed next to First Name. In the Property inspector, enter firstName_txt in the Instance Name text box.
Select the input text field that you placed next to Last Name. In the Property inspector, enter lastName_txt in the Instance Name text box.
Select the input text field that you placed next to eMail Address. In the Property inspector, enter eMail_txt in the Instance Name text box.

To learn more about the TextField object, see "Working with Text" in Using ActionScript in Flash.

Create a dynamic text field

2009-01-28T16:09:00.001-08:00

Dynamic text can display text from external sources at runtime. Next, you'll create a dynamic text field that links to an external text file. The external text file you'll use is named safetyFeatures.txt. It is in the same folder as the lesson FLA file. The FLA file already contains ActionScript that displays the text when you test or publish the document.

In the Timeline, select the Dynamic Text layer. Use the Selection tool to click in the workspace, and to deselect any objects.
Select the Text tool in the Tools panel.
In the text Property inspector, set the following options:
- Select Dynamic Text from the Text Type pop-up menu.
- For Text Attributes, set Verdana as the text type, with a font size of 6.
- For Line Type, select Multiline to ensure the text wraps correctly.
- Click the text color box and select a dark shade of gray.
- Select Align Left as a paragraph attribute, if it isn't already selected.
On the Stage, drag to create a text field in the area between the two horizontal rules.In the Instance Name text box of the Property inspector, name the dynamic text field newFeatures_txt.
The ActionScript in this document loads an external text file, which is in the same folder as your document. The ActionScript is set up to load the text into a field named newFeatures_txt.

Specify format options

2009-01-28T16:08:00.005-08:00

The Format Options dialog box allows you to specify margin and indentation settings for the text.

With the dynamic text field still selected on the Stage, click Format in the Property inspector.
In the Left Margin text box, enter 5, and in the Right Margin text box, enter 5. Then click OK.
The dynamic text now has 5-pixel left and right margins within the text field.

View ActionScript for the dynamic text field

2009-01-28T16:08:00.003-08:00

You can view the ActionScript that loads text from the external text file into the dynamic text field. This script uses LoadVars actions to load the safetyfeatures.txt content in the newFeatures text field.

In the Timeline, select Frame 1 of the Actions layer.

Select Window > Actions, or press F9.

The ActionScript appears as follows:

// Load text as variable and assign it to the  // dynamic text field var features_lv:LoadVars = new LoadVars(); features_lv.onLoad = onText; features_lv.load("safetyfeatures.txt"); function onText(success:Boolean) {     if (success) {         newFeatures_txt.text = features_lv.safetyfeatures;     } else {         newFeatures_txt.text = "unable to load text file.";     } }

Close the Actions panel.

Test the SWF file

2009-01-28T16:08:00.001-08:00

Save and test the document to ensure that the dynamic text loads correctly.

Select File > Save; then select Control > Test Movie.
In the SWF file window, text from the external text file should appear in the dynamic text field that you created. (If the text does not appear as expected, check that you entered the instance name correctly: newFeatures_txt. Also check that you saved your copy of the practice file in the same folder as the original text_start file.)
Type in the input text fields.
When you finish testing the file, close the SWF file window.

Text: Add Text to a Document > Check spelling

2009-01-28T16:07:00.003-08:00

Flash Basic 8 and Flash Professional 8 introduce new features that let you check spelling in most places where text occurs in your document, including text fields, layer names, and ActionScript strings. To check spelling, you first configure the Spelling Setup options, and then run the spell checker.

Select Text > Spelling Setup.
Verify that Check Text Fields Content is selected, and that you've selected the appropriate dictionary. Select any other options, as desired. Then click OK.
Select Text > Check Spelling and respond to the dialog boxes that the spell checker presents. When you finish checking spelling, save your document.

NOTE

To check spelling in text in external files, use the spell-check feature associated with the application that you used to create the external file.

Text: Add Text to a Document > Summary

2009-01-28T16:07:00.001-08:00

Summary

Congratulations on learning the basic ways in which to add text to your document. In a few minutes, you learned how to accomplish the following tasks:

Create an expanding-width text block.
Create a fixed-width text block.
Edit text and change font attributes.
Select device fonts.
Add an input text field.
Copy a text field.
Assign instance names to text fields.
Create a dynamic text field.
View ActionScript that links the text field to an external text file.
Set up and check spelling.

To learn more about the great variety of options you have when adding text to your document, see Working with Text in Using Flash.

ActionScript: Use Script Assist mode

2009-01-28T16:06:00.002-08:00

This tutorial guides you through using Script Assist mode in Macromedia Flash Basic 8 and Macromedia Flash Professional 8.

Script Assist mode prompts you to enter the elements of a script, and helps you to add simple interactivity to your SWF file (a compressed version of a Flash .fla file with the .swf extension) or application more easily. Script Assist mode is ideal for users who either aren't comfortable writing their own scripts, or who just appreciate the ease of use the tool provides.

Used in conjunction with the Actions panel, Script Assist mode prompts you to select options and enter parameters. For example, instead of writing your own script, you can select a language element from the Actions toolbox (or the Add (+) command on the toolbar), drag it onto the Script pane, and then use Script Assist mode to help you complete the script.

This tutorial guides you through the steps of using Script Assist mode to add interactivity to a Flash application. You will add ActionScript code to an object (a button) and to frames in the Timeline. This tutorial also demonstrates some best practices for adding scripts to your Flash document.

After examining the completed Flash application, you'll begin by opening a starter Flash document and end by testing the interactivity you've added to an application by using Script Assist mode. The tutorial should take approximately 20 minutes to complete.

Before you take this tutorial, read Flash Basics in Getting Started with Flash.

In this tutorial, you will complete the following tasks:

Examine the completed FLA file

Open the starter document

Add a script to a button by using Script Assist mode

Add frame scripts to the Timeline by using Script Assist mode

Add a frame script to the Title movie clip

The tutorial in this chapter follows the order of a typical workflow for creating a Flash application. Other workflows are also possible.

The tutorial workflow includes the following tasks:

Examine the completed FLA file allows you to look at the completed Flash document.
Open the starter document lets you begin the tutorial with a FLA file (a Flash file with the .fla extension) that has the elements to which you'll use Script Assist mode to add ActionScript.
Add a script to a button by using Script Assist mode shows you how to use Script Assist mode to add a script directly to a button object on the Stage.
Add frame scripts to the Timeline by using Script Assist mode shows you how to use Script Assist mode to place scripts on a frame in the Timeline that affect buttons on the Stage. Placing code in a frame on the Timeline instead of placing code directly on objects on the Stage is a better approach to organizing ActionScript within your Flash applications.
Add a frame script to the Title movie clip shows you how to place code in the final frame of a movie clip.
Test the application shows you how to publish your Flash document to a SWF file and view it in a web browser.

Examine the completed FLA file

2009-01-28T16:06:00.001-08:00

As you examine the finished version of an application that you'll create, you'll also look at the Flash workspace.

In this section, you will complete the following tasks:

Open the authoring document
Review the completed FLA file
Close the completed FLA file

In subsequent sections you'll go through the steps to create the application yourself.

Open the authoring document

It's 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, copy the entire Script Assist tutorial folder to the writable location of your choice.

On most computers, you will find the Script Assist tutorial folder in the following locations:

In Windows: boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\ActionScript\Script Assist.
On the Macintosh: Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/ActionScript/Script Assist.

Copy the Script Assist folder to another location on your hard disk to which you have access. In the Script Assist folder, you will find a Flash file called scriptassist_complete.fla. Double-click the file to open it in Flash. You now see the completed tutorial file in the Flash authoring environment.

Review the completed FLA file

In the completed FLA file, you will see all the objects (buttons, movie clips, and graphics) that make up the sample application. The application, a Flash-based company information website, looks like this:

The completed FLA file

There are three movie clips in the application:

The Title movie clip, which displays the section titles of the site when the user clicks the corresponding navigation links (Home, About, Products, Contact).
The Menu and Menu tween movie clips, which display the primary navigation links (buttons) and together create an animation when the application is run.

The application has four buttons:

The About, Products, Contact, and Home buttons provide the navigation for the application.

In this tutorial you will add the ActionScript code to enable the buttons to navigate to the separate sections of the site.

Close the completed FLA file

To close the document, select File > Close.

If you prefer to keep the finished file open as a reference while working with the starter file, be careful not to edit it or save any changes to it.

Open the starter document

2009-01-28T16:05:00.000-08:00

Now that you have seen the completed file, it is time to create your own Flash document. To get started, you'll open a starter file that contains the elements to which you will add ActionScript code using Script Assist mode.

Add a script to a button by using Script Assist mode

2009-01-28T16:04:00.000-08:00

In this section you'll use Script Assist mode to add a script to the Home button. When the sample application is run and the Home button is clicked, the Home title appears in the Title movie clip.

NOTE

This section demonstrates how you add scripts directly to objects. Although this approach can be convenient for adding interactivity to your Flash applications, you should follow best coding practices and add code to the Timeline rather than to individual objects. For more information, see Add frame scripts to the Timeline by using Script Assist mode.

Click the Selection tool in the Tools panel.
On the Timeline, select the "menu and button" layer.
If the layer is locked, unlock it.
In the upper-right corner of the Stage, select the Home button.
In the Actions panel, you'll see the Script Assist button above the ActionScript editor.
Click Script Assist to display Script Assist mode.

With no functions selected, the Script Assist pane is blank.

Initially, the Script Assist portion of the Actions panel is blank. Script Assist mode prompts you to select options and set parameters for the functions that you add to the selected button. The parameters are displayed when you add an ActionScript function.

NOTE

You may notice that when Script Assist mode is enabled, you cannot directly edit code in the ActionScript editor, because it is read-only. All interaction with the code in the editor is through Script Assist mode with one important exception: you can highlight functions in the ActionScript editor and delete them.

To add a function to the button, click Add on the toolbar.
Clicking the Add button displays all of the predefined ActionScript functions.

From the Movie Clip Control option, select the on event handler.

NOTE

An alternative method of adding ActionScript functions is to browse for and then select them from the Actions toolbox. The Add button on the Actions panel toolbar and the Actions toolbox display the same categories of functions and you can add functions to the editor from both.

Script Assist mode prompts you to set the function's parameters.

The release event of the on event handler is selected by default.

You'll use the release event to trigger the script action when the user clicks Home.

Click Add again and then select the goto() function from the Global Functions > Timeline Control option.

Adding the function that is triggered when the event occurs

The goto() function is added as the action of the on event handler. In other words, when the Home button is pressed (the on handler) and released (the release event), the goto() action is executed.

When the Home button is clicked, the movie clip should move to and stop at the Home frame of the Timeline. To do this, you use Script Assist mode to modify the default parameters of the goto() function.

In the Script Assist panel, select the Go To and Stop option.

Set the Type to Frame Label by selecting it from the Type pop-up menu.

In the Frame text box, enter home.The changes you made with Script Assist mode are displayed in the ActionScript editor. You've just created a script without manually writing code in the ActionScript editor.

When you test the application, clicking the Home button will display the title "Home" in the Title movie clip, indicating that the Home frame is currently displayed.

Clicking the Home button displays "Home" in the Title movie clip.

You could repeat this process for the About, Products, and Contacts buttons. However, for these buttons you'll use an alternative and preferred method for creating scripts.

In each case, you want to display the related frames on the Timeline when each of the buttons are clicked; therefore, you will set the frame target of the gotoAndStop() function to the About, Products, and Contacts frames, as you've just done for the Home button.

Add frame scripts to the Timeline by using Script Assist mode

2009-01-28T16:03:00.003-08:00

Rather than adding scripts to individual objects, and acting on objects directly but also dispersing code in many different places in your Flash document, place the scripts in a frame in the timeline instead. This section demonstrates how you add scripts to a timeline.

On the main Timeline, select Frame 1 of the Actions layer.
In the Actions panel toolbar, click Script Assist to display the Script Assist window.
From the Actions toolbox, select ActionScript 2.0 Classes > Movie > Button > Events and locate the on(release) event handler.
Double-click the on(release) event handler to insert it into the ActionScript editor.

Using the Actions toolbox to insert functions into the script

You'll notice that code placed on a timeline behaves differently than code placed on objects. In the previous example, you had to specify the target object for the on(release) event handler. This is because you're not adding the script directly to the object, but rather, you're referring to it from the code in the timeline. It also explicitly uses the function keyword to declare a function. You'll see how to use Script Assist mode to handle these in the following steps.
Click in the Object text box.
On the Actions panel toolbox, the Insert a Target Path button is enabled.
Click the Insert a Target Path button to display the Insert Target Path dialog box.

Selecting the target object from the Insert Target Path dialog box
Select the About button (about_btn) from the tween_mc movie clip.
Make sure that the Relative Path option is selected and then click OK.
The target object (the Menu tween) is added.

The path to the target object is added to the event handler.

You now need to add the goto() function, the action that occurs when the About button is clicked.

Using the Actions toolbox or the Add button on the Actions panel toolbox, select Global Functions > Timeline Control and insert the goto function.
In the Script Assist pane, select the Go To and Stop option.
Set the Type to Frame Label by selecting it from the Type pop-up menu.
In the Frame text box, enter about.

The completed Timeline script

Repeat this process for the Products and Contacts buttons. In each case, when the buttons are clicked, you want to display the related frames on the Timeline; therefore, set the frame target of the gotoAndStop() function to the Products and Contacts frames as you did for the About button.

Add frame scripts to the Timeline by using Script Assist mode

2009-01-28T16:03:00.002-08:00

On the main Timeline, select Frame 1 of the Actions layer.
In the Actions panel toolbar, click Script Assist to display the Script Assist window.
From the Actions toolbox, select ActionScript 2.0 Classes > Movie > Button > Events and locate the on(release) event handler.
Double-click the on(release) event handler to insert it into the ActionScript editor.

Using the Actions toolbox to insert functions into the script

You'll notice that code placed on a timeline behaves differently than code placed on objects. In the previous example, you had to specify the target object for the on(release) event handler. This is because you're not adding the script directly to the object, but rather, you're referring to it from the code in the timeline. It also explicitly uses the function keyword to declare a function. You'll see how to use Script Assist mode to handle these in the following steps.
Click in the Object text box.
On the Actions panel toolbox, the Insert a Target Path button is enabled.
Click the Insert a Target Path button to display the Insert Target Path dialog box.

Selecting the target object from the Insert Target Path dialog box
Select the About button (about_btn) from the tween_mc movie clip.
Make sure that the Relative Path option is selected and then click OK.
The target object (the Menu tween) is added.

The path to the target object is added to the event handler.

You now need to add the goto() function, the action that occurs when the About button is clicked.

Using the Actions toolbox or the Add button on the Actions panel toolbox, select Global Functions > Timeline Control and insert the goto function.
In the Script Assist pane, select the Go To and Stop option.
Set the Type to Frame Label by selecting it from the Type pop-up menu.
In the Frame text box, enter about.

The completed Timeline script

Add a frame script to the Title movie clip

2009-01-28T16:03:00.001-08:00

The final step is to add a script to the last frame of the Title movie clip. This script is used to display the text "Home" in the Title movie clip when its animation has completed.

From the Library panel, select the Title movie clip and its timeline is displayed.
With the Actions layer selected, select the last frame (14) on the Timeline.
In the Actions panel, click Script Assist to display Script Assist mode.
Using either the Actions toolbox or the Add button on the Actions panel toolbar, select Global Functions > Timeline Control and insert the stop() function.
Next, using either the Actions toolbox or the Add button, select ActionScript 2.0 Classes > Movie > MovieClip > Methods > gotoAndStop.
1. Modifying function parameters to complete the script
2. In the Script Assist panel, select the gotoAndStop action on line 2.
3. Click in the Object text box.
4. Click the Insert Target Path button.
5. In the Insert Target Path dialog box, click the _root object and click OK.
6. In the Frame text box, enter home.
7. Deselect the Expression checkbox.
  Now, when the Title movie clip reaches the last frame and the animation is complete, "Home" is displayed. This is the initial state of the application, after it loads and before the user clicks any of the buttons.
8. Save your work.
All of the scripts needed to run the sample application are now complete and the application is ready to be tested.

ActionScript: Use Script Assist mode > Test the application

2009-01-28T16:02:00.003-08:00

Test the application

At any point during authoring, you can test how your application plays as a SWF file. Now that you've added scripts to the application with Script Assist mode, you can test the interactivity you've just added to it.

Select File > Save to save your FLA file.
Select Control > Test Movie.
Click any of the buttons (About, Products, Contact, and Home) to test that those frames are loading and that the corresponding title is displayed in the Title movie clip.
When you finish testing the application, close the SWF file by closing the test window.

You have now successfully added scripts to a button and both the main and Title movie clip timelines. You can use Script Assist mode in many ways as you work with ActionScript in your Flash documents.

ActionScript: Use Script Assist mode > Summary

2009-01-28T16:02:00.001-08:00

Summary

Congratulations on using Script Assist mode to add scripts to objects and to the timeline. In just a few minutes, you learned how to accomplish the following tasks using Script Assist mode:

Display Script Assist mode in the Actions panel and insert predefined ActionScript functions.
Add a script to a button.
Add frame scripts to the main timeline.
Add a frame script to the last frame of a movie clip.

To learn more about ActionScript, take another lesson in the Basic ActionScript series.

ActionScript: Write Scripts

2009-01-28T16:01:00.001-08:00

The ActionScript language that is part of Macromedia Flash Basic 8 and Macromedia Flash Professional 8 offers designers and developers a variety of benefits. With ActionScript you can control document playback in response to events such as elapsed time and loading data; add interactivity to a document in response to user actions, such as a button click; use built-in objects, such as a button object, with built-in associated methods, properties, and events; create custom classes and objects; and create more compact and efficient applications than you could create using user interface tools, all with code that you can reuse.

ActionScript is an object-oriented scripting language that offers control over how your Flash content plays. In subsequent lessons, you'll see how ActionScript has evolved into ActionScript 2.0 to comprise a core set of language elements that make it easier to develop object-oriented programs.

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

Create an instance of a symbol

Name button instances

Initialize the document

Apply ActionScript syntax

Locate ActionScript reference documentation

Add comments to ActionScript

Write a function for a button

Copy and modify a button function

Check syntax and test your application

ActionScript: Write Scripts > Set up your workspace

2009-01-28T16:00:00.004-08:00

Set up your workspace

First, you'll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons.

To open your start file, in Flash select File > Open and navigate to the file:
- In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\ActionScript\Write Scripts and double-click scripts_start.fla.
- On the Macintosh, browse to Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/ActionScript/Write Scripts and double-click scripts_start.fla.
NOTE

The Write Scripts folder contains completed versions of the tutorial FLA files for your reference.
Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file.
Select Window > Workspace Layout > Default to set up your workspace for taking lessons.

Create an instance of a symbol

2009-01-28T16:00:00.003-08:00

You'll drag an instance of an animated movie clip from the library to the Global Positioning System artwork on the Stage. You'll then follow the recommended practice of always naming instances--both to prompt code hinting and because in your scripts you generally refer to instance names rather than symbol names. Code hints are the tooltips that prompt you with the correct ActionScript syntax.

In the Tools panel, click the Selection tool. Select the map layer in the Timeline, and click the padlock next to the map layer to unlock that layer.
To place the movie clip accurately, select View > Snapping. Select Snap Align and Snap to Objects if the commands are not already selected.
From the Library panel (Window > Library), drag map_skewed to the black background area of the Stage.
Because guides don't appear when you first drag an object from the Library panel, you'll release the object, and then drag it again.
Drag the map_skewed movie clip on the Stage again so that the align guides appear. Use the guides to align the movie clip to the top and left edges of the GPS screen.

NOTE

If you make an error in placement, either drag the movie clip again, or press Control+Z (Windows) or Command+Z (Macintosh) to undo your changes.
With the instance of map_skewed selected on the Stage, type screen_mc in the Instance Name text box of the Property inspector (Window > Properties).

Flash is designed to present code hints when you name your instances with the appropriate suffix:
- When naming a movie clip instance, always give the instance a suffix of _mc, as in screen_mc.
- When naming a button, use the _btn suffix.
- When naming a text field, use the _txt suffix.

NOTE

For more information about additional instance name suffixes that prompt code hints, see About triggering code hints in Learning ActionScript 2.0 in Flash.

Name button instances

2009-01-28T16:00:00.001-08:00

Using the appropriate suffix to prompt code hinting, you'll provide instance names for two button instances that are already on the Stage.

In the Timeline, unlock the Buttons layer.
On the Stage, select the instance of play_button (the large green button).
In the Instance Name text box of the Property inspector, type onButton_btn to name the instance.
On the Stage, select the instance of button_stop (the small red button).
In the Instance Name text box of the Property inspector, type offButton_btn to name the instance.

Initialize the document

2009-01-28T15:59:00.005-08:00

Applications have an initial state that specifies how the content first appears to users. You initialize properties and variables in the first frame of a document. You'll specify that the map movie clip should not be visible when the SWF file first plays.

Select Frame 1 of the Actions layer. If the Actions panel isn't open, select Window > Actions.
Actions - Frame appears at the top of the panel, which indicates that you selected a frame in which to apply ActionScript. It's a good practice to verify that you're attaching ActionScript to the intended frame or object.

The Actions panel includes a Script pane, the blank text entry area, in which you can enter text directly; an Actions toolbox, which lets you select ActionScript to add to your script; and a Script navigator, which functions like the Movie Explorer.
Along the top of the Actions panel, click Insert Target path.
In the Insert Target Path dialog box, verify that Relative, meaning relative path, is selected. From the hierarchical tree in the dialog box, select screen_mc. Click OK.
A target path tells ActionScript the location of an object within the overall structure of a document. For more information about paths, see Using absolute and relative target paths in Using Flash.
Click in the Script pane, at the end of the screen_mc text, and type a period (.).

When you type the period, code hints appear for the movie clip, because you used the _mc suffix when naming the instance. Double-click _visible from the list of code hints, and type the following:

= false;

This line of code makes the screen_mc movie clip invisible on the Stage.

NOTE

If code hints don't appear, you don't have code hints selected as a preference in the Actions panel. You can type _visible directly in the Script pane. You can also change your preferences by clicking the pop-up menu in the upper-right corner of the Actions panel. From the pop-up menu, select Preferences, and then select Code Hints on the ActionScript tab.

Throughout authoring, remember to save your document frequently.

Apply ActionScript syntax

2009-01-28T15:59:00.003-08:00

All languages, whether computer languages or written and spoken "human" languages, follow specific rules that foster comprehension. These rules are known as the language syntax.

Flash uses dot syntax, which means that the period (.) links parts of a script. Other ActionScript syntax elements include the following:

A semicolon (;) in an ActionScript statement, like a period in an ordinary sentence, indicates the end of a statement.
Parentheses () group arguments that apply to an ActionScript statement.
Curly braces {} group related ActionScript statements. You can use nested braces to create a hierarchy of statements.

Later in this lesson, you'll use Flash features that allow you to test your syntax.

Locate ActionScript reference documentation

2009-01-28T15:59:00.001-08:00

During authoring, if you'd like additional information about the ActionScript that you enter, you can select the action in the Actions toolbox or Script pane and click Reference. The Help panel displays information about the selected action.

In the Script pane of the Actions panel, double-click visible to select the term.

NOTE

After completing the next step, you'll change topics in the Help panel and you will no longer be on this lesson topic. In the Help panel, click the History Back icon to return to this topic.

Along the top of the Actions panel, click the Help icon.
The visible entry in the Help panel appears.

Add comments to ActionScript

2009-01-28T15:58:00.006-08:00

In ActionScript, text after double slashes (//) is commented text, which Macromedia Flash Player ignores. Commented text often documents script functionality so that other developers can understand your script, but you can also use comments to deactivate sections of your script when debugging. As a best practice, always add comments that explain your scripts.

In the Script pane of the Actions panel, place the insertion point at the beginning of the line of code and type // Initialize document to hide screen movie clip. Press Enter (Windows) or Return (Macintosh).
Text in the Script pane appears as follows:
```
// Initialize document to hide screen movie clip. this.screen_mc._visible = false; 
```

NOTE

If your commented text is many lines, you can use /* instead of double slashes for the beginning of the comment, and */ to mark the end of the comment.

Write a function for a button

2009-01-28T15:58:00.005-08:00

A command in ActionScript is called a function. A function is a script that you can write once and use repeatedly in a document to perform a certain task. You're going to write a function that makes the screen_mc movie clip appear (visible = true) when the user releases the mouse button.

In the Script pane of the Actions panel, click after the last line of code, press Enter (Windows) or Return (Macintosh) twice, and type // function to show animation
Press Enter or Return and click Insert Target Path, along the top of the Actions panel. Select onButton_btn from the hierarchical tree, and click OK.
In the Script pane, type a period (.) and double-click onRelease from the list of code hints that appears.
In the Script pane, press the Spacebar and type the following:
= function(){

The line of code that you just completed should appear as follows:
```
this.onButton_btn.onRelease = function(){ 
```
You already know how to select objects in the Insert Target Path dialog box; you'll now enter the instance names directly into the Script pane.
Press Enter or Return, and type the following:
```
screen_mc._visible = true; 
```

Press Enter or Return and type }; to specify the end of the statement.

The function should appear as follows:

// function to show animation this.onButton_btn.onRelease = function(){     screen_mc._visible = true; };

Copy and modify a button function

2009-01-28T15:58:00.003-08:00

You just created one function that sets the visible property of a movie clip to true when the user releases the mouse button after a button click. You can probably guess how to create another function that hides the screen_mc movie clip: by setting the movie clip _visible property to false when the user clicks an Off button. You'll create that function now.

In the Script pane, select the entire function that you just typed, including the comment, curly brackets, and semicolon. Copy the text as you normally would, using Control+C (Windows) or Command+C (Macintosh).
In the Script pane, place the insertion point after the last line of code. Then press Enter (Windows) or Return (Macintosh) twice, and paste the text as you normally would, using Control+V (Windows) or Command+V (Macintosh).
In the copied function, change the text in onButton_btn to read offButton_btn.
Remember, earlier you assigned an instance name of offButton_btn to an instance.
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; };

Check syntax and test your application

2009-01-28T15:58:00.001-08:00

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 you've 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 clip's 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.

ActionScript: Write Scripts > Summary

2009-01-28T15:57:00.001-08:00

Summary

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:

Name instances following recommended practices.
Initialize a document.
Apply ActionScript syntax.
Locate ActionScript reference documentation.
Add comments to ActionScript.
Write a function.
Copy and modify a function.
Check syntax and test your application.

To learn more about ActionScript, select Help > Flash Tutorials > Basic Tasks: Create an Application.

Play a movie clip

2009-01-28T09:49:00.001-08:00

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.

Add navigation to return to Scene 1

2009-01-28T09:48:00.003-08:00

The function that you'll 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.

Link a button to a scene

2009-01-28T09:48:00.001-08:00

Now that the playhead stops at Frame 1, you'll add ActionScript that takes the user to Scene 2 upon releasing the goScene_btn instance.

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.

Control the document with a stop() action

2009-01-28T09:47:00.004-08:00

When you test or publish a Flash document that contains more than one scene, by default the scenes play linearly, in the order in which they appear in the Scenes panel. You'll use a stop() action for Scene 1 so that the playhead in the Timeline stops at Frame 1 of Scene 1.

In the main Timeline for Scene 1, add a new layer and name it Actions.
Click Frame 1 of the Actions layer.
In the Script pane of the Actions panel (Window > Actions), type the following comment followed by the script that stops the playhead on the frame:
```
// Stops the playhead at Frame 1. stop();  
```

Move between scenes

2009-01-28T09:47:00.003-08:00

You can move between scenes in the authoring environment by selecting a scene in the Scene panel.

To open the Scene panel, select Window > Other Panels > Scene.
Select Scene 1.

Add a scene

2009-01-28T09:47:00.001-08:00

You can use scenes in Flash to organize your document into discrete sections that can contain content exclusive of other scenes. You'll create and add content to a new scene.

Select Insert > Scene.
You can no longer see Scene 1, and Scene 2 now appears above the Stage. The Stage is empty.
From the Library panel (Window > Library), drag the Animation movie clip to the Stage.
With the movie clip selected, use the Property inspector to give the instance an x coordinate of 200 and a y coordinate of 15. Press Enter (Windows) or Return (Macintosh).

The movie clip moves to the designated Stage coordinates.
Use the Property inspector to give the Animation movie clip an instance name of animation_mc.
Rename Layer 1 Animation.
Create a new layer and name it Buttons. Drag an instance of the BTNback symbol to the Stage, and place it anywhere to the right of the movie clip.
Use the Property inspector to give the button an instance name of back_btn.

Name button instances

2009-01-28T09:46:00.002-08:00

You'll provide instance names for the buttons on the Stage so that you can refer to the instance names in ActionScript.

On the lower-right side of the Stage, select the button at the left.
In the Property inspector (Window > Properties), type goScene_btn in the Instance Name text box to name the instance of the symbol.
Select the middle button and use the Property inspector to give the button an instance name of attachMovie_btn.
Select the far-right button and use the Property inspector to give the button an instance name of playSound_btn.

Set up your workspace

2009-01-28T09:46:00.001-08:00

First, you'll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons.

To open your start file, in Flash select File > Open and navigate to the file:
- In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\ActionScript\Add Interactivity and double-click interactivity_start.fla.
- On the Macintosh, browse to Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/ActionScript/Add Interactivity and double-click interactivity_start.fla.
The document opens in the Flash authoring environment.

NOTE

The Add Interactivity folder contains completed versions of the tutorial FLA files for your reference.
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.
In the Stage View pop-up menu, in the upper-right side of the Timeline, select Show Frame to view both the Stage and the workspace.
Click in the workspace, away from objects on the Stage, so that no objects are selected.

ActionScript: Create a Form with Conditional Logic and Send Data

2009-01-21T18:37:00.000-08:00

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:

Set up your workspace

Add an input text field to collect form data

Add a Submit button to the form

Add an error message

Add a confirmation message

Add a stop() action

Add frame labels for navigation

Add conditional logic for the Submit button

Pass data out of a SWF file

Write a function for the Try Again button

Test your SWF file

Set up your workspace

2009-01-21T18:36:00.004-08:00

First, you'll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons.

To open your start file, in Flash select File > Open and navigate to the file:
- In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\ActionScript\Create a Form and double-click simpleForm_start.fla.
- On the Macintosh, browse to Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/ActionScript/Create a Form and double-click simpleForm_start.fla.
NOTE

The Create a Form folder contains completed versions of the tutorial FLA files for your reference.
Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file.
Select Window > Workspace Layout > Default to set up your workspace for taking lessons.
If necessary, drag the lower edge of the timeline (Window > Timeline) down to enlarge the timeline view.

Add an input text field to collect form data

2009-01-21T18:36:00.003-08:00

You'll start by inserting a text field in your document in which viewers can enter data. You will also name the text field so you can later reference the text field as you use ActionScript in your Flash application.

Click in the workspace, away from objects on the Stage, so that no objects are selected.
In the Tools panel, select the Text tool.
In the Property inspector, do the following to set text attributes:
- Select Input Text from the Text Type pop-up menu.
- Select _sans from the Font pop-up menu.
- Enter 10 in the Font Size text box.
- Click the text color box and select a shade of dark blue.
- Verify that Align Left is selected.
- Verify that Single Line is selected in the Line Type pop-up menu.
In the Timeline, select Frame 1 of the Input Text layer.
On the Stage, drag the Text tool to create an input text field to the right of the http:// text.
If necessary, use the Selection tool to drag the text field or use the arrows keys to adjust the position.
With the input text field still selected, in the Property inspector, type url_txt in the Instance Name text box.
You'll refer to the instance name later when you add ActionScript.

Add a Submit button to the form

2009-01-21T18:36:00.001-08:00

The Library panel contains a Submit button symbol that you will add to the form.

From the Library panel (Window > Library), drag the Submit button to the Stage and place it over the SubmitURL guide.
Drag the button or use the arrows keys to adjust the position, if necessary.
In the Property inspector, type submit_btn in the Instance Name text box.

Add an error message

2009-01-21T18:35:00.004-08:00

You'll add a message to display if the user clicks the Submit button before entering data.

In the Timeline, with the Branding layer selected, click Insert Layer and name the layer Dialog Boxes.
Select Frame 5 of the Dialog Boxes layer.
Right-click (Windows) or Control-click (Macintosh) the selected layer and select Insert Blank Keyframe from the context menu.
From the Library panel, drag the Dialog Box-error movie clip to the center of the Stage.
In the Timeline, select Frame 5 of the Buttons layer.
Drag the Try Again Button symbol from the Library panel to the Stage, placing the button below the error message text.
With the button still selected, in the Property inspector, enter tryAgain_btn in the Instance Name text box.

Add a confirmation message

2009-01-21T18:35:00.003-08:00

Next, you'll add a message to display when the user submits an entry in the text field.

In the Dialog Boxes layer, select Frame 10.
Right-click (Windows) or Control-click (Macintosh) the selected frame and select Insert Blank Keyframe from the context menu.
From the Library panel, drag the Dialog Box-confirm movie clip to the center of the Stage.
Close the Library panel.

Add a stop() action

2009-01-21T18:35:00.001-08:00

When a Flash application loads in Flash Player, it automatically plays in a continuous loop. You use ActionScript to control playhead movement in a timeline. You will add a stop() action in the first frame of your application so the user can make an entry in the input text field.

In the Timeline, with the Input Text layer selected, add a new layer and name it Actions.
Select Frame 1 of the Actions layer.
In the Actions panel (Window > Actions), verify that Frame 1 is selected.
Click in the Script pane of the Actions panel, and type the following comment:
// Stops the playhead at Frame 1.

Press Enter (Windows) or Return (Macintosh).
Type stop(); to add the stop action.

Add frame labels for navigation

2009-01-21T18:34:00.006-08:00

When the viewer presses the Submit button, you want Flash to jump to either the error message or the confirmation message, depending on what is entered in the text field. Labeling a frame helps you reference it in ActionScript easily. This is helpful for sending the playhead to a specific frame.

Next, you'll add frame labels to help you navigate your Flash application.

Add a keyframe (Insert > Timeline > Keyframe) to Frame 5 of the Actions layer.
In the Property inspector, type error in the Frame Label text box.
Press Enter (Windows) or Return (Macintosh). The label text and a flag appear in Frame 5 of the Timeline.
Add a keyframe to Frame 10 of the Actions layer.
In the Property inspector, type confirm in the Frame Label text box. Press Enter or Return.

Add conditional logic for the Submit button

2009-01-21T18:34:00.005-08:00

With ActionScript, you can have Flash compare information and take action based on criteria you specify. In this example, you'll add ActionScript for Flash to take one action if the user enters no data in the text field, and a different action if the user does enter data.

Select Frame 1 of the Actions layer.
In the Script pane, place the insertion point after the stop(); code. Press Enter (Windows) or Return (Macintosh).
Type the following comment:
// Adds conditional logic for the Submit button that

// validates user input.

Press Enter or Return.
In the Actions panel, click Insert a Target Path, located at the top of the panel.
In the Insert Target Path dialog box, verify that Relative is selected.
Click submit_btn on the hierarchical tree, and click OK.
In the Script pane, type a period (.) after submit_btn, and then type onRelease.
With the insertion point after onRelease, type = function (){} in the Script pane.
Place the insertion point between the curly braces and press Enter or Return, and then type if (url_txt.text == null || url_txt.text == ""){ in the Script pane.
The parallel lines are equivalent to logical or in ActionScript.
With the insertion point still inside the curly braces, press Enter or Return.
Type gotoAndStop("error"); in the Script pane.
Press Enter or Return.
Place the insertion point after the curly brace and type else{ in the Script pane.
Press Enter or Return.

Type gotoAndStop("confirm") in the Script pane.

Press Enter or Return, and type }, and then press Enter or Return again and type };. Your script should appear as follows:

// Stops the playhead at Frame 1.
stop();
// Adds conditional logic for the Submit button that
// validates user input.
this.submit_btn.onRelease = function(){
   if (url_txt.text == null || url_txt.text ==""){
       gotoAndStop("error");
} else {
       gotoAndStop("confirm")
   }
};

Pass data out of a SWF file

2009-01-21T18:34:00.003-08:00

You can send data from a Flash application in various ways--for example, in this lesson you send data to a web server to load a web page in the browser. After the else statement, you'll add the ActionScript to have Flash go to the URL the viewer enters in the input text field.

In the Script pane, place the insertion point in front of the line that reads gotoAndStop("confirm").
In the Actions toolbox, select Global Functions > Browser/Network and double-click getURL.

With the insertion point between the getURL() parentheses, type "http://"+url_txt.text to specify the data that should pass from the SWF file.

(Do not leave spaces in the code.) Your script should look like the following:

stop();
this.submit_btn.onRelease = function(){
   if (url_txt.text == null || url_txt.text ==""){
       gotoAndStop("Error");
} else {
       getUrl ("http://"+url_txt.text);
       gotoAndStop("Confirm")
   }
};

Write a function for the Try Again button

2009-01-21T18:34:00.001-08:00

A function is a script that you can use repeatedly to perform a specific task. You can pass parameters to a function, and it can return a value. In this example, when the user clicks the Try Again button, a function runs that returns the playhead to Frame 1.

You'll write that function now. In this script, you'll type the frame number, because you did not label Frame 1.

In the Timeline, select Frame 5 of the Actions layer.
In the Script pane, type the following comment:
// button function returns user to Frame 1.

Press Enter (Windows) or Return (Macintosh).
Type tryAgain_btn.onRelease = function(){, and then press Enter or Return.
Type gotoAndStop(1);, and then press Enter or Return and type } to complete the script.

Test your SWF file

2009-01-21T18:33:00.001-08:00

You'll test your document by entering a URL and checking whether it works as expected.

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.

ActionScript: Work with Objects and Classes

2009-01-21T18:22:00.000-08:00

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

Learn about classes and object types

Create an object from a class

Create a custom class

Create two objects from the Product class

Learn about extending existing classes

Extend the MovieClip class to create a new class

NOTE

This tutorial is designed for Flash developers who are familiar with basic Flash and ActionScript concepts.

Summary

2009-01-21T18:21:00.004-08:00

Congratulations on learning how to work with objects and classes in ActionScript 2.0. In a few minutes, you learned how to accomplish the following tasks:

Create and use objects from existing classes.
Create a custom class.
Create a property within a custom class.
Create a method within a custom class.
Extend an existing class and take advantage of inheritance.

Extend the MovieClip class to create a new class

2009-01-21T18:21:00.003-08:00

You'll create a new class by extending the built-in MovieClip class.

Create a new Flash document and name it Shape.fla.
Using the drawing tools, draw a shape on the Stage.
With the entire shape selected, right-click (Windows) or Control-click (Macintosh) the shape and select Convert to Symbol from the context menu.
In the Convert to Symbol dialog box, select Movie Clip as the behavior, and click Advanced.
Select Export for ActionScript.
In the Name text box, enter myShape.
In the AS 2.0 Class text box, enter Drag.
Click OK. This associates the movie clip with the Drag class that you'll create.
Using the Property inspector, assign the movie clip an instance name, then save the FLA file.

NOTE

A finished sample file of the document you just created, named handson3.fla, is located in your finished files folder. For the path, see Set up your workspace.
Create an ActionScript file by doing one of the following:
- If you're using Flash Professional 8, select File > New > ActionScript File (Not Flash Document). Save the document with the name Drag, in the same location where you saved Shape.fla.
- If you're using Flash Basic 8, open a text editor, such as Notepad. Save the file with the name Drag.as, in the same location where you saved Shape.fla.

In the ActionScript file that you just created, create a new class and constructor called Drag:

class Drag extends MovieClip
   {
       function Drag ()
       {
           onPress=doDrag;
   onRelease=doDrop;
   }
}

Define private methods in the class that use the existing movie clip methods, startDrag() and stopDrag():

class Drag extends MovieClip
 {
function Drag()
{
   onPress=doDrag;
   onRelease=doDrop;
}
private function doDrag():Void
{
this.startDrag();
}
private function doDrop():Void
{
   this.stopDrag()
}   
}

Save the ActionScript file.
Test the Shape.fla file.
You should be able to drag the movie clip.

NOTE

An example of the ActionScript file you just created, named Drag.as, is located in your finished files folder. For the path, see Set up your workspace.

Learn about extending existing classes

2009-01-21T18:21:00.001-08:00

The extends keyword in ActionScript 2.0 allows you to use all the methods and properties of an existing class in a new class. For example, if you wanted to define a class called Drag that inherited everything from the MovieClip class, you could use the following:

class Drag extends MovieClip
{}

The Drag class now inherits all properties and methods from the existing MovieClip class, and you can use MovieClip properties and methods anywhere within the class definition, as in the following example:

NOTE

The following ActionScript is an example only. Do not enter the script in your lesson FLA file.

class Drag extends MovieClip
{
       // constructor
       function Drag ()
       {
           onPress=doDrag;
           onRelease=doDrop; 
       }
       private function doDrag():Void
       {
           this.startDrag();
       }
       private function doDrop():Void
       {
           this.stopDrag();
       }
}

NOTE

The Convert to Symbol dialog box now offers a class field in which you can associate visual objects (such as movie clip) with any class that you define in ActionScript 2.0.

Create two objects from the Product class

2009-01-21T18:20:00.003-08:00

You'll create a new FLA file, and then create two objects from the Product class.

Open a new Flash document and save it in the same location where you saved Product.as.
In the new document, select Frame 1 in the Timeline.

In the Actions panel, create two objects from the Product class using the data shown in the following table (the ActionScript that you'll create appears after the table).

Instance name	Data
`pedals`	`id`	`0`
	`prodName`	`Clipless Pedals`
	`description`	`Excellent cleat engagement`
`handleBars`	`id`	`1`
	`prodName`	`ATB`
	`description`	`Available in comfort and aero design`

Verify that you created the objects as follows:

var handleBars:Product = new Product (1, "ATB", "Available in comfort and aero design");
var pedals:Product=new Product(0,"Clipless Pedals","Excellent cleat engagement");

Trace the description property of pedals:
```
trace (pedals.getDescription ());
```
Save and test the document.
You should see the description of pedals in the Output panel.

NOTE

A finished sample file of the document you just created, named handson2.fla, is located in your finished files folder. For the path, see Set up your workspace.

Create a custom class

2009-01-21T18:20:00.001-08:00

Although ActionScript includes many classes of objects, such as the MovieClip class and the Color class, there will be times when you need to construct your own classes so you can create objects based on a particular set of properties or methods.

To create a class that defines each of the new objects, you create a constructor for a custom object class and then create new object instances based on that new class, as in the following example:

NOTE

The following ActionScript is an example only. Do not enter the script in your lesson FLA file.

function Product (id:Number, prodName:String, price:Number)
{
   this.id = id;
   this.prodName = prodName;
   this.price = price;
}

To properly define a class in ActionScript 2.0, you must surround all classes by the class keyword, and you must declare all variables in the constructor outside of the constructor.

NOTE

The following ActionScript is an example only. Do not enter the script in your lesson FLA file.

class Product
{
   // variable declarations
   var id:Number
   var prodName:String
   var price:Number
   // constructor
   function Product (id:Number, prodName:String, price:Number){
       this.id  = id;
       this.prodName = prodName;
       this.price = price;
   }
}

To create objects from this class, you could now use the following code:

NOTE

The following ActionScript is an example only. Do not enter the script in your lesson FLA file.

var cliplessPedal:Product=new Product(1, "Clipless Pedal", 11);
var monkeyBar:Product=new Product(2, "Monkey Bar", 10);

However, in ActionScript 2.0, variables that are part of a class structure should not be accessed directly. Write methods within the class that will access these variables directly. Different methods should get and set properties (known as "getter" and "setter" methods). You must indicate the data type for both a method's return value and any parameters that are passed to the method when it is called.

Build a custom class

2009-01-21T18:19:00.003-08:00

You'll now build a new Product class with getter and setter methods and create an object from the Product class.

Create an ActionScript file by doing one of the following:
- If you're using Flash Professional 8, select File > New > ActionScript File (Not Flash Document). Save the document with the name Product.
- If you're using Flash Basic 8, open a text editor, such as Notepad. Save the file with the name Product.as. (Remember to give the file the .as extension, to create an ActionScript file.)
Create a constructor for a Product class by creating a function called Product that takes the arguments id, prodName, and description:
```
function Product (id:Number, prodName:String, description:String)
{}
```
In the constructor function, set the properties of the Product class equal to the setter methods that you will create:
```
setID(id);
setProdName(prodName);
setDescription(description);
```

Surround the class keyword with the constructor function.

Declare each variable used in the class:

class Product
{
   var id:Number;
   var prodName:String;
   var description:String

   function Product (id:Number, prodName:String, description:String)
{
       setID(id);
       setProdName(prodName);
       setDescription(description);
}
}

Define getter and setter methods for each property of the class, as in the following example.

Specify Void as the return type for the setter methods, and indicate the data type returned for the getter methods.

class Product
{
       var id:Number;
       var prodName:String;
       var description:String
      
       function Product (id:Number, prodName:String, description:String) {
           setID(id);
           setProdName(prodName);
           setDescription(description);
}
       public function setID (id:Number) :Void
{
           this.id = id;
}
       public function setProdName (prodName:String) :Void
{
           this.prodName = prodName;
}
       public function setDescription (description:String)  :Void
{
           this.description = description;
}
       public function getID () :Number {
           return id;
}
       public function getProdName () :String {
           return prodName
}
       public function getDescription () :String {
           return description;
   }
}

Save your file.

NOTE

A finished sample file of the file you just created, named Product.as, is located in your finished files folder. For the path, see Set up your workspace.

Specify the data type for method return values

2009-01-21T18:19:00.001-08:00

You must indicate data types for values returned by methods after the method name and list of parameters, as in the following example:

NOTE

The following ActionScript is an example only. Do not enter the script in your lesson FLA file.

public function getProductName() :String
{
   return name;
}

If no value is returned (for example, a property is being set), the data type is Void:

public function setProductName(productName:String) :Void
{
   this.productName=productName;
}

Create an object from a class

2009-01-21T18:18:00.002-08:00

You'll create an existing class using visual tools (the TextField class) and code (using the Date class).

Open a new Flash document and change the name of Layer 1 to Text.
In the Text layer, create a dynamic text field and assign it the instance name of currentDate_txt.
Create an Actions layer.
With Frame 1 of the Actions layer selected, open the Actions panel.
Create, or instantiate, an object from the Date class, named myDate:
```
var myDate:Date=new Date();
```
Create a variable called currentMonth equal to the getMonth() method:
```
var currentMonth:Number = myDate.getMonth();
```
Trace the value of currentMonth:
```
trace (currentMonth);
```
Save and test the document.
You should see a number in the Output panel that represents the month.

The getMonth() method displays the current month. The getMonth() method is zero-indexed, meaning the numbering begins at zero rather than one, so the number displayed is one less than what you would expect.
Close the Output panel and the SWF file window.

Modify your script

2009-01-21T18:18:00.001-08:00

You'll modify your script to compensate for the zero indexing.

Add +1 to the value when you create currentMonth, and test your document to be sure the expected month number appears.
That line of script should read as follows:
```
var currentMonth:Number = myDate.getMonth()+1;
```
Comment the trace statement:
```
// trace (currentMonth);
```
Below the trace statement, set the autoSize property of your text box to true:
```
currentDate_txt.autoSize = true;
```
Use the text property of your text box to display today's date in the form Today is mm/dd/yyyy.
Use the currentMonth variable you already created, plus the getDate() and getFullYear() methods of the Date object:
```
currentDate_txt.text="Today is "+currentMonth+"/"+ myDate.getDate() + "/"+myDate.getFullYear();
```

Verify that your script appears as follows:

var myDate:Date=new Date();
var currentMonth:Number = myDate.getMonth()+1;
// trace (currentMonth);
currentDate_txt.autoSize = true;
currentDate_txt.text="Today is "+currentMonth+"/"+ myDate.getDate() + "/"+myDate.getFullYear();

Save and test the document.
The current date should appear in the SWF file window.

NOTE

A finished sample file of the document you just created, named handson1.fla, is located in your finished files folder. For the path, see Set up your workspace.

Learn about classes and object types

2009-01-21T18:17:00.003-08:00

A class, also referred to as an object type, is like a blueprint. An object doesn't exist until you create it, or instantiate it, from a class definition. An object is an instance of a class.

Properties are the characteristics of an object. For example, when you align movie clips, you change the _x and _y properties of the MovieClip object. A property is a variable that is attached to a class. A property can either be public, which means it is accessible outside the class, or private, which means it can be accessed only within the class.

In object-oriented terms, a method is a behavior or procedure that can act on the object. A hypothetical throw() method on a ball would know the size and weight of the ball. A method is aware of the object and all the properties that it contains and can work on that object.

Set up your workspace

2009-01-21T18:17:00.001-08:00

First, you'll 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 you'll 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.
Select Window > Workspace Layout > Default to configure your workspace.

Data Integration: Overview (Flash Professional Only)

2009-01-21T18:15:00.000-08:00

The following tutorials illustrate several ways to use data binding and the data components in Macromedia Flash Professional 8. Many of the tutorials use public web services and therefore require that you have an Internet connection. In addition, the tutorials won't work in a browser because of sandbox restrictions, but they will work in the Flash authoring environment or Flash Player.

Data Integration: Using the Macromedia Tips Web Service (Flash Professional Only)
Data Integration: Using XML for a Timesheet (Flash Professional Only)
Data Integration: Using XUpdate to Update the Timesheet (Flash Professional Only)

NOTE

To complete the timesheet tutorials, you must download the file data.xml.

These tutorials are working models that illustrate how to use the data components (XMLConnector, WebServices Connector, RDMBSResolver and XUpdateResolver) with data binding in Flash Professional 8. They are not intended to be production-ready applications.

NOTE

The use of public web services in these tutorials does not imply that you should use them 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 "Applications and Web Services" in the "Data Integration" chapter in Using Flash (in Flash, select Help > Using Flash).

If you have trouble downloading or decompressing the files, see TechNote 13686 at www.macromedia.com/support/general/ts/documents/downfiles.htm.

Data Integration: Using the Macromedia Tips Web Service (Flash Professional Only)

2009-01-21T18:08:00.002-08:00

In this tutorial, you use the Web Services panel to connect to a web service, which you use to return a random tip about Macromedia software. You then use components to set up a simple user interface.

You can print this tutorial by downloading a PDF version of it from the Macro media Flash Documentation page at www.macromedia.com/go/fl_documentation.

In this tutorial, you will complete the following tasks:

Connect to a public web service

Create a user interface and bind the components with the web service

This tutorial uses a public web service and therefore requires that you have an Internet connection.

If you have trouble downloading or decompressing the files, see TechNote 13686 at www.macromedia.com/support/general/ts/documents/downfiles.htm.

NOTE

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 the "Data Integration" chapter in Using Flash (in Flash, select Help > Using Flash). In a production environment, you should use web services that are placed on your own web server.

The finished FLA file for this tutorial is installed with Flash. The following list provides the typical paths to this directory.

In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Data Integration\Tips
On the Macintosh: browse to Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Data Integration/Tips

Connect to a public web service

2009-01-21T18:08:00.001-08:00

Define a web service in Flash that will connect to a public web service.

Create a new Flash document using Flash Professional 8. Make sure your computer is connected to the Internet.
Open the Web Services panel (Window > Other Panels > Web Services), and click Define Web Services.
In the Define Web Services dialog box that appears, click Add Web Service (+), and then click the highlighted line to edit it.
Enter the URL http://www.flash-mx.com/mm/tips/tips.cfc?WSDL and click OK.
In the Web Services panel, inspect the methods, parameters, and results of the Macromedia Tips web service.

The web service has one method, called getTipByProduct(). This method accepts a single parameter called product. The parameter is a string that tells the web service what Macromedia product you want to see a tip for. In the next step, you bind this parameter with a ComboBox instance in your application.
Right-click the getTipByProduct() method, and select Add Method Call from the context menu.

An instance of the WebServiceConnector component is added to the Stage.
In the Property inspector, enter the instance name tips_wsc.
The component is now configured and on the Stage. You can place the component anywhere on or off the Stage--it is invisible when you run the application.

Create a user interface and bind the components with the web service

2009-01-21T18:07:00.002-08:00

Next, you use components to create a simple user interface that you can use to select a product, click a button, and see a random tip about the product. You create this application by binding the user interface components on the Stage to the parameters and returned results of the Macromedia Tips web service.

In the Components panel, select UI Components > ComboBox. Drag a ComboBox component to the Stage. In the Property inspector, enter the instance name products_cb.
In the Components panel, select UI Components > Button. Drag a Button component to the Stage. In the Property inspector, enter the instance name submit_button and for the label property type Get Tip, as follows:
In the Components panel, select UI Components > TextArea. Drag the component onto the Stage. In the Property inspector, enter the instance name tip_ta.
In the Components panel, select UI Components > Label and drag a Label component onto the Stage. Place it above the ComboBox component.
In the Property inspector, in the Instance name field type products_lbl and for the text property type Select a Product, as follows:

The Property inspector showing the instance name products_lbl and the text "Select a Product"
Drag another Label component above the tip_ta TextArea component. In the Property inspector, give it the Instance name tip_lbl and in the text field type Tips.

Now add a binding for the WebService connector component from the Macromedia Tip web service to ComboBox component that allows the user to choose a product and return a tip about the product.
Select the WebServiceConnector component on the Stage. Open the Component inspector and click the Bindings tab. Click Add Binding (+). In the Add Binding dialog box, select product:String (under params:Object) and click OK.
In the Component inspector, double-click the empty value in the Bound To field. In the Bound To dialog box, select ComboBox, for the component path and value:String for the schema location. Click OK.

Bound To field in the Component inspector

Selecting the component path and schema location in the Bound To dialog box

Next, you will bind the results parameter in the web service connector to the TextArea component on the Stage.
In the Component inspector, click Add Binding (+) again. In the Add Binding dialog box, select results:String, and then click OK. In the Component inspector, double-click the empty value in the Bound To field, and in the Bound To dialog box, select TextArea, as the component path and text:String as the schema location. Click OK.
Finally, you will use a Button component and the trigger() method to trigger the service. You use the trigger method to attempt to retrieve a tip whenever you click the button.
Open the Actions panel and add the following ActionScript on Frame 1 of the Timeline:
```
submit_button.onRelease = function(){
   tips_wsc.trigger();
};
```
Next, add the following ActionScript after the code from step 10. The code uses the dataProvider property to set the items in the ComboBox instance to the contents of the array.
```
products_cb.dataProvider = ["Flash", "Dreamweaver"];
```
NOTE

If necessary, you can use the setStyle() method to change the color of the Label instance text to white using products_lbl.setStyle("color", 0xFFFFFF);
Save your file.
Test the application (Control > Test Movie). Select Flash from the ComboBox instance and click Get Tip. The results should look similar to the following screen shot:
Select Dreamweaver and click Get Tip again to view another tip.

Connect to a public web service

2009-01-21T18:07:00.001-08:00

Define a web service in Flash that will connect to a public web service.

Create a new Flash document using Flash Professional 8. Make sure your computer is connected to the Internet.
Open the Web Services panel (Window > Other Panels > Web Services), and click Define Web Services.
In the Define Web Services dialog box that appears, click Add Web Service (+), and then click the highlighted line to edit it.
Enter the URL http://www.flash-mx.com/mm/tips/tips.cfc?WSDL and click OK.
In the Web Services panel, inspect the methods, parameters, and results of the Macromedia Tips web service.

The web service has one method, called getTipByProduct(). This method accepts a single parameter called product. The parameter is a string that tells the web service what Macromedia product you want to see a tip for. In the next step, you bind this parameter with a ComboBox instance in your application.
Right-click the getTipByProduct() method, and select Add Method Call from the context menu.

An instance of the WebServiceConnector component is added to the Stage.
In the Property inspector, enter the instance name tips_wsc.
The component is now configured and on the Stage. You can place the component anywhere on or off the Stage--it is invisible when you run the application.

Data Integration: Using XML for a Timesheet (Flash Professional Only)

2009-01-21T18:06:00.000-08:00

This tutorial shows you how to create an application for editing timesheet data. The timesheet data is stored as XML within a native XML database. The XUpdateResolver component is the best choice for this type of application, because it generates XUpdate statements that can be sent to the server to update the data.

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

Edit the data

This tutorial uses a public web service and therefore requires that you have an Internet connection. In addition, the tutorial won't work in a browser because of sandbox restrictions, but will work in the Flash authoring environment or the stand-alone Flash Player.

NOTE

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

NOTE

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.

Edit the data

2009-01-21T18:04:00.001-08:00

Now you will modify the application so that you can edit data through the DataGrid component.

On the Stage, select the DataGrid component. Then click the Parameters tab in the Component inspector.
Set the editable property to true.
Run the application.
You can now edit the data within the grid.

Create the user interface

2009-01-21T18:03:00.002-08:00

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.

NOTE

Alternatively, you can select Import XML Schema from the Component inspector title bar menu.

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.

NOTE

The XMLConnector component stores information internally as strings. When a request is made for the data through a DataBinding component, you can define how the string data is converted into the correct ActionScript types. This is accomplished by selecting an item within the Schema Tree pane and modifying its settings.

Select the Date schema field. Its type is set to String. This is because the Flash authoring tool cannot determine that it is a date type based on its value. You need to give Flash some additional information to encode this value correctly.
Select the Data Type parameter for the Date schema field and change it to Date. This tells the DataBinding component to try to work with this value as a date.

For more information on data binding and data types, see About handling data types in data binding (Flash Professional only) in Using Flash.
Select the encoder parameter for the Date schema field and change it to Date. Select the encoder options parameter and select the value "MM/DD/YYYY". This tells the DataBinding component how the string value is represented in the XML file. With this information, the DataBinding component can successfully take any string in this format and convert it into an ActionScript date object.

For more information on data binding and encoders, see Schema encoders in Using Flash (in Flash, select Help > Using Flash).
Select the @billable schema field.
The field's data type was automatically set to Boolean by the authoring tool, which looks for certain patterns to guess the type of an XML element. However, you need to modify the encoder options for the field. For Boolean data types, the encoder options specify strings that indicate true and false values.
With the @billable schema field still selected, double-click the Encoder Options field.
In the Boolean Encoder dialog box that appears, enter true in the Strings That Mean True text box and enter false in the Strings That Mean False text box.
Select the @duration schema field.
The field's data type was automatically set to Integer. This is because the sample XML field contained only whole number values for this attribute.
Select the Data Type setting for the @duration schema field and change it to Number so that it is not limited to integer values.
In the Component inspector, click the Bindings tab.
Click the Add Binding button.
In the Add Binding dialog box, select the row: Array item and click OK.
In the Component inspector, select the Direction property and set it to Out.
Double-click the Bound To property.
In the Bound To dialog box, click the Data Set component, and then select the dataProvider: Array schema location and click OK.

The DataBinding component copies each object within the row array into a new record (transfer object) within the DataSet component. It applies the settings you selected as the data is copied so that the DataSet component receives ActionScript Date, Boolean, and Number fields for the @date, @billable, and @duration attributes.

Next, you will create fields for the DataSet component that match those in the XMLConnector component.
On the Stage, select the DataSet component. In the Component inspector, click the Schema tab.
Click Add a Component Property (+) and enter id for Field Name and Integer for Data Type.

Using the same method, create the following new fields:

Field Name = billable, Data Type = Boolean
Field Name = date, Data Type = Date
Field Name = duration, Data Type = Number
Field Name = rate, Data Type = Number

NOTE

The field names must exactly match the names of their corresponding properties within the XMLConnector component (@date = date, @billable = billable, @duration = duration), including capitalization.

Select the Date field that you just created. Select the encoder setting and change it to DateToNumber.

NOTE

The DataSet component needs to store date values internally in their numeric format so that they can be sorted correctly. The DateToNumber encoder converts a date into a number whenever the value is set. It converts a number into a date whenever the value is accessed.

With the Date field still selected, double-click the Formatter field in the Component inspector and select Date from the pop-up menu.
Double-click the Formatter Options field in the Component inspector.
In the Date Formatter Settings dialog box that appears, enter MM-DD-YYYY in the Format text box.

Add DataGrid and Button components

2009-01-21T18:03:00.001-08:00

Next you will add components for displaying the data.

From the Components panel, open the User Interface category and drag a DataGrid component to the Stage.
In the Property inspector enter the instance name timeInfo_grd.
Still in the Property inspector, set the Width to 360.
In the Component inspector, click the Bindings tab.
Click the Add Binding button.
In the Add Binding dialog box, select the dataProvider: Array item and click OK.
In the Bindings tab, click the Bound To property.
In the Bound To dialog box, click the Data Set component, and then select the dataProvider: Array schema location and click OK.
In the Bindings tab, set the Direction to In.
With the Data Grid still selected, go to the Component inspector Bindings tab and click the Add Binding button.
In the Add Binding dialog box, select the selectedIndex: Number item and click OK.
Double-click the Bound To property.
In the Bound To dialog box, click the Data Set component, and then select the selectedIndex: Number schema location and click OK.
Leave the Direction property set to In/Out.
Drag a Button component to the Stage, and give it the instance name loadData_btn in the Property inspector.
In the Component inspector, click the Parameters tab. In the Label field, type Load Data.
With the button still selected on the Stage, open the Behaviors panel (Window > Behaviors).
Click Add Behavior (+), and select Data > Trigger Data Source. In the Trigger Data Source dialog box, select the timeInfo_con component, and click OK.
Save the file in the same folder where the data.xml file resides.
Run the application, and click Load Data.
The XML data is retrieved, converted, and loaded into the DataSet component. The binding between the DataSet and the DataGrid copies the data into the grid for display.

Data Integration: Using XUpdate to Update the Timesheet (Flash Professional Only)

2009-01-21T18:02:00.000-08:00

Prerequisite: Data Integration: Using XML for a Timesheet (Flash Professional Only)

This tutorial starts where the Data Integration: Using XML for a Timesheet (Flash Professional Only) tutorial left off. Now that the DataSet component is managing the data, it is tracking changes that are made to the data into the DeltaPacket property. A resolver is needed to send the changes back to the server in an optimized way. The XUpdateResolver component is the best choice for updating an XML source, because it generates XUpdate statements that can be sent to the server to update the data.

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 task:

Update the timesheet

NOTE

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

NOTE

Update the timesheet

2009-01-21T18:00:00.000-08:00

Now you will set up the bindings to allow the time sheet to be updated.

Begin with the file you created in the Data Integration: Using XML for a Time sheet (Flash Professional Only) tutorial.
In the Components panel, open the Data category and drag an XUpdateResolver component to the Stage.
In the Property inspector, enter the instance name timeInfo_rs.
Click the Schema tab in the Component inspector, and select the deltaPacket component property within the Schema Tree pane.
Change the DeltaPacket component's encoder setting to DataSetDeltaToXUpdateDelta.
This encoder converts data within the DeltaPacket into XPath statements that are supplied to the XUpdateResolver component, but it needs additional information from you to do its job.
Double-click the encoder options property. When prompted for a value for the rowNodeKey property, type datapacket/row[@id='?id'].
This property identifies which node within the XML file will be treated as a record within the data set. It also defines which element or attribute combination makes the row node unique, as well as the schema field within the DataSet component that will represent it. See Updates sent to an external data source in Using Flash (in Flash, select Help > Using Flash).

In the sample XML file, the id attribute of the datapacket/row node is the unique identifier, and it will be mapped to the DataSet component's ID schema field. This is defined with the following expression:
```
datapacket/row[@id='?id']
```
In the Component inspector, click the Bindings tab.
Click the Add Binding button.
In the Add Binding dialog box, click the deltaPacket property and click OK.
In the Component inspector Bindings tab, double-click the Bound To property.
In the Bound To dialog box, click the Data Set component, and then click the deltaPacket schema location and click OK.
This binding will copy the DeltaPacket component to the XUpdateResolver component so that it can be manipulated before it is sent to the server.

NOTE

The data is copied after the DataSet component's applyUpdates() method is called.
Drag a TextArea component onto the Stage, and in the Property inspector enter the instance name deltaText.
Still in the Property inspector, set the Width to 360.
Select the component, and then in the Component inspector, click the Bindings tab.
Click the Add Binding button.
In the Add Binding dialog box, click the text: String property and click OK.
In the Bindings tab, double-click the Bound To property.
In the Bound To dialog box, click the XUpdateResolver component, and then click the xupdatePacket schema location and click OK.
The update packet contains the modified version of the DeltaPacket that will be sent to the server.
In the Components panel, open the User Interface category and drag a Button component onto the Stage.
In the Property inspector, enter the instance name btn_show. In the Component inspector, click the Parameters tab and change the label to Show Updates.
With the button selected, open the Actions panel (F9) and enter the following code:
```
on (click) {
  _parent.timeInfo_ds.applyUpdates();
}
```
Test the application (Control > Test Movie). Load the data and make a change to one or more fields in multiple records.
Click Show Updates. Review the XML packet in the TextArea component.

TIP

You can copy the XML data into your favorite XML editor to make it easier to read.

Try setting the includeDeltaPacketInfo parameter of the XUpdateResolver component to true using the Component inspector.

NOTE

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.