Question

Here’s the concept for this relatively simple Flash app I’m building:

1. Check an XML file on a server.
2. Display content based on tags, whether type is image or video.
3. Each has a displayTime value. The content should only stay up for that long, then go on to the next.

So here’s my XML file:

<?xml version="1.0" encoding="UTF-8"?>

<livefeed>

    <timeUpdated string="121213" />

    <content type="image" url='image01.jpg' displayTime="5" />
    <content type="image" url='image02.jpg' displayTime="5" />
    <content type="image" url='image03.jpg' displayTime="5" />

</livefeed>

And here’s a bit of my ActionScript 3:

function onload(e:Event):void {
    var xml:XMLList = new XMLList(xmlholder.data);
    var xmlContent:XMLList = xml.content;
    if(xml.timeUpdated.@string != currentTimeUpdated) {
        currentTimeUpdated = xml.timeUpdated.@string;

        for each (var content:XML in xmlContent) {
            if (content.@type == 'image') {
                var myImageLoader:Loader = new Loader();
                var imageURLRequest:URLRequest = new URLRequest(content.@url);

                myImageLoader.load(imageURLRequest);
                myImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);

                function imageLoaded(e:Event):void {                                
                    var newTimer:Timer = new Timer(content.@displayTime * 1000); // update every 10 seconds
                    newTimer.start();
                    newTimer.addEventListener(TimerEvent.TIMER, addImage);

                    function addImage(e:TimerEvent):void {
                        addChild(myImageLoader);
                    }

                } 
            }
        }
    }
}

So it’s not working for me as I want it to. I know I’m going about this wrong but not sure how else to do it. I really wanted it to just show the content, pause, go to the next content, pause, then loop.

Any ideas/suggestions on how I should be doing this or how I can improve?

Thanks!

Answer 1

Does this code currently work? You seem to be pilling too much up into a single function – running a bunch of loaders all at once, and using nested functions to deal with the results. I haven’t tried it, but it looks a little confused. (I try an stay away from nested functions, btw).

I would break all of this up into a separate chain of functions. You need a sequence that, once the xml has been loaded:

1. initiates the image load
2. responds to the load event
3. then captures the image as loaded data,
4. adds the image into the display list, removing the previously loaded image
5. finally, start a timer, and when it fires, start the sequence up again.

You will need another xml parser / controller function that attends to the image queue – something that just checks the current image count, increments it, and instigate the load sequence again.

You may want to add a couple more steps to run a loading spinner graphic while the load is running, or something, or in some way deal with the interchange from one graphic / video to the next.

Hopefully you’ve got a grasp on as3 and can figure this out from here. Let me know if you have any hangups. I do have complete classes built out that do exactly all this, and I can share if you need it.

Cheers

– update –

For now, it “works” as in, the script
pauses for 5 seconds (with a blank
canvas), then displays all the images
at once instead of sequentially

This is because you are initiating all your loaders in a single foreach loop, instead of activating individual sequences over time. Definitely not what you want.

– queue handling –

So, you have your xml object, which is just a repeated data structure. Importantly, it has a length property, and can be navigated as an index. To traverse this in a chained sequence, you probably need an independent counter variable that you can increment / decrement.

private var _count:uint = 0;

private function controlQueue(){

    var target: String = xmlContent[_count].@url; //or however you are obtaining this
    initiateLoad(target);

    _count++: //increment counter

    if(_count > xmlContent.length){ _count = 0}; //if counter exceeds length, swing back around
}

private function initiateLoad(target:String){ ...

If you are allowing for user control, then you could pass controlQueue a “direction” argument which could dictate _count++ or _count–;

Pretty simple, but handy.

Hope that helps-