Create a "Frenzic" Inspired Puzzle Game in Flash

Take a look at this Premium Tutorial to create an entertaining puzzle game, inspired by Frenzic, using Flash and ActionScript 3.

In the demo above, fill the outer boxes with colored squares. You get more points for filling a box with squares that are all the same color.

Step 1: Brief Overview

Using the Flash drawing tools we'll create a good looking graphic interface that will be powered by several ActionScript 3 classes.

The player will be able to click on four different locations to sort the color blocks on the squares, more points are earned if you fill a square with a single block color.

Step 2: Flash Document Settings

Open Flash and create a 320 pixels wide, 480 pixels tall document. Set the Frame rate to 24fps.

Step 3: Interface

A colorful nice looking interface will be displayed, this involves multiple shapes, buttons, sounds and more.

Continue to the next steps to learn how to create this GUI.

Step 4: Background

Select the Rectangle Tool (R) to create a 320x480px #0D6191, #001217 rectangle and center it in the stage. Use the same tool to crate a 2x480px black line with 20% alpha, press CMD+D to duplicate it multiple times, and spread the lines out to get the effect in the image above.

Step 5: Title View

Select the Text Tool (T), select a good looking font and write your game title. I used this format: Orbitron Bold, 60pt, #A3FF24. You can add a simple glow filter to make it look better.

Use the same technique to create two buttons, align them to the center and name them startB and creditsB. Convert all to a Movie Clip and set its name to TitleView; mark the Export for ActionScript box and delete the clip from the stage.

Step 6: Score and Lives

This will be the GameView. Add the background MC to the stage and create two Dynamic Text Fields and place them as shown in the image. Name the Text Fields livesTF and scoreTF.

Step 7: Containers

Use the Rectangle Tool (R) to create a 70x70px square and fill it using the background gradient, convert it to MC and press CMD+D to duplicate it so that you have five in total. Use the Align Panel to place them as shown in the image.

The instance names should match their positions -- that is: up, down, left, right and the center will be mainHolder.

Step 8: Blocks

Use the same technique used in the last step to create three 30x30px blocks, convert them to MC and name them according to its color: OrangeBlock, PurpleBlock and GreenBlock. Don't forget to mark the Export for ActionScript box.

Step 9: Alert

An alert will be shown when you lose all your lives, and it will show the final score you reached. Use the Rectangle Primitive Tool to create it and fill it with this Linear gradient: #000000 to #333333. Set its instance name to AlertView and mark the Export for ActionScript box.

Step 10: Credits

This screen will be easy to make as we already have all the graphics. Set its instance name to CreditsView and mark the Export for ActionScript box.

Step 11: Tween Nano

We'll use a different tween engine from the default included in flash, this will increase performace as well as it is easier to use.

Step 12: Soungle

We'll use Sound Effects to enhance the feeling of the game, you can find the sounds used in this example in Soungle.com using the keywords bell and buzz. Add them to your Library, with class names of Bell, Bell4, and Buzz, respectively.

Step 13: Create a new ActionScript Class

Create a new (Cmd + N) ActionScript 3.0 Class and save it as Main.as in your class folder.

Step 17: Constructor

The constructor is a function that runs when an object is created from a class, this code is the first to execute when you make an instance of an object or (when in the Document Class) the first to run when the project loads.

It calls the necessary functions to start the game. Check those functions in the next steps.

public final function Main():void
{
//code...
}

Step 18: Add Title View

We'll start by adding the TitleView to the stage; if we don't do this the first screen shown will be the GameView.

addChild(titleView);

Step 19: Add Vectors Values

The blockColor vector is used to create a new instance of the selected block; the parameters are the blocks that we created in the previous steps.

The positions vector stores the possible x and y positions that a block can have; mixing this will give us the final position relative to the mainHolder MC.

Step 28: Check For an Available Space

Before continuing with the game, we must check that the newly created block can actually be placed in a square container. The following code checks every container array to make sure that there is an empty position available in one of the boxes where the block can be placed; if there isn't, the block is destroyed and the function is called again to generate another one.

Step 31: Unused Blocks

After removing the life, the block in the center square will be destroyed and a new block will be generated. This code also checks if the player is out of lives and calls a function that we'll write later.

Step 32: Place Blocks

This function runs when the player clicks any of the container squares. It basically checks whether the correct position is available to place the square and places it if true. The function in the next step is called when the block is placed.

Step 34: Score

Every block placed increments the score by one. When the box is full the score will increase by 50 and if the box is completely filled by a single color the total score will increase by 200.

score++;

Step 35: Sound

A short sound will indicate that the block was placed.

bell.play();

Step 36: Complete Single Color Container

The next code checks whether the container was filled by a single color block using the container array. It increments the score by 200, plays the corresponding sound and bounces the container as a visual sign. It also clears the variables in the container.

Carlos Yanez is a freelance software developer and interface designer who enjoys using different technologies for creating content. When he is away from the keyboard, he plays guitar/bass and runs a local social website.