Jiggling Background

If in the first three chapters of the previous chapter we spoke about working with the transparency of the image. In the next three we will show you how to add motion with some simple Action Script techniques. The position of a Movie Clip in the Stage is defined by two parameters: "_x" and "_y", horizontal and vertical coordinates. You can use these parameters this way: Path_of_MC._x = value;

So if we use actions directly on the Clip, we will use: this._x and this._y. if you want the MC to be visible in the stage, these two parameters must define a point inside the Stage (for example if the stage is 550*400-default, _x= [0...550], _y= [0...400] for a one pixel Movie Clip). Create a new Flash file and import the image in the stage (check out the image's width and height, and give the stage the same resolution, then position the image right over the stage). Convert the image into a Movie Clip (right click on the image), click the symbol and add the following Action Script code to obtain our example.

onClipEvent( load ) {
	// invoked before the Clip starts playing
	xx = this._x;
	yy = this._y;
}

onClipEvent( enterFrame ) {
	//invoked every time the Clip enters a new Frame
	this._x = xx + 2 - random(5);
	this._y = yy + 2 - random(5);
}

We used two auxiliary variables "xx" and "yy" to remember the initial position of the Clip, to create a slight motion near that spot. Each time the Clip enters a new frame, its position will change randomly. There are 5 possibilities for the horizontal coordinate and 5 for the vertical one (25 points in the Stage).

Remember that the random function returns a value between zero and one less than its parameter so it only generates positive numbers. But what if we need both positive and negative numbers? It's simple, take a look below:

	[-n ... 0 ... +n] = n - random(2n + 1);
	[-2,-1,0,1,2] = 2 - random(5);

This applied to our need looks like this: this._x = xx + 2 - random(5);

Translation: the new horizontal position for the Clip is maximum two pixels left or right from the original location. The same technique is applied for the vertical axis.

In the next two tutorials you will se how to combine motion and transparency effects applied to the same image.