advice with looping <div_id> [Archive] - ActionScript.org Forums

Megiddo2012

02-09-2008, 08:31 PM

Hi

I'd like to have my swfobject load to my div tags. I'd like swf to loop from player1 through 10. Catch is and where I'm stumped, I need them to load completely then start playng after reaching <div id="player10"></div>.

Can I nest the swf vid in <head> section then run an onload function using <body javascript:onload=" 'player1', 'player2', 'player2'()">

Need a lil Light in the the Dark! LoL...

<div id="player1"></div>

<div id="player2"></div>

<div id="player3"></div>

Thanks,
Megiddo

KECrawford

02-14-2008, 02:50 AM

So. You want to have 10 different layers that load 10 different swf files, but you don't want any of the swf files to start playing until all of them are loaded?

If I understand you correctly then you can have the first frame of the flash files be blank and do calls to the javascript to register that they are loaded.

Here is some rough pseudo code..

// Frame 1 of your movie clips
import flash.external.ExternalInterface;
ExternalInterface.call("isLoaded", 1);
stop;

Javascript
var count = 0;
function isLoaded(arg) {
count++;
if (count == 10) { // all loaded...
// tell players to start playing
getElementById("player1").myFlashID.play();
}

}

Hope this helps.
K.

Megiddo2012

02-14-2008, 06:18 PM

Hi K,

Thank you for your post! ;)

Here's the html / actionscript I'm playing with.

First, Im only running 1 swf video. I 'd like it to load in each of the div_id's named placeholder.
After the vid completely loads to all 10 placeholders.

I would like to initiate the video and start playing all 10 at the same time.

What's happing now is one starts then next loads and starts and so on, completely out of sync.
After I let them all load then refresh the browser they all start in sync, cause the video is cached I guess.

I hope the script below helps you to see what I'm trying to get the vid to do.

completely load the vid / trace the swf data / loop it to each div_id named placeholder/ start playing all copies basicly.

Thanks for the NEWBIE Help!!

<html>
<head>
<title>Multiple Simultaneous Players Example</title>

<style type=text/css>
body { padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; margin: 0px; width: 100%; height: 100%;
font-size: 8px;
font-family: verdana, helvetica, arial;
background-color: #212121;
color: #000000;
overflow: hidden;
}
#placeholder1 {
position: absolute;
left: 31px;
top: 21px;
width: 40px;
height: 20px;
z-index:1;
background-color: 161616;
}
#placeholder2 {
position: absolute;
left: 31px;
top: 51px;
width: 40px;
height: 20px;
z-index:1;
background: 161616;
background-color: 161616;
}
#placeholder3 {
position: absolute;
left: 92px;
top: 21px;
width: 40px;
height: 20px;
z-index:1;
background-color: #161616;
}
#placeholder4 {
position: absolute;
left: 94px;
top: 50px;
width: 40px;
height: 20px;
z-index:1;
background-color: #161616;
}
#placeholder5 {
position: absolute;
left: 32px;
top: 85px;
width: 40px;
height: 20px;
z-index:1;
background: #161616;
}
#placeholder6 {
position: absolute;
left: 90px;
top: 83px;
width: 40px;
height: 20px;
z-index:1;
background-color: #161616;
}
#placeholder7 {
position: absolute;
left: 86px;
top: 113px;
width: 40px;
height: 20px;
z-index:1;
background-color: #161616;
}
#placeholder8 {
position: absolute;
left: 32px;
top: 115px;
width: 40px;
height: 20px;
z-index:1;
background-color: #161616;
}
#placeholder9 {
position: absolute;
left: 34px;
top: 143px;
width: 40px;
height: 20px;
z-index:1;
background-color: #161616;
}
#placeholder10 {
position: absolute;
left: 86px;
top: 146px;
width: 40px;
height: 20px;
z-index:1;
background-color: #161616;
}

-->
</style>

<script language="JavaScript" type="text/javascript">

</script>

<script type="text/javascript" src="http://www.torquemasters.net/includes/sts_templates/test/swfobject.js"></script>
<script type="text/javascript">

function createPlayer(thePlace, theFile, theImage, go) {
var s = new SWFObject("http://www.torquemasters.net/torque-template/vids/pikespeak.swf","playerID","40","20","7");
s.addParam("allowfullscreen","true");
s.addVariable("file",theFile);
s.addVariable("width","40");
s.addVariable("height","20");
s.addVariable("displayheight","20");
s.addVariable("overstretch","fit");
s.addVariable("image",theImage);
s.addVariable("showicons","true");
s.addVariable('volume','20');
s.addVariable("thePlace","http://www.torquemasters.net/torque-template/vids/pikespeak.swf");
if (go) { s.addVariable("autostart","true"); }
s.write(thePlace);
}

function init() {
createPlayer('placeholder1', 'myData',
'http://www.torquemasters.net/torque-template/vids/images/torquehard.png', true);
createPlayer('placeholder2', 'myData',
'http://www.torquemasters.net/torque-template/vids/images/torquehard.png', true);
createPlayer('placeholder3', 'myData',
'http://www.torquemasters.net/torque-template/vids/images/torquehard.png', true);
createPlayer('placeholder4', 'myData',
'http://www.torquemasters.net/torque-template/vids/images/torquehard.png', true);
createPlayer('placeholder5', 'myData',
'http://www.torquemasters.net/torque-template/vids/images/torquehard.png', true);
createPlayer('placeholder6', 'myData',
'http://www.torquemasters.net/torque-template/vids/images/torquehard.png', true);
createPlayer('placeholder7', 'myData',
'http://www.torquemasters.net/torque-template/vids/images/torquehard.png', true);
createPlayer('placeholder8', 'myData',
'http://www.torquemasters.net/torque-template/vids/images/torquehard.png', true);
createPlayer('placeholder9', 'myData',
'http://www.torquemasters.net/torque-template/vids/images/torquehard.png', true);
createPlayer('placeholder10', 'myData',
'http://www.torquemasters.net/torque-template/vids/images/torquehard.png', true);
}

</script>

</head>

<body onload="init();">
<DIV id="placeholder1"></DIV>
<DIV id="placeholder2"></DIV>
<DIV id="placeholder3"></DIV>
<DIV id="placeholder4"></DIV>
<DIV id="placeholder5"></DIV>
<DIV id="placeholder6"></DIV>
<DIV id="placeholder7"></DIV>
<DIV id="placeholder8"></DIV>
<DIV id="placeholder9"></DIV>
<DIV id="placeholder10"></DIV>
</body>
</html>