Sunday, 26 June 2011

Lottery app in Actionscript 3

In this tutorial you will learn how to create a Lottery application in Actionscript 3. The Lottery app will display six unique random numbers from one to forty nine. The shaking effect is created using timeline animation and the Timer class is used to stop and display the random numbers on the balls.

Lottery app in Actionscript 3

Step 1 – Create ball

Open a new Actionscript 3 Flash file with the stage dimensions 500x200. Select the Oval tool (O) and draw a oval shape on the stage with the width and height at 67.50 pixels. I have given my oval a radial gradient, but this is optional. Then convert the oval into a movie clip (F8);


Step 2 - Create ball holder

Convert the ball movie clip into another movie clip (F8). Select the 'Export for Acionscript' checkbox and give the class name: BallHolder. This will give you a movie clip inside a movie clip. Rename 'layer 1' to 'ball'. Select the timeline and Insert five key frame(F6). On the second key frame move the ball 5 pixels to right; on the third key frame move the ball 5 pixels to the left; on the fourth key frame move the ball 5 pixels upwards and finally on the fifth key frame move the ball down 5 pixels.

On the timeline insert a new layer call 'text' and select the Text tool with dynamic text and give the text field the instance name: output_txt. Embed the numerals glyphs. I have used the font Verdana with size 35pt. Now return to the main timeline and delete the ball holder movie clip from the stage. This movie clip will be added to stage dynamically so will not be needed on the stage.


Step 3 - Restart button

Select the Rectangle tool (T) and create a restart button. Convert the rectangle to a movie clip and give it the instance name: restart.


Step 4 - Add Code

Open a new AS3 class file with the name Lottery and type out the import statements and variables.

package {
 import flash.events.Event;
 import flash.filters.DropShadowFilter;
 import flash.utils.Timer;
 import flash.events.TimerEvent;
 import flash.events.MouseEvent;
 import flash.display.MovieClip;

 public class Lottery extends MovieClip {

  private var numbersArray:Array;
  private var randomArray:Array;
  private var ballsArray:Array = new Array();
  private var counter:int;
  private var numOfballs:uint = 6;
  private var timer:Timer;

  public function Lottery() {

  }
 }
}

Inside the constructor add the following code. This adds six balls on the stage with a x offset of 80 pixels. Each of the balls have a drop shadow with distance of 2 pixels, an angle of 90 degrees, black colour, blur of 5 pixels in the x and y and a strength of 80%. The ball instances get added to the ballsArray.

for (var i:uint = 0; i < numOfballs; i++) {
 var bh:BallHolder = new BallHolder();
 bh.x = 50 + (i * 80);
 bh.y = 80;
 bh.filters = [new DropShadowFilter(2,90,0,1,5,5,0.8)];
 addChild(bh);
 ballsArray.push(bh);
}

This creates a new instance of the Timer class with a delay of two seconds and a repeat counts of six. The restart button is initially hidden and the mouse click event is added to the restart button.

timer = new Timer(2000, numOfballs);
timer.addEventListener(TimerEvent.TIMER, timerHandler);

restart.visible = false;
restart.addEventListener(MouseEvent.CLICK, restartHandler);

init();

Next create an init function. This function starts with declaring two empty array and the counter at -1. To avoids any duplicate numbers I have firstly added the numbers 1-49 to the numbersArray then removed six random numbers from numbersArray. And started the timer.

private function init():void {
 numbersArray = [];
 randomArray = [];
 counter = -1;

 for (var j:uint = 1; j < 50; j++) {
  numbersArray.push(j);
 }

 for (var k:uint = 0; k < numOfballs; k++) {
    randomArray.push(numbersArray.splice(Math.floor(Math.random()*numbersArray.length), 1));
 }

 timer.start();
}

The timeHandler function increments the counter and stops each of the balls moving and also display a unique random number for each ball. When all the balls have stopped and are displaying a random number then the restart button is shown and the timer is reset.

private function timerHandler(e:TimerEvent):void {
 counter++;

 ballsArray[counter].gotoAndStop(1);
 ballsArray[counter].output_txt.text = randomArray[counter];

 if (counter == 5) {
  restart.visible = true;
  timer.reset();
 }
}

This function clears the numbers from the balls and restarts the moving animation and call the init function.

private function restartHandler(e:MouseEvent):void {
 for (var i:uint = 0; i < numOfballs; i++) {
  ballsArray[i].output_txt.text = "";
  ballsArray[i].play();
 }
 init();
}

step 5

Export the movie Ctrl + Enter.




Additional animation effects


The Lottery balls currently start shaking when the movie exports. I want the balls to drop from the top of the stage then start shaking afterwards. For the dropping effect I have used the TweenNano plugin with bounce easing which can be downloaded from greensock.com. Firsty, add the import statements.

import com.greensock.TweenNano;
import com.greensock.easing.*;


In the constructors, change the ballholders y position from 80 to -bh.height. This offsets the balls so they appear off the stage. Delete the init() function call and add the enter frame event listener.

stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);


Outside of the constructor added the following code. This function checks if the ballArray has six items before firing the TweenNano code. The check stops the animation starting before all the ballHolders have been added to ballsArray. The TweenNano code tweens the ball's y position to 80 pixels and waits two seconds to tween another ball. I have passed the target and the ii variable as the onComplete parameters.

function enterFrameHandler(e:Event):void{
 
 if(ballsArray.length == numOfballs){
  
 stage.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
  
 for(var ii:uint = 0; ii < numOfballs; ii++){
 TweenNano.to(ballsArray[ii], 1, {y:80, ease:Bounce.easeOut, delay:2 * ii, onComplete:completeHandler, onCompleteParams:[ ballsArray[ii], ii ]});
 }
  
 }
}

This function starts the balls shaking animation. The init function is fired when all the balls are shaking.

function completeHandler(mc:MovieClip, count:int):void{ 
 mc.play();
 if(count == 5) init();
}



You can download the source files here.

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP