Linking Flash CS3 and ActionScript 3.0

Linking Flash CS3 and

ActionScript 3.0

COMSC 102Assignment 1

Part II

Save your .fla from assignment 1 as a new fileName it “FriendlyTurtles.fla”

Text fields in Flash CS3

Select the Text tool from the toolbar

Static textClick on the Scene’s stage to create static text that says “Enter your name:”Static text is text that will remain the same throughout your movie.

Input textNow create another text field underneath the one we just made. Select Input Text from the pull-down menu. The text typed into an input text field will be accessible in scripting.

Naming your text fieldClick the text field that has grayed out “<Instance Name>” to enter a name referring to the input text field.

Name your fieldEnter “nameField” as the name of your input text field.

Add a border to your text fieldClick the small button at the bottom to toggle between a white background with a border or no background and no border.

Buttons in Flash CS3

Create a Button symbolFlash allows you to create special Symbols called Buttons. 1. Name your new Button symbol “OKBtn”2. Select “Button” as the Type

Drawing the buttonStart by selecting the Oval tool from the toolbar

Drawing the button1. Select the green gradient from the Swatches window2. Draw a circle on the OKBtn stage

Adjusting the colorClick the end marker of the gradient (initially black) and adjust it to a dark green to lighten the appearance of the circle.

Let’s add some text1. Select the Text tool2. Select Static Text from the menu

OK!Create a text field with static text “OK”

About button framesA Button symbol is created with 3 inactive frames; by converting to keyframes, they immediately fulfill their roles:•Over: this frame is displayed when the mouse hovers over the button•Down: this frame is displayed when the mouse presses the button•Hit: any pixels drawn on this frame comprise the hit area – when the mouse is over the hit area, it is considered to be over the button

Activate the built-in button frames1. Select the Over and Down frames2. Right-click and select “Convert to Keyframes”

Note: If the hit frame is not activated, the hit region is taken from the Up pixels

Highlight upon mouse overIn the “Over” frame, change the gradient to a yellow hue.

Button downIn the Down frame1. Select the circle and text2. Move the selection slightly down and right to simulate

the button being pressed down

OK!1. Add an instance of the OKBtn symbol to your Scene 1

stage by dragging it from the Library next to the input field

2. Name it okBtn

Scripting a buttonIn the Actions screen, add script to attach an event listener to the okBtn instance. The next slide will look at the script in detail.

Listeners and eventsFlash uses EventListeners to connect functionality with events, such as mouse input.

Add the script above (lines 4-10) to attach functionality to the button.

Line 4 adds an EventListener to the okBtn variable.The addEventListener method takes two parameters: the first is the type of event (here, a mouse click) and the second is the name of the method that should be called upon click.

Lines 6-10 define the clickOK function. In ActionScript 3.0, we must declare explicitly that we are defining a function with the keyword function. Because this is a function connected to a mouse click, it must take in a parameter of type MouseEvent.

Adding more scripting power to symbolsIn order to dynamically script symbols from the library, we must tell Flash that we’d like to do this. 1. Right-click the TurtleOnPath symbol from the Library and select

“Linkage…”

Export for ActionScriptIn the window that pops up, check the Export for ActionScript option; everything else will fill out to default values that we will keep.

It’s okay!Upon clicking ok, you will see a window warning you that no class definition is available, but one will automatically be generated. Click OK.

Creating a new instance of a symbol in scriptNow we have another way of creating an instance of the TurtleOnPath symbol. In the Actions window of the Scene, add the lines above. This creates a new TurtleOnPath instance named tricia and adds her to the scene.

Embellishing the turtleCreate a new layer called “text” in the Turtle symbol. (Remember: you can edit a symbol in the Library by double-clicking it)

Adding dynamic text1. Because we’d like to dynamically change the text,

select Dynamic Text from the pull-down menu2. Type a ? as the starting value3. Toggle the border if necessary to make a transparent

background on the text

Embedded fontClick the Embed button in the Properties window

Embed the fontSelect Basic Latin from the window that appears and click OK

Attaching an ActionScript class definitionWe are going to define an ActionScript class for the Turtle symbol, so we first tell ActionScript.•Right-click the Turtle symbol and select the Linkage… option

Turtle class1. Select “Export for ActionScript”2. Confirm that the default Class name is Turtle3. Click OK4. As before, simply press OK on the warning window that

appears

Creating a new ActionScript fileAlthough ActionScript files are simply text files, we will create and edit them within Adobe Flash CS3 as it gives us handy tools such as syntax checking and a debugging environment.•Select New… from the File menu

Creating a new ActionScript fileSelect ActionScript file from the dialog

Save early, save often!An empty text file shows up; select the Save option from the File menu and call it “Turtle.as.”The name of the file MUST be the same as the name of the class being defined.

Built-in ActionScript 3.0 toolsThe bar at the top has several tools for editing ActionScript, such as syntax checking, automatic indentation, collapsing, commenting, etc. Debugging can be done by adding break points; simply click in the column next to the line numbers to add a break point.

Check syntax by clicking the checkmark button.

Click the column to the left of a line number to add a break

point

Type this code to define the Turtle

class.

Back to the .fla fileClick the tab at the top to return to your FriendlyTurtles.fla file; select the Actions window for Scene 1.

Calling methods now belonging to the Turtle classAdd lines 8-11 above in the clickOK method.•Note that tonya is a TurtleOnPath containing a Turtle instance that we called turtle in Part I. •The dot notation accesses the turtle field, then calls the setDisplayString method we just defined in Turtle.as

Publish your movie and enjoy!Submit all your files from Parts I and II through the drop box on Ella.