Flash Exercise Notes 5
syllabus | schedule | assignments | class notes | web resources | ARTC courses
Interface Elements
Events in Flash

Events can be triggered either by the user or by the system

Users click mouse buttons and press keys
The system triggers events when specific conditions are met or processes completed (the SWF file loads, the timeline reaches a certain frame, a graphic finishes downloading, and etc)

You write handlers to do something when an event occurs

Types of events:

Mouse and keyboard
Ex: when the user clicks a button

Clip Events
Ex: movie clip is loaded

Frame Events
Ex: when a keyframe on the timeline is entered

Mouse events
usage: Button.onRollOver or on(rollOver)

onDragOut the mouse button is clicked over the button and the pointer is dragged outside of the button
onDragOver the user presses and drags the mouse button outside and then over the button
onPress a mouse button is pressed.
onRelease a mouse button is released.
onReleaseOutside the mouse is released while the pointer is outside the button after the button is pressed while the pointer is inside the button.
onRollOut the pointer moves outside a button area.
onRollOver the pointer moves over a button area.

Keyboard events
onKeyDown when a key is pressed
onKeyUp when a key has been released

Clip specific events
onLoad when a movieClip appears on the screen (first loads)
onUnload when a movieClip is removed from the screen

Frame events
onEnterFrame executes when playback moves to next frame

use a frame script when this occurs

stop()
gotoAndPlay()
gotoAndStop()

You can control the playing of a movieClip

MCname.stop();


Standard Interface Elements

Toggle button
This switches between two different states

You can make two MovieClips and switch between them by setting their alpha to 0 when you want to hide them.

First you must initialize the global variable to keep track of the state. Plus you need to make the two movieClips by using the attachMovieClip method.

(first frame in the initialize actions layer)

_global.good = true;
attachMovie("thumbUp", "thumbsUpMC", 100, {_x:0, _y:50, _alpha:100});
attachMovie("thumbDown", "thumbsDownMC", 101, {_x:0, _y:50, _alpha:0});

Next we check to see what state it is in and set the alpha of the MCs then change the global variable to the opposite state.

(first frame in the actions layer)

stop();

thumbsUpMC.onRelease = function() {
      if (_global.good == true) {
           thumbsUpMC._alpha = 0;
           thumbsDownMC._alpha = 100;
           _global.good = false;
      } else {
           thumbsUpMC._alpha = 100;
           thumbsDownMC._alpha = 0;
           _global.good = true;
      }
}


Another example: turning the music off and on -

on (release) {
      if (musicplaying == true) {
           music.stop();
           musicplaying = false;
      } else {
           music.stop(); // guard against overlap
           music.start(0, 100);
           musicplaying = true;
      }
}


Radio Buttons

Only one button can be highlighted at a time.
There are a number of ways to do this:

-Move the highlight element
-Use _alpha to hide and show the highlight
-Use _visible to hide and show the highlight
-Swap Movieclips from the library

This example moves the highlight

this.circle1.onRollOver = function()
{
      this._parent.tigerMC._y = 157;
}

_root.circle2.onRollOver = function()
{
      this._parent.tigerMC._y = 234;
}

this.circle3.onRollOver = function()
{
      this._parent.tigerMC._y = 312;
}


Sliders

Essentially you only need to set parameters inside the startDrag method. The first sets weather you want to lock the center of the object to the mouse when sliding, the next is the Left, Top, Right and Bottom of the area that it can be dragged.

//slide the lobster
lobster.onPress = function() {
      this.startDrag(true, 216, 50, 213, 250);
};
//do something based on where the lobster is
lobster.onMouseMove = function() {
      percentText.text = (lobster._y-50)/2+"%";
};
lobster.onRelease = function() {
      this.stopDrag();
};
//you may release the button outside of the lobster
lobster.onReleaseOutside = function() {
      this.stopDrag();
};


Object follow the mouse

You need to use a global variable to keep track of whether the object should be attached to the mouse or not.

_global.frogAttached = 0;
//change the state of the frog to be attached to the mouse and not
frogMC.onRelease = function() {
      if (_global.frogAttached == 1) {
                _global.frogAttached = 0;
      } else {
           _global.frogAttached = 1;
      }
};
//while the mouse is moving, move the frog
frogMC.onMouseMove = function() {
      if (_global.frogAttached == 1) {
           Mouse.hide();
           frogMC._y = this._parent._ymouse;
           frogMC._x = this._parent._xmouse;
      }
      else
      {
           Mouse.show();
      }
};

Making a MovieClip move back and forth based on the position of the mouse

You can make a movieClip and put buttons or movieClips in it.

insectMC.onEnterFrame = function() {
     if (_ymouse<50) {
          insectMC._y = insectMC._y-10;
     }
     if (_ymouse>(Stage.height-50)) {
          insectMC._y = insectMC._y+10;
     }
};

Let's try to expand on that code:

//code that keeps it from running off the page
_global.maxPos = 0;
_global.minPos = Stage.height-insectMC._height;
_global.speed = 10;
insectMC._y = 0;
//
insectMC.onEnterFrame = function() {
      if (_xmouse>425) {
           if (_ymouse < 70) {
                if (insectMC._y < maxPos) {
                     insectMC._y = insectMC._y+speed;
                }
           }
           if (_ymouse > (Stage.height-60)) {
                if (insectMC._y > minPos) {
                     insectMC._y = insectMC._y-speed;
                }
           }
     }
};