best practices to selectively load multiple SWFs? (long)

[Guest aezzell]

Our director of marketing is on a roll...

 

She wants a Flash movie like this: http://europe.gpworldwide.com/, but not exactly.

 

Instead of loading all 10 sub-movies, she wants to load only 4 at a time, selecting 4 at (more or less) random each time the page loads.

 

The "more or less" part comes from this: The 10 SWFs will be of 3 types: 4 of type A, 3 of type B, and 3 of type C.

 

Each time the page loads, she wants 2A's, 1 B, and 1 C.

 

So we might have: A1, A3, B1, & C2; and the next time: A3, A4, B3, & C1.

 

And over time, as short-term priorities shift, the individual SWFs will be swapped out, so we might have A2, A8, B7, & C1. (But still only a total of 10 available at any given time.)

 

I'm thinking that I need to set this up with the available SWFs listed in an XML file, because that will be easier to edit than modifying the FLA file & republishing the master SWF each time.

 

I found this, which explains how to select random nodes from an XML document: http://www.kirupa.com/forum/showthread. ... rce-Random

 

It seems like I ought to be able to set up my 10-node XML file that contains info about the SWFs (or, if necessary, 3 XML files: one for the A SWFs, one for the B SWFs, and one for the C SWFs), do a random selection to pick the 4 SWFs to load, and then load them.

 

Does this make sense? Is there a better way to handle something like this?

 

Thanks!

[Carl]

in this situation, the best way is the way you are most comfortable with.

 

you very well could have 1 xml file or 3. either way you are going to have to come up with a way to sort your data and randomly select swfs.

there is nothing built into LoaderMax that will do this for you.

 

Since it appears that all the swfs are going to have the same basic properties like with / height / x / y you could probably just load a list of all the swfs instead of having a bunch of SWFLoader nodes in your xml.

 

 

 

 

 

 

once you load that xml...

-search for all the swf urls in group a

-place them in an array

-shuffle the array

-pick the first 2 out of group a array and store them in an array that will hold all the url's of all the swfs.

 

-search for all the group b swfs

-place them in an array

-randomly select 1 and place it in the array that stores the chosen 2 from group a

 

-do the same theing for group c

 

when you are done, loop through the array of the "chosen few" and create SWFLoader's based on the urls, append them to a LoaderMax, and then load the LoaderMax.

[Guest aezzell]

Thanks, Carl.

 

You are correct that the SWFs will all have the same dimensions - they will probably also all be about the same size.

 

I had thought about just storing the filename, category, and possibly estimated bytes in the XML file. Or I could forego the XML file altogether, and just set it up to expect files named us01.swf, us02.swf, etc. But that's not a very portable or robust approach.

 

The Flash movie will be in an ASP.NET page, so I've also thought about doing all the random selection in the page's code behind, then passing in the info as parameters/FlashVars when the page gets loaded. That would provide a lot of options: read the filenames from an XML file; pull them in from a database; or even just check to see what SWF files exist in whatever folder is used to store them, then select from what's available.

 

(But, as I used to point out before I started telecommuting, just because I *could* commute to work on horseback doesn't mean it's a good idea

 

Mainly, I want to leave this in a state such that it will be easy to swap out the SWFs without modifying the master FLA file. This is both for my benefit and to help the poor soul who will inherit this in 8 months when I retire. And I guess it would be good to have the entire solution within Flash, so it could be used anywhere, not just on an ASP.NET site.

 

Thanks for your insights. Useful, as always.

[Guest aezzell]

OK - once again, I have this MOSTLY working... but something odd is happening that I don't understand.

 

I've attached a ZIP file with the FLA (saved back to v4), the HTML, and all the SWFs. I've also posted the files here if you want to view the page with the Flash movie embedded: http://us-dev.genphysics.com/testLoadMultiple_v4.html Each time you reload the page, you should see 4 screens, each with a different number. (The loaded SWFs are basically the same movie, but numbered on the screen to let me identify them.)

 

For now, I have the XML data that controls which SWFs are loaded inside the FLA file - I will move it outside once I'm sure things are working. "estimatedBytes" is there for future use; I don't do anything with it now. Here's the XML:

var allSWFs:XML =

















;

I have a top-level node for each of my categories (trn - training, cns - consulting, and eng - engineering). And then within each of those nodes, I have data about the SWFs for that category.

 

Next, I use the code from Kirupa.com to make my random selections:

//from http://www.kirupa.com/forum/showthread.php?320946-AS3-Array-XML-Force-Random
function pickSWFs(source:XMLList, nodes:int = 2):XMLList
{
if (source.*.length() < nodes)
{
	return source.*;
}
var list:XMLList;
var hash:Array = [];
var node:XML;
do
{
	node = source.*[(Math.random() * source.*.length()) >> 0];
	if (hash.indexOf(node.toXMLString()) < 0)
	{
		hash.push(node.toXMLString());
		list ? list +=  node:list = XMLList(node);
	}
} while (list.length() < nodes);
return list;
}

var SWFsToLoad:XMLList;
SWFsToLoad = pickSWFs(allSWFs.trn,2) + pickSWFs(allSWFs.cns,1) + pickSWFs(allSWFs.eng,1);

trace(SWFsToLoad);

When I run the movie locally, I get output like this from the trace statement:

everything loaded

or this:

everything loaded

In other words, I get what I expect: 2 trn, 1 cns, and 1 eng, with the 2 trn listed first, then the cns, then the eng.

 

That brings us to the rest of the code (I've left out the progress handlers, but they're in the FLA file. j and i are integers that initially = 0.):

var queue:LoaderMax = new LoaderMax({name:"mainQueue",onComplete:queueCompleteHandler,
onProgress:queueProgressHandler,
onChildProgress:swfProgressHandler,
onChildComplete:swfCompleteHandler});

for each (var node:XML in SWFsToLoad)
{
queue.append( new SWFLoader(node.@url, {name:"clip"+j,container:contentHolder}) );
j++;
}

queue.load();

function queueCompleteHandler(event:LoaderEvent):void
{
trace("everything loaded");
}

function swfCompleteHandler(event:LoaderEvent):void
{
var loadedSWF:ContentDisplay = event.target.content as ContentDisplay;
loadedSWF.alpha = 0;
TweenMax.delayedCall(2*i, fadeItIn,[loadedSWF]);
i++;
}

function fadeItIn(theSWF:ContentDisplay):void
{
addChild(theSWF);
theSWF.rawContent.runMovie();
TweenLite.to(theSWF, .5, {alpha:1});
}

When I run this, if the output shows 4, 1, 6, 8, the movies play in this order: 1, 4, 8, 6.

 

I could be wrong, but I've done this many, many times, and if the order of the items in SWFsToLoad is A, B, C, D, the movies play in the order B, A, D, C. Why isn't it A, B, C, D?

 

My guess is that I don't understand what's happening in this step:

for each (var node:XML in SWFsToLoad)
{
queue.append( new SWFLoader(node.@url, {name:"clip"+j,container:contentHolder}) );
j++;
}

I'm expecting the for each loop to step through the nodes and append them to the queue in order. But as far as I can tell, that's not happening. I could maybe understand if I got a random order, but the order ALWAYS appears to be B, A, D, C.

 

2nd, 1st, 4th, 3rd.

 

Any ideas as to why this is happening, and how I can fix it? For this particular application, it *probably* doesn't matter that I can't control the order in which the SWFs play, but I can see it mattering in other circumstances.

 

Thanks!

[Carl]

first add the following trace:

 

for each (var node:XML in SWFsToLoad)
{
queue.append( new SWFLoader(node.@url, {name:"clip"+j,container:contentHolder}) );
trace("append " + node.@url);
j++;
}

 

test the movie, you will see that your swfs are getting added to the queue in the proper order

 

-----

 

Next add this trace:

 

function swfCompleteHandler(event:LoaderEvent):void
{
trace("complete " + event.target);
var loadedSWF:ContentDisplay = event.target.content as ContentDisplay;
loadedSWF.alpha = 0;
TweenMax.delayedCall(2*i, fadeItIn,[loadedSWF]);
i++;
}

 

test the movie, and you will see that your movies are loading out of order.

 

----

 

This makes me think you are doing everything right! It is weird to me that the switch-up in the first 2 loaders is so consistant but the truth of the matter is even though you are dictating the order in which the swfs should be requested, LoaderMax loads multiple assets concurrently (unless specified otherwise) and its basically a race to see which one gets loaded first. In your case it appears the second swf ALWAYS shows up first.

 

to absolutely ensure that only 1 swf gets loaded at a time and that they load in the order that you dictate, the fix is simple. just set maxConnections to 1 as shown below:

 

var queue:LoaderMax = new LoaderMax({maxConnections:1, name:"mainQueue",onComplete:queueCompleteHandler,
onProgress:queueProgressHandler,
onChildProgress:swfProgressHandler,
onChildComplete:swfCompleteHandler});

 

Great job on your success in getting that kirupa method to sort your data for you! Also, I gotta say even though I'm terrified of these long posts with tons of code samples, you did an excellent job of documenting what was happening and it made it very easy to trouble shoot.

 

---

 

By default maxConnections is set to 2. This is a great feature as it allows multiple assets to load as quickly as possible. In your case where the order in which they load and display is of great importance, setting maxConnections to 1 will ensure that the loading completes in the sequence that you dictate.

[Guest aezzell]

Indeed, that fixed it, and the SWFs are loading in the order expected now.

 

Thanks (once again) for your help with this. It's amazing sometimes how much of a difference one simple setting can make.