Tuesday, 7 June 2011

Drop image using XML in AS3

In this tutorial you will learn how to create a drop image effect using XML in Actionscript 3. The drop image effect will dynamically load images which will get dropped from the top of the stage. You will need some images for this tutorial. The images will get resized using code, so the dimensions aren’t that important, obviously the smaller the size the faster it will take to load. The greensock plugin is also needed which can be downloaded from greensock.com


Drop image using XML in AS3

Step 1

Open up any text editor and type out the following XML and save the file with the name: ‘DropImages.xml’. I have put my images in a folder called ‘images’ and have used six images. You can use as many images as you wish.

<images>
<image src="images/picture1.jpg" />
<image src="images/picture2.jpg" />
<image src="images/picture3.jpg" />
<image src="images/picture4.jpg" />
<image src="images/picture5.jpg" />
<image src="images/picture6.jpg"/>
</images>


Step2

Open a new AS3 document and save it with the name: DropImage. I have used the stage dimensions 400x400 for my FLA. Then open up a new AS3 class file with the name: DropImage and set this as the document class then type out the following code:

package {

 import flash.display.MovieClip;
 import flash.events.Event;
 import flash.net.URLLoader;
 import flash.net.URLRequest;
 import com.greensock.TweenNano;
 import com.greensock.easing.*;

 public class DropImage extends MovieClip {

  private var containerArray:Array = new Array  ;
  private var totalImgs:int = -1;
  private var counter:uint = 0;
  private var imageLength:uint;

  public function DropImage() {
   //Loads the xml
   var xmlLoader:URLLoader = new URLLoader  ;
   xmlLoader.load(new URLRequest("DropImages.xml"));
   xmlLoader.addEventListener(Event.COMPLETE,xmlLoaded);
  }

  //Creates new instances of the ImageContainer class with the y position
  //initally set off the stage and the rotation at -90. The -90 rotation
  //gives the dropping effect as the object gets tweened downwards.
  private function xmlLoaded(e:Event):void {
   var xml:XML = new XML(e.target.data);

   imageLength = xml.image.length();

   for (var i:int = 0; i < xml.image.length(); i++) {
    var imgc:ImageContainer = new ImageContainer(xml.image[i].attribute("src"));
    imgc.x = 100;
    imgc.y = -133;
    imgc.rotation = -90;
    imgc.alpha = 0;
    imgc.addEventListener("imageloaded",showImage);
    addChild(imgc);
    containerArray.push(imgc);
   }
  }


  //waits for all images before tweening
  private function showImage(e:Event):void {
   totalImgs++;
   if (totalImgs == imageLength - 1) {
    tweenBox();
   }
  }


  //tweens the images downwards to a randoms rotation between -11 and 11
  //and replays the tween after two seconds.
   private function tweenBox():void {
    
    TweenNano.to(containerArray[counter],1, {y:192.45,
         rotation:Math.floor(Math.random() * 11) - 11,
         alpha:1,
         ease:Sine.easeOut,
         onComplete:function(){
        if(counter != containerArray.length - 1){
         counter++;   
         TweenNano.delayedCall(2, tweenBox);
       }
         }});
  }
 }
}


Step 3

Open up a new AS3 class file and save it with the name: ImageContainier then type out of the following code below. The ImageContainer class is used to create the white background border using the AS3 graphics api. And load the images dynamically using the Loader class. The loaded image gets resized as a bitmap by setting the width and height to 90% of the white backgrounds width and height.  A new event is dispatched once the image is loaded. This is to check for all images have been loaded being starting the tween animation. 

package {
 import flash.display.Sprite;
 import flash.display.Bitmap;
 import flash.display.Loader;
 import flash.display.Shape;
 import flash.events.Event;
 import flash.net.URLRequest;
 import flash.filters.DropShadowFilter;

 public class ImageContainer extends Sprite {

  private var bgWidth:Number = 210;
  private var bgHeight:Number = 130;
  //resize image will be 90% of the background.
  private var resizeWidth:Number = 210 * 0.9;
  private var resizeHeight:Number = 130 * 0.9;
  private var resizeXOffset:Number = 10;
  private var resizeYOffset:Number = 6;


  public function ImageContainer(_imageName) {
   //Add white background border with a dropshadow.
   var bg:Shape = new Shape  ;
   bg.graphics.beginFill(0xffffff);
   bg.graphics.drawRect(0,0,bgWidth,bgHeight);
   bg.graphics.endFill();
   bg.filters = [new DropShadowFilter(3,45,0x000000,1,5,5,0.9,3)];
   addChild(bg);

   //Loads image
   var loader:Loader = new Loader();
   loader.contentLoaderInfo.addEventListener(Event.COMPLETE,showImage);
   loader.load(new URLRequest(_imageName));
  }


  private function showImage(e:Event):void {
   //resizes the loaded image
   var bp:Bitmap = Bitmap(e.target.content);
   bp.smoothing = true;
   bp.width = resizeWidth;
   bp.height = resizeHeight;
   bp.x = resizeXOffset;
   bp.y = resizeYOffset;
   addChild(bp);
   dispatchEvent(new Event("imageloaded"));
  }
 }
}


Step 4

Export the movie Ctrl + Enter. You should now have a drop image effect in Actionscript 3.



You can download the source files here.

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP