Creating Bloons in Flash
Tutorial parts
Part 4: Game screens
Game screens
These are the boring bits of any game ... the starting menu, the win/lose/restart notifications, that kind of thing. They're also core components so we really have to make them even if they're no fun.
The starting screen
This screen is just a semi-transparent white background (can't see it in the pic), a logo PNG and a SimpleButton called PlayButton. From the library we link it as Doubloons.Menu.
The starting screen
The code is very uncomplicated. We put an event handler on our PlayButton that replaces the Menu with the LevelSelect screen.
package Doubloons
{
import flash.display.MovieClip;
import flash.display.SimpleButton;
import flash.events.Event;
import flash.events.MouseEvent;
public class Menu extends MovieClip
{
public function Menu()
{
this.alpha = 0;
this.addEventListener(Event.ENTER_FRAME, this.FadeIn);
this.PlayButton.addEventListener(MouseEvent.CLICK, this.Play);
}
private function Play(e:MouseEvent):void
{
this.parent.addChild(new LevelSelect());
this.parent.removeChild(this);
}
private function FadeIn(e:Event):void
{
this.alpha += 0.05;
if(this.alpha >= 1)
{
this.removeEventListener(Event.ENTER_FRAME, this.FadeIn);
}
}
}
}
The level selection screen
This screen is more complicated than the main menu but still very simple. It has 12 boxes each of which represents a level. In each of those boxes it creates an instance of the level to use as a thumbnail, and then it enables or disables that button depending on whether we've unlocked it yet.
The level select screen
Here you can see how we're using those 'public static' properties from our Document Class to store the current level from within this class when we click on a button.
package Doubloons
{
import flash.display.MovieClip;
import flash.display.SimpleButton;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.GlowFilter;
public class LevelSelect extends MovieClip
{
public function LevelSelect()
{
var level:MovieClip;
var upto:int = SaveManager.Get();
for(var i:int=1; i<13; i++)
{
level = this["Level" + i] as MovieClip;
level.LevelNumber = i;
level.LevelLoader = Doubloons.Level["Level" + i] as Function;
// Create an instance of the level to get the thumbnail
var l:Level = level.LevelLoader();
// Create the thumbnail
var thumb:MovieClip = new l.Clip();
thumb.scaleX = 0.3;
thumb.scaleY = 0.3;
thumb.x = level.width / 2 - thumb.width / 2;
thumb.y = level.height / 2 - thumb.height / 2;
level.addChild(thumb);
// If this level is higher than what we're up to we disable the button
if(i > upto)
{
level.alpha = 0.5;
level.useHandCursor = false;
}
// Otherwise we enable it and add the mouse over, out and click events
else
{
level.useHandCursor = true;
level.buttonMode = true;
level.mouseChildren = false;
level.filters = [new GlowFilter(0x000000, 0.3)];
level.addEventListener(MouseEvent.CLICK, this.LoadLevel);
level.addEventListener(MouseEvent.MOUSE_OVER, Over);
level.addEventListener(MouseEvent.MOUSE_OUT, Out);
}
}
}
// Clicking a level button
private function LoadLevel(e:MouseEvent):void
{
var level:MovieClip = e.target as MovieClip;
Main.CurrentLevel = level.LevelLoader();
Main.CurrentLevelNumber = level.LevelNumber;
Main.CurrentLevelRestarter = level.LevelLoader;
Main.LevelHolder.addChild(new Main.CurrentLevel.Clip());
this.addEventListener(Event.ENTER_FRAME, this.FadeOut);
}
// Mousing over a level button
private static function Over(e:MouseEvent):void
{
var level:MovieClip = e.target as MovieClip;
level.filters = [new GlowFilter(0xFFCC00, 1)];
}
// Mousing off a level button
private static function Out(e:MouseEvent):void
{
var level:MovieClip = e.target as MovieClip;
level.filters = [new GlowFilter(0x000000, 0.3)];
}
// Fades this screen out to start a new level
private function FadeOut(e:Event):void
{
this.alpha -= 0.05;
if(this.alpha <= 0)
{
this.removeEventListener(Event.ENTER_FRAME, this.FadeOut);
// go to the level selection
this.parent.removeChild(this);
Main.Playing = true;
}
}
}
}
The restart screen
When you run out of shots you lose the level and have to restart it. This is just a MovieClip with a single SimpleButton called RestartButton. When we click it:
package Doubloons
{
import flash.display.MovieClip;
import flash.display.SimpleButton;
import flash.events.Event;
import flash.events.MouseEvent;
public class Restart extends MovieClip
{
public function Restart()
{
this.alpha = 0;
this.addEventListener(Event.ENTER_FRAME, this.FadeIn);
this.RestartButton.addEventListener(MouseEvent.CLICK, this.RestartLevel);
}
// Restarts the level
private function RestartLevel(e:MouseEvent):void
{
this.parent.removeChild(this);
Main.CurrentLevel = Main.CurrentLevelRestarter();
Main.CurrentCoins = 0;
Main.LevelHolder.removeChildAt(0);
Main.LevelHolder.addChild(new Main.CurrentLevel.Clip());
Main.Playing = true;
}
private function FadeIn(e:Event):void
{
this.alpha += 0.05;
if(this.alpha >= 1)
{
this.removeEventListener(Event.ENTER_FRAME, this.FadeIn);
}
}
}
The next level screen
The next level screen is shown if you successfully complete a level and it wasn't the last level. It's also very simple, just a single button that takes you to the following level.
package Doubloons
{
import flash.display.MovieClip;
import flash.display.SimpleButton;
import flash.events.Event;
import flash.events.MouseEvent;
public class NextLevel extends MovieClip
{
public function NextLevel()
{
this.alpha = 0;
this.addEventListener(Event.ENTER_FRAME, this.FadeIn);
this.NextLevelButton.addEventListener(MouseEvent.CLICK, this.StartNextLevel);
}
private function StartNextLevel(e:MouseEvent):void
{
this.parent.removeChild(this);
Main.CurrentLevelNumber++;
Main.CurrentLevelRestarter = Level["Level" + Main.CurrentLevelNumber] as Function;
Main.CurrentLevel = Main.CurrentLevelRestarter();
Main.CurrentCoins = 0;
Main.LevelHolder.removeChildAt(0);
Main.LevelHolder.addChild(new Main.CurrentLevel.Clip());
Main.Playing = true;
SaveManager.Save(Main.CurrentLevelNumber);
}
private function FadeIn(e:Event):void
{
this.alpha += 0.05;
if(this.alpha >= 1)
{
this.removeEventListener(Event.ENTER_FRAME, this.FadeIn);
}
}
}
}
The win screen
The Win screen is also very simple, just a button that takes you back to the game menu.
package Doubloons
{
import flash.display.MovieClip;
import flash.display.SimpleButton;
import flash.events.Event;
import flash.events.MouseEvent;
public class Win extends MovieClip
{
public function Win()
{
this.alpha = 0;
this.addEventListener(Event.ENTER_FRAME, this.FadeIn);
this.addEventListener(MouseEvent.CLICK, this.Close);
}
private function Close(e:MouseEvent):void
{
this.parent.addChild(new Menu());
this.parent.removeChild(this);
}
private function FadeIn(e:Event):void
{
this.alpha += 0.05;
if(this.alpha >= 1)
{
this.removeEventListener(Event.ENTER_FRAME, this.FadeIn);
}
}
}
}
Tutorial parts
Discuss
blog comments powered by DisqusPlay free games
Want to play free games? We recommend these games:
Sift Heads World - Act 3 Doodle Jump Online Doodle God Infectonator!: World Dominator When Penguins Attack When Penguins Attack 2 Original Blast Billiards Worm Madness Bloons Insanity Shadez 2 Cursed Treasure
