Next let us add our components. I created a eight ball image in my favorite image creator, you can use this or create your own. If you create your own you want to make sure it is large enough to hold all the items within it. I used a size of 360 by 380 for mine. Add an image component to the stage and use the style editor to set the horizontal center and vertical center to zero or absolute center. Then set the source to the image you choose to use.

Next add a canvas component to the stage and use the style editor to the absolute center as well. Then select the corner radius and set it to 100 to turn it into a circle. Set the width of the canvas to 190 and the height to 184. Change the background color to black. This should give you a nice black circle centered on the 8 ball image.

Next move the label component to the stage and again use the style editor to move it to the absolute center. Change the text color to white and set it to bold. Then give it the id of "answers_txt".

I decided to add some instructions to my app by moving another label component to the stage and setting the horizontal center to zero and the vertical center to 109. Then added the following to the text attribute: "Ask me a question then shake me for the answer." Again I changed the text color to white so it would easily be read against the black of the 8 ball. So your component code should look something like this:

Before we get into creating the xml document that will contain our answers, let us first look at the folder structure I have created for this application. The reason for this is as your applications grow in size and complexity you will want a "framework" to keep your applications organized and easy to maintain. I have adopted this as a pretty good way of keeping things organized and by no means suggest that it is the best or last say in how to organize your applications, but that it works well for me.

I've created a folder off of the Flex created folder "src" called "assets". Since this application has data and images I've created two subfolders under assets called "images" and "data". If I had custom components I would have a subfolder called "components" and within it have more folders categorizing what those custom components were. Such as displays and what have you. I'm sure you get the picture so lets move on to the xml document.

Create your folder structure as you see fit and create a file called "8ballAnswers.xml". Place the following code in it.

I choose to set up my xml as simple as possible and since this is a list of answers used the word answers as my main body tag and answer to set apart my answers. This is it. You can add more answers as you see fit, just keep the same basic structure and make sure you count how many you have so you can edit some actionscript code later to ensure the random answer. This will become clear momentarily.

Next we need to retrieve the xml document we just created. This is done using a Flex component called "HttpService". We use the HttpService component because we want to have our information returned as XML and this is the easiest way of doing so. Add the following script to your app.

Next we want to turn our result data into a list/ Array to easily pull our answers out of it. So we use the Flex component called, "XMLListCollection". This neatly places our xml into a list/array structure without alot of extra coding.

That is it we now have our data and it is formatted the way we need it. Let's move on to the fun part.

Now we need to add the actionscript to get this all working as it should. First though let's edit the application tag a little and add a few things that will help our application appear how we want it and trigger the events we need to have trigger. He is what your application tag should look like.

We need to remove the flex chrome which is like a window chrome first otherwise our 8 ball won't appear to float. Next we need to initialize the application so that the data we need can be called and gathered and the application sizes to fill the screen. We do this through an actionscript function called init(). Next we need to add mouse events that will trigger when the user mouses down on the application to shake it and lets up on the mouse to get the answer. Now let us move on to the actionscript that will make these events possible.

First thing in our actionscript is to import the classes we will need to use to have everything work properly. We import the Application, DragEvent, ResultEvent, and Alert classes. Our first function initializes our application to gather the xml data through the use of the httpservice tag and resizes the application itself to the full size of the screen.

Next we create two more functions to handle our dragging of our app. The "this" statement pertains to the root application. So when you see "this.startDrag" it is saying start dragging the root application. The statement "this" refers to the current root so if you add on to the application with custom components and what have you the statement "this" will relate to where you have your actionscript. Did I confuse you yet?

Our stopDragging function is when we actually take the information gathered from the xml doc and put it to use. We create a custom function that handles this called "getAnswers()". This allows us to apply actionscript to randomly generate an answer every time the ball is shaken.

Actionscript counts from zero. Remember this it's important if you don't want to end up banging your head off your keyboard. So where we would start from one actionscript starts from zero. SO if we have 7 answers actionscript counts it as 0,1,2,3,4,5,6 six answers. To generate a random response we need to do some math. Actionscript has a built in Math class that helps us do this, although be it not always easy. Math.floor is rounding the number down that it is given to the next whole number. Math.random only returns a value between 0 and 1. So it could return .25. We need to times this by the number of answers we have so thus where the *6 comes into play to get a number between 0 and 6. Next we use the number generated to find the answer in the array and feed it to our label so the user can see it. And we are done with the actionscript. Pretty simple huh?

Next we want to just run a quick test of the application so if your using Flex hit the run button. Shake the 8 ball and get an answer to that burning question. Hopefully it's what you expected. Now close it up and go back to Flex. Right click on the 8 ball application folder in the tree menu to your left. ( Where you have your list of all your flex applications). Select Export from the menu that appears. A new window appears then select "Release Build". Click next. You can now set some different attributes here like allowing source view. I would leave the defaults alone until you get more comfortable with how things work. At the bottom of this window you can direct Flex where to create your install file for the application the default is within the application folder itself. Go ahead and click next when you have things set up as you would like.

Depending on whether or not you feel like purchasing a certificate or not you have the option to create one that is not signed. This is nice for just messing around. If you are seriously going to start building and deploying applications on a large scale it would be worth investing in a digitally signed certificate. Anyway if you don't already have one create one then browse to it. Once you have your certificate and password entered click next.

It will then ask you what files and folders you want to include in the the final application. Just go with the default settings. This will prevent you from accidentally not including something you should have. Then click finish. Once that is clicked it will create your new AIR app and it will be ready for distribution.