Flash "Find the differences" game creation tutorial - Part 1

Hi, in this tutorial we'll see how to make a flash
game similar to 5 Differences. Of course, in Flash
things can be done in lots of different ways, so we'll
cover only one of them, maybe not the best, but
it will work.


Lets see what I have in my flash document:

There are 6 layers:

- Image 1: A drawing
- Image 2: The same drawing, but with some changes
- Contour: Some black lines, to make it look better
- Button/s: In this layer I drew an invisible button
over the differences, instanced as "Df1_btn"
- Text: A dynamic text field instanced as "congrat"
- Actions: The actions layer.


In the actions layer I introduced this code:

Df1_btn.onRelease = function() {
_root.congrat.text = "Well done! You found the difference!"
};

And that's it. Lets see what do we get:

Oh, that's really primitive... when you place your mouse over the difference, it turns into a little hand. We need to solve this problem. Lets think...

If you can't see the cursor, then you won't see the
little hand... Great!
But... wait a moment... then you won't know where
your mouse is and you won't be able to play. We'll
have to make our own custom cursor.

This is very easy, don't worry. All you have to do
is to create a movie clip and link it as cursor




How do I do that!!??

Firstly, create a new MovieClip [in the image, rounded
in green] and draw an arrow.Once you have it created,
don't forget to open it's properties panel and tick
"Export for ActionScript" and give it the identifier
"cursor".

And now, the ActionScript

The only ActionScript I have is in the layer actions, in
the first frame. This is what I wrote:

Mouse.hide();
attachMovie("cursor", "cursor", 1);
cursor.onEnterFrame = function() {
this._x = _xmouse;
this._y = _ymouse;
};
Df1_btn.onRelease = function() {
_root.congrat.text = "Well done! You found the difference!"
};

And that's all.


This is the final result. Of course, it's not
finished, but the rest will have to wait for
Part 2.