Southern Methodist University
Web Services > Web Style Guide > Using Macromedia Flash
WEB SERVICES

Web Styleguide

Using Macromedia Flash

To add flash to a page we use a JavaScript file named “flashobject.js.” The link to this file is placed within the head tags:

<script type="text/JavaScript" src=" http://www.smu.edu/tools/includes/flashobject.js"> </script>

Within the body tags we set up an area to display the flash. In this instance we’ll ID this div area as “flashzone”

<div id="flashzone"> </div>

After this div zone we add some JavaScript to call the flash movie and place it in the div we created:

Example:
<script type="text/JavaScript">
var fo = new FlashObject("myMovie.swf", " myMovie", "628", "250", "7", "#FFFFFF");
fo.addParam("wmode", "transparent");
fo.write("flashzone");
</script>

Here’s a breakdown of what the different parameters are for:

var fo = new FlashObject("ADDRESS_OF_FLASH_MOVIE", "ID_OF_OBJECT_OR_EMBED_TAG", "WIDTH", "HEIGHT", "PLAYER_VERSION", "BACKGROUND_COLOR");

More information about flashobject is available here.

The code:

fo.addParam("wmode", "transparent");

Sets the movie background to transparent. This is important in preventing drop down menus from displaying behind rather than over a flash movie. Doing this also causes the flash movie’s background to become clear which can lead to some unexpected visual effects. To maintain a “background” create a rectangular symbol and place it on the lowermost level within the flash movie, scaling it to fit. Then set the symbol’s color to match your chosen background and re-export the movie.

The code fo.write("flashzone"); writes the flash to your “flashzone” div.


What if the user does not have the necessary Flash plug-in?
Not everyone who views your page will have the necessary Flash plug-in or have JavaScript enabled. For these eventualities include this code inside your flashzone div:

<!--Alternate image for those who don't have the flash plugin or have JavaScript turned off-->
<img src="myImage.jpg" width="400" height="200" border="0">
<!--End alternate image for those who don't have the flash plugin or have JavaScript turned off-->

<!--Message for those who don't have the flash plugin-->
<script language="JavaScript">
document.write('For the best SMU online experience, <a href="http://www.adobe.com/go/getflashplayer" target="_blank">download the latest Flash player</a>.');
</script>
<!--End message for those who don't have the flash plugin-->

<!--Message for those who don't have the JavaScript turned on-->
<noscript>
For the best SMU online experience, enable JavaScript on your browser.
</noscript>
<!--End message for those who don't have the JavaScript turned on-->



 The final code would look like this:

<div id="flashzone">

<!--Alternate image for those who don't have the flash plugin or have JavaScript turned off-->
<img src="alternateImage.jpg" width="400" height="200" border="0">
<!--End alternate image for those who don't have the flash plugin or have JavaScript turned off-->

<!--Message for those who don't have the flash plugin-->
<script language="JavaScript">
document.write('For the best SMU online experience, <a href="http://www.macromedia.com/go/getflashplayer" target="_blank">download the latest Flash player</a>.');
</script>
<!--End message for those who don't have the flash plugin-->

<!--Message for those who don't have the JavaScript turned on-->
<noscript>
For the best SMU online experience, enable JavaScript on your browser.
</noscript>
<!--End message for those who don't have the JavaScript turned on-->

</div>
<script type="text/JavaScript">
var fo = new FlashObject("myMovie.swf", " myMovie", "628", "250", "7", "#FFFFFF");
fo.addParam("wmode", "transparent");
fo.write("flashzone");
</script>