41
Linking Flash CS3 and ActionScript 3.0 COMSC 102 Assignment 1 Part II

Linking Flash CS3 and ActionScript 3.0

  • Upload
    lucus

  • View
    53

  • Download
    0

Embed Size (px)

DESCRIPTION

Linking Flash CS3 and ActionScript 3.0. COMSC 102 Assignment 1 Part II. Save your . fla from assignment 1 as a new file. Name it “ FriendlyTurtles.fla ”. Text fields in Flash CS3. Select the Text tool from the toolbar. Static text. - PowerPoint PPT Presentation

Citation preview

Page 1: Linking Flash CS3  and ActionScript  3.0

Linking Flash CS3 and

ActionScript 3.0

COMSC 102Assignment 1

Part II

Page 2: Linking Flash CS3  and ActionScript  3.0

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

Page 3: Linking Flash CS3  and ActionScript  3.0

Text fields in Flash CS3

Page 4: Linking Flash CS3  and ActionScript  3.0

Select the Text tool from the toolbar

Page 5: Linking Flash CS3  and ActionScript  3.0

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.

Page 6: Linking Flash CS3  and ActionScript  3.0

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.

Page 7: Linking Flash CS3  and ActionScript  3.0

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

Page 8: Linking Flash CS3  and ActionScript  3.0

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

Page 9: Linking Flash CS3  and ActionScript  3.0

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.

Page 10: Linking Flash CS3  and ActionScript  3.0

Buttons in Flash CS3

Page 11: Linking Flash CS3  and ActionScript  3.0

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

Page 12: Linking Flash CS3  and ActionScript  3.0

Drawing the buttonStart by selecting the Oval tool from the toolbar

Page 13: Linking Flash CS3  and ActionScript  3.0

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

Page 14: Linking Flash CS3  and ActionScript  3.0

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.

Page 15: Linking Flash CS3  and ActionScript  3.0

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

Page 16: Linking Flash CS3  and ActionScript  3.0

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

Page 17: Linking Flash CS3  and ActionScript  3.0

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

Page 18: Linking Flash CS3  and ActionScript  3.0

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

Page 19: Linking Flash CS3  and ActionScript  3.0

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

Page 20: Linking Flash CS3  and ActionScript  3.0

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

the button being pressed down

Page 21: Linking Flash CS3  and ActionScript  3.0

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

Page 22: Linking Flash CS3  and ActionScript  3.0

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.

Page 23: Linking Flash CS3  and ActionScript  3.0

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.

Page 24: Linking Flash CS3  and ActionScript  3.0

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…”

Page 25: Linking Flash CS3  and ActionScript  3.0

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.

Page 26: Linking Flash CS3  and ActionScript  3.0

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.

Page 27: Linking Flash CS3  and ActionScript  3.0

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.

Page 28: Linking Flash CS3  and ActionScript  3.0

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)

Page 29: Linking Flash CS3  and ActionScript  3.0

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

Page 30: Linking Flash CS3  and ActionScript  3.0

Embedded fontClick the Embed button in the Properties window

Page 31: Linking Flash CS3  and ActionScript  3.0

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

Page 32: Linking Flash CS3  and ActionScript  3.0

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

Page 33: Linking Flash CS3  and ActionScript  3.0

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

Page 34: Linking Flash CS3  and ActionScript  3.0

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

Page 35: Linking Flash CS3  and ActionScript  3.0

Creating a new ActionScript fileSelect ActionScript file from the dialog

Page 36: Linking Flash CS3  and ActionScript  3.0

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.

Page 37: Linking Flash CS3  and ActionScript  3.0

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

Page 38: Linking Flash CS3  and ActionScript  3.0

Type this code to define the Turtle

class.

Page 39: Linking Flash CS3  and ActionScript  3.0

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

Page 40: Linking Flash CS3  and ActionScript  3.0

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

Page 41: Linking Flash CS3  and ActionScript  3.0

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