linking flash cs3 and actionscript 3.0
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 PresentationTRANSCRIPT
![Page 1: Linking Flash CS3 and ActionScript 3.0](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/1.jpg)
Linking Flash CS3 and
ActionScript 3.0
COMSC 102Assignment 1
Part II
![Page 2: Linking Flash CS3 and ActionScript 3.0](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/2.jpg)
Save your .fla from assignment 1 as a new fileName it “FriendlyTurtles.fla”
![Page 3: Linking Flash CS3 and ActionScript 3.0](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/3.jpg)
Text fields in Flash CS3
![Page 4: Linking Flash CS3 and ActionScript 3.0](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/4.jpg)
Select the Text tool from the toolbar
![Page 5: Linking Flash CS3 and ActionScript 3.0](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/5.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/6.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/7.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/8.jpg)
Name your fieldEnter “nameField” as the name of your input text field.
![Page 9: Linking Flash CS3 and ActionScript 3.0](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/9.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/10.jpg)
Buttons in Flash CS3
![Page 11: Linking Flash CS3 and ActionScript 3.0](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/11.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/12.jpg)
Drawing the buttonStart by selecting the Oval tool from the toolbar
![Page 13: Linking Flash CS3 and ActionScript 3.0](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/13.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/14.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/15.jpg)
Let’s add some text1. Select the Text tool2. Select Static Text from the menu
![Page 16: Linking Flash CS3 and ActionScript 3.0](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/16.jpg)
OK!Create a text field with static text “OK”
![Page 17: Linking Flash CS3 and ActionScript 3.0](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/17.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/18.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/19.jpg)
Highlight upon mouse overIn the “Over” frame, change the gradient to a yellow hue.
![Page 20: Linking Flash CS3 and ActionScript 3.0](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/20.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/21.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/22.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/23.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/24.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/25.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/26.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/27.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/28.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/29.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/30.jpg)
Embedded fontClick the Embed button in the Properties window
![Page 31: Linking Flash CS3 and ActionScript 3.0](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/31.jpg)
Embed the fontSelect Basic Latin from the window that appears and click OK
![Page 32: Linking Flash CS3 and ActionScript 3.0](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/32.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/33.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/34.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/35.jpg)
Creating a new ActionScript fileSelect ActionScript file from the dialog
![Page 36: Linking Flash CS3 and ActionScript 3.0](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/36.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/37.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/38.jpg)
Type this code to define the Turtle
class.
![Page 39: Linking Flash CS3 and ActionScript 3.0](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/39.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/40.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022081511/568165b1550346895dd8a5b3/html5/thumbnails/41.jpg)
Publish your movie and enjoy!Submit all your files from Parts I and II through the drop box on Ella.