Making Sprites Interactive

   

Making Sprites Interactive

This section offers several practical examples of ways in which you can make sprites interactive. Specifically, you'll learn to do the following:

  • Create a rollover effect, in which the appearance of a sprite changes when the user moves the mouse pointer over it.

  • Make a sprite rotate incrementally, one degree at a time, when it's clicked once.

  • Make the words within a text sprite change each time it's clicked.

Even if you don't need to accomplish these exact tasks , it's worth experimenting with them anyway, because the scripting principles you'll use have wider applications. For example, the Lingo code that makes a sprite rotate 360 times can be adapted to make a sprite repeat any action a fixed number of times.

To create a rollover effect:

  1. Create two visual cast members one for the normal appearance of the sprite, and the other for the "rolled-over" appearanceand place them in adjacent positions in the Cast window.

    You can place them anywhere , but for this example we'll assume that they're in positions 1 and 2 in the Cast window ( Figure 15.53 ).

    Figure 15.53. These two cast members will serve as the normal and rollover states of a button.

    graphics/15fig53.gif

  2. Drag the first cast member to the Score or the Stage to create a sprite.

    The sprite can occupy any sprite channel in the Score, but for this example we'll assume it's in channel 1.

  3. With the sprite still selected, choose New Behavior from the Behaviors pop-up menu on the Sprite toolbar.

    A Script window opens.

  4. Type the following handler in the Script window ( Figure 15.54 ). (The last line is already provided by Director. You'll have to change the first line, which is on mouseUp by default):

    Figure 15.54. This handler causes the rollover cast member to replace the normal cast member when the mouse pointer rolls over the button.

    graphics/15fig54.gif

     on mouseWithin    sprite(1).memberNum = 2 end 

    The event handler mouseWithin is activated whenever the mouse pointer is over the sprite to which the script is attached. (See Table 15.1 , earlier in this chapter, for a list of event handlers.)

    The sprite property memberNum specifies which cast member is associated with the sprite. Thus, the second line of this handler switches the cast member associated with sprite 1 to cast member 2. (If the sprite is in a channel other than 1, or if the rollover cast member is in a position in the Cast window other than 2, change the numbers accordingly .)

    Continue the script by adding the following handler ( Figure 15.55 ):

    Figure 15.55. This handler causes the normal cast member to replace the rollover cast member when the mouse pointer rolls away from the button.

    graphics/15fig55.gif

     on mouseLeave    sprite(1).memberNum = 1 end 

    The event handler mouseLeave is activated whenever the mouse pointer leaves the sprite to which the script is attached. (Again, if the sprite is in a channel other than 1, or if the "normal" cast member is in a position in the Cast window other than 1, change the numbers accordingly.)

  5. Close the Script window.

  6. Rewind and test the movie.

    The sprite's appearance changes whenever the mouse pointer moves onto or off of the sprite ( Figure 15.56 ).

    Figure 15.56. The button in action.

    graphics/15fig56.gif

graphics/tick.gif Tip

  • If you prefer verbose syntax, the lines containing the memberNum property can be written as set the memberNum of sprite 1 to X (where X is the number of the appropriate cast member).


To rotate a sprite 360 degrees, one degree at a time:

  1. In the Score or on the Stage, select a rotatable sprite, such as a bitmap or a vector shape ( Figure 15.57 ).

    Figure 15.57. Select a sprite to which you want to attach a script that will cause it to rotate.

    graphics/15fig57.gif

  2. Choose New Behavior from the Behaviors pop-up menu on the Sprite toolbar.

    A Script window opens.

  3. Type the following handler in the Script window ( Figure 15.58 ). (The first and last lines are already provided by Director. Director will also take care of the indentation automatically):

    Figure 15.58. When attached to a sprite, this script causes the sprite to rotate 1 degree at a time (to a total of 360 degrees) when the sprite is clicked.

    graphics/15fig58.gif

     on mouseUp    repeat with i = 1 to 360       sprite(1).rotation = i       updateStage    end repeat end 

    The body of this handler uses a technique called a repeat loop . The repeat with command declares a local variable, i , and gives it an initial value of 1 . The rotation property of the sprite is set to the value of i , and the Stage is updated to show the 1-degree rotation. (The updateStage command is necessary because the playhead stays in the same frame until the loop completes. Normally, Director updates the Stage only when the playhead moves to a new frame.)

    When Director gets to the line that says end repeat , it automatically returns to the repeat with line and increments the value of i by 1. It then sets the rotation of the sprite to the new value of i and updates the Stage again. This process continues until i reaches 360 the maximum value specified in the repeat with commandat which point the handler ends.

  4. Rewind and test the movie.

    When you click on the sprite, it rotates 360 degrees, one degree at a time, then stops.

graphics/tick.gif Tip

  • The letter i , which stands for index , is the traditional name for a local variable that's used as an incremental counter (as in this script).


To create a text cast member whose text changes when clicked:

  1. Choose Window > Text to open the text window.

  2. Type the word YES ( Figure 15.59 ).

    Figure 15.59. Create a text sprite (in this case, the word YES ) in the Text window.

    graphics/15fig59.gif

    The font, size , and other text attributes may be set to whatever you like. (You may, of course, type something other than YES , but we'll be using YES , NO , and MAYBE in this example.)

  3. In the Cast window, name the text cast member.

    You can name it whatever you like, but in this example, it will be named "response."

  4. Drag the text cast member to the Stage or Score to create a sprite.

  5. Choose New Behavior from the Behaviors pop-up menu on the Sprite toolbar.

    A Script window opens.

  6. Type the following handler in the Script window ( Figure 15.60 ). (The first and last lines are already provided by Director):

    Figure 15.60. This script causes a text cast member's text to cycle among the words YES , NO , and MAYBE each time a sprite based on that cast member is clicked on the Stage.

    graphics/15fig60.gif

     on mouseUp    if member("response").text = "YES"  then       set member("response").text =  "NO"    else if member("response").text =  "NO" then       set member("response").text =  "MAYBE"    else if member("response").text =  "MAYBE" then       set member("response").text =  "YES"      end if end 

    (If you named the cast member something other than "response," or if the text within it is something other than "YES," change the script accordingly.)

    The body of this handler is what's known as an if-then statement. Director tests the premise that follows the keyword if , and if it's true, it executes the command following the keyword then . If the premise isn't true, the if-then statement may offer additional premises for Director to test. Each of those additional premises is preceded by else if .

    In this case, the original premise that Director tests is member("response") .text = "YES" . In other words, Director looks at the text property of the cast member named "response" to see if its value is "YES" . (The value of the text property is equivalent to the text that's in the cast member.) If so, Director changes the value of the cast member's text property to "NO" (and in doing so, changes the text contained in the cast member to NO ). The remaining lines do pretty much the same thing: If the value of the cast member's text property is "NO" , Director changes it to "MAYBE" ; if it's "MAYBE" , Director changes it to "YES" .

    A multiple-line if-then statement must always conclude with the line end if , so Director knows that the remainder of the handler is not part of the if-then statement.

  7. Rewind and play the movie ( Figure 15.61 ).

    Figure 15.61. The results of clicking the text sprite.

    graphics/15fig61.gif

    Each time you click the text sprite, the text within it changes from YES to NO to MAYBE .

   


Macromedia Director MX for Windows and Macintosh. Visual QuickStart Guide
Macromedia Director MX for Windows and Macintosh. Visual QuickStart Guide
ISBN: 1847193439
EAN: N/A
Year: 2003
Pages: 139

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net