Q:

Creating UI using Flixel

I am new to game development but familiar with programming languages. I have started using Flixel and have a working Breakout game with score and lives.
What I am trying to do is add a Start Screen before actually loading the game.
I have a create function that adds all the game elements to the stage:
override public function create():void
   // all game elements
{

How can I add this pre-load Start Screen? I'm not sure if I have to add in the code to this create function or somewhere else and what code to actually add.
Eventually I would also like to add saving, loading, options and upgrades too. So any advice with that would be great.
Here is my main game.as:
package
{
    import org.flixel.*;

    public class Game extends FlxGame
    {
        private const resolution:FlxPoint = new FlxPoint(640, 480);
        private const zoom:uint = 2;
        private const fps:uint = 60;

        public function Game()
        {
            super(resolution.x / zoom, resolution.y / zoom, PlayState, zoom);
            FlxG.flashFramerate = fps;
        }
    }
}

A:

So, while there might be several ways to do it, I've found it easiest to make a seperate State for each of my game 'sections' - so, the Main Menu, the Game Itself, and the Game Over/Scoreboard screens would each be their own state: MenuState, PlayState, and EndState, respectively.
So, make a new Class: MenuState.as and make sure it extends FlxState. In the create() method of MenuState, create and add all of your UI objects.
In your game.as, change this line:
super(resolution.x / zoom, resolution.y / zoom, PlayState, zoom);

Change it to:
super(resolution.x / zoom, resolution.y / zoom, MenuState, zoom);

In MenuState, somewhere (probably in a Button or KeyUp logic), you can use FlxG.switchState(new PlayState); to exit your Menu and start your game.
I recommend you have your game's logic in it's own state if possible, because it makes it easier to load, reset, and exit the game itself on demand.

