Flash "Find the differences" game creation tutorial - Part 2b

Let's have a look at the actionscript in the "4 differences" game:

Frame 1:

Contains:
-1 button, instanced as playbutton (the red one with the "play the game!" text)

Actionscript:

stop();
playbutton.onRelease = function() {
gotoAndPlay(2);
}

Very easy: telling the game to stop at Frame1 (stop();) and telling it to go to Frame 2 if the "playbutton" is released.

Frame 2:

Contains:



1 - 2 similar images
2- 4 MovieClips, instanced as "Rect1", "Rect2", "Rect3", "Rect4"
3- A dinamic text instanced as "congrat"
4- 4 buttons instanced as "Df1", "Df2", "Df3", "Df4"
5- A MovieClip called Timebar, without instance name

*Remember we have the "cursor" MovieClip in our library, linked as "cursor"

Actionscript:

stop();
differences_left = 4;
//Setting a new variable, "differences_left" and setting it to 4
Mouse.hide();
attachMovie("cursor", "cursor", 1);
cursor.onEnterFrame = function() {
this._x = _xmouse;
this._y = _ymouse;
};
//Hidding the mouse and attaching the cursor MovieClip and telling it //to have the same _x and _y coordinates as the mouse.
Df1.onRelease = function() {
// If you click on the 1st difference...
differences_left -= 1;
// The variable "differences_left" is decreased by 1
_root.Rect1._x = this._x;
_root.Rect1._y = this._y;
// The "Rect1" MovieClip's _x and _y become the same as the "Df1" //button _x and _y
Df1._x = 1500;
// And then, the "Df1" button's _x becomes 1500, so you can't see or //click on it
if(_root.differences_left == 0){
gotoAndPlay(3);
}
// Checking if the variable "differences_left" is 0, if so telling the //game to go to Frame 3, the one with the "You win" text
_root.congrat.text = "You found a difference! Only " + differences_left + " more to go";
// Making the "congrat" text become "You found a difference! Only x //differences more to go", where x is the current value of the //variable "differences_left"
};
Df2.onRelease = function() {
differences_left -= 1;
_root.Rect2._x = this._x;
_root.Rect2._y = this._y;
Df2._x = 1500;
if(_root.differences_left == 0){
gotoAndPlay(3);
}
_root.congrat.text = "You found a difference! Only " + differences_left + " more to go";
};
// The same as in the "Df1" button
Df3.onRelease = function() {
differences_left -= 1;
_root.Rect2._x = this._x;
_root.Rect2._y = this._y;
Df3._x = 1500;
if(_root.differences_left == 0){
gotoAndPlay(3);
}
_root.congrat.text = "You found a difference! Only " + differences_left + " more to go";
};
// The same, too
Df4.onRelease = function() {
differences_left -= 1;
_root.Rect4._x = this._x;
_root.Rect4._y = this._y;
Df4._x = 1500;
if(_root.differences_left == 0){
gotoAndPlay(3);
}
_root.congrat.text = "You found a difference! Only " + differences_left + " more to go";
};
// The same again


Now let's check what's inside the "Timebar" MovieClip:



5 Layers: stroke, mask, fill, dots and background

Take special attention at the masking (highlighted with a red rectangle in the image). The layer Mask is masking the layers "fill" and "dots", but not the layer background. (You can modify masking by right clicking on the layer>properties )

The layer Mask contains a MovieClip instanced as "bar".


And now, see the actionscript in the "Timebar" MovieClip (not inside it) :

onClipEvent(enterFrame){
this.bar._x -=0.25;
// The "bar" MovieClip's _x decreases
if(this.bar._x<=0){
// If it's _x gets to 0...
_root.gotoAndPlay(4);
// The game goes to Frame 4 ( the loser one )
}
}


Frames 3 and 4 only have a static text saying "Loser" or "You win" and a stop(); in its actions layer