Create your own Fupa game library

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

Flash games have gained a lot of popularity for their simple gameplay and instant accessibility. Fupa is just one of many Flash gaming websites, but it is somewhat unique in that offers developers the ability to use their games in 3rd party web pages an applications (as long as there is a link back to the Fupa homepage).

This tutorial will look at the process of querying the Fuba web service and then using the returned data to embed Flash games into a Flex application.

The Flex application will have two states. The first will be a menu were users can select from the games available in the Fupa database. This state is called GameMenu. The second state will be where an actual game is being played. This state is called GamePlay.

Common to all these states will be two controls. The first is a Button that can switch the application to full screen. To enable full screen Flash applications you need to add the HTML allowFullScreen tag. However, there are quite a few situations where you have no control over the HTML that contains your SWF file. A quick work around is to create a button that launches the SWF file in the browser window directly. While this does restart the application, a SWF file loaded directly by a browser typically fills the screen. All you need to do is call navigateToURL and supply the URL of the SWF file, which can be obtained through the Application.application.url property.

<mx:Button label="Full Screen" fontSize="10" fillAlphas="[0.9, 0.9, 0.9, 0.9]" click="{navigateToURL(new URLRequest(Application.application.url), '_top');}" id="btnFullScreen" bottom="10" left="10" width="100"/>

The second control is a LinkButton, which will open the Fupa homepage (as required by the Fupa license agreement).

<mx:LinkButton label="Free Online Games powered by Fupa Games" color="#FFFFFF" bottom="0" right="0" click="{navigateToURL(new URLRequest('http://www.fupa.com/'))}" fontSize="9"/>

By adding these controls directly to the Application element, they will appear in all the subsequent states.

The states element holds the information that defines the Flex application states. Add a states element to the Application element.

<mx:states>

<!-- individual states are added in the states element -->

</mx:states>

Inside the states element we add a new State element, which itself will contain two AddChild elements. It is in these AddChild elements that we add the GUI controls that appear in that state. Here we have added a TileList, to display the games, and a List to display the game categories.

<mx:State name="GameMenu">

<mx:AddChild position="lastChild">

<mx:TileList doubleClickEnabled="true" itemDoubleClick="selectGame(event)" dataProvider="{gameList}" itemRenderer="TileRenderer" bottom="46" top="10" left="180" right="10"></mx:TileList>

</mx:AddChild>

<mx:AddChild position="lastChild">

<mx:List doubleClickEnabled="true" itemDoubleClick="selectCategory(event)" dataProvider="{Categories}" width="162" bottom="46" top="10" left="10"></mx:List>

</mx:AddChild>

</mx:State>

The TileList displays elements from an ArrayCollection called gameList. As this collection is dynamic, we will create it in ActionScript.

The List displays a list of values from an ArrayCollection called Categories. This list comes from the Fupa API documentation page. It is a static list, so it is just as easy to create it from an ArrayCollection element.

<mx:ArrayCollection id="Categories">

<mx:String>Action</mx:String>

<mx:String>Adventure</mx:String>

<mx:String>BoardGame</mx:String>

<mx:String>Cards</mx:String>

<mx:String>Casino</mx:String>

<mx:String>Customize</mx:String>

<mx:String>Dress-Up</mx:String>

<mx:String>Driving</mx:String>

<mx:String>Education</mx:String>

<mx:String>Fighting</mx:String>

<mx:String>Memory</mx:String>

<mx:String>Multiplayer</mx:String>

<mx:String>Other</mx:String>

<mx:String>Puzzles</mx:String>

<mx:String>Rhythm</mx:String>

<mx:String>Shooting</mx:String>

<mx:String>Sports</mx:String>

<mx:String>Strategy</mx:String>

<mx:String>Word</mx:String>

</mx:ArrayCollection>