Preface and a Follow up
This is part 2 of an 8 part series of writing a finished flash game using Flex and ActionScript 3. Here I will discuss precisely what was mentioned in step 2 for our Current Goals in completing this project, and in great detail discuss how I go there. Upon completing this tutorial you will have learned how to customize a Flex button using the degrafa library, customize it, so we can quickly edit the button using a CSS template, structure our file system, so our project can be organized through out the duration of this project, create all states of the game, create the menu, and make the buttons play sound as they're moused over, clicked on, and finally go to the specific screen the buttons calls for when triggered. That's a lot, so let's quickly recap what we've done, and continue. Taking a look at our goal again we see the following.Obtaining the Degrafa lib
First we're going to need a neat little library that's going to help us out, so we don't have to spend much time coding. This library can be found at the Degrafa's download page located here. Next we need to add this library to our project, so we can utilize the library. This is actually a very simple process. Simply go to the place where unzipped the downloaded folder, right click > copy, and then make sure you have highlighted your lib folder in the Flex Navigator right click > paste. Now the workspace will do the rest, and you're ready to use the degrafa library.Setting up our Navigator and File System
Having a neat well organized file system when working on any project is very crcucial, so we're going to make sure that we have a neat file system that makes sense, is easy to navigate so we don't spend time reconstructing this later down the road. Below is an image of how I have made my file system, for this current project. If you mimic my file system, and follow the tutorials carefully then you shall get no errors, and optimize your time on actually programming the game part of this project.

As you can see from above my file system I have a media folder outside of the source folder and within that media folder I have a sub folder called sfx (for sound effects) that only contain the sound effects. Inside the source folder are only source files, for only source files should go into the source folder. Then inside the source folder I have organized it even more by creating a sub folder called component, which is if you can guess it is a custom flex button component, which we I shall explain right now.The Custom Button
Inside the component folder lies 2 files. A standard CSS template, and an mxml file. What is occuring is we're customizing the button, and making it a skin, so we can call the css template as an mx style inside our main app where our buttons will be, and all buttons will take on this skin. Making the custom component this way also does accomplishes 2 important task that I'm all about when I program, and the are the following;

1.) Separates our code "objects" from each other
2.) Using the style sheet makes the component customizable, so if we don't like it in the future we can quickly change it.

To start this create the directory as you see above, and in the components folder create a new Flex mx component. By right clicking on the component folder and then right clicking on that folder then going to File > New MXML Component. I named it fusion, for simplicity, but name it what you desire.

Let me explain this one before looking at the style sheet. And much like the previous tutorial where we discuss the mxml before the actionscript let's do the same thing here. Being persistent is key when becoming a good programmer.

to the rounded rectangles, and linear gradient fills of the rectangles. If this doesn't kinda just make sense then go to the degrafa website here, and look for their learning section here, and just simply walk through a couple of examples until you're familiarize yourself with the degrafa library. Remember we're only using degrafa for this one component, so we can have a customizable skin, so knowing the degrafa library is not a high importance, but it's just as a library should be. Learn and know as much as needed to get the job done! Now for the actionscript of the component.ActionScript of the Component

The script is pretty simple to understand. To make a skin you must override the function updateDisplayList, which simply updates the look and feel of that specific control by passing parameters of that width, and height of that control. Remember for future reference that updateDisplayList is needs to be over written anytime you're making a skin. Now for the variables. We simply just have the width, height of the component, the main color of this component. The fill color of the component as what we'll see when we first declare and utilize this skin, and the downcolor is the color of the component once it's in the phase of down (as in a button being pressed down triggering an event), and the corner radius of 100. Which kinda sounds ridiculous, but I had a very specific look and feel I was aiming for, and so the corner radius was important to have a value of 100. Making these variables bindable gives us the ability to be used in the style sheet.

Quick Overview
We create a GraphicBorderSkin, which is needed when making a customizable skin, and we override the function updateDisplayList, which is what's needed when pro grammatically making a skin, which in turn passes to it's super class the parameters we give it. Doing so let's us customize the entire border of all controls that mx has to offer, and because we have a stylesheet, and we made our variables bindable we can customize this skin in no time at all in the future if we so choose to do so. Now let's take a look at the stylesheet.The Style Sheet

As you can see we simply just declare the variables that are bindable in the custom component, and set it to a specific value, but then we have the reference of skin

skin: ClassReference("components.fusion");

which just tells the mx application once we reference the style sheet to that application that we have a custom skin, and that is where it's located.

Setting up the Project
Before we start to code the meat of our game let me stress one more time the importance of organization, and to create the media folder outside the source, and organize the media folder. Below under Source Files you can grab the entire project for this tutorial, so you'll have all files.

Our Main Flex Clode
Instead of going through all the code again, and since this is a progressing tutorial I think it will be wise to only talk about code that has been added. I will list the entire code, which has been added, but to save time I believe it's in our best interest only to show update code, so let's update our code.

We're simply creating a state for each major scene for the game, and each state has children, which can add components for that specific state. Think of this as creating multiple stages that Flash does so well, but only programmatically. Each state that you create has to reference something you can draw on, so I created a canvas called "gameCanvas" so all states can be drawn onto the screen. So instead of just going through all of the states, let's just dissect the menu state, since it's the one with the most on it, and see what's happening.

<mx:stage name="Menu"></mx:stage> - Specifies a specific stage for us to draw things onto the canvas. Much like a stage that is in Flash.

<mx:AddChild></mx:AddChild> - Gives us the ability to create components and throw them on the stage, but only one component per child can be created.

Then the button which we've already seen from the first tutorial. From that button the only changes we have made to it that shouldn't be familiar is the mouseOver="mouseOver(event)".

mouseOver="mouseOver(event)" - just like the click parameter except the function is called when the mouse is over that specific button.

We create a single state with the name "Menu", and in the state we add controls by adding a child to that state for each control we want to add into that state, and if we only add the controls, and don't specify a child for each control we get errors!!! So remember for each control you'd like to add to a stage it must lie within an AddChild tag. Each state is drawn on the screen according to what currentState is, so changing the currentState to a specific state that we have named will redraw our application, and only draw that specific state which is called.

Add the above code right after we declare the inGame boolean. This allows us to access the sound clips we have in the media/sfx folder. We create a URLRequest which is passed a string, and if that URL exist then it retrieves that data from that URL.

We've simply just added a call function called "Clicked()", which is used for all buttons that make a click sound. Calling a single function like this saves time and memory. This will work for every button who needs to call on the function Clicked to play a sound clip.

The above code looks enormous, but I can assure you they all do the samething. Each function is being called from a specific button,, and then triggers the currentState, and defines it to a specific state, which it is requested to call on, so for instance the "How 2 Play" button is triggering the btnHowToPlay, and changes the currentstate to the state of how to play.

Finally we have the mouseOver, and clicked functions, which only purpose is to play a specific sound clip from the specified URL it request.

The Final Result
OK, that's it, and you should get a final result equivalent to the following image below.

Conclusion
We have done a lot. We made our own custom skin for our game, made our states for each screen/scene in the game, made our menus and didn't mess anything up from our previous work. Oh, and we got a reply, and the game we'll be making is Galaga! So to sum it up we did make all of our scenes (which in flex are called states, which acts just like scenes or stages in flash), and we made our menu with all buttons being pressed, and triggering the currentState to change to the specific one they define, and we even gave them mouseover sound effect, and a click sound effect. We finally got a respond from a user who wants to make Galaga, so we will. So, I guess until next time....