Tutorial to Create a Responsive Image Scroller in ActionScript 3.0

responsive-images-scroller-as3-thumb

I’ve written a tutorial which is published over at flash.tutsplus. This tutorial demonstrates how to create a horizontally scrolling image viewer and covers xml parsing, loading and resizing external images, and creating intuitive and responsive scrolling!

[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2009/07/image-scroller-example.swf” width=”550″ height=”137″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]

So check out the Tutorial to Create a Responsive Image Scroller in ActionScript 3.0 over at flash.tutsplus.com!

sourcedemomilestone

You’ll find full source code available for download as well as the demo files and step by step milestones all throughout the tutorial.

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

  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.

Comments are closed.