Saturday, 17 March 2012

Click and zoom effect in Actionscript 3

In this post I will create a click and zoom effect in Actionscript 3. This effect will zoom when a sprite is clicked and will return to normal when the stage area is clicked. I have used the TweenNano class to tween the x, y, scaleX and scaleY properties of the sprite. I have previously created a Box zoom effect which moves the sprite to the centre of the stage and increases the scaleX and scaleY.  

Click and zoom effect in Actionscript 3  

Step 1

Open a new AS3 file and save it with the name: ClickZoom and set the document class with the same name. Then open a new AS3 Class with the name: ClickZoom.  

Step 2

In the ClickZoom class file add the following import statements and member variables. I have also included a helper function called createSprite which returns a sprite object.

package  {
 import flash.display.MovieClip;
 import flash.display.Sprite;
 import flash.geom.Point;
 import com.greensock.TweenNano;
 import com.greensock.easing.*;
 public class ClickZoom extends MovieClip {
  private const SCALEFACTOR:uint = 3;
  private const COLS:uint = 4;
  private const XOFFSET:uint = 91;
  private const YOFFSET:uint = 87;
  private const NUM_SPRITES:uint = 12;
  private var points:Array = new Array();
  private var sprites:Array = new Array();
  private var holder:Sprite;
  public function ClickZoom() {
  private function createSprite(w:Number, h:Number, colour:uint, alpha:Number = 1):Sprite
   var s:Sprite = new Sprite();, alpha);,0,w,h);;
   return s;

In the constructor add the following code below. This creates an invisible clickable sprite the size of the stages width and height. I have used the createSprite() function to create the sprite, and have also added a mouse click event to the sprite.

var bg:Sprite = createSprite(stage.stageWidth, stage.stageHeight, 0x000000, 0);
bg.addEventListener(MouseEvent.CLICK, bgClicked);

This creates a holder sprite to contain the 12 individual sprites objects. The For loop creates the 12 sprites and adds the instances into the sprites array. I have used the localToGlobal() method to get the x and y positions of the sprites relative to the holder.

holder = new Sprite();
holder.addEventListener(MouseEvent.CLICK, clickHandler);

for (var i:uint = 0; i < NUM_SPRITES; i++) {
 var s:Sprite = createSprite(63, 54, 0x333333);
 s.x = 29 + XOFFSET * (i % COLS);
 s.y = 35 + YOFFSET * int(i / COLS);
 s.buttonMode = true;
 var p:Point=new Point(); 
 p = holder.localToGlobal( new Point(sprites[i].x, sprites[i].y) );
 points.push({xpos:p.x, ypos:p.y})

The clickHandler function moves the clicked sprites to the centre of the stage and increases the scaleX and scaleY properties of the holder. To get the centre points of the sprites, I firstly got the index of the sprite from the sprites array using the indexOf() method. Then I subtracted half the original x and y positions of sprite from the centre of the stage and multiplied it by the scale factor. This basically gives the sprite the centre points of the stage.

private function clickHandler(e:MouseEvent):void 
 var index:int = sprites.indexOf(;

 var xPos:Number = stage.stageWidth/2 - (points[index].xpos + sprites[index].width/2) * SCALEFACTOR; 
 var yPos:Number = stage.stageHeight/2 - (points[index].ypos + sprites[index].height/2) * SCALEFACTOR;

 if(sprites[index].hitTestPoint(mouseX,mouseY)){, 1, {x: xPos, y: yPos, scaleX: SCALEFACTOR, scaleY: SCALEFACTOR, ease:Sine.easeOut});

The bgClicked function returns the holder back to its original size.

private function bgClicked(e:MouseEvent):void
{, 1, {scaleX: 1, scaleY: 1, x:0, y:0});

Step 3

Export the movie Ctrl + Enter. Now try clicking the sprites to zoom in and the stage areas to zoom out.

Here is another examples with more sprites.


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP