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!
So check out the Tutorial to Create a Responsive Image Scroller in ActionScript 3.0 over at flash.tutsplus.com!
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 Comments
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”
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(0×000000,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;
}
}
}
}
@Prateek -
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.
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
It’s actually changed to active.tutsplus.com – funny they dont redirect or anything. Thanks for finding it, I’ll update the link.
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.
How can I make this into a vertical slider?