Archive for VTW 
 


       VTW Forum Index -> Actionscript
computergeek67

Everything Actionscript - Part 2

Overview
In this part, I will teach you about Button and Movie Clip event handlers. These "event handlers", also called "on handlers", have their own syntax. You write event handlers like this:

Movie Clip
onClipEvent(eventHandler)

Button
on(eventHandler)

To create an event handle, you put the syntax above on the movie clip or button desired. I will first teach you about movie clip events, then I will introduce the button events.

Movie Clip Events
  • enterFrame
  • load
  • unload
  • data
  • mouseDown
  • mouseUp
  • mouseMove
  • keyDown
  • keyUp


Movie Clip Events Explained
enterFrame

The enterFrame event occurs continuously. For example, put this code on a movie clip:
Code:
onClipEvent(enterFrame){
if(this.hitTest(_root.thing)){
trace("You are touching the object");
}else{
trace("You are not touching the object");
}
}
With this code, the enterFrame function would make Flash check continuously if the movie clip was or was not touching another movie clip called "thing". If it was touching, Flash would put out the message, "You are touching the object" in the output panel. If the movie clip was not touching, however, you would see the message "You are not touching the object" in the output panel.

Load
The load event is just the opposite of the enterFrame event. As the enterFrame event loads continuously, the load event only loads once. For example, in the code I just gave you, if you replaced the original event with the load event, Flash would check if the movie clip was or was not touching thing only once.

The load event can be used to stop a movie clip from playing too. It is also used to initialize variables in a clip or trigger a function that relies on the existence of a movie clip.

Unload
The unload event does just the opposite of the load event. I basically just unloads the movie clip after the last frame in which the clip is present on the stage. "The unload event is typically used to imitate housecleaning code - code that cleans up the stage or resets the program environment in some way. An unload handler also provides a means for performing some action (such as playing another movie) after a movie clip ends." -Actionscript: The Definitive Guide by Colin Moock

Data
The data event occors when external data is loaded into a movie clip. It can be triggered by two different functions. These functions are:
  • loadVariables()
  • loadMovie()
The loadVariables function basically does what it says. It loads variables from a server. When used with the data event and when the variables are done loading, the data event is triggered. When this happens, Flash is ready to execute the next line of code.

The loadMovie function loads an external swf(Shockwave file) into a movie clip. By default, the swf plays automatically, even if it is not fully loaded. To make the movie load fully, we need to use the data event with some preloading code. Note that the data event executes on a per frame basis, so movies with a higher frame rate tend to have smoother looking preloders because the data event gets more frequent updates.

To build a data event preloader, we use the getBytesLoaded() and the getBytesTotal() functions. In the example below, the code checks to see whether or not the movie has fully loaded. Once it is done loading, it plays the movie. Here is the code:
Code:
onClipEvent(data){
//turn on data transfer light
_root.transferIndicator.gotoAndStop("on");
//if we're done loading, turn off the transfer light and let the movie play
if(getBytesTotal()>0&&getBytesLoaded()==getBytesTotal()){
_root.transferIndicatoir.gotoAndStop("off");
play();
}
//display the loading details in the text field variables on the _root
_root.bytesLoaded=getBytesLoaded();
_root.bytesTotal=getBytesTotal();
_root.ClipURL=_url.substring(_url.lastIndexOf("/")+1, _url.length);
}


mouseDown
The mouseDown event detects if the user presses the left mousebutton over any part of the stage.

mouseUp
The mouseUp event is just the opposite of the mouseDown event. This event occurs when every time the user releases the left mouse button. As wiith mouseDown, a movie clip must be present on the stage for it to work.

mouseMove
The mouseMove event detects any movement that the user makes to the mouse. It is so sensitive that even the slightest movement of the mouse could trigger this event. The mouseMove event is also good for "waking up" a "sleeping" movie clip, button, or anything else.

keyDown
Just like the mouseUp and mouseDown events that provide mouse interactivity, the keyDown and keyUp events provide keyboard interactivity. When any key is held down, the keyDown event will occur repeatedly. For example, put this code on a movie clip:
Code:

onClipEvent(keyDown){
trace("A key was pressed");
}

If you press a key one time, the message "A key was pressed" will come up in the output panel. If you hold a key down, however, the message will come up multiple times. You will also notice that the code does not specify what key needs to be pressed in order to display the message. If you want to specify a key to be pressed, you can use these three methods:
  • Key.getCode()
  • Key.isDown(keycode)
  • Key.isToggles(keycode)

First is the Key.getCode() function. Here is a code for that:
Code:
onClipEvent(keyDown){
if(Key,getCode()==Key.UP){
trace("The up arrow key was pressed");
}
}

This code checks to see if the key that was pressed was the up arrow key. If so, the message "The up arrow key was pressed" would be displayed in the output panel. The Key.getCode() function is useful for an intrnational audience because the function returns a value that is tied to a key on the keyboard, not a specific letter.

The Key.isDown function is typicallyused to move an object when a specific key is pressed. Take this "simple movement" code for example:
Code:
onClipEvent(enterFrame){
    if(Key.isDown(Key.UP)){
    this._y -=3 }
    if(Key.isDown(Key.DOWN)){
    this._y +=3 }
    if(Key.isDown(Key.LEFT)){
    this._x -=3 }
    if(Key.isDown(Key.RIGHT)){
    this._x +=3
}
}

This code makes an object move in the four cardinal directions at the speed of three frames per second (fps).

The Key.isToggled function checks whether or not the Caps Lock or Num Lock is toggled on. The syntax is just like the Key.is Down function. Here is an example:
Code:
onClipEvent(enterFrame){
if(Key.isToggled(70)){
gotoAndStop(nextFrame());
}
}

Just like I said before, the code would check if the Caps Lock was toggled for the "F" key.

keyUp
The keyUp event is just the opposite of the keyDown event. It is triggered when a pressed key is released. This event might be used for a spaceship's thrust, for example. The user would press down a key to turn it on and release it to turn the thrust off. And, just as before, we would use this event with the Key object. Here is an examp[le code of the keyUp event:
Code:
onClipEvent(keyUp){
if(!Key.isDown(Key.LEFT)){
trace("The left arrow key is not pressed");
}
}


Buttons


Button Events
  • press
  • release
  • releaseOutside
  • rollOver
  • dragOut
  • dragOver
  • keyPress


Button Events Explained
press
For a mouse click to happen, there needs to be two steps involved. The first step in this process is when the mouse button is clicked. This is called the press event. The second step is when the mouse button is released. This event occurs when the mouse is over the "hit" area of a button.

release
The release event is triggered when three steps are detected:
  1. The mouse is over the "hit" area of a button.
  2. The left mouse button is clicked while still in the "hit" area.
  3. The left mouse button is released while still in the "hit" area.
The release event also gives the user the chance to choose whether or not they want to follow through with the action. For example, the user can follow through with the action by executing the three steps. If they don't want to follow through, though, the user can move their mouse out of the "hit" area of the button; thus not executing the third step.

releaseOutside
The releaseOutside event is what its name says. It is executed when the user releases their mouse button out side of the "hit" area. There is a four step process that needs to be executed for this event to happen:
  1. The mouse is over the "hit" area.
  2. The left mouse button is pressed and held.
  3. The mouse moves out of the "hit" area.
  4. The left mouse button is released.


rollOver
The rollOver event occurs when the user moves their mouse over the (yes, you guessed it) "hit" area of the button. You can use this event for a hotspot on a button.

rollOut
The rollOut event occurs when the user moves their mouse out of the"hit" area of a button with no mouse buttons pressed.

dragOut
The dragOut event occurs when the mouse button is down when the pointer leaves a button's "hit" area.

dragOver
The dragOver event also has a four step requirement process:
  1. The mouse moves into the "hit" area of a button.
  2. The left mouse button is held down.
  3. The mouse moves out of the "hit" area while still being held down.
  4. The mouse moves back into the "hit" area while still being held down.


keyPress
The keyPress event is a special button event because not only do you use the event in parentheses, you also use the key letter too. For example, you would use this syntax:
Code:
on(keyPress "a"){
trace("the 'a' key was pressed.");
}

The key doesn't always have to be a letter, just like the Key object, you can use values too; i.e.Enter, Backspace, Delete, etc. If you do use these values, the syntax would be like this:
Code:
on(keyPress "<Enter>"){
trace("The enter key was pressed.");
}

As you can see, the key value is enclosed in less than and greater than symbols. Here is a full list of the key values you can use:
  • <Backspace>
  • <Down>
  • <End>
  • <Enter>
  • <Home>
  • <Insert>
  • <Left>
  • <Right>
  • <PgDn>
  • <PgUp>
  • <Space>
  • <Tab>
  • <Up>

Unlike the Key object, however, Flash does not support the function keys (F1-F12).

Thank you for reading this very long tutorial.

       VTW Forum Index -> Actionscript
Page 1 of 1
Create your own free forum | Buy a domain to use with your forum