Building the menu screen

The menu screen is the screen containing all of the different selectable characters. I tried to emulate the interface of games like Street Fighter or Mortal Kombat. When in the menu screen is loaded, the user will see a list of portraits. Any of the characters still locked will have their portraits replaced by a generic lock icon and cannot be selected.

The movie clip passed to it contains two frame labels: IN and OUT (see Figure 2). These are called to play when the screen is meant to animate in and out respectively. At the end of each of these timelines is an animation event, a simple custom event I use to represent event hooks; a milestone on the Timeline.

Figure 2. The Timeline for the movie clip passed to the MenuScreen class.

In Figure 2, the ActionScript right before the OUT label looks as follows:

stop();
dispatchEvent(new AnimationEvent(AnimationEvent.ANIMATE_IN));

In my class, I map the event being dispatched (AnimationEvent.ANIMATE_IN) to a method. This code is very simple:

 public function animateIn():void
{
_mc.gotoAndPlay("IN");
_mc.addEventListener(AnimationEvent.ANIMATE_IN_START,_onAnimateInStart,
false,0,true);
_mc.addEventListener(AnimationEvent.ANIMATE_IN,_onAnimateIn,false,0,true);
};

When the Timeline reaches Frame 23 (the frame that dispatches AnimationEvent.ANIMATE_IN), _onAnimateIn will execute and I'll know the movie clip is ready to fly.

For example, each of those movie clips you see in Figure 2 is a menuClip. When _onAnimateIn is fired, I set all of these movie clips to enabled = true, allowing the user to click on them.

In addition, these movie clips contain ROLLOVER, ROLLOUT labels, just like the IN and OUT labels, except this time, I'm going to use them for mouse events. Hence ROLLOVER and ROLLOUT. As they come in, they'll fire their own event (MenuEvent), which MenuScreen is also listening to. It reacts like this:

private function _onMenuItemPortrait($evt:MenuEvent):void
{
Out.info(this,"_onMenuItemPortrait");
		    
// if the character is unlocked, display their portrait. otherwise, grab the "Locked" icon from the Library and display that.
$evt.menuClip.empty.addChild(Constants.CHARACTER_DATA[$evt.key].UNLOCKED ? _portraitsArray[$evt.key].content : new Bitmap(new LibraryItem_Lock(1,1)));
};
		    
private function _onMenuItemAnimateIn($evt:MenuEvent):void
{
_menuDictionary[$evt.menuClip] = Constants.CHARACTER_DATA[$evt.key];
		    
Out.info(this,"_onMenuItemAnimateIn");
		    
// again, if the character is unlocked their button is active. otherwise set their button disabled.
if(Constants.CHARACTER_DATA[$evt.key].UNLOCKED)
{
$evt.menuClip.btn.addEventListener(MouseEvent.CLICK,_onMenuItemClick,false,0,true);
$evt.menuClip.btn.addEventListener(MouseEvent.ROLL_OUT,_onMenuItemRollOut,false,0,true);
$evt.menuClip.btn.addEventListener(MouseEvent.ROLL_OVER,_onMenuItemRollOver,false,0,true);
}
		    
$evt.menuClip.btn.enabled = Constants.CHARACTER_DATA[$evt.key].UNLOCKED;
};

This translates as follows: When a menuClip is ready to display a portrait (the JPG loaded in from Main), attach it to a movie clip named empty. Then, when menuClip is fully displayed, if that menu clip's corresponding character data (found in Constants) is unlocked, listen for the mouse events so I know when the user rolls over, rolls out, and clicks. Otherwise, disable the button so the user can't possibly be confused into selecting a locked character.

When the user has selected a character, MenuScreen tells Main which user character and opponent character the game screen needs to display. This chain of events unfolds like this:

// this is in MenuScreen. Main is listening for ScreenEvent.GAME_START.
dispatchEvent(new ScreenEvent(ScreenEvent.GAME_START,userKey,opponent.KEY));
		    
// this is in Main. This fires when MenuScreen dispatches the ScreenEvent above. _curScreen is the GameScreen.
private function _onGameStart($evt:ScreenEvent):void
{
_curScreen = Constants.SCREEN_GAME;
_screens[_curScreen].onCharactersSelected($evt);
};

Page 5 of 8

Previous Page

Next Page