Using Flash Studio Pro

Open Game1.fla in the Lesson20/Assets directory.

Notice that there are five layersBackground, Assets, Top Bubbles, Actions, and Labelsas well as three frame labels (which we'll discuss in a moment). The Labels layer contains no content. It's just used to place empty frames that are given a frame label. The Background layer contains the project's background graphics. The Assets layer contains most of the remaining visual elements for the game, except for a bitmap of some bubbles on the Top Bubbles layer (this graphic was added to give the game some depth). As usual, the Actions layer will contain the ActionScript used in this project.

The game that you're going to build is very simple. You move a ship left and right using the Left Arrow and Right Arrow keys. You can fire a projectile upward from the ship, using the Spacebar. Bubbles appear from the left side of the screen and move to the right. The goal is to destroy as many bubbles as you can within a certain time limit. When finished, your score is saved to a text file if you have attained a new high score.

The Initial frame label will contain script to load the current high score data from a text file. Also on this label is a button that we'll use to begin gameplay. When the user clicks the button, the timeline moves to the Game label, which contains the script and assets for playing the game. After the game's time limit has been exceeded, the timeline moves to the Game Over label, where the current score is saved to a text file if the score is higher than the previously saved high score.

Other than the specific FSCommands used in this exercise, all the ActionScript used in this project should be familiar from earlier lessons. There are functions, arrays, duplicated movie clips, and the hitTest() function. Instead of dissecting each script line by line, we'll focus more on what a group of code accomplishes, and in some cases how it relates to the use of FSCommands.

Move the playhead to the Initial frame label.

With the Actions panel open, select the frame in the Actions layer (at the Initial frame label) and add the following script:

var mask:String = "mask.bmp";

fscommand("flashstudio.maskon", "mask");

fscommand("flashstudio.maskon", "\"mask.bmp\"");

Add the following script to load and display the previously saved high score:

var highscore:Number;

function scoreLoaded() {

  score_txt.text = "Most bubbles destroyed: "+ lv.score;

  highscore = Number(lv.score);

}

var lv:LoadVars = new LoadVars();

lv.onLoad = scoreLoaded;

lv.load("highest_score.txt");

This script creates an instance of the LoadVars class and loads the contents of the highest_score.txt text file into it. When the text file is loaded, the string "Most bubbles destroyed: 37" is displayed in the score_txt text field. The number of bubbles destroyed varies depending on the current value of score in the loaded text file.

Add the following script for the Play button:

play_btn.onRelease = function() {

  gotoAndStop("Game");

};

stop();

When the play_btn button instance is clicked, the timeline moves to the Game frame label.

Move the playhead to the Game frame label.

With the Actions panel open, select the Actions layer at the Game frame label and add the following actions:

var ship_speed:Number = 2;

var projectile_speed:Number = 4;

var bubble_speed:Number = 3;

var projectiles:Array = new Array();

var bubbles:Array = new Array();

var hits:Number = 0;

var depth:Number = 0;

var game_length:Number = 60 * 1000;

var shooting:Boolean = false;

The ship, projectiles, and bubbles all move at their own speeds. A speed value is the amount that the object can move (in pixels) during one frame. The variables ship_speed, bubble_speed, and projectile_speed define these speeds.

Arrays of projectiles and bubbles are also created, named projectiles and bubbles, respectively. These arrays store and keep track of bubbles and projectiles that are created and used during gameplay. Using arrays makes it easy to loop through the existing projectiles and bubbles to check for collisions or to remove them all from the screen.

Add the following onEnterFrame event at the end of the current script:

this.onEnterFrame = function() {

  generateBubbles();

  captureKeyPresses();

  moveProjectiles();

  moveBubbles();

  detectCollisions();

};

This onEnterFrame event executes these five functions (none of which have been created yet) for every frame:

• generateBubbles() creates a new bubble at a random time.

• captureKeyPresses() checks whether the arrow keys or Spacebar have been pressed. Depending on which key is pressed, this function moves the ship left or right, or fires a projectile.

• moveProjectiles() moves fired projectiles upward.

• moveBubbles() moves bubbles to the right.

• detectCollisions() loops through the projectiles and bubbles looking for collisions.

Add the generateBubbles() function at the end of the current script:

function generateBubbles() {

  if (random(50) == 0) {

    ++depth;

    var name:String = "bubble" + depth;

    var clip:MovieClip = bubble_mc.duplicateMovieClip(name,depth);

    bubbles.push(clip);

    clip._xscale = clip._yscale = 50 + random(50);

  }

}

Create the captureKeyPresses() function:

function captureKeyPresses() {

  if (Key.isDown(Key.LEFT) && ship_mc._x > 185) {

    ship_mc._x -= ship_speed;

  } else if (Key.isDown(Key.RIGHT) && ship_mc._x < 370) {

    ship_mc._x += ship_speed;

  }

  if (Key.isDown(Key.SPACE) && !shooting) {

    shooting = true;

    shoot();

  } else if (!Key.isDown(Key.SPACE)) {

    shooting = false;

  }

}

If the Left Arrow or Right Arrow key is pressed and ship_mc is within a horizontal boundary of 185 on the left and 370 on the right, the ship_mc instance is moved the amount of ship_speed in the appropriate direction. The boundary exists to prevent the instance from moving beyond the area of water in the tub.

Add the shoot() function at the end of the current script:

function shoot() {

  ++depth;

  var name:String = "projectile" + depth;

  var clip:MovieClip = projectile_mc.duplicateMovieClip(name, depth);

  clip._x = ship_mc._x;

  clip._y = ship_mc._y;

  projectiles.push(clip);

}

Now create the moveProjectiles() function:

function moveProjectiles() {

  for (var i:Number = projectiles.length - 1; i >= 0;  --i) {

    var clip:MovieClip = projectiles[i];

    clip._y -= projectile_speed;

    if (clip._y < 40) {

      clip.removeMovieClip();

      projectiles.splice(i, 1);

    }

  }

}

At this point in the book, you're used to seeing for loops; however, this is the first time that we've used a for loop to count backward. This function serves two purposes: moving any projectiles that have been created as a result of the user pressing the Spacebar, and removing the projectiles if they get too high on the screen.

This loop processes every projectile instance referenced in projectiles array. With every iteration, each instance referenced in the array is moved up on the screen by the amount of projectile_speed. If the y position of the currently referenced movie clip instance goes past 40, the instance is removed. The instance is removed in two steps: it's physically removed from the screen by using the removeMovieClip() method; then the reference to the instance in the projectiles array is deleted, using the splice() method of the Array class.

You may wonder why this particular loop call requires i to be counted backward (--i). Think of the references to projectile instances in the projectiles array as a stack of nine books, with the book at the bottom of the stack having an index value of 0, and the topmost book having an index value of 8. Now suppose you're given the task of removing the books at positions 1 and 4. If you remove the book at index 1, the remaining books on top of that book drop down one position; the book that was formerly at position 2 is now at position 1, the book that was at position 3 is now at position 2, and so on. This creates a problem when you remove the book at position 4, because it has been dropped to position 3. Removing the book at position 4 actually results in removing the book that was formerly at position 5. The book that was originally at index 4 is skipped altogether.

The same kind of logic problem would exist in our loop if we removed items by starting at index 0 and working our way up. By working backward, we eliminate this problem. Here's how.

Create the moveBubbles() function:

function moveBubbles() {

  for (var i:Number = bubbles.length - 1; i >= 0;  --i) {

    var clip:MovieClip = bubbles[i];

    clip._x += bubble_speed;

    if (clip._x > 550) {

      clip.removeMovieClip();

      bubbles.splice(i, 1);

    }

  }

}

Next, create the detectCollisions() function:

function detectCollisions() {

  for (var i:Number = projectiles.length - 1; i >= 0;  --i) {

    var projectile_clip:MovieClip = projectiles[i];

    for (var j:Number = bubbles.length - 1; j >= 0;  --j) {

      var bubble_clip:MovieClip = bubbles[j];

      if (projectile_clip.hitTest(bubble_clip)) {

        ++hits;

        projectile_clip.removeMovieClip();

        projectiles.splice(i, 1);

        bubbles.splice(j, 1);

        bubble_clip.play();

        fscommand("flashstudio.shake", "\"5\"");

      }

    }

  }

}

This function has a nested loop. For every projectile in the projectile array, the entire bubble array is looped through and a hitTest() is performed. If hitTest() returns a value of true, a collision has occurred between the projectile being tested and a bubble instance.

If a collision is detected, the hits variable is incremented, the projectile is removed, and the bubble is removed from the bubbles array. The bubble is told to play a "bursting" animation. The final frame in the bubbles_mc movie clip has an action assigned, this.removeMovieClip(), that removes the bubble clip as soon as the bubble has burst.

Create the gameOver() function to handle ending the game:

function gameOver() {

  clearInterval(gameID);

  for (var i:Number = projectiles.length - 1; i >= 0;  --i) {

    var clip:MovieClip = projectiles[i];

    clip.removeMovieClip();

    projectiles.splice(i, 1);

  }

  for (var i:Number = bubbles.length - 1; i >= 0;  --i) {

    var clip:MovieClip = bubbles[i];

    clip.removeMovieClip();

    bubbles.splice(i, 1);

  }

  gotoAndPlay("Game Over");

}

var gameID:Number = setInterval(gameOver, game_length);

The last line of script shown here uses setInterval() to tell the gameOver() function to execute after the game has been played for one minute, which is the length of time specified in the game_length variable created in Step 7.

Move the playhead to the Game Over frame label.

This frame contains the text showing that the game has ended. There is also a button named playagain_btn that moves the timeline back to the Initial frame so that the game can be played again.

Select the frame in the Actions layer directly after the Game Over frame label and add the following script:

if (hits != 1) {

  var message:String = "Game Over! You destroyed "+ hits + "bubbles!";

} else {

  var message:String = "Game Over! You destroyed " + hits + "bubble!";

}

fscommand("flashstudio.say", "message");

Add the following script to handle saving a high score:

if (hits > highscore) {

  var saveTo:String = "highest_score.txt";

  var saveContent:String = "score=" + hits;

  fscommand("flashstudio.savetofile", "saveTo, saveContent");

}

At the end of the game, this conditional statement compares the value of hits (the number of bubbles hit) with the value of highscore (which is the current high score, as discussed in Step 4). If hits has a greater value, a new high score has been achieved and needs to be saved. The savetofile command saves the new score to a text file, which is loaded at the beginning of the next game.

Add the following button event handler and stop() action at the end of the current script:

playagain_btn.onRelease = function() {

  gotoAndStop("Initial");

};

stop();

When the playagain_btn button instance is clicked, the user returns to the Initial frame label, where the high score is reloaded and the game can be replayed. A stop() action is added here to keep the movie from playing.

Choose File > Publish to create an SWF file.

With Flash Studio Pro open, select the Input File tab. At the bottom of the tab is the option Please Select an Input SWF. Use this option to browse to and select the Game1.swf file on your hard drive.

Click the Style tab. In the lower-left corner of the tab, click the No Border radio button.

Click the Output File tab. At the bottom of the tab is the option Please Select the Output File. Use this option to select the name and directory for the output file. This should be the default directory that contains the mask image and highest_score.txt file. Click the GO button to generate an executable file.

Check your working directory for a file named Game1.exe. Double-click this file to launch your game!

Close the executable file by pressing the Escape key, and then close Flash Studio Pro. Return to the Flash authoring environment and save your work as Game2.fla.

You have created an enhanced executable file using Flash Studio Pro. Flash Studio Pro and other third-party tools offer hundreds of custom FSCommands to enhance your content. You might find it interesting to read through the help files for Flash Studio Pro to learn about the other available commands. You might also want to play around with different Flash Studio Pro options when creating your executable files, such as assigning an icon to the file or having it fade in when the file is opened.