Making a game with flixel and Flash Builder 4 – Splash Screen
Did you read Creation of a game with flixel and Flash Builder 4?
Now it’s time to add a splash screen to the game. The splash screen or the title screen is the first thing the player sees, so we’ll add a backround image as well as the game title.
First, we must change our main file, HelloWorld.as, this way:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
package { import org.flixel.*; //Allows you to refer to flixel objects in your code [SWF(width="520", height="240", backgroundColor="#000000")] //Set the size and color of the Flash file public class HelloWorld extends FlxGame { public function HelloWorld():void { super(260,120,splash_screen,2); //Create a new FlxGame object at 320x240 with 2x pixels, then load splash_screen } } } |
As you can see, the only change I made can be found at line 9… here I am calling splash_screen class, that is the brand new class we are going to create.
Here it is:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
package { import org.flixel.*; public class splash_screen extends FlxState { // embedding a png file given a relative path [Embed(source="../media/splash.png")] public var splash_image:Class; public function splash_screen():void { // declaring the sprite variable that will hold the splash image var splash:FlxSprite = new FlxSprite(0,0,splash_image); // this variable will hold all texts var my_text:FlxText // adding the splash image on state add(splash); // adding and styling the first text, the title itself my_text = new FlxText(0, 20, FlxG.width, "This is a Splash Screen") my_text.setFormat(null,16,0xFFFFFFFF,"center") add(my_text); // adding and styling a text saying the player has to press SPACE to play my_text = new FlxText(0, 80, FlxG.width, "Press SPACE to begin") my_text.setFormat(null, 8, 0xFFFFFFFF, "center"); add(my_text); } override public function update():void { // checking if the player pressed SPACE... if (FlxG.keys.pressed("SPACE")) { FlxG.fade.start(0xff000000, 1, on_fade_completed); // ... if true then fade the screen to black and execute on_fade_completed function once the fade is completed } super.update(); } public function on_fade_completed():void { // playing the game itself FlxG.state = new PlayState(); } } } |
then PlayState class does not change…
|
1 2 3 4 5 6 7 8 9 10 11 |
package { import org.flixel.*; public class PlayState extends FlxState { override public function create():void { add(new FlxText(0,0,100,"Hello, World!")); //adds a 100px wide text field at position 0,0 (upper left) } } } |
And this is the result:
Follow splash screen instructions to “play”… next time, the game itself
Rate this post: 
(7 votes, average: 5.00 out of 5)
(7 votes, average: 5.00 out of 5)
Loading ...
Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.
They can be easily customized to meet the unique requirements of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers
This post has 6 comments
Dude
I’m using v2.34
It worked after I replaced:
public function splash_screen():void
with
override public function create():void
Labici Danut
Ooo nice. Thanks!
markanator13
I get an error on line 7:
[Embed(source="../media/splash.png")] public var splash_image:Class;
unable to resolve ‘../media/splash.png’ for transcoding | splash_screen.as | /HelloWorld/src | line 7 | Flex Problem
any help?
:D
amaca
just put your png file in the right path ../media/splash.png
Mynonas
using flex 4.5
had to change line 38 from:
FlxG.state = new PlayState();
to:
FlxG.switchState(new PlayState());
since FlxG.state changed to read-only.
works like a charm!
thanks for the tutorial Emanuele! :)
Ryan
Great tut, i needed to change
FlxG.fade.start(0xff000000, 1, on_fade_completed);
to
FlxG.fade(0xff000000, 1, on_fade_completed);
thx all for the previous comments they helped.