Drop Down Flash Game

Tweet  This tutorial is aimed to learn how to make a drop down game in Flash, you can use your imagination to design the heart into another exciting figure... enjoy!


1.Top bar and net

Set the movie to 30fps. Rename layer 1 to layout. Draw a black rectangle with no line. Let the rectangle stretch across the top of the stage. It should be approximately 50 pixels high. Use the selection tool to make a curve in the top bar.
Make a new layer. call it net. Use the oval and pencil tools to draw a simple representation of a net. Use the transform tool to give it the approximate dimensions 60x15 pixels.select the net and convert it to a movie clip(F8). Assign it the instant name net_mc. Make a new layer called AS. Open the actions panel (F9). Write:

var netspeed=15;
stop ( );
onEnterFrame = function ( )
{
if (Key.isDown (Key.LEFT))
{
MOVE_NET(-netSpeed);
}
if (Key.isDown (Key.RIGHT))
{
MOVE_NET(netSpeed);
}
};
function MOVE_NET (onStep);
{
trace( onStep)
};

Save your work as drop_game.fla. Test your work (CTRL+ENTER)

What is this?

first of all you stop the playhead from progressing to any subsequent frames. The movie is effectively looping in frame 1. Secondly you have written a function that is called upon in the event of EnterFrame. since the movie is set to 30fps the function is executed 30 times every second, or virtually continuously.

The function consists of two conditional statements. Remember the basic structure of conditional statements: if (some conditional is true) { do this command}
This sctionscript specifies that if the left arrow key is pressed, the MOVE_NET function is called and the parameter netSpeed is sent along with the call. the identical action is called when the right arrow key is pressed and the parameter -netSpeed is sent along.

The MOVE_NET has a temporary variable oneStep to remember the parameter sent along with the call. so the value know to the EnterFrame function as netSpeed, is know to the MOVE_NET function as oneStep.
Despite the different names, the two functions are really referring to the same value. The function sends (or traces) the value of the parameter to the output window. It doesn't do anything useful yet. It simply tells you that it is ready and that it responds to left and right arrow input. It is really important that you get the principle of calling a custom function and sending a parameter along . Ponder it you are familiar with the principles.

2. Drop the  heart

Make a new layer called hearts. Use the rectangle tools to draw a two similar rectangles with a red fill and no line. Use the transform tool to rotate the two rectangles and merge them together into a very basic heart shape. Use the selection tool to transform the shape into a more organic-looking heart. Transform the heart to a movie clip (F8).

Double click on the heart to get into the heart movie clip's own time-line. This is where Flash can be very elegant and very confusing: all movie clips have separate time-lines. In the heart movie clip you insert a new layer called AS. This is where you script the dropping action of the heart.

var dropSpeed = 10;
var belowStage = 450;
var aboveStage = 0;


onEnterFrame = function ( )
{
this._y += dropSpeed;
if (this._y > belowStage)
  {
       REPOSITION ( );
  }
};
REPOSITION = function ( )
{
     this._y = aboveStage;
dropSpeed = random (20) + 5;
};

save your work as drop_game2.fla and test the movie (CTRL+ENTER). The heart should drop from the top to the bottom of the stage. When its y-axis position is greater than 450, actionscript moves the heart back to the top of the stage so it can fall again.

What is this?
the script for dropping the heart uses the same principles as you used for moving the net. You have an EnterFrame function that determines which event that will trigger a custom built function. In the heart script you are starting to use some more variables:
Initially you set up three variables:one to determine the drop rate of the heart, one to indicate the y-axis value of the heart when it is below the visual area of the stage, one to indicate the very top of the stage

You have an EnterFrame function that moves the heart down the y-axis with 10 pixels per frame. Notice the reference to the heart. Instead of using an instance name, you are now using this. You have a conditional statement that checks if the heart has moved below the stage bottom. If that is true, the function REPOSITION is called. The REPOSITION function places the heart at the top of the stage, from where it can fall once again. Notice also that the REPOSITION function gives the heart a new dropSpeed between 5 and 24 pixels. Random(20) returns a number between 0 and 19.

3. Catch the heart

To catch the heart, you need to move the net. Select the AS layer of the main timeline. Update the MOVE_NET function:

function MOVE_NET (oneStep)
{
net_mc._x+=oneStep;
};

Now you need tell the heart to check if it collides with the net. Make sure you are inside the heart movie clip's timeline. Open the script in the AS layer. Update the EnterFrame function:

onEnterFrame = function ( )
{
this._y += dropSpeed;
if (this.hitTest (this._parent.net_mc))
{
REPOSITION ( );
trace ("one heart caught");
}
if (this._y > bellowStage)
{
REPOSITION ( );
}
};

Now go back to the main timeline, open the script in layer AS and add this function bellow the existing code:

_global.gscore=0;
function ADD_POINT (receivedValue)
{
gScore += receivedValue;
trace(gScore);
};

Save as drop_game3.fla and test your work. If you manage to catch the heart with your net, the output window should show the "one heart caught" text.

4.Keeping score and dropping the heart randomly

Now you register, every time a heart is caught. It's only a small step to add a simple score system to this game. In the main timeline you select the layout layer. You use the text tool to make a static text field: "SCORE:"
Remember to choose a color that can be seen against the fill-color of the top bar. Next to this text field, also in the layout layer, you make  a right-aligned, dynamic text field with the instance name score_txt
Update the EnterFrame function in script in the AS layer of the heart movie clip:

var myValue=10;
onEnterFrame = function ( )
{
this._y += dropSpeed;
if (this.hitTest (this._parent.net_mc))
{
REPOSITION ( );
this._parent.ADD_POINT (myValue);
}
if (this._y > bellowStage)
{
REPOSITION ( );
}
};

In the main script you add a couple of lines, so your users can see their score while playing the game:

_global.gScore=0;
score_txt.text = gScore;
function ADD_POINT (receivedValue)
{
gScore += receivedValue;
score_txt.text = gScore;
};

The change is that the ADD_POINT no longer traces the gScore. Now gScore is displayed in the dynamic text field with the instance name score_txt. Notice how the gScore is displayed in Score_txt once when the movie starts. Score_txt is updated every time the gScore is updated.