A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: Slideshow - Images loading all at once

  1. #1
    Junior Member
    Join Date
    Oct 2011
    Posts
    3

    Slideshow - Images loading all at once

    I'm writing a flash site for my wive's photography site...translation...I'm not getting paid. I wrote a slideshow that works great except that the images load all at once. It seems to me they should load one at a time, but they don't and I don't know why. It really slows down the loading of the page. Some help?

    Actionscript Code:
    import fl.data.DataProvider;
    import fl.events.ListEvent;
    import fl.transitions.*;
    import fl.controls.*;
    import flash.events.Event;
    import fl.transitions.Tween;
    import flash.events.MouseEvent;
    import fl.transitions.TransitionManager;
    import fl.transitions.easing.Regular;
    import fl.transitions.Tween;
    import fl.transitions.easing.*;
    import fl.transitions.TweenEvent;
    import fl.containers.UILoader;
    import flash.net.URLRequest;

    stop();

    var xmlLoader:URLLoader = new URLLoader();
    xmlLoader.addEventListener(Event.COMPLETE, showXML);
    xmlLoader.load(new URLRequest("gallery.xml"));
    var currImage:Number;
    var aLoader:Array = new Array();

    var IMAGE_DISTANCE:Number = 130;

    function showXML(e:Event):void {
        XML.ignoreWhitespace = true;
        var galleryimages:XML = new XML(e.target.data);
        var myImages = galleryimages.children();
       
        var i:Number;
       
        currImage = 0;
       
       
       
        for (i=0; i < myImages.length(); i++) {
            aLoader[i] = new UILoader();
            aLoader[i].load(new URLRequest("Galleries/" + myImages[i].text()[0]));
            var imgW:int = aLoader[i].width;
            var imgH:int = aLoader[i].height;
            aLoader[i].height = 448;
            aLoader[i].y = 200;
            aLoader[i].width = 546;
            aLoader[i].x = (stage.stageWidth /2) + ((IMAGE_DISTANCE + 448) * i) - 224;
            aLoader[i].scaleContent = true;
            addChild(aLoader[i]);
            setChildIndex(aLoader[i],0);
        }
    }
    rightarrow.addEventListener(MouseEvent.CLICK, nextImage);
    leftarrow.addEventListener(MouseEvent.CLICK, previousImage);

    function nextImage(event:MouseEvent):void
    {
        rightarrow.removeEventListener(MouseEvent.CLICK, nextImage);
        if (currImage < aLoader.length - 1) {
            var i:Number;
           
            for (i = 0; i < aLoader.length; i++) {
                var myTween = new Tween(aLoader[i], "x", Strong.easeInOut, aLoader[i].x,aLoader[i].x - IMAGE_DISTANCE -448, 1, true);
                myTween.addEventListener(TweenEvent.MOTION_FINISH, onFinish);
                function onFinish(e:TweenEvent):void {
                rightarrow.addEventListener(MouseEvent.CLICK, nextImage);
                leftarrow.addEventListener(MouseEvent.CLICK, previousImage);
                }
            }
            currImage++;
        }
    }



    function previousImage(event:MouseEvent):void
    {
        if (currImage > 0) {
            var i:Number;
           
            for (i = 0; i < aLoader.length; i++) {
                var myTween = new Tween(aLoader[i], "x", Strong.easeInOut, aLoader[i].x,aLoader[i].x + IMAGE_DISTANCE +448, 1, true);
                myTween.addEventListener(TweenEvent.MOTION_FINISH, onFinish);
                function onFinish(e:TweenEvent):void {
                rightarrow.addEventListener(MouseEvent.CLICK, nextImage);
                leftarrow.addEventListener(MouseEvent.CLICK, previousImage);
                }
            }
            currImage--;
        }
    }

  2. #2
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    All of your loaders are getting fired in the same function so they will all try to load in parallel. The only limit then is going to be the number of concurrent connections allowed by your browser (usually 4-8).

    If you want to control this, put those loaders into an array and every time an image loads, tell the next loader to fire until they are all done. Make sure you also allow a bypass for IOErrors though so you can lose one image without losing the whole site.
    Please use [php] or [code] tags, and mark your threads resolved 8)

  3. #3
    Junior Member
    Join Date
    Oct 2011
    Posts
    3
    Thanks. I did pretty much that except for the IOError exception handling. I'll look into that when I get closer to production. I ended up putting a single image to upload and using an event listener to tell when it's complete so I could load the next one. Exactly like you said actually.

    Now my problem is that the tweens are crazy slow/jumpy. I dont know if it's because the images are too large or because I am doing ~50 tweens on images 2500px X 2500px at the same time. I am considering putting the 25 images into a single movie clip and then doing one "x" tween on the movie clip and then all the "alpha" tweens inside the movie clip's own timeline. Any thoughts?


    http://www.pearlypics.com/

    Click on the newborn gallery to see the problem with the jumpy tweens.

  4. #4
    Junior Member
    Join Date
    Oct 2011
    Posts
    3
    Double post, sorry...


    By the way, I am also from Oregon. Grew up in Eugene, but moved to Texas.

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