interactive scripting - CGR C/092 - fall 2004
Philip van Allen - v a n a l l e n @ a r t c e n t e r . e d u
room 142, Monday 4:00pm-7:00pm
all materials on this web site © copyright 2004, Philip van Allen
 
week 01b - interaction design, scripting approach, resources, first scripts
flash resources : 
learning Flash and ActionScript

ActionScript: The Definitive Guide, supporting web site:

Flash Overview:

Flash Resource Sites:

Macromedia Flash Support:

MacroMedia tutorials onFlash:

Help available from within Flash:

  • HELP>USING FLASH - the basics of how to use flash
  • HELP>ACTIONSCRIPT DICTIONARY- a complete reference for ActionScript

 

actionscript : 

Flash interactions are controlled by a scripting language called ActionScript. Basic interactions can be created with a fairly simple menu-based interface, and in Flash MX 2004, a new "behavior" feature is added to make this even simpler.

Where does code go?

ActionScript code can go in many different places inside a flash movie, and where it goes affects when the code is run. There are two main kinds of places where code can be placed:

  • Keyframes - ActionScript code can be attached to any keyframe, either in the main movie timeline, or in the timeline of a MovieClip. Scripts cannot be attached to a normal frame - they must be put on a keyframe.

    • Click on the keyframe to add a script to it.

      A script attached to a keyframe is run upon entry of the timeline into that frame. So if a script is on a keyframe on frame 15, the script will be run when the movie playhead crosses that frame. If the movie or MovieClip is stopped before frame 15, that script will not be run.

      Note that scripts in keyframes are run before any graphics are displayed for that frame. For example, if a script is on the first frame of the main movie, and that script changes the location of graphics on the screen, the user will only see the new locations of the graphics. I.e. the script is run and the graphics are moved before the first frame is displayed.
    • Example: Insert a keyframe at frame 15. Click on that keyframe, open the Actions window, set it to Expert Mode, and insert the following code:
      trace("got to frame 15");
  • Buttons and MovieClips - Scripts can be attached to instances of Buttons and MovieClips on the stage. Scripts cannot be attached to the symbols in the library, only to instances on the stage.
    • Click on the Button/MovieClip instance on the stage to add a script to it. You'll have to specify what event for that object will trigger the script--e.g. "on (release)" specifies that the script will be run when the mouse button is released.

      A script on a Button or MovieClip is run when some event occurs, regardless of the position of the timeline or if the timeline is playing or is stopped. An event can be a mouse click, the point at when the object first appears, or when some data is finished loading. When associated event occurs, the script is run.
    • Example: Create a movieclip and put it on the stage. Click once to select that movieclip, open the Actions window, and insert the following code:
      on (release) {
    trace("release event received");
}
working with script :
You access the ActionScript capabilities by selecting the keyframe, button or movieclip you want to make interactive, and then opening WINDOW>DEVELOPMENT PANELS>ACTIONS (or F9). This interface enables you to add the action you want taken by double clicking.

Putting stop() Actions on frames

For many applications, we need to prevent the Flash movie from playing through all of the pages continuously. To do this, we need to place a "stop()" action on each of the "scene" keyframes. To do this

  • select a keyframe in the timeline
  • in the left side of the actions window, click on Global Functions and then Timeline Control set of actions


  • double click on the "stop" action to add this action to the frame

Adding navigation to buttons/movieclips

  • insert a button from WINDOW>OTHER PANELS>COMMON LIBRARIES>BUTTONS on the timeline frame where you want to navigate from
  • in the property inspector, give the destination keyframe a frame label (e.g. home)
  • go back to the original frame, and select the button
  • in the behaviors panel, click on the "+" pull-down for MovieClip>Goto and Stop at frame or label
  • In the resulting dialog, select "_root" (because we want to go to a new frame on the main, _root timeline), and then select the Absolute radio button. In the "should stop playing" field, enter the name of the frame (e.g. home) you want to go to.



  • this will automatically insert the necessary ActionScript into the button's script. You can later change this script manually, for example to change the label to "portfolio"

 

  
dragable symbols : 

It is possible to make symbols dragable by the user, so that when they click on the symbol, they can drag it across the screen, and the drop it when they release the mouse button.

To do this:

  • create a symbol, and place it on the stage in the main timeline
  • to enable dragging on mouse click, select the symbol, and in the Behaviors panel select + and MOVIECLIP>START DRAGGING MOVIECLIP
  • select the current object in the dialog, and click OK
  • in the behavior panel, change the event for the start drag behavior to ON PRESS
  • with the symbol still selected, add the STOP DRAGGING MOVIECLIP behavior, and make sure its triggering event is RELEASE
  • the above will generate the following code:


  • to be honest, this is not the greatest code. In particular, in using this code you will encounter a problem if you move the mouse too fast and release the mouse button away from the symbol. In addition, the behavior uses an old way of specifying the symbol to be affected. So now, edit the code to look like the this more clean code:



  • in addition to allowing the user to drag a symbol, you can set constraints on the dragging to a specified rectangle. This prevents the user from dragging the symbol outside of an area. If you want the dragging limited to a single line (e.g. for a sound fader knob), then make the Left and Right the same for a vertical drag, and the Top and Bottom the same for a horizontal drag. The way to do this is to add what are called "parameters" to startDrag() by putting them between the parenthesis. The parameters are as follows:

    this.startDrag(lockToMouseCenter, left, top, right, bottom)

    So if we wanted to make the symbol lock to the mouse center, and be constrained to a space on the stage that was near the top left, and was a rectangle of 100 pixels wide, by 150 pixels tall we would change the code to look like the following:

 

 

  
custom cursor : 

Sometimes you want to replace the standard cursor with your own graphic. Doing this requires putting some custom code on the graphic symbol you want to use for the cursor.

To do this:

  • select the movieClip that will be the cursor
  • paste in the following code:
onClipEvent (enterFrame) {
    Mouse.hide(); // hides the normal cursor
    this._x = _root._xmouse; // sets the movie clip to the x mouse position
    this._y = _root._ymouse; // sets the movie clip to the y mouse position
}

 

  
animating symbols : 

It is possible to create movement and animation of symbols without using the timeline. Instead, you can use code to change the position, rotation, or shape of a symbol. For example, if you wanted to make a symbol spin around by itself:

  • select the symbol
  • paste in the following code: 
    onClipEvent (enterFrame) {
    this._rotation = this._rotation + 5;
}
  • another interesting thing to do is move the symbol across the screen: 
    onClipEvent (enterFrame) {
    this._rotation = this._rotation + 5;
    this._x = this._x + 10;
}
  • and, check to see if we reached the right hand side of the screen
    onClipEvent (enterFrame) {
    this._rotation = this._rotation + 5;
    this._x = this._x + 10;
    if (this._x > 550) {// reached the right side, reset to the left side 
        this._x = 0;
    }
}
 
first script : 
make an animation play 5 times - example 1 (fla version), example 2 (fla version)

To provide a taste of how scripting works before addressing the underlying concepts, we'll create a simple script together. This script controls the playing of an animation, so that it loops a specific number of times.

Open Flash and do the following:

  • create 3 layers and name them top to bottom: Actions, Text, Graphics
  • in the graphics layer:
    • create a circle and make it a symbol
    • click on the frist frame in the timeline in this layer.
    • in the property inspector set TWEEN to MOTION
    • at frame 15, insert a keyframe (F6)
    • move the circle to a new location for the end of the animation
  • in the text layer:
    • select the text tool, and in the property inspector select DYNAMIC TEXT
    • insert a DYNAMIC TEXT box
    • in the property inspector, set the Var field to countDisplay
    • at frame 15, insert a frame (F5), not a keyframe
  • in the actions layer:
    • at frame 15, insert a keyframe
    • click on that keyframe and open WINDOWS>ACTIONS
    • in the upper right of the ACTIONS window, click on options and select EXPERT MODE
    • type in the following code making sure everything is exactly as printed *: 
      if (isNaN(count)) count = 0;
count = count + 1;
countDisplay = count;
if (count > 5) {
    stop();
}

      (* for those who know programming, there is a small mistake in this code--it's part of the exercise)
  

all materials on this web site © copyright 2004, Philip van Allen

 top