Talking about Actionscript 3, Flash and Game development.
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.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.