Removing / Hiding a Flash SWF after it’s played

I recently was tasked with either removing or hiding a Flash SWF movie from a webpage only after it was finished playing. The reason for this was that the Flash SWF was playing in the header where a Google Custom Search bar was also supposed to be. SWF’s don’t like having things on top of them so I was presented with the aforementioned task.

After some digging and some modifying of JavaScript code, I finally found the answer. So here it is for all Flash/Web developers. Hopefully this will save you some time and help you out!

All of this is done with JavaScript and DIV’s within PHP but it can also be done within HTML.

Place the following code anywhere between the <head> </head> tags of your page.
<script type=”text/javascript”>
function functionName(objectName)
document.getElementById(objectName).style.display = “none”;

Here’s the breakdown of the code above:

  • functionName = the name of your JavaScript function. It can be anything you want, but it should probably be descriptive so you know what it’s doing. I chose “hideFlashObject”.
  • objectName = the name of your object for JavaScript to reference. Again, it can be anything you want but it doesn’t need to be very descriptive, just unique. I chose “obj”.
  • document.getElementById(objectName) = telling the JavaScript to find your object in the current document.
  • .style.display = “none”; = using the stylesheet reference of “display” to remove it. See the “Options” section below for other options for this area.
  • onLoad=window.setTimeout = using the “onLoad” function in JavaScript to wait until the page has loaded, then using the window.setTimeout function to define a length of time before the next thing happens.
  • (“functionName(‘divID’)” = uses your functionName then the DIV ID (defined in the <body> section of your page, see below) to target the JavaScript function you just defined and apply it to the DIV you specify after a certain amount of time.
  • ,####); = the amount of time in milliseconds that the JavaScript should wait to do what you told it to do it the function above.

For the stylesheet reference, here are other options you can use:

  • display = “none” (removes the item from the HTML display)
  • display = “inline” (includes the item in the HTML display without any paragraph break)
  • display = “block” (includes the item in the HTML display with a paragraph break)
  • visibility = “visible” (shows the item in the HTML display)
  • visibility = “hidden” (hides the item in the HTML display, but it still will “take up space” on the page)

Note: whichever you use to hide something (display or visible) you must use the same one to show it, and vice versa. For example, if you use visibility = “hidden” to remove something, to include it again, you’ll need to use visibility = “visible” to show it – you wouldn’t be able to use “display…” to show it.

You can include whatever you’d like into the DIV objects you’re trying to manipulate. In my case, I had a Flash object. For simplicity, I’m just going to use some text.

Include the following code between the <body> </body> tags on your page.
<div id=”divID”>
This is the text that is going to be changed.

Here’s the breakdown of that code:

  • <div id=”divID”> = this is the standard DIV code. The “divID” is what is referenced in the JavaScript above.
  • This is the text… = put whatever you want to manipulate here. It can be any HTML/PHP code you want.
  • </div> = this is the closing tag for the DIV.

That’s it! If we’ve done everything right, it should work perfectly!

You can also include other items in the JavaScript if you have more than one DIV that needs to be manipulated. To do this, simply create another function.