A Flash Developer Resource Site

Results 1 to 2 of 2

Thread: Scrolling dynamic XML Gallery - AS3

  1. #1
    Junior Member
    Join Date
    Sep 2009

    Scrolling dynamic XML Gallery - AS3

    Hey all, I've been trying to create a dynamically loaded XML horizontal scrolling image gallery and for the most part have it nailed down, just some small problems I can't really get through now and looking for any help.

    (I used this tutorial, if that helps at all: http://active.tutsplus.com/tutorials...ionscript-3-0/)

    Basically I have 2 main issues and one smaller one that really isn't that important.

    1. The tutorial FLA is much smaller than the file I tried to use it for, I think it was 650 x 150. I wanted to apply it to my site (1024x768) and have it as a bottom-bar but got a lot more trouble trying to move it than I thought. I adapted most of it so the gallery appears on the bottom to start, but upon mouse over it shoots up to the top. I think it's because a conflict between 2 movie clips, "scroller" and "thisOne." There is a padding that keeps the two separate so to get the gallery to move you have to mouse over in the top right to get the bar to scroll on the bottom. Pretty much all I'm trying to do is get it so the scroller is functionally working on the bottom of the stage. If that doesn't happen I'll often get the issue where the thumbnails start at the bottom of the page and on mouseOver or MouseOut they shoot back up to the top around y30 or so, so it's almost as if they realign to the scroller which would be fine if it was on the bottom.

    2. Instead of linking html pages to the thumbs is there an easy way to just have them either appear in the center of the stage on click or some sort of possible shadow box? Honestly I havent attempted either because I can't get the bar itself functional, but I'm a little stumped on how I would approach it.

    The last 'sort-of' issue is regarding aesthetics entirely. I though it would be neat to have a gradient overlay or mask on both sides of the scrollbar so the thumbs 'fade out' instead of just cutting off, but since the thumbs are dynamically loaded they're automatically on the top level so the gradient has no effect. It's not a functionality issue, so not hugely important, but a detail I planned to try and iron out either way.

    I'll post the code i have so far in a separate comment below if it helps at all.

    I've been troubleshooting this for a while and got nowhere, any help is truly appreciated.


    Post note:
    Example of the file:
    Last edited by Contact; 07-29-2011 at 05:10 PM.

  2. #2
    Junior Member
    Join Date
    Sep 2009


    var xmlLoader:URLLoader = new URLLoader();
    var xmlData:XML = new XML();
    xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

    var xmlPath:String = "image-scroller.xml";
    xmlLoader.load(new URLRequest(xmlPath));
    trace("loading xml from: " + xmlPath);

    function LoadXML(e:Event):void {
    trace("xml loading complete");
    xmlData = new XML(e.target.data);

    var scroller:MovieClip = new MovieClip();
    scroller.y = 40;
    scroller.x = padding;
    var speed:Number;
    var padding:Number = 25;
    var thumbFadeOut:Number = .2;
    var thumbFadeIn:Number = 1;
    var thumbSmall:Number = 1;
    var thumbLarge:Number = 1.075;

    function buildScroller(imageList:XMLList):void{
    trace("build Scroller");
    for (var item:uint = 0; item < imageList.length(); item++ ) {
    var thisOne:MovieClip = new MovieClip();

    var blackBox:Sprite = new Sprite();
    blackBox.graphics.drawRect( 45, 0, 50, 50);
    blackBox.alpha = thumbFadeOut;
    thisOne.blackBox = blackBox;

    thisOne.x = thisOne.myx = (50 + padding) * item;
    thisOne.y = 400;
    thisOne.itemNum = item;
    thisOne.title = imageList[item].attribute("title");
    thisOne.link = imageList[item].attribute("url");
    thisOne.src = imageList[item].attribute("src");

    var thisThumb:Sprite = new Sprite();
    var ldr:Loader = new Loader();
    var urlReq:URLRequest = new URLRequest(thisOne.src);
    trace("loading thumbnail "+item+" into Scroller: " + thisOne.src);
    ldr.contentLoaderInfo.addEventListener(Event.COMPL ETE, completeHandler);
    ldr.contentLoaderInfo.addEventListener(IOErrorEven t.IO_ERROR, errorHandler);
    thisOne.buttonMode = true;
    thisOne.addEventListener(MouseEvent.MOUSE_OVER, overScrollerItem);
    thisOne.addEventListener(MouseEvent.MOUSE_OUT, outScrollerItem);
    thisOne.addEventListener(MouseEvent.CLICK, clickScrollerItem);


    scroller.addEventListener(Event.ENTER_FRAME, moveScrollerThumbs);
    trace("termination of build scroller");

    function overScrollerItem(e:MouseEvent):void {
    Tweener.addTween(e.currentTarget, { scaleX:thumbLarge, scaleY:thumbLarge, x:e.currentTarget.myx - e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2,y:400,y: -e.currentTarget.width * Math.abs(thumbSmall - thumbLarge)/2, time:1 } );
    Tweener.addTween(e.currentTarget.blackBox, { alpha:thumbFadeIn, time: 1 } );
    function outScrollerItem(e:MouseEvent):void {
    trace("out" + e.currentTarget.name);
    Tweener.addTween(e.currentTarget, { scaleX:thumbSmall, scaleY:thumbSmall, x:e.currentTarget.myx, y:0, time:1 } );
    Tweener.addTween(e.currentTarget.blackBox, { alpha:thumbFadeOut, time: 1 } );
    function clickScrollerItem(e:MouseEvent):void {
    var urlRequest:URLRequest = new URLRequest(e.currentTarget.link);
    try {
    catch (e:Error) {
    function completeHandler(e:Event):void {

    resizeMe(e.target.loader.parent, 140, 105, true, true, false);
    Tweener.addTween(e.target.loader.parent.parent, { alpha:1, time: .5 } );
    function errorHandler(e:IOErrorEvent):void {
    trace("thumbnail error="+e);

    function resizeMe(mcisplayObject, maxW:Number, maxH:Number=0, constrainProportions:Boolean=true, centerHor:Boolean=true, centerVert:Boolean=true):void{
    maxH = maxH == 0 ? maxW : maxH;
    mc.width = 50;
    mc.height = 50;
    if (constrainProportions) {
    mc.scaleX < mc.scaleY ? mc.scaleY = mc.scaleX : mc.scaleX = mc.scaleY;
    if (centerHor) {
    mc.x = (maxW - mc.width) / 2;
    if (centerVert){
    mc.y = (maxH - mc.height) / 2;

    function moveScrollerThumbs(e:Event):void {
    if ( mouseY > scroller.y && mouseY < scroller.y + scroller.height) {//vertically over scroller
    if (mouseX < stage.stageWidth/2 - padding*2 && mouseX > 0) {//left of stage explicitly
    speed = -(mouseX - (stage.stageWidth/2 - padding*2)) / 8;
    else if (mouseX > stage.stageWidth/2 + padding*2 && mouseX < stage.stageWidth) {//right of stage explicitly
    speed = -(mouseX - (stage.stageWidth/2 + padding*2)) / 8;
    else {
    speed = 0;
    scroller.x += speed;

    //scroller limits
    if (scroller.x < -scroller.width + stage.stageWidth - padding) { //if scrolled too far left
    scroller.x = -scroller.width + stage.stageWidth - padding;
    else if (scroller.x > padding) { //if scrolled to far right
    scroller.x = padding;
    Last edited by Contact; 07-29-2011 at 05:08 PM.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Click Here to Expand Forum to Full Width

HTML5 Development Center