Emanuele Feronato

italian geek and PROgrammer

Talking about Perfectionism game, Flash and Game development.

Ok… so we are going to create Perfectionism game as said… the game has a lot of buttons, so to make things a little harder, I won’t use any button… just movieclips.

Creation of the environment

Perfectionism is played on a 8×8 field with eight buttons on its left side and eight buttons on its upper side.

So I made three movieclips linked in this way

and entered this actionscript in the first (and only) frame of the main movie:

_root.attachMovie("grid","grid",1,{_x:90, _y:90});
for (x=1; x<=8; x++) {
	grid.attachMovie("hswapper","hswapper_"+x,grid.getNextHighestDepth(),{_x:-20, _y:40*x-20});
	grid.attachMovie("vswapper","vswapper_"+x,grid.getNextHighestDepth(),{_x:40*x-20, _y:-20});
}

Line 1: Attaching the grid movieclip

Line 2: Cycle running 8 times

Line 3: Attaching the x-th left button as a child of the grid movieclip

Line 4: Attaching the x-th top button as a child of the grid movieclip

And this is the result:

Horizontal rays

Now I want to create a rollover effect on the left side buttons and display an horizontal ray when the mouse is over one of the left side buttons.

I will draw the rays using Flash drawing API

_root.attachMovie("grid","grid",1,{_x:90, _y:90});
_root.createEmptyMovieClip("rays",2);
horizontal_hover = new Array(0, 0, 0, 0, 0, 0, 0, 0);
for (x=1; x<=8; x++) {
	hs = grid.attachMovie("hswapper", "hswapper_"+x, grid.getNextHighestDepth(), {_x:-20, _y:40*x-20});
	hs.pos = x
	hs.onEnterFrame = function() {
		if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
			this.gotoAndStop(2);
			horizontal_hover[this.pos-1] = 1;
		}
		else {
			this.gotoAndStop(1);
			horizontal_hover[this.pos-1] = 0;
		}
	};
	grid.attachMovie("vswapper","vswapper_"+x,grid.getNextHighestDepth(),{_x:40*x-20, _y:-20});
}
rays.onEnterFrame = function() {
	this.clear();
	for (x=0; x<8; x++) {
		if (horizontal_hover[x] == 1) {
			this.lineStyle(2,0x00ff00);
			this.moveTo(90,x*40+110);
			this.lineTo(410,x*40+110);
		}
	}
};

Line 2: Creating an empty movie clip called rays

Line 3: Declaring an array to store the position of the horizontal button I am over (if any). 0 means I am not over it, 1 means I am over it

Line 5: At the creation of the left button, I assign it to a variable called hs

Line 6: Defining an hs property called pos and assigning it x value. Now I know the upper button has a pos property equal to 1, the second one has pos equal to 2 and so on.

Line 7: Function that the button will execute at every frame

Line 8: Performing an hit test to see if the mouse is over the button. I can only use movieclips in this game so I will use hit tests to see if the mouse is over a button

Line 9: If the mouse is over the movieclip, then show the 2nd frame of the movieclip (that's the same button with a different background color, to make a rollover effect)

Line 10: if the moouse is over the movieclip, then change the horizontal_hover array setting the (pos-1)th element to 1. I used pos-1 and not pos because the first element of an array is at index zero.

Lines 12-15: If the mouse is not over, then show the 1st frame of the movieclip and set the (pos-1)th element of the horizontal_hover array to 0.

Line 19: Function that grid movieclip will execute at every frame

Line 20: Clearing the movieclip

Line 21: Cycle from 0 to 7 (to scan all elements of horizontal_hover array)

Line 22: If the x-th element is equal to 1 (the mouse is over it...)

Line 23: Set the line style to a green 2 pixels thick one.

Line 24: Move the pencil to the start of the line to draw, according to x value

Line 25: Draw a straight line that crosses the entire game field

And here it is: if you roll over the horizontal arrows, you will see the green ray crossing the field

Vertical rays

To display vertical rays, the concept is the same as the one used to display horizontal ones

_root.attachMovie("grid","grid",1,{_x:90, _y:90});
_root.createEmptyMovieClip("rays",2);
horizontal_hover = new Array(0, 0, 0, 0, 0, 0, 0, 0);
vertical_hover = new Array(0, 0, 0, 0, 0, 0, 0, 0);
for (x=1; x<=8; x++) {
	hs = grid.attachMovie("hswapper", "hswapper_"+x, grid.getNextHighestDepth(), {_x:-20, _y:40*x-20});
	hs.pos = x
	hs.onEnterFrame = function() {
		if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
			this.gotoAndStop(2);
			horizontal_hover[this.pos-1] = 1;
		}
		else {
			this.gotoAndStop(1);
			horizontal_hover[this.pos-1] = 0;
		}
	};
	vs = grid.attachMovie("vswapper","vswapper_"+x,grid.getNextHighestDepth(),{_x:40*x-20, _y:-20});
	vs.pos = x
	vs.onEnterFrame = function() {
		if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
			this.gotoAndStop(2);
			vertical_hover[this.pos-1] = 1;
		}
		else {
			this.gotoAndStop(1);
			vertical_hover[this.pos-1] = 0;
		}
	};
}
rays.onEnterFrame = function() {
	this.clear();
	this.lineStyle(2,0x00ff00);
	for (x=0; x<8; x++) {
		if (horizontal_hover[x] == 1) {
			this.moveTo(90,x*40+110);
			this.lineTo(410,x*40+110);
		}
		if (vertical_hover[x] == 1) {
			this.moveTo(x*40+110,90);
			this.lineTo(x*40+110,410);
		}
	}
};

Line 4: Same thing as line 3, previously explained, but this time for the buttons on the top of the field

Lines 18-29: Same management seen before, applied to the butons on the top of the field

Lines 39-42: drawing a vertical line if a button on the top of the field has the mouse on it

And now we have horizontal and vertical buttons working and casting a green line when rolled over.

That's all at the moment. Download source codes and see you tomorrow...