Load Flash file after page load

Hello,

I have a page that contains a .swf file & it loads & plays before the rest of the page...i need to prevent it from loading or at least playing until the rest of the page has been downloaded.

Thanks,
Jais
lexcioAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

archrajanCommented:
just before the closing tag of the body element load your file.

place it before the
</body>
0
archrajanCommented:
Stretch:
Something like this:

function makemovie() {
var ebd = document.createElement("embed");
ebd.src = "yourfile.swf";
ebd.height = "100%";
ebd.width = "100%";
document.getElementById("myflash").appendChild(ebd);
}

...
<div id="myflash"></div>

Then call makeMovie() when you are ready for the movie to show.



0
archrajanCommented:
call makemovie()

like this

<script>
makemovie();
</script>
</body>
</html>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

archrajanCommented:
or something like this
<div id="movies" style = "display:none">
<object type="application/x-shockwave-flash" data="yourflashfile.swf" id="start" name="start" width="100" height="100">
<param name="movie" value="yourflashfile.swf" />
</object>
</div>
<body onload="document.getElementById('movies').style.display = 'block'; "> 
0
lexcioAuthor Commented:
Archrajan,

I have to admit... I am a little confused by the way you setup your answers into multiple responses.  I'm not really sure what you are telling me to do.  Please excuse my knowledge of Javascript.

Thanks,
Jais
0
archrajanCommented:
DO THIS ONE

<div id="movies" style = "display:none"> // this is where u want the file to load

<object type="application/x-shockwave-flash" data="yourflashfile.swf" id="start" name="start" width="100" height="100"> // yourflashfile.swf is the name of the flash file u want to put in the page

<param name="movie" value="yourflashfile.swf" />  // yourflashfile.swf is again the name of ur file

</object>

</div> //close of the div tag, this div tag is the placeholder for your movie file

<body onload="document.getElementById('movies').style.display = 'block'; ">//  Then in the body tag add this code.
0
lexcioAuthor Commented:
I am currently using some code that pulls a random flash file from a folder on the server as well.  I need to work the loading specs together with this code.

Relevant code:
==================================================
<script language="JavaScript" src="mm_menu.js"></script>
<% Const IMGS_DIR = "/images/flash/"
Dim objFSO, objFolderObject, objFileCollection, objFile
Dim intFileNumberToUse, intFileLooper
Dim objImageFileToUse
Dim strImageSrcText
Set objFSO = Server.CreateObject("Scripting.FileSystemObject")
Set objFolderObject = objFSO.GetFolder(Server.MapPath(IMGS_DIR))
Set objFSO = Nothing
Set objFileCollection = objFolderObject.Files
Set objFolderObject = Nothing
Randomize()
intFileNumberToUse = Int(objFileCollection.Count * Rnd) + 1
intFileLooper = 1
For Each objFile in objFileCollection
If intFileLooper = intFileNumberToUse Then
Set objImageFileToUse = objFile
Exit For
End If
intFileLooper = intFileLooper + 1
Next
Set objFileCollection = Nothing
strImageSrcText = objImageFileToUse.Name
Set objImageFileToUse = Nothing
%>
</head>

<body bgcolor="#829999" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/portfolio_over.gif','images/services_over.gif','images/aboutus_over.gif','images/clients_over.gif','images/contact_us_over.gif')">
<script language="JavaScript1.2">mmLoadMenus();</script>
<table class="unnamed1" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<td align="left" valign="top" background="images/portfolio/feature1.jpg"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="270" height="180">
<param name="movie" value="images/flash/<%=strImageSrcText%>">
<param name="quality" value="high"><param name="LOOP" value="false">
<embed src="images/flash/<%=strImageSrcText%>" width="270" height="180" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object></td>
</body>
0
archrajanCommented:
THIS METHOD WILL WORK IN IE AND NETSCAPE

function makemovie() // a javascript function which u use to make the movie
{
var ebd = document.createElement("embed");
ebd.src = "yourfile.swf"; // your swf file goes here
ebd.height = "100%";
ebd.width = "100%";
document.getElementById("myflash").appendChild(ebd);  // my flash is the id of the placeholder(where your flash             resides in the html)
}


<div id="myflash"></div>  --> just add this part of code in the html where you want the flash file to be present.

Then call makemovie() like this

in the body tag
<script>
makemovie();
</script>
</body>
</html>

0
archrajanCommented:
just place the div tag before this code


<div id = "movies" style = "display:none"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="270" height="180">
<param name="movie" value="images/flash/<%=strImageSrcText%>">
<param name="quality" value="high"><param name="LOOP" value="false">
<embed src="images/flash/<%=strImageSrcText%>" width="270" height="180" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>

</div>


and this line of code in the body tag
<script>
document.getElementById('movies').style.display = 'block';
</script>
</body>
0
lexcioAuthor Commented:
Archrajan,

I did the following & it still plays the Flash file as soon as it loads...which is before the rest of the page.
---------------------------
<div id = "movies" style = "display:none">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="270" height="180">
<param name="movie" value="images/flash/<%=strImageSrcText%>">
<param name="quality" value="high"><param name="LOOP" value="false">
<embed src="images/flash/<%=strImageSrcText%>" width="270" height="180" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</div>

<script>
document.getElementById('movies').style.display = 'block';
</script>
</body>
</html>
--------------------------------------
Did I do something wrong?

Jais
0
archrajanCommented:
Try this then...
Goes in the head section
<script type="text/javascript">
var loaded = false;
var tmr = null;

function loadTimer() {
if (!loaded) {
var tmr = window.setTimeout('loadTimer()', 1000);
}
else {
window.clearTimeout(tmr);
// window is completely loaded
// do your stuff now
alert("Finished loading!");

}
}

</script>

//This goes in the body tag just before the </body>
<script type="text/javascript">

void(window.setTimeout('loaded = true', 1000));
 
</script>

And your body tag looks like this

<body onload="loadTimer();">
0
lexcioAuthor Commented:
The last post only makes it pause for a certain period of time... If I slow it down enough for dial up users -- it would make broadband users not see the flash b/c they would have already gone to next page.

I need a script that forces the flash to load last or wait until the page has loaded.

Thanks,
Jais
0
devicCommented:
you need two things:

1.set parameter play to "false"
example:
<param name="play" value="false">

2. Call movie with onload event:
example:

onload="myMovieObj.play()"

here example:
=============================
<html>
<head>
<script>
function startFlash()
{
      alert("page loaded, now will start flash!");
      document.getElementById("flashfile").play();
}
</script>
</head>
<body onload="startFlash()">

    <object CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    CODEBASE="NEED%20NEW%20CODEBASE%20FROM%20RAVEN" ID="flashfile" WIDTH="400" HEIGHT="150">
      <param name="movie" value="http://www.echoecho.com/flashcolors.swf">
      <param name="play" value="false">
      <param name="quality" value="high"><embed NAME="flashfile" SRC="http://www.echoecho.com/flashcolors.swf" WIDTH="400" HEIGHT="150" PLAY="false"
SWLIVECONNECT="true" QUALITY="high">

    </object>
</body>
</html>
0
lexcioAuthor Commented:
Devic,

Not working yet.  Please find the errors in my code.

Thanks,
Jais

relevant parts of the code:
---------------------------------------------------
<% Const IMGS_DIR = "/images/flash/"
Dim objFSO, objFolderObject, objFileCollection, objFile
Dim intFileNumberToUse, intFileLooper
Dim objImageFileToUse
Dim strImageSrcText
Set objFSO = Server.CreateObject("Scripting.FileSystemObject")
Set objFolderObject = objFSO.GetFolder(Server.MapPath(IMGS_DIR))
Set objFSO = Nothing
Set objFileCollection = objFolderObject.Files
Set objFolderObject = Nothing
Randomize()
intFileNumberToUse = Int(objFileCollection.Count * Rnd) + 1
intFileLooper = 1
For Each objFile in objFileCollection
      If intFileLooper = intFileNumberToUse Then
            Set objImageFileToUse = objFile
            Exit For
      End If
      intFileLooper = intFileLooper + 1
Next
Set objFileCollection = Nothing
strImageSrcText = objImageFileToUse.Name
Set objImageFileToUse = Nothing
%>

<script>
function startFlash()
{
     document.getElementById("flashfile").play();
}
</script>
</head>

<body bgcolor="#829999" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/portfolio_over.gif','images/services_over.gif','images/aboutus_over.gif','images/clients_over.gif','images/contact_us_over.gif'), startFlash()"> ***Note I tried both "," & ";"

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" ID="flashfile" width="270" height="180">
<param name="movie" value="images/flash/<%=strImageSrcText%>">
<param name="quality" value="high">
<param name="play" value="false">
<param name="LOOP" value="false">
<embed name="flashfile" src="images/flash/<%=strImageSrcText%>" width="270" height="180" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" play="false"></embed>
</object>
0
lexcioAuthor Commented:
The flash file begins playing while the images are still loading

Thanks,
Jais
0
devicCommented:
I moved MM_preloadImages call to startFlash(), so I think better :)

all works, except I don't have a flash, be sure that <%=strImageSrcText%> returns right image path. Run page on server, go to view source and find what is there.

============================

<script>
function startFlash()
{
      document.getElementById("flashfile").play();
      MM_preloadImages('images/portfolio_over.gif','images/services_over.gif','images/aboutus_over.gif','images/clients_over.gif','images/contact_us_over.gif');
}
</script>
</head>

<body bgcolor="#829999" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="startFlash()">
***Note I tried both "," & ";"

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" ID="flashfile" width="270" height="180">
<param name="movie" value="<%=strImageSrcText%>">
<param name="quality" value="high">
<param name="play" value="false">
<param name="LOOP" value="false">
<embed name="flashfile" src="images/flash/<%=strImageSrcText%>" width="270" height="180" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" play="false"></embed>
</object>
0
devicCommented:
ok, then move startFlash() to the end of MM_preloadImages() function:

function MM_preloadImages()
{
    //load images
    //.................
    //.................
    //end of function MM_preloadImages
    startFlash();
}

<body bgcolor="#829999" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/portfolio_over.gif','images/services_over.gif','images/aboutus_over.gif','images/clients_over.gif','images/contact_us_over.gif')">
0
lexcioAuthor Commented:
Hello devic,

Using the code from your post at 11/23/2004 03:27PM PST --- the flash file does not load at all.

Thanks,
Jais

Below is the code used:
---------------------------------------------------------------------------
<script>
function startFlash()
{
document.getElementById("flashfile").play();
MM_preloadImages('images/portfolio_over.gif','images/services_over.gif','images/aboutus_over.gif','images/clients_over.gif','images/contact_us_over.gif');
}
</script>

<body bgcolor="#829999" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="startFlash()">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" ID="flashfile" width="270" height="180">
<param name="movie" value="<%=strImageSrcText%>">
<param name="quality" value="high">
<param name="play" value="false">
<param name="loop" value="false">
<embed name="flashfile" src="images/flash/<%=strImageSrcText%>" width="270" height="180" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" play="false"></embed>
</object>
0
devicCommented:
because you did error, and if you do error, then is not my code ;)

save as html ONLY ONLY my code, and replace the src for flash:

like this:
==============
<script>
function startFlash()
{
    alert("now!")
      document.getElementById("flashfile").play();
    //MM_preloadImages('images/portfolio_over.gif','images/services_over.gif','images/aboutus_over.gif','images/clients_over.gif','images/contact_us_over.gif');
}
</script>
</head>

<body bgcolor="#829999" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="startFlash()">
***Note I tried both "," & ";"

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" ID="flashfile" width="270" height="180">
<param name="movie" value="http://www.echoecho.com/flashcolors.swf">
<param name="quality" value="high">
<param name="play" value="false">
<param name="LOOP" value="false">
<embed name="flashfile" src="images/flash/<%=strImageSrcText%>" width="270" height="180" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" play="false"></embed>
</object>
0
lexcioAuthor Commented:
Devic,

OK.  now the flash loads before the page is done downloading...and the "now" status box pops up when the images are completely loaded.

I noticed you said "save as HTML".  The page is ASP - does this cause problems?

Any ideas?

Thanks,
Jais
0
devicCommented:
no, ASP is only on server and if the asp code executed will be send plain html to client.
for this reason you need to check what you send. Open from browser (View Source) and check what you send.
You can also save content as HTML, and it will do the same as asp (just not dynamic... without Rnd... just last generated HTML)
So you can check what you do. Here is javascript area, and better to post here this code and not ASP.

So can help you people who doesn't know ASP too.

0
lexcioAuthor Commented:
Devic,

Do you know why the popup alert works when the page is fully loaded, but the flash file still loads before the page.  The ASP code should not be affecting the Javascript...as it is working fine.

Thanks,
Jais
0
ziffgoneCommented:
Hi lexico, this should do it for you:

<script type="text/javascript">
function startFlash()
{
var theFlash = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" ID="flashfile" width="270" height="180">';
theFlash += '<param name="movie" value="<%=strImageSrcText%>">';
theFlash += '<param name="quality" value="high">';
theFlash += '<param name="loop" value="false">';
theFlash += '<embed name="flashfile" src="images/flash/<%=strImageSrcText%>" width="270" height="180" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" play="false"></embed>';
theFlash += '</object>';
document.getElementById('flashDiv').innerHTML = theFlash;

MM_preloadImages('images/portfolio_over.gif','images/services_over.gif','images/aboutus_over.gif','images/clients_over.gif','images/contact_us_over.gif');
}
</script>

And once again, your body tag:
<body style="background:#829999;margin:0px;" onLoad="startFlash()">

Finally, place the following exactly where you want your Flash Player:
<div id="flashDiv" style="width:270px;height:180px;"></div>

Hope that helps. Let me know if there are any problems and we'll debug it.

Regards...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
devicCommented:
>>Do you know why the popup alert works when the page is fully loaded, but the flash file still loads before the page.
Jais,
if you publish your page online, then I can say you why.

thanks
0
lexcioAuthor Commented:
ziffgone,

Great coding...only had to change my reference to the file:
theFlash += '<param name="movie" value="<%=strImageSrcText%>">';
to
theFlash += '<param name="movie" value="images/flash/<%=strImageSrcText%>">';

Makes good sense to encapsulate the entire flash code to the script section...I would have never known how to do it!
Thanks for all the help!  It works great.

Jais
0
ziffgoneCommented:
No problem Jais,

Yeah, I figured by not rendering the ENTIRE Flash object until after document load was complete, this would resolve pre-playing issues. Glad it worked for you!

Here's another suggestion to suit those with slower Internet connections, add "background:url(/path/to/substitue_picture.gif); to the DIV tag I gave you, like so:

<div id="flashDiv" style="width:270px;height:180px;background:url(/path/to/substitue_picture.gif); "></div>

This will provide an alternate picture for those who's connections are slower and the Flash image takes a while to load. Simply replace "/path/to/substitue_picture.gif" with an image or Ad you wish to show them while the Flash loads.

Regards...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.