1 / 41

Linking Flash CS3 and ActionScript 3.0

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.

lucus
Télécharger la présentation

Linking Flash CS3 and ActionScript 3.0

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Linking Flash CS3 andActionScript 3.0 COMSC 102 Assignment 1 Part II

  2. Save your .fla from assignment 1 as a new file Name it “FriendlyTurtles.fla”

  3. Text fields in Flash CS3

  4. Select the Text tool from the toolbar

  5. Static text Click 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.

  6. Input text Now 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.

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

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

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

  10. Buttons in Flash CS3

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

  12. Drawing the button Start by selecting the Oval tool from the toolbar

  13. Drawing the button Select the green gradient from the Swatches window Draw a circle on the OKBtn stage

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

  15. Let’s add some text Select the Text tool Select Static Text from the menu

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

  17. About button frames A 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

  18. Activate the built-in button frames Select the Over and Down frames Right-click and select “Convert to Keyframes” Note: If the hit frame is not activated, the hit region is taken from the Up pixels

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

  20. Button down In the Down frame Select the circle and text Move the selection slightly down and right to simulate the button being pressed down

  21. OK! Add an instance of the OKBtn symbol to your Scene 1 stage by dragging it from the Library next to the input field Name it okBtn

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

  23. 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. Listeners and events Flash uses EventListeners to connect functionality with events, such as mouse input. Add the script above (lines 4-10) to attach functionality to the button.

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

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

  26. 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.

  27. Creating a new instance of a symbol in script Now 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.

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

  29. Adding dynamic text Because we’d like to dynamically change the text, select Dynamic Text from the pull-down menu Type a ? as the starting value Toggle the border if necessary to make a transparent background on the text

  30. Embedded font Click the Embed button in the Properties window

  31. Embed the font Select Basic Latin from the window that appears and click OK

  32. Attaching an ActionScript class definition We 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

  33. Turtle class Select “Export for ActionScript” Confirm that the default Class name is Turtle Click OK As before, simply press OK on the warning window that appears

  34. Creating a new ActionScript file Although 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

  35. Creating a new ActionScript file Select ActionScript file from the dialog

  36. 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.

  37. Check syntax by clicking the checkmark button. Click the column to the left of a line number to add a break point Built-in ActionScript 3.0 tools The 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.

  38. Type this code to define the Turtle class.

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

  40. Calling methods now belonging to the Turtle class Add lines 8-11 above in the clickOKmethod. Note that tonyais a TurtleOnPathcontaining a Turtle instance that we called turtle in Part I. The dot notation accesses the turtle field, then calls the setDisplayStringmethod we just defined in Turtle.as

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

More Related