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.
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="423" height="408"
showFlexChrome="false" title="My Magic 8 Ball" xmlns:ns1="assets.components.*"
initialize="init()" mouseUp="stopDragging(event)" mouseDown="dragThis(event)"> |
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.
import mx.core.Application;
import mx.events.DragEvent;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
//initialize application by maximizing it and retrieving the xml data.
private function init():void
{
//maximize the app so that the 8 ball doesn't disappear
Application.application.maximize();
//collect answers from xml document
answers.send();
} |
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.
//initialized on mouse down
private function dragThis(evt:MouseEvent):void
{
//start drag to resemble shaking ball when mouse button is pressed and held
this.startDrag();
}
//called when mouse is up
private function stopDragging(evt:MouseEvent):void
{
//stop drag of ball when mouse button is released
this.stopDrag();
getAnswer();
} |
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.
//collect answer and randomly select the one to show.
private function getAnswer():void
{
// 7 answers but since we start counting at zero we put 6
var randomNumber:int = (Math.floor(Math.random() * 6));
//apply random number to the array of the xml collection to pull an answer
answers_txt.text = xmlList.toArray()[randomNumber].toString();
} |
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? |
