[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Load Flash file after page load

Posted on 2004-11-23
26
Medium Priority
?
340 Views
Last Modified: 2008-01-16
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
0
Comment
Question by:lexcio
  • 10
  • 8
  • 6
  • +1
26 Comments
 
LVL 25

Expert Comment

by:archrajan
ID: 12659165
just before the closing tag of the body element load your file.

place it before the
</body>
0
 
LVL 25

Expert Comment

by:archrajan
ID: 12659194
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
 
LVL 25

Expert Comment

by:archrajan
ID: 12659199
call makemovie()

like this

<script>
makemovie();
</script>
</body>
</html>
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 25

Expert Comment

by:archrajan
ID: 12659235
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
 

Author Comment

by:lexcio
ID: 12659313
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
 
LVL 25

Expert Comment

by:archrajan
ID: 12659361
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
 

Author Comment

by:lexcio
ID: 12659373
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
 
LVL 25

Expert Comment

by:archrajan
ID: 12659391
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
 
LVL 25

Expert Comment

by:archrajan
ID: 12659439
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
 

Author Comment

by:lexcio
ID: 12659587
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
 
LVL 25

Expert Comment

by:archrajan
ID: 12659678
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
 

Author Comment

by:lexcio
ID: 12659725
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
 
LVL 25

Expert Comment

by:devic
ID: 12660245
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
 

Author Comment

by:lexcio
ID: 12660555
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
 

Author Comment

by:lexcio
ID: 12660603
The flash file begins playing while the images are still loading

Thanks,
Jais
0
 
LVL 25

Expert Comment

by:devic
ID: 12660609
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
 
LVL 25

Expert Comment

by:devic
ID: 12660631
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
 

Author Comment

by:lexcio
ID: 12660729
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
 
LVL 25

Expert Comment

by:devic
ID: 12660765
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
 

Author Comment

by:lexcio
ID: 12660859
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
 
LVL 25

Expert Comment

by:devic
ID: 12660896
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
 

Author Comment

by:lexcio
ID: 12661030
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
 
LVL 14

Accepted Solution

by:
ziffgone earned 2000 total points
ID: 12663029
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
 
LVL 25

Expert Comment

by:devic
ID: 12663281
>>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
 

Author Comment

by:lexcio
ID: 12665362
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
 
LVL 14

Expert Comment

by:ziffgone
ID: 12668984
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question