Embedding into web page

There are many ways to distribute games made with Flex. You can create standalone executable, but most probably you wish to publish your game on your website or submit it to one or more game portals.

In theory, your game will behave the same when played as standalone or from inside another application (web browser). In practice, there are some minor differences. One important difference for game developers is focus management, which can cause some problems, if game supports keyboard controls. Snake's Adventure will support only mouse controls, but if you wish support keyboard controls in your game, you will have to take care of focus management.

As you can see in previous chapter, I embedded SnakesAdventure.swf for the first time. On the Internet you can find a lot of (different) examples, how to embed SWF files into web page. I am using following HTML tag on this pages:

<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="SnakesAdventure.swf" type="application/x-shockwave-flash" width="480" height="480"></embed>

There is one more thing you should be aware of, if you wish to submit your game on portals, web pages... Your game should not start right after it is loaded, embedded games usually have starting screen, where you have to click to start the game. This may seem unnecessary if there is only one game on the page, but it prevents chaos in case there are many games on the page.

In this chapter, we will implement activation mode, that will display the same title screen, that we use in the game menu, in the background. On the lower part of the frame will be the banner that says "Press mouse click to start the game". Activation mode will be active until mouse button is released.

First we have to check if game is running as embedded or not. In case it is, we will start the program in activation state otherwise game menu state will remain active. ExternalInterface class contains property available that tell us if program is embedded. Before we can use it, we have to add import statement at the top of SnakesAdventure.as:

import flash.external.ExternalInterface;

Add new constant to other state constants:

private static const ACTIVATION:int = 0;

Inside Init function we will check if game is embedded and in case it is, we will set state variable value to ACTIVATION. Otherwise state variable value will remain unchanged and program will display game menu at the beginning.

if (ExternalInterface.available)
  state = ACTIVATION;

We will put source code for ACTIVATION state into its own file: Activation.as. Create empty file with that name and copy following source code:

private function Draw_Activation(elapsedTime:Number):void
{
  Draw_TitleScreen();
  Draw_ActivationBanner();
}

private var activationBannerBitmap:BitmapData = null;

private function Draw_ActivationBanner():void
{
  if (activationBannerBitmap == null)
  {
    activationBannerBitmap = new BitmapData(SCREEN_WIDTH,36,true,0x00000000);
    activationBannerBitmap.draw(new activationBannerImg());
  }

  screenBuffer.copyPixels(activationBannerBitmap,
                          new Rectangle(0, 0, SCREEN_WIDTH , 36),
                          new Point(0,400));
}

private function MouseUp_Activation(event:MouseEvent):void
{
  state = GAME_MENU;
}

Nothing new here, that we have not seen in previous chapters.

Draw_Activation function is called from Draw function in SnakesAdventure.as when ACTIVATION state is active. It first calls Draw_TitleScreen from GameMenu.as that draws title screen image. Then it displays activation banner by calling Draw_ActivationBanner implemented bellow. Code from Draw_ActivationBanner is similar to other functions that draw image into screen buffer. Size of my version of banner is 480x36 pixels, if you made your version, adjust the size in the Rectangle.

MouseUp_Activation will be called from MouseUp function implemented in SnakesAdventure.as when ACTIVATION state is active. When user releases mouse button, MouseUp_Activation will change active state of the program to GAME_MENU and consequently, game menu will show up. We don't have to check MouseDown/Moved events here.

Of course we must not forget to embed banner image into executable. Add this line to Images.as:

[Embed(source="Images/ActivationBanner.png")] private var activationBannerImg:Class;

In SnakesAdventure.as we have to add another include stetement:

include "Activation.as";

We also have to add another case in switch statement of Draw function:

case ACTIVATION:
  Draw_Activation(elapsedTime);
  break;

and MouseUp function:

case ACTIVATION:
  MouseUp_Activation(event);
  break;

That's it. There is, of course, project package for this chapter available for download. If you build SnakesAdventure.swf on your computer and start it from Flash player, you will not see activation screen that is visible in the embedded version below.