Buttons

In the Movie you can see three buttons that look alike but the way they were created is different. The main idea is to manipulate some parameters that define the look and position in the Stage of the button: "_rotation',"_x","_y","_alpha".

The first button is as simple as it can get. We just wrote the text in the stage and created a button from that, by changing the color of the text in the three frames that define a button. To define the hit area we added a rectangle over the text, in the forth frame of the button. We also used a Move Clip outside the viewable area (a rectangle). The button can detect an "Over" action and the Movie Clip can serve as the frame by frame loop for the effect, so add the following Action Script code to both Symbols.

Click the Button and add:

on( rollOver ) {
	ok = true;
}

on( rollOut ) {
	ok = false;
}

Click on the Movie Clip and add:

onClipEvent( load ) {
	r = _parent.b._rotation;
	xu = _parent.b._x;
	yu = _parent.b._y;
}

onClipEvent( enterFrame ) {
	if (_parent.ok == true ) {
		_parent.b._rotation = r + 2 - random(5);
		_parent.b._x = xu + 2 - random(5);
		_parent.b._y = yu + 2 - random(5);
		_parent.b._alpha = 100 - random(60);
	} else {
		_parent.b._rotation = r;
		_parent.b._x = xu;
		_parent.b._y = yu;
		_parent.b._alpha = 100;
	}
}

First thing you need to know is that the Boolean variable "ok" serves as the link between the two Symbols. The Clip does not need a name but the button does so we named it "b". Whenever the cursor is over the hit area of the button, the value of "ok" becomes "true" so it's ok to start the effect. When the cursor is outside, "ok" becomes false so the Clip has to stop the effect. This was done in the Button's Actions Panel. The Clip is not visible in the final Movie but serves as the engine that triggers the effect. Before we start the effect we have remember the initial position of the button, so we use three variables to remember the horizontal position, the vertical and the rotation (each clip has the initial "_rotation" parameter set to zero so we could exclude this one).

Each time the Clip enters a new frame we test to see if the cursor is over the button, by checking the value of the Boolean variable. In the affirmative case we proceed wuth changing the appearance of the Button: we change the position of the button to a spot near the initial position ("_x" and "_y"), we rotate it with a few pixels (5 possible positions), and we set the transparency to a value between 40 and 100. If the mouse is not over the Button then all the parameters are set to the initial value (with the aid of the three variables declared in the "load" section).

The advantages of this technique are the easy implementation (we used this kind of button in urban looking websites) and the fact that the button contains the text, so we can use its three frames to change appearance. The disadvantages must be the fact that we can't change the text dynamically because it is nested inside the button and that when the Button moves, the hit area moves with it (this can cause confusion for the users). The second button shows just that.

The third buttons looks like the first two, except the "Over" part of the button. The color of the text does not change whenever we place the cursor on the button, because the text is not placed inside the button. The main idea is to place an invisible button over a Movie Clip that contains the text (on different layers).We still have the two needed elements so the idea is the same: the button will detect the "Over" actions and the Clip will trigger its own changes. An invisible button can be created by placing and rectangle only on the "Hit" frame.

Click the button and add:

on( rollOver ) {
	ok1 = true;
}

on( rollOut ) {
	ok1 = false;
}

Hide the layer containing the button, click the Movie Clip and add:

onClipEvent( load ) {
	r = this._rotation;
	xu = this._x;
	yu = this._y;
}

onClipEvent( enterFrame ) {
	if( _parent.ok1 == true ) {
		this._rotation = r + 2 - random(5);
		this._x = xu + 2 - random(5);
		this._y = yu + 2 - random(5);
		this._alpha = 100 - random(60);
	} else {
		this._rotation = r;
		this._x = xu;
		this._y = yu;
		this._alpha = 100;
	}
}

This is the same Action Script sequence as in the first example except from the fact that the name and path of the triggered object is now replaced by "_this", because the object controls its own actions.

The advantages of this technique are the easy implementation and the possibility to change the text by manipulating a Dynamic Text variable. The only disadvantage must be the fact that we are not working with a button object as the text holder so we can't make easy changes to its appearances in the three special frames of a Button object.

That's about all you need to know about these button. In the next chapters we will pass to the "Other" section of the website, where you will learn how to create a flame effect.
Enjoy!