Sunday, 17 April 2011

Box zoom effect in Actionscript 3

In this post you will learn how to create a box zoom effect using Actionscript 3 code. This effect can be used in an image gallery such as the black and white gallery. When a box gets clicked on, it will get scaled up and when it’s clicked again it will get scaled down. You will need the TweenNano class for this tutorial which can be downloaded at: greensock.com


Box zoom effect in Actionscript 3

Step 1

Open up a new AS3 file with the stage dimensions 400x300. Then open the Actions panel and copy the following code.

//Import the tweening TweenNano and easing packages.
import com.greensock.TweenNano;
import com.greensock.easing.*;

//The number of the boxes and columms in the grid.
var numOfBoxes:uint = 20;
var cols:uint = 5;

//The spacing between each box.
var xOffset:Number = 70;
var yOffset:Number = 70;

//Array to hold the sprites and x and y positions.
var spriteArray:Array = new Array();
var sPosArray:Array = new Array();

//Holds the currently selected sprite and the index of array
var selectedSprite:Sprite;
var currentIndex:uint;

//This creates 20 sprite on the stage with random colours and
//adds the sprites into an arrray with the x and y positions.
for (var i:uint = 0; i < numOfBoxes; i++) {
           var s:Sprite = new Sprite();
           s.graphics.beginFill(Math.random() * 0xffffff);
           s.graphics.drawRect(0, 0, 50, 50);
           s.graphics.endFill();
           addChild(s);

           s.x = 35 + xOffset * (i%cols);
           s.y = 25 + yOffset * int(i/cols);
                       
           spriteArray.push(s);
           sPosArray.push({xpos:spriteArray[i].x, ypos:spriteArray[i].y})    
}

//Adds the mouse click event to the sprites.
function addListeners():void{
  for (var i:uint = 0; i < spriteArray.length; i++) {
      spriteArray[i].buttonMode = true;
      spriteArray[i].addEventListener(MouseEvent.CLICK, clickHandler);
  }
}

//Removes the mouse click event from the sprites.
function removeListeners():void{
  for (var i:uint = 0; i < spriteArray.length; i++) {
      spriteArray[i].buttonMode = false;
      spriteArray[i].removeEventListener(MouseEvent.CLICK, clickHandler);
  }
}

//This set the current selected sprite to the top of the display list,
//removes the mouse listeners and moves the sprite to the centre of the stage.
function clickHandler(e:MouseEvent):void{
  selectedSprite = e.currentTarget as Sprite;
  currentIndex = spriteArray.indexOf(e.currentTarget);
 
  setChildIndex(selectedSprite, numChildren - 1);
 
  removeListeners();
 
  TweenNano.to(selectedSprite, 1, {
               x:stage.stageWidth/2 - selectedSprite.width,
               y:stage.stageHeight/2 - selectedSprite.height,
                                               ease:Elastic.easeOut,
               onComplete: onCenter});
}

//This scales up the x and y and add an event listener to the selected sprite.
function onCenter():void{
  TweenNano.to(selectedSprite, 0.5, {scaleX:3, scaleY:3});
  selectedSprite.buttonMode = true;
  selectedSprite.addEventListener(MouseEvent.CLICK, spriteClick);
}


//When the sprite is clicked it returns to its original position and
//removes its mouse click listener.
function spriteClick(e:MouseEvent):void{
  TweenNano.to(selectedSprite, 1, {scaleX:1,
               scaleY:1,
               x:sPosArray[currentIndex].xpos,
               y:sPosArray[currentIndex].ypos,
                                               ease:Elastic.easeIn,
               onComplete:addListeners});
 
  selectedSprite.buttonMode = false;
  selectedSprite.removeEventListener(MouseEvent.CLICK, spriteClick);
}

addListeners();

Step 2

Export the movie Ctrl + Enter. Now click on the one the sprites and it should expand, and if you click it again it will contract.

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP