Anatomy of a Flash game main screen

In most cases, when you design a Flash game the main screen is the last thing you add to your project.

This way, sometimes you may forget to include a feature or two because you want your game to be released into the wild.

Since you shouldn’t understimate the main screen (all in all it’s the first thing players see), here it is a brief guide about it. Follow this post and you will be able to create basic Flash game main screen in a matter of minutes.

Then, if this post receives some interesting feedback, I’ll keep on showing you more and more features.

Recommended 3rd party libraries

First, let’s see the free 3rd party libraries you shouldn’t miss in your game main screen:

Stardust particle engine: reviewed here, it’s a quick and easy way to create amazing particle effects to be used in your background.

SWFStats: reviewed here, simply the most complete statistics API for Flash content.

MochiBot: far from being as awesome as SWFStats, it won’t bite you if used even if you have SWFStats. I always use MochiBot, since it was the only statistics API

MochiMedia: the greatest API to monetize and enrich your game with interesting features such as link tracking, microtransitions, social actions and so on.

The main class

The main class at this stage is quite simple, since we only have to call the splash screen. So it will be something like that:

package {
	import flash.display.Sprite;
	import mochi.as3.*;
	import SWFStats.*;
	public class main extends Sprite {
		public var bbackground:background_mc = new background_mc();
		public var splash:splash_mc = new splash_mc();
		public var setup:setup_class = new setup_class();
		public function main():void {
			if (setup.use_mochibot) {
				MochiBot.track(this, setup.mochibot_game_id);
			}
			if (setup.use_swfstats) {
				Log.View(setup.swfstats_id, setup.swfstats_string, root.loaderInfo.loaderURL);
			}
			if (setup.use_mochiservices) {
				MochiServices.connect(setup.mochiads_game_id, root);
			}
			addChild(bbackground);
			addChild(splash);
		}
	}
}

As you can see, at the moment I just have three objects:

background_mc: the background

spash_mc: the main screen

setup_class: A class storing a number of useful information such as boolean variables to tell the game whether to use MochiMedia services or not (some sponsor may not like it), secret keys used in the APIs and so on.

Try to store as much information as you can into your setup class and you will be able to build the entire “boring stuff” around any new game in a few minutes. Don’t forget the core of the game is the game itself, so try to create a framework around it.

This is my setup_class at the moment:

package {
	public class setup_class {
		public var use_mochiservices:Boolean=true;
		public var use_mochibot:Boolean=true;
		public var use_swfstats:Boolean=true;
		public var mochiads_game_id:String="xxxxxx";
		public var mochibot_game_id:String="xxxxxx";
		public var swfstats_id:int=547;
		public var swfstats_string:String="xxxxxx";
		public var more_games_code:String="xxxxxx";
		public var more_games_url:String="http://www.triqui.com/";
		public var mochi_login_x:int=5;
		public var mochi_login_y:int=443;
		public var button_array:Array=new Array("PLAY","Play more games");
		public var button_offset_x:int=70;
		public var button_offset_y:int=220;
		public var button_step:int=60;
		public var number_of_levels:int=30;
	}
}

With a good setup class and a few lines in other classes, you should be able to manage every feature of the game that’s not the game itself.

Back to our main class, according to setup settings I call MochiBot, SWFStats and MochiMedia APIs, then add on stage the background and the title screen.

The Background

This is the code in my background class:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import idv.cjcat.stardust.common.actions.*;
	import idv.cjcat.stardust.common.clocks.*;
	import idv.cjcat.stardust.common.initializers.*;
	import idv.cjcat.stardust.common.math.*;
	import idv.cjcat.stardust.twoD.actions.*;
	import idv.cjcat.stardust.twoD.emitters.*;
	import idv.cjcat.stardust.twoD.initializers.*;
	import idv.cjcat.stardust.twoD.renderers.*;
	import idv.cjcat.stardust.twoD.zones.*;
	public class background_mc extends Sprite {
		public function background_mc() {
			var emitter:Emitter2D=new Emitter2D(new SteadyClock(0.5));
			var sprite:Sprite = new Sprite();
			addChild(sprite);
			var renderer:DisplayObjectRenderer=new DisplayObjectRenderer(sprite);
			renderer.addEmitter(emitter);
			var displayObjectClass:DisplayObjectClass=new DisplayObjectClass(particle_mc);
			var position:Position=new Position(new Line(0,0,width,0));
			var velocity:Velocity=new Velocity(new SinglePoint(0,5));
			emitter.addInitializer(displayObjectClass);
			emitter.addInitializer(position);
			emitter.addInitializer(velocity);
			var move:Move = new Move();
			var deathZone:DeathZone=new DeathZone(new RectZone(0,0,width,height),true);
			emitter.addAction(move);
			emitter.addAction(deathZone);
			var drift:RandomDrift = new RandomDrift();
			drift.randomX=new UniformRandom(0.1,0);
			var oriented:Oriented = new Oriented();
			oriented.offset=180;
			emitter.addAction(drift);
			emitter.addAction(oriented);
			addEventListener(Event.ENTER_FRAME, emitter.step);
		}
	}
}

Just create a movieclip called particle_mc and you’ll have a simple animation in the background – that can be easily made with a couple of AS3 lines – but you can unleash all the power of Stardust if you want.

The splash itself

Finally, the splash itself.

package {
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import flash.net.navigateToURL;
	import flash.net.URLRequest;
	import mochi.as3.*;
	import SWFStats.*;
	public class splash_mc extends Sprite {
		public var button:button_mc;
		public var mute:mute_mc = new(mute_mc);
		public var setup:setup_class = new setup_class();
		public function splash_mc():void {
			addEventListener(Event.ADDED_TO_STAGE, init);
		}
		public function init(e:Event) {
			var mochi_button_container:Sprite = new Sprite();
			if (setup.use_mochiservices) {
				MochiSocial.showLoginWidget({x:setup.mochi_login_x,y:setup.mochi_login_y});
			}
			addChild(mochi_button_container);
			for (var i:int=0; i<=1; i++) {
				button = new button_mc();
				button.x=setup.button_offset_x;
				button.y=setup.button_offset_y+i*setup.button_step;
				button.menutext.text=setup.button_array[i];
				button.mouseChildren=false;
				button.buttonMode=true;
				if (i==1) {
					mochi_button_container.addChild(button);
					if (setup.use_mochiservices) {
						MochiServices.addLinkEvent(setup.more_games_code, setup.more_games_url, mochi_button_container);
					} else {
						mochi_button_container.addEventListener(MouseEvent.CLICK, on_click_more);
					}
				} else {
					addChild(button);
					button.addEventListener(MouseEvent.CLICK, on_click_play);
				}
			}
			addChild(mute);
		}
		function on_click_play(event:MouseEvent):void {
			Log.Play();
		}
		function on_click_more(event:MouseEvent):void {
			var more_games:URLRequest=new URLRequest(setup.more_games_url);
			navigateToURL(more_games, '_blank');
		}
	}
}

Here I add on stage a mute_mc object that will manage the sound, then I display the MochiSocial login widget, but the most interesting thing is how I manage the "Play more games" button.

If I have MochiMedia enabled from setup, I use the API link tracking with all the issues around it (creation of a button container), if MochiMedia is disabled then I just manage that link with URLRequest library.

Then I log with SWFStats when the player presses "PLAY" button. Even the text on the buttons is defined by setup class.

The music

The music is managed by mute_mc class made this way:

package {
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import flash.media.SoundChannel;
	public class mute_mc extends MovieClip {
		public var soundtrack:soundtrack_mc = new soundtrack_mc();
		public var music_channel:SoundChannel=soundtrack.play(0,10000);
		public var music_on:Boolean=true;
		public function mute_mc():void {
			x=580;
			y=420;
			mouseChildren=false;
			buttonMode=true;
			addEventListener(MouseEvent.CLICK, on_click);
			addEventListener(Event.ADDED_TO_STAGE, init);
		}
		function on_click(event:MouseEvent):void {
			switchsound();
		}
		function init(e:Event):void {
			if (music_on) {
				gotoAndStop(1);
			} else {
				gotoAndStop(2);
			}
		}
		public function switchsound():void {
			music_on=! music_on;
			if (music_on) {
				music_channel=soundtrack.play(0,10000);
				gotoAndStop(1);
			} else {
				music_channel.stop();
				gotoAndStop(2);
			}
		}
	}
}

It just manages the music linked as soundtrack_mc. Notice it's not a Sprite but a MovieClip since it has two frames, one for the playing symbol and one for the mute one.

This is just a brief overview of a main screen, but I hope I gave you an idea about what's behind a Flash game menu. With some more effort, it can become a prototype. I'll try to give you something downloadable very soon.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers