Tutorial to Create a Responsive Image Scroller in ActionScript 3.0

7 thoughts on “Tutorial to Create a Responsive Image Scroller in ActionScript 3.0”

1. hi. i am going to copy/paste the post i posted on flashtuts, maybe you can help me:
   “hello,
   very nice tut, very well explained. i do have one question. let’s say i already have created a ’scroller’ which has a nice look, and i’ve already placed some containers for thumbnails in the scroller. what would be the simpliest code to load pictures from xml into those specific containers? (everything else, including movement is done separately)
   i will start with this:
   var xmlLoader:URLLoader = new URLLoader();
   var xmlData:XML = new XML();
   var xmlPath:String = “pictures_xml.xml”;
   xmlLoader.load(new URLRequest(xmlPath));
   this part is enough for loading the xml, correct? (let’s say that the pictures are small enough so i will not need the complete event listener.)
   what i need now is to put the infos from xml into my scroller and make so that when i press one image i got the big one loaded into a different container. and here i got stucked.
   can you, please, help me? you can name however you want the containers and the scroller.
   thanks you very much,
   alex”

2. Hii all, I m going to perform a Drag and Drop intractivity using ActionScript 3.0.
   I m going to perform drag n drop of images which are loading into a movieclip and then i m trying to apply the drag n drop logic but i m facing a trouble as loader class is used in loading external images and startDrag() and stopDrag() method cannot be applied on loader type object it should either be applied on a movieclip object or on Sprite type object. Here is my source code that i m working on. Please help me as soon as possible :
   package DND
   {
   import flash.display.Bitmap;
   import flash.display.BitmapData;
   import flash.display.Loader
   import flash.display.MovieClip
   import flash.display.Sprite;
   import flash.events.MouseEvent
   import flash.events.Event
   import flash.net.URLLoader
   import flash.net.URLRequest
   import flash.text.TextField
   import flash.display.DisplayObject
   import flash.display.DisplayObjectContainer
   import flash.display.Sprite

   public class dnd extends MovieClip
   {
   public var startX:Number;
   public var startY:Number;
   public var xmlData:XML
   public var tf:TextField
   public var loader1:Loader = new Loader()
   public var loader2:Loader = new Loader()
   public var loader3:Loader = new Loader()
   private var url1:String = “image1.png”
   private var url2:String = “image2.png”
   private var url3:String = “image3.png”
   public var placeHolder_mc1:MovieClip = new MovieClip;
   public var placeHolder_mc2:MovieClip = new MovieClip;
   public var placeHolder_mc3:MovieClip = new MovieClip;
   public var target_img1:MovieClip
   public var target_img2:MovieClip
   public var target_img3:MovieClip
   public var aSprite:Sprite = new Sprite();
   public var aSprite2:Sprite = new Sprite();
   public var aSprite3:Sprite = new MovieClip();

   public function dnd():void
   {
   var xml:URLLoader = new URLLoader();
   xml.addEventListener(Event.COMPLETE, callXML);
   xml.load(new URLRequest(“DND.xml”));
   }

   public function callXML(e:Event):void
   {
   var loader:Loader = new Loader()
   xmlData = new XML(e.target.data);
   var imgNode:XMLList = xmlData.images.img.(@id == “0”);
   trace(“IMG 1::” + imgNode);
   var request1:URLRequest = new URLRequest(imgNode);
   loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);
   loader.load(request1);

   //——————————————————————–
   /*xmlData = new XML(e.target.data);
   //(xmlData);
   var imgNode1:XMLList = xmlData.images.img.(@id == “0”);
   var imgNode2:XMLList = xmlData.images.img.(@id == “1”);
   var imgNode3:XMLList = xmlData.images.img.(@id == “2”);
   //trace(imgNode);
   var request1:URLRequest = new URLRequest(imgNode1)
   var request2:URLRequest = new URLRequest(imgNode2)
   var request3:URLRequest = new URLRequest(imgNode3)
   var tempClip:MovieClip = new MovieClip();
   loader1.load(request1)
   loader2.load(request2)
   loader3.load(request3)

   placeHolder_mc1.addChild(loader1)
   placeHolder_mc2.addChild(loader2)
   placeHolder_mc3.addChild(loader3)
   loader1.x = 50
   loader2.x = 150
   loader3.x = 250
   tempClip.addEventListener(MouseEvent.CLICK, pickUp);
   loader1.contentLoaderInfo.addEventListener(Event.COMPLETE,onCompleteHandler1)
   placeHolder_mc1 = loader1.content as MovieClip;
   placeHolder_mc2 = loader2.content as MovieClip;
   placeHolder_mc3 = loader3.content as MovieClip;
   //placeHolder_mc1.addEventListener(MouseEvent.CLICK,pickUp)
   //placeHolder_mc1.addEventListener(MouseEvent.CLICK,dropIt)
   placeHolder_mc2.addEventListener(MouseEvent.CLICK,pickUp)
   placeHolder_mc2.addEventListener(MouseEvent.CLICK,dropIt)
   placeHolder_mc3.addEventListener(MouseEvent.CLICK,pickUp)
   placeHolder_mc3.addEventListener(MouseEvent.CLICK,dropIt)*/

   }
   public function onComplete(e:Event):void
   {
   //var bmp:BitmapData = BitmapData(e.target.content)
   //trace(“BMP::” + bmp);
   //trace(e.currentTarget.content);
   //——————————————————–
   //———Dummy Code———————————–

   aSprite.graphics.clear();
   aSprite.graphics.beginFill(0xFFFFFF,1);
   aSprite.graphics.drawRect(0,0,100,100);
   aSprite.graphics.endFill();
   aSprite.x=30;
   aSprite.y=40;
   addChild(aSprite);
   var bitmap:Bitmap=e.target.loader.content as Bitmap;
   bitmap.x=30;
   bitmap.y=40;
   aSprite.addChild(bitmap);

   aSprite2.graphics.clear();
   aSprite2.graphics.beginFill(0xFF0000,1);
   aSprite2.graphics.drawRect(0,0,100,100);
   aSprite2.graphics.endFill();
   aSprite2.name=”source_mc”;
   aSprite2.x=400;
   aSprite2.y=70;
   addChild(aSprite2);

   aSprite3.graphics.clear();
   aSprite3.graphics.beginFill(0x000000,1);
   aSprite3.graphics.drawRect(0,0,100,100);
   aSprite3.graphics.endFill();
   aSprite3.name=”targetsource_mc”;
   aSprite3.x=200;
   aSprite3.y=200;
   addChild(aSprite3);
   aSprite.addEventListener(MouseEvent.MOUSE_DOWN,pickUp);//dragInit
   aSprite.addEventListener(MouseEvent.MOUSE_UP,dropIt);//dragRemove
   aSprite2.addEventListener(MouseEvent.MOUSE_DOWN,pickUp);
   aSprite2.addEventListener(MouseEvent.MOUSE_UP,dropIt);

   }
   public function pickUp(event:MouseEvent):void
   {
   /*trace(“hello1”);
   placeHolder_mc1.startDrag();
   placeHolder_mc1.hitTestObject(target_placeHolder1_mc)
   trace(“hit …?” + target_placeHolder1_mc)
   reply_txt.text = “”;*/
   //trace(e.target.content);
   //trace(“tempClip created type ::” + event.target);
   event.target.startDrag(true);
   event.target.parent.addChild(event.target);
   startX = event.target.x;
   startY = event.target.y;
   }
   public function dropIt(event:MouseEvent):void
   {
   event.target.stopDrag();
   var myTargetName:String = “target” + event.target.name;
   //trace(“myTargetName ::” + myTargetName);
   var myTarget:DisplayObject = getChildByName(myTargetName);
   trace(“mera Target ::” + myTarget);
   if (event.target.dropTarget != null && event.target.dropTarget.parent == myTarget)
   {
   event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);
   event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
   event.target.buttonMode = false;
   event.target.x = myTarget.x;
   event.target.y = myTarget.y;
   } else
   {
   event.target.x = startX;
   event.target.y = startY;
   }
   }
   }
   }

   1. @Prateek –

      I m going to perform drag n drop of images which are loading into a movieclip and then i m trying to apply the drag n drop logic but i m facing a trouble as loader class is used in loading external images and startDrag() and stopDrag() method cannot be applied on loader type object it should either be applied on a movieclip object or on Sprite type object.

      You solved it already basically, just put the loader into a container movieclip and then you’ll be able to apply the drag and drop logic to them. That or you can re-parent the contents of the loader object to any display object on loadcomplete and it will rid you of the loader object altogether.

3. Hi,
   The tutorial and the source code is not available in the link you gave. pls check it. infact there is nothing showing if i type flash.tutsplus.com

   1. It’s actually changed to active.tutsplus.com – funny they dont redirect or anything. Thanks for finding it, I’ll update the link.

4. This is very useful.

   I just had one problem, while trying it.
   What if the images I have has different “width”, and I don’t want it to be in the “box” (say in here 140), and I just want the space between the images is the “padding”.

   I hope you can help.
   Thanks again.

5. How can I make this into a vertical slider?

Comments are closed.