Solved

Using JavaScript to interact with Flash

Posted on 2008-10-25
9
1,308 Views
Last Modified: 2012-05-05
Hello,

My ultimate goal is to load my Flash banner last after all of my images and HTML have finished loading, while still allowing SWFObject flash detection to work.  Here's a description of the SWFObject I'm using:

http://code.google.com/p/swfobject/wiki/documentation

I am using the static publishing method.

I've researched the various ways to force the Flash movie to load last, but I haven't been able to get any of them to work.  One suggestion that had promise was to use two SWF movies.  The first SWF is embedded into my document, and it has two keyframes, with a "stop();" in the first, and the second keyframe loads the main movie I want.  Using Java Script, I tell Flash to play the movie "onLoad", thereby going to the keyframe which loads my movie after everything else has loaded.  It worked very well when I used the conventional way to embed flash into HTML, using both <object> and <embed> tags.  But since SWFObject doesn't embed Flash this way, I believe it's interfering with this, and therefore it only seems to work in IE.  I attached the code below, and you can see an example here:

http://www.livingwaterscommunitychurch.org/example.html

Another clever idea I read was to comment out the part of the HTML I wanted to be loaded last (in this case the Flash div), and then write a function that erases the comments "onLoad", thereby loading my Flash last.  Here's a quote about how to implement this idea:

"Try to put the object tag (<object type="application/x-shockwave-flash" etc.....</object>) containing the .swf file inside a div.

Name the div "myFlash" for arguments sake.
Comment out the object tag as follows:
<div id="myFlash"><!--<object type="application/x-shockwave-flash" ...</object>--></div>

Next: add to the body tag <body onLoad="javascript:reWriteFlash();" ...
then paste this Javascript function::

<script language="javascript" type="text/javascript">
function reWriteFlash(){

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

myHTML = myHTML.replace("<!--","");

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

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

}
</script>

What this does is on the event "onLoad" (once all HTML is loaded), comments out the object tag and, hence, starts rendering the object and loads the flash file."

When I tried to do this, I failed utterly, so either I don't know how to properly write the code, or something is wrong with the idea itself (it's probably the former).  

Any help with this would be greatly appreciated.  If anyone can show me how to properly implement either of these solutions, or if there's another simpler idea that would allow my Flash to load last without interfering with the SWFObject (assuming it's possible), I'm open to any ideas.

Thanks in advance,
~Coral
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

  <script type="text/javascript" src="swfobject.js"></script> 

      <script type="text/javascript">

 

    swfobject.registerObject("bandwidth", "8.0.0");

    </script>

<script type="text/javascript">

<!--

// F. Permadi May 2000

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 // if (navigator.appName.indexOf("Microsoft Internet")!=-1)

  {

    return document.getElementById(movieName);

  }

}

 

 

 

function PlayFlashMovie()

{

	var flashMovie=getFlashMovieObject("loader");

	flashMovie.Play();

	//embed.nativeProperty.anotherNativeMethod();

}

 

 

 

 

//-->

</script>

  

<style type="text/css">

 body {

	margin:0px 0px;

	padding:0px;

	text-align:center;

	}

#flash{

	position:relative;

	margin:0px auto;

	padding:0px;

	text-align:center;

	z-index: 1;

	width: 200;

	height: 200;

}

 

</style>

 

</head>

 

<body onLoad="PlayFlashMovie();">

 <div id="flash">

 			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="200" id="loader">

				<param name="movie" value="loader.swf" />

				<param name="quality" value="high" />

				<param name="wmode" value="transparent" />

				<param name="swliveconnect" value="true" />

				<!--[if !IE]>-->

				<object type="application/x-shockwave-flash" data="loader.swf" width="200" height="200">

				<param name="quality" value="high" />

				<param name="wmode" value="transparent" />

				<param name="swliveconnect" value="true" />

				<!--<![endif]-->

<div id="alternate" align="center"><a href="index.html"><img src="clear.gif" alt="Home" title="Home" width="735" height="159" border="0"/></a></div>

				<!--[if !IE]>-->

				</object>

				<!--<![endif]-->

			</object>

</div>

 

</body>

</html>

Open in new window

0
Comment
Question by:Coral3
  • 6
  • 2
9 Comments
 

Author Comment

by:Coral3
ID: 22806107
I got the "comment out" solution working...I probably just had some errors in my code originally.  I'll post it for anyone who can find it useful.

~Coral
<HTML>

<HEAD>

<TITLE>Flash Interaction with JavaScript</TITLE>

<title>Untitled Document</title>

  <script type="text/javascript" src="swfobject.js"></script> 

      <script type="text/javascript">
 

    swfobject.registerObject("animation", "8.0.0");

    </script>

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

function reWriteFlash(){
 

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

myHTML = myHTML.replace("<!--","");
 

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

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

}

</script>

<style type="text/css">

 body {

	margin:0px 0px;

	padding:0px;

	text-align:center;

	}

#flash{

	position:relative;

	margin:0px auto;

	padding:0px;

	text-align:center;

	z-index: 1;

	width: 200px;

	height: 200px;

}
 

</style>

</head>

<body onLoad="reWriteFlash();"> 

<div id="flash"><!--<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="200" id="animation">

				<param name="movie" value="animation.swf" />

				<param name="quality" value="high" />

				<param name="wmode" value="transparent" />

				<param name="swliveconnect" value="true" />

				<object type="application/x-shockwave-flash" data="animation.swf" width="200" height="200">

				<param name="quality" value="high" />

				<param name="wmode" value="transparent" />

				<param name="swliveconnect" value="true" />

<div id="alternate" align="center"><a href="index.html"><img src="clear.gif" alt="Home" title="Home" width="735" height="159" border="0"/></a></div>

				</object>

			</object>--></div>

 

</BODY>

</HTML>

Open in new window

0
 
LVL 12

Expert Comment

by:techExtreme
ID: 22806119
Hi, basically you have to use javascript and html to embed flash object in your page.
Follow the best practices and you're good to go.
First have a look at this link:

Proper Flash embedding: FlashObject Best Practices:

http://blog.deconcept.com/2005/03/31/proper-flash-embedding-flashobject-best-practices/


And this will be more important:

Web standards compliant Javascript Flash detect and embed
http://blog.deconcept.com/2004/10/14/web-standards-compliant-javascript-flash-detect-and-embed/

Even the links show how to add variables to your flash object using javascript.
Hope it helped.

Enjoy Coding!Hi, basically you have to use javascript and html to embed flash object in your page.
Follow the best practices and you're good to go.
First have a look at this link:

Proper Flash embedding: FlashObject Best Practices:

http://blog.deconcept.com/2005/03/31/proper-flash-embedding-flashobject-best-practices/


And this will be more important:

Web standards compliant Javascript Flash detect and embed
http://blog.deconcept.com/2004/10/14/web-standards-compliant-javascript-flash-detect-and-embed/

Even the links show how to add variables to your flash object using javascript.
Hope it helped.

Enjoy Coding!
0
 

Author Comment

by:Coral3
ID: 22806149
Thanks, techExtreme.  That's what the SWFObject is all about, embedding Flash in the page.

http://blog.deconcept.com/swfobject/

I said at the beginning how I'm using the SWFObject, so I guess I'm not really sure what you mean.
0
 

Author Comment

by:Coral3
ID: 22806162
Sigh, my "solution" doesn't work afterall. :(  I'm going to have repost this question.

techExtreme, SWFObject both embeds and detects flash all in one simple solution, which is what I want.  I'd rather not use the very bulky detection kit made by Macromedia if I can help it.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:Coral3
ID: 22806214
techExtreme, I just realized that SWFObject is basically an updated version of FlashObject (developed by the same person).
0
 

Accepted Solution

by:
Coral3 earned 0 total points
ID: 22806608
Finally found an answer...amazingly simple.  It's just a matter of using "display:none" and calling "display:block" onLoad.  Still allows the SWFObject to work perfectly, while loading my Flash content after everything else is finished loading.  It works across browsers.  Yay! :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

  <script type="text/javascript" src="swfobject.js"></script> 

     

<script type="text/javascript">

    swfobject.registerObject("animation", "8.0.0");

    </script>

  

<style type="text/css">

 body {

	margin:0px 0px;

	padding:0px;

	text-align:center;

	}

#flash{

	display:none;

	position:relative;

	margin:0px auto;

	padding:0px;

	text-align:center;

	z-index: 1;

	width: 200;

	height: 200;

}
 

</style>
 

</head>

<body onload="document.getElementById('flash').style.display = 'block'; ">

 <div id="flash">

 			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="200" id="animation">

				<param name="movie" value="animation.swf" />

				<param name="quality" value="high" />

				<param name="wmode" value="transparent" />

				<param name="swliveconnect" value="true" />

				<!--[if !IE]>-->

				<object type="application/x-shockwave-flash" data="animation.swf" width="200" height="200">

				<param name="quality" value="high" />

				<param name="wmode" value="transparent" />

				<param name="swliveconnect" value="true" />

				<!--<![endif]-->

<div id="alternate" align="center"><a href="index.html"><img src="clear.gif" alt="Home" title="Home" width="735" height="159" border="0"/></a></div>

				<!--[if !IE]>-->

				</object>

				<!--<![endif]-->

			</object>

</div>

</body>

</html>

Open in new window

0
 
LVL 12

Expert Comment

by:techExtreme
ID: 22810789
Good that you found answer. Hope I'll be able to help you in your future queries.
0
 

Author Comment

by:Coral3
ID: 22810802
Thank you for trying to help me,  even if it wasn't the solution it was greatly appreciated. :)
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Add code to body in wordpress site 8 35
Location of Javascript on HTML page 3 25
Safari SVG Image Problem 1 19
onOpen 14 38
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The goal of the tutorial is to teach the user how to live broadcast using Flash Media Live Encoder and connecting it to YouTube to broadcast. Log into your Youtube account, choose live stream settings, start live stream from Flash Media Live Enc…
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.

708 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now