Multiple Flash objects on page, delay load by X-seconds

[Shae]

Ok, the situation: I'm building a web page, and the client wants to have three flash galleries on staggered timing (i.e., the first one loads and runs, 4 seconds later the second loads and runs, 4 seconds later, third one loads and runs).

I've been trying to figure out how to use Javascript to handle the initial delay between each object, and the best I can figure is to use an onLoad to start the first flash (Flash1), and then call out a function with setTimeout to start Flash2 4 seconds after Flash1 loads, and the same thing for Flash3. However, my attempts thus far have failed, and all three load up at the same time.

The test page is here: http://www.caseygrouparch.com/a-p_we...flash_test.htm

Each flash will (eventually) refer to a separate external XML file for the images, but currently they're all referring to the same XML for the sake of simplifying things for me at this stage.

My script is as follows:

<script type="text/javascript">

window.onload = function() {
	document.getElementById("flashintro1");
	setTimeout ("loadFlash2()", 4000);
}

function loadFlash2 () {
	document.getElementById("flashintro2");
	setTimeout ( "loadFlash3()", 4000 );
}

function loadFlash3 () {
	document.getElementById("flashintro3");
}

</script>

"flashintro1", etc., are the IDs for the DIV's holding each flash object.

I've been scouring the web for tutorials and instructions so long that my brain is melting. Please help!

Thanks a bunch!
~Shae

[chris.upjohn]

I don't see anything in your code that is hiding or showing the div elements, try this

window.onload = function() {
    var flashElements = ["flashintro1","flashintro2","flashintro3"];
    var lastTimer, timer = (lastTimer && lastTimer == 4000) ? lastTimer+1000 : 4000;
 
    for(var i in flashElements){
        var e = document.getElementById(flashElements[i]);
        e.style.display = "none";
 
        setTimeout(function(){e.style.display="block";}, timer);
        lastTimer = timer;
    }
}

[Shae]

That seems to be going in the right direction, however, it delays the first .swf, and the others don't appear.

Also, I realized my initial post may have been misleading, so for clarification just in case, I'm looking for the three flash files to run concurrently, rather than one starting after the previous has finished (as they are each a looping gallery).

[Yi.Sage]

you can try to load the flash dynamic using JavaScript.
i'll give you some code later. wait a moment.

[Yi.Sage]

function getFlashMovieObject(movieName) {
                    if (window.document[movieName]) {
                        return window.document[movieName];
                    }
                    if (navigator.appName.indexOf("Microsoft Internet") == -1) {
                        if (document.embeds && document.embeds[movieName])
                            return document.embeds[movieName];
                    }
                    else
                    {
                        return document.getElementById(movieName);
                    }
                }
                window.onload = function () {                    
                    PlayFlash("flash1",0);
                    PlayFlash("flash2", 1000);
                    PlayFlash("flash3", 1000);
                }
 
                function PlayFlash(name, delay) {
                    setTimeout(function () {
                        getFlashMovieObject(name).Play();
                    }, delay);
                }

try this.

and you should set the object element's id and the embed's name.
Like this.
Also add a param called "play" and set its value to false,

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
style="" align="middle" height="150" width="150" id="flash1">
<param name="allowScriptAccess" value="sameDomain">
<param name="movie" value="flash1/slideshow1_250x333.swf">
<param name="quality" value="High">
<param name="bgcolor" value="#000000">
<param name="play" value="false" />

<embed src="flash1/slideshow1_250x333.swf" quality="High" bgcolor="#000000"
name="flash1" allowscriptaccess="sameDomain" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="150"
width="150" play="false" >

[Yi.Sage]

it was not dynamic loading the flash and just played the flash of your setting( milliseconds later).

I think it enough for u. No need to load dynamic .

[Shae]

it was not dynamic loading the flash and just played the flash of your setting( milliseconds later).

I think it enough for u. No need to load dynamic .

I'm not sure I understand what you mean by that, but, it doesn't seem to be working. Everything still loads at the same time. I entered the additional parameters you specified, and additionally tried it again after removing the IDs of the DIV's the flash objects are placed in (just to see if it made a difference. It didn't).

I appreciate all of your suggestions! Maybe I'm just missing something on my end...

[Shae]

Ah-ha! I've figured it out! Or at least, it seems to be working the way I want it to. This is my JS:

<script type="text/javascript">
window.onload=function() {
	document.getElementById("flashintro1").style .display="block";	
	setTimeout('document.getElementById("flashintro2").style .display="block"',3000);
	setTimeout('document.getElementById("flashintro3").style .display="block"',6000);
	return;
	}
</script>

Each flash object appears as this in the HTML (with the Object ID changing):

			<div style="float:left; margin-right:15px;">
				<object id="flashintro1" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="150" height="150" align="middle" style="float: middle">
					<param name="allowScriptAccess" value="sameDomain" />
					<param name="movie" value="flash1/slideshow1_250x333.swf" />
					<param name="quality" value="High" />
					<param name="bgcolor" value="#000000" />
					<embed src="flash1/slideshow1_250x333.swf" quality="High" bgcolor="#000000" width="150" height="150" name="slideshow_as2" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
				</object>
			</div>

The wrapper DIVs are set to display:none in the CSS.

Now hopefully it all still works when I actually load in the right images... Thanks for your help, guys!