Monday, July 30, 2007

Animation with MXML App

So I had a program where I needed to move an image around based on keyboard hits or button clicks. I figured "that'll be easy!", I'll just use the mousedown event and have it call a function that says targetObject.x-- to move it left. Unfortunatly, life is not so easy. It will only fire one event when the mouse goes down and another when it comes back up (Mouse.MOUSE_DOWN and Mouse.MOUSE_UP respectively). So how do you get some clean moving action? In this example whe'll have an image called MyImage and I want it to move left or right based on keyboard or button clicks. Assume we have two buttons: btnLeft and btnRight. The very fist step is to improve the animation abilities of an MXML Flex app is to add frameRate="60" into the main application tag. This will increase the framerate of your flex application which is important because we're going to use the ENTER_FRAME event to trigger. So let's first right the MXML.

<mx:Application frameRate="60" layout="Absolute">
   <mx:Image source="assets/test.jpg" id="MyImage" x="25" top="25"/>
   <mx:Button label="Move Right" id="btnRight" x="25" top="100"/>
   <mx:Button label="Move Left" id="btnLeft" x="75" top="100"/>
</mx:Application>
The next thing we'll need to do after that is set up some action functions and linking them with an initialize function triggered by the applications "onCreationComplete" event. Perhaps I should stop here and tell you some theory about how I'm going to make the image move smoothly. Basically we're going to have two "states" for our image. They will be booleans.
  public var movingLeft:Boolean=false;
  public var movingRight:Boolean=false;
Now we're going to set these variables to true when you're moving right or left. The ENTER_FRAME function is going to see if one of those is true and move the image accordingly. Let's go ahead and write the ENTER_FRAME function.

 private function framesHappen(event:Event):void{
  if(movingLeft){
   MyImage.x--;
  }else if(movingRight){
   MyImage.x++;
  }
 }
Good we got that, now we needto write some events to handle button ups and downs.
 private function leftBtnDown(event:MouseEvent):void{
  movingLeft=true;
 }
 private function leftBtnUp(event:MouseEvent):void{
  movingLeft=false;
 }
 private function rightBtnDown(event:MouseEvent):void{
  movingRight=true;
 }
 private function rightBtnUp(event:MouseEvent):void{
  movingRight=false;
 }
And lastly, nothing will happen if we don't have the event listeners. So let's create that init function (And don't forget to call it using the application's onCreationComplete event!!)

private function init():void{   
   btnLeft.addEventListener(MouseEvent.MOUSE_DOWN,leftBtnDown);
   btnLeft.addEventListener(MouseEvent.MOUSE_UP,leftBtnUp);
   btnRight.addEventListener(MouseEvent.MOUSE_DOWN,rightBtnDown);
   btnRight.addEventListener(MouseEvent.MOUSE_UP,rightBtnUp);
   this.addEventListener(Event.ENTER_FRAME,framesHappen);
}
To modify this for keyboard is very similar. Use KeyDown and KeyUp listeners on the whole application using "this.AddEventListener" and then within the listening function differentiate which key is pressed and set your left or right variable.

0 Comments:

Post a Comment

<< Home

Feed (RSS/Atom)

Contact Me

Don't put anything here: