Properties
Project 4. Shoot the bug!
You may wish to turn off your speakers for a while to shut this buzzing fly!
In this project we will create interactive shooting game. This game will be the simplest you can imagine, but still it's an action game done in Flash and when you understands the concept the rest depends on your creativity and sky is the limit!
There is an annoying buzzing fly fluttering around. You are trying to shoot it with a whatever could be a gun. If your shot the target you got a point. There are 100 shots available for this game. After you've done 100 shots game is over and you will be given a number of killed flies. At first prepare symbols for the game
- Create a symbol of a fly or bug or whatever you are going to kill. Shape is not critical it can be simply a circle. But it's good idea to make something more complicated. For our example we created this fly
- Also you will need an "aim cross" to find a target . Make a cross or something similar. We've done it like that
- Extend the timeline of your file up to we have 600 frames in our example. It's done to make the fly trajectory long and intricate. Make the stage size about 500X350 pixels Drag a fly on the stage and give it an instance name for example "bug".
- Create a guide it will be a path of the fly make it as "wavy" as possible. "Dock" the fly to the one end of the guide. Make a keyframe at the end of the timeline and dock the fly to the end of the guide.
- Test the movie the bug should fly at the stage following the guide. If you are hesitant about guides refer to our basic course.
- Create two dynamic text fields give them instance names and assign variables. The first instance may be named "kills" with variable "points". Type nothing in this textbox. The second text instance may be named "counter" with variable "shots". Type 100 in this field.
- Create a button which will occupy all the stage. Technically it means that wherever you click it's will be this button.
- Now we will disable the mouse cursor and substitute it with our "cross".
- Firstly create a small movie symbol as we've done in previous exercise and place it in the left top corner of the stage. Make it invisible for the user simply hide it under our huge button. Name this symbol "anchor"
- Drag a cross movie symbol on the stage (remember to refer to symbols we need to make them movie symbols. Name it "cross"
- Create a layer ACTIONS, and enter the following code in the first frame
Mouse.hide(); anchor.onMouseMove = function(){ cross._x = anchor._xmouse; cross._y= anchor._ymouse; }The first line of the code disable mouse cursor. The next lines make the cross follow the mouse. -
Now we will create a main functionality for the page. Observe the code we've done and create similar. This code goes to the event handler of the button, which occupies the stage.
on(press) { if (anchor._xmouse < bug._x+15 && anchor._xmouse > bug._x-15){ if (anchor._ymouse < bug._y+15 && anchor._ymouse > bug._y-15){ points = points +"+"; } } shots = shots-1; } }To analyze the mouse click position two if conditions are checked. At first horizontal position of "mouseclick" compared to position of the bug. Click must be done in the interval between 15 px to the left and 15 px to the right of the bug. The next if condition checks if vertical position is in the interval between 15px up and down from the center of the bug. So if mouse is clicked inside this 30X30 square where bug stays the condition is satisfied, points are incremented and you got one bug killed.In any situation "shots" are decremented after each click.
- Analyze the code below. It's practically the same but we added couple more details. Our bug is a bit more complicated. At first we prolonged it's timeline, inserted a stop() script at the beginning and if shot was correct triggered the movie with play() script.
Secondly, we made the main movie timeline a bit longer, placed a redirection script couple frames before the end (goToAndPlay(1)) and when there is no shots anymore threw user to this "end" frame, where results are displayed.
on(press) { if (anchor._xmouse < bug._x+15 && anchor._xmouse > bug._x-15){ if (anchor._ymouse < bug._y+15 && anchor._ymouse > bug._y-15){ bug.play(); points = points +"+"; } } shots = shots-1; if (shots == 0){ goToAndStop("end"); } }When user at the "end" frame the button, which again occupies all the stage has the following code.on(press){ shots=100; points=""; goToAndPlay(1); }It refresh shots and points and generates a new game.