Creating Bloons in Flash
Tutorial parts
Part 1: Understanding the game and setting up our FLA
Introduction
Doubloons is a very simple game that is closely related to Bloons. The goal is simply to angle and power each shot to collect the coins, and when you reach the required number of coins you proceed to the next level. If you run out of shots you restart that level.
Although the gameplay is simple there are a lot of different parts we need to discuss that are all closely related so make sure you grab a copy of the source to work with as you read the tutorial.
Setting up our Flash file
As with Sudoku and Minesweeper we're going to use a hybrid of creating elements on our stage and programmatically through ActionScript. This time round though we're dealing with a more complicated game which requires a bit more work setting up the FLA.
The structure of our FLA
Remember to name your layers, you will thank yourself if you ever have to come back to an old FLA.
The sky
The sky is just a drawn rectangle with a gradient fill going from dark blue to light blue. It is sized the same as our stage (550x400)
Our sky rectangle
The ship and water
The ship is a piece of vector art turned into a movieclip. It doesn't move and isn't interactive, it just sits there.
The ship
The water also goes in the ship's layer. We have 3 'pieces' of water that are slid back and forth to make something representative of waves. Each piece is a 700x40 pixel transparent PNG. Behind the 3 pieces we move around is just a solid blue rectangle that gives us a constant 'minimum' for the water.
The 3 water movieclips with the solid blue background behind them
The 3 movable pieces of water should be inside MovieClips with instance names Water1, Water2 and Water 3.
Water2, an instance of ... Water2!
The final component of the ship layer is the cannon and cannonball. The cannon consists of two parts, one is the base which is a part of the ship graphic, the other is the barrel which is a movieclip we can rotate to follow the mouse. One important and not-visible part of the cannon is we have a secret movieclip inside it that is the Firing Point. This is the point where the cannonball will begin its flight, and it goes inside the cannon so it moves as the cannon rotates. You can see it's the selected movieclip in this graphic.
The cannonball does not go inside the cannon movieclip!
Our cannon, its firing point, and the cannonball.
The other bits
In the "miscellaneous" layer we're stuffing all the other odds and ends ... the reset and sound buttons, our statusbar, and the fire power meter.
The sound and restart buttons
The sound and restart buttons are just SimpleButtons each with one frame made from an image. To make them you just drag an image onto the stage, hit F8 and put a name and select button from the options.
The sound button
The firing power
This is a slightly more complicated element, it uses a Mask to create a circle shape we can fill in. To create the mask you draw a circle and then right click on the layer in the timeline bar and select Mask.
The fire power movieclip
We use the mask because as the firepower increases or decreases we are filling in a circle, except we're not really filling in a circle we're adjusting the height and y position of a rectangle which is masked by the circle.
The status bar
The status bar provides us our in-game information elements, how many shots we have left, how many coins we have collected, what level we're on to etcetera. Most of this is just text fields and symbols.
The status bar
Once you have done all of this you're ready to start coding the game.
Tutorial parts
