load whole webpage, then load the flash last? how? [Archive]

View Full Version : load whole webpage, then load the flash last? how?

Jessica lucidiastudios

05-08-2003, 03:15 PM

Hi,

I am stuck in highspeed land so I didn't have a dialup connection to test a new site, therefore I've run into a site loading problem. The flash on the page loads entirely before any of the rest of the site loads.

I tested 56k streaming of the flash in development, and it streams perfectly for dialup (starts quickly, etc.). The flash is 90k (which is big, but with the quick streaming, I thought it would be fine). BUT the flash sits in the header, so it would be loaded first in the overall page load process.

Basically, as a quick fix I just suggested we have a jpg with a Click for Demo Movie button. But, what we'd really like is to hold off on loading the flash in until the rest of the page has loaded. Is it possible to make loading the flash the last priority on the page? (The site is ASP. The programmer does not want to do any redirects for the flash.) I just want everyone with dialup to be able to see the site before the flash loads, because the page sits blank until the flash has streamed once fully (not ideal!!). Content is the king, not animation.

I'm willing to chop the movie into many small parts, though, I doubt that will solve the problem since it's still sitting on the page as the first thing to be loaded whether it's 1 or 20 swfs.

We've taken the flash out of the live site for now, but here's the flash version in a test area. If you have dialup and some suggestions, please let me know. (I know this seems like a Site Check, but I feel this is more of a problem than a critique. Just looking for answers to this one thing at this point.)
http://savings.mackinac.com/flash.asp

Please give me your suggestions. I have to fix this. :(
Thank you
Jessica

05-08-2003, 09:36 PM

could you use javascript?
somethinglike:

<script language="javascript">
function loadFlash(){
//use document.write() to insert flash object tags now
}
</script>
<body onLoad="loadFlash">

the onLoad event doesn't fire until the page is finished loading.

Jessica lucidiastudios

05-08-2003, 09:42 PM

Thanks for the reply, that would be a really good solution I think. I passed it on to the ASP guy who put the site together to check out. It looks like it could work.

In meantime, I also made a tiny movie that plays like a teaser in the header (smaller size will still let the page load). It has a button to watch the long version (loadmovie).

I'd rather use your idea though. I'll let you know if the programmer likes the idea. Thanks!

Jessica

dedwardsnew

05-08-2003, 10:14 PM

if you create a SWF file that uses actionscript loadMovie to load the bigger SWF, the html should finish as soon as the small SWF loads. This will also give you the chance to display your smaller teaser in the first SWF which can be overwritten by the loadMovie SWF as soon as it gets loaded (user doesn't have to hit the button to see the good one). As another alternative, you could wait a couple of seconds before the SWF called loadMovie so that the pipeline is free to load the html faster.

High speed land is a good place to be stuck, usually.

I can send you a sample file if you need it. -Dave

Jessica lucidiastudios

05-09-2003, 02:14 PM

That's a good idea too. But how would I load the main swf without actually loading it into the level the teaser movie is in? That is, how can I load the main movie while still keeping the teaser active and visible until the main is done? Is there an external preloader that can do this? I would prefer to replace the movie in level 0 rather than load on top.

Thanks for the ideas =)
Jessica

dedwardsnew

05-09-2003, 07:46 PM

Here's an example for you. There is one line of code at frame 60. At 12 frames per sec, it will take 5 seconds before it starts to load the "Bigger.swf" when it loads, it will take the place of the teaser SWF. -Dave

Jessica lucidiastudios

05-09-2003, 08:32 PM

That's really simple. I suppose it's the same thing as my teaser but without the click. I'll have to try this too. As long as the download process continues down the page into the rest of the non-flash after the teaser has loaded, this will work fine. I'm worried that because loadmovie is triggered and streaming the big file as soon as it's done loading, and it's calling it from within flash not from the html part of the page, it will recognise the two files as one big long streaming process. That would give the same effect as having one big file right off the bat.

As long as the two files are *separate* in the eyes of the webpage, it should work fine. I'll have to try it out with the site, or there's no telling! Everything always works great until you put it together with everyone else's stuff. =)

Thanks for the files Dave.
I'll let you know, hopefully before wed. if we get it all integrated by then. I'm away for a week after that, but I'll reply when I'm back at work.

Jessica

dedwardsnew

05-09-2003, 08:44 PM

Don't worry. It won't even think about loading until the 5 secs have elapsed. -Dave

binkyboo

05-09-2003, 08:51 PM

Dave,

Start utilizing the setInterval function in Flash MX. It's efficient and easy!!

myInterval = setInterval(loadTheClip, 5000);
function loadTheClip() {
loadMovieNum("Bigger.swf", 0);
clearInterval(myInterval);
}

Jessica,

I would highly recommend utilizing tg's suggestion. If I have DSL or cable I wouldn't want to wait 5 seconds for your top menu to load. tg's method works well!

Jessica lucidiastudios

05-09-2003, 08:58 PM

This is why I love posting to this forum, so many different ideas of how to do things, and I learn a bunch!

I never thought of the 5 seconds being a problem for highspeed people, but you're right. If you CAN get it fast, you should get it fast.

I haven't used setInterval before, but it's worth checking out. I'll fiddle with it this weekend. Thanks!!

:) Jessica

binkyboo

05-09-2003, 09:01 PM

Jessica,

I'll put a small example together using tg's method and post it. Stay tuned!:)

Jessica lucidiastudios

05-09-2003, 09:16 PM

That's the plan, I'll put it at that live link I have up right now (from the first post).

thanks again :D

binkyboo

05-13-2003, 09:43 PM

Jessica,

I haven't forgotten about you it's just that I'm at a stand still now:)

tg,

What exactly needs to go into the document.write() parameters? Is it simply the object tag? Something like this:

<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="550" height="400">
<param name="movie" value="test.swf">
<param name="quality" value="high"><param name="PLAY" value="false">
<embed src="test.swf" width="550" height="400" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" play="false"></embed></object>

I know I've done this before I just can't find the files!

Jessica lucidiastudios

05-13-2003, 10:01 PM

Wow you are very dedicated binkyboo!! Thanks, I appreciate it. =)

We fussed around with it today (myself and the asp guy) and he had a problem with that chunk of javascript because he can't tell it where to write to on the page when the load function is called. The flash has to be written into the header, but he can't tell it to. I asked if he could write to a table and he said he doesn't think that is a well-supported solution.

It's a little more complicated than just the embed tag. He does the flashcheck right on the page as well (didn't want the re-direct style Macromedia FDK). If flash can play, embed the flash, else show the jpg. This works well except that the Flash hogs all the bandwidth which leads to my original problem. So the flashcheck script would be run before the load function and embed script. (I don't know for sure since I can't program ASP myself! :( )

The primary problem today when we tried it out was that he could not tell the script where to write the embed tags so that it would put the Flash in the header. The broken result sits live (hidden to public: http://savings.mackinac.com/flash.asp) until we fix it after the long weekend (!!! :) !!!). We're going to be back at it on Tuesday.

Thanks so much for your help with the problem. The javascript looks like a good solution if it can work with our page! I'm anxious to have it work.

Enjoy your weekend! I'm without Internet tomorrow until Tuesday 20th (eek!). I will check this thread as soon as I'm back in.
Jessica

avelives

05-14-2003, 01:06 PM

well asp isnt really my thing , but best way i can think of has already been suggested (to have a small SWF movie which plays for about 20 secs and then unloads itself and loads the bigger swf)
But im sure you probably already tried that, alternatively try looking here:
http://javascript.internet.com/
Has lots of free javascripts and links to othere programming language sites, you may find a preloader there (notice i say may!!)
sorry couldnt help more...

05-15-2003, 04:28 PM

try this:

<html>
<head><title>dynamic flash test</title>
<script language="javascript">

</script>
<body onLoad="writeFlash()">

</body>
</html>

05-15-2003, 04:35 PM

on item to note in the above code...

don't get the single quotes (') and double quotes(") mixed up...

the object tag written by flash uses double quotes ("), so my variable flashOut wraps the whole thing in single quotes(').

this is also important (altho i think i did it the other way around) in the document.write() action.... the div tag is wrapped in double quotes, and the elements of the tag are surrounded by single quotes.

Jessica lucidiastudios

05-21-2003, 04:04 PM

Thank you for the replies!

I just got back in town and back to work now, so I'll be back on this problem as soon as the ASP guy has a moment to give me for experimentation. Unfortunately I can't do it without his help. I'm hoping we can look at it this week, and when we do I will post back!

Thank you :D
Jessica

Jessica lucidiastudios

05-21-2003, 04:05 PM

Thanks for the javascript link as well! I'm not accustomed to javascript (I know, bad!!) so the link will come in handy. =)

05-21-2003, 04:14 PM

to get it to work cross browser, you will need to run a javascript to check which browser is being used, then use either <div> (ie) or <layer> (netscape,moz,...) not sure of the details about which browsers support which... i am also not sure how well netscape and family handle inline styles, so that may be another little hitch for you to work thru.

good luck.

Jessica lucidiastudios

05-27-2003, 02:34 PM

Well it looks like this little project has been put on hold now, since the asp guy is busy with some other stuff. He has no time for me! :(

Thanks for everyone's help and ideas. I will finish it as soon as I get some time with the asp guy and follow up when we've fixed it.

Many thanks!!
Jessica

:)

Jessica lucidiastudios

06-11-2003, 06:45 PM

Just an update to all you nice people who helped me out with this little problem.

Bad news: I will likely not get a chance to work on this again with the ASP guy, so I won't get to test out any of the ideas on this actual project. The flash likely won't be added (because it was just bells & whistles but the site is fine and functional without it), or it will be added months from now during a slow period (it's never slow!). :(

I do know what I would do if this does come up again thanks to your help though, start with a small base movie and load the big one, and try out that chunk of javascript. I'll play around with them in future just for fun.

Thanks for the help, if I can do the same let me know...
Jessica

grobar

08-10-2005, 02:58 PM

Check it out.

Put the object tag (<object codebase blah blah blah...</object>) containing the swf file inside a div. Id the div "myFlash" for arguments sake. Comment out the object tag as follows:

<div id="myFlash"></div>

Next: <body onLoad="javascript:reWriteFlash();" ...

then create this script (inside the script tags - javascript):

function reWriteFlash(){

var myHTML = getElementsById('myFlash').innerHTML;

myHTML = myHTML.replace('','');

getElementsById('myFlash').innerHTML = myHTML;

}

What this does is on the event onLoad (once all HTML is loaded), comments out the object tag and, hence, starts rendering the object tag and, therefore, loading the flash file. If you wish to pre-load your images you can do that too, just make sure the preloading function is called before the one above.

CAUTION: reWriteFlash() removes all comment tags inside the div. Make sure there is nothing else in that div that needs to be un-comented otherwise the browser will pick it up and render it.

:cool:

08-10-2005, 06:35 PM

nice grobar.

mjward81

10-28-2005, 06:43 AM

very nice grobar! will come in handy

maslachak

03-03-2006, 12:17 PM

It should be like this:

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

function reWriteFlash(){

var myHTML = document.getElementById("myFlash").innerHTML;

myHTML = myHTML.replace("","");

document.getElementById("myFlash").innerHTML = myHTML;

}

</script>

Previuos example didn't work for me so i add "document" before getElementById and it works now.

bcelik79

08-13-2006, 12:33 AM

Greetings to all....

please check our site http://www.eyesonmiami.com

just placing the flash in a frame tnen redirecting the browser to that frame from the page causes flash to delay.
check how the 4 ads on the right loads.