Lesson 5: Interact A Lil’ With Flash

When web sites first came into existence they were mainly static pages filled simply with words and pictures. That is definitely not the case anymore. Nearly any page you go to now has interactive content: movies, games, drop-down menus, random word generators, the list goes on and on.

There are a number of technologies that make these possible: Flash, Javascript, Java, Silverlight, Shockwave, and more.

While how to build this interactive content is for later lessons in different categories, adding them to the web page is something that is required of HTML.

In this lesson, we’ll talk about how to add Flash to our page, in a standards-compliant manner.

Flash

Flash is the dominant interactive multimedia software on the market today. Flash also has what could be called a sister technology, Shockwave, which was big several years ago but has lately been on a rapid decline. Microsoft has also recently introduced a new technology which is likely to give Flash some healthy competition, called Silverlight.

There are a number of ways to add Flash to a document, though some are less standards compliant than others. It is also a bit of a bother to manually add Flash to a page in a standards-compliant manner that will work on all browsers, because some browsers need Flash to be added a slightly different way then others.

Luckily for us, there is a great open-source project called SWFObject which will make our lives significantly easier and makes adding Flash a snap. You can get the source code for SWFObject here: http://code.google.com/p/swfobject/

Simply extract the code and place it in a folder near your file. Also, if you don’t have a SWF file (.swf) handy, you can borrow one that I created for a demo of something else: Fading Banner. You’ll want to use the .swf file. The .fla file is the source file.

Concepts behind SWFObject

There are a couple of “best-practices” that SWFObject implements that I’d like to stop and discuss.

First off is the concept of “graceful degradation”. Basically, it means that if something can’t work because it’s not available (like Javascript not being available), that it still functions and that the technology that isn’t guaranteed to be there just enhanced the base functionality, not provided it.
We’ll cover this more in-depth in a future Javascript lesson, but essentially Javascript isn’t always available because a user can choose to disable it.

SWFObject handles it’s graceful degradation by allowing you to provide alternate content first, via HTML. Then, if Flash and Javascript are available, SWFObject replaces this alternate content with the Flash movie. If either are unavailable, then it just leaves the alternate content intact, so you aren’t just left with a big, empty box and a user wondering what happened.

Another thing that SWFObject does well is that it handles placing the correct code for the correct browser. A few browsers (namely the Internet Explorer family) use a propriety element (the embed element) instead of the standard object element to display the Flash. SWFObject will properly determine and set up whichever of these needs to be used in your code for you.

The Script Element

First off, to use SWFObject you must include the source code, which is Javascript. To include scripts like Javascript, we use the script element (<script>). The script element takes a couple of attributes. The important ones are the source attribute (src), the type attribute (type), and (for XHTML only) the language attribute (language).

The source attribute is the attribute where you tell it where to find the file. You can actually embed scripts within the page, and if you do, you don’t need to have the src attribute. The source attribute is only for external sources. You can specify it just like you do the src of images, using either a relative or absolute link.

The type attribute is where you tell it what type of script it is. For Javascript, the type is always “type/javascript”.

The language attribute is something only for XHTML. It is invalid to use it if you are doing HTML. The language attribute is where you tell XHTML what language you are using. There are a couple of different versions of Javascript, but if you specify language as “javascript” than it’ll be okay. You can also specify specific versions as well.

The script element has a required closing tag as well. If you want to embed the script, you place it between the open and closing script elements. The script element can go in the head or body, depending on it’s use. SWFObject uses two script elements (one to include the src, the other to set up the specific Flash), both of which we’ll put in the header.

Using SWFObject

The first part of using the SWFObject is to create your alternative content. You’ll first create a block-level element (a division is highly recommended). Give your block-level element an id. We’ll use the id later to tell SWFObject where we want our Flash. SWFObject will replace all of the contents of this division with our Flash.

Inside of this division, we want to set-up whatever we want to be displayed if we can’t show the Flash. Depending what the Flash is depends what content. For example, if it was a Flash-based menu, in the alternate content you’d want a HTML-based menu with the same links. If it was a movie, you may want to describe the movie or say something like “You need Flash to view this movie”. Just use your head.

Next, we need to include the SWFObject source code. I like to keep my Javascript files in a folder named “js” off of my root folder, so that’s where this one is:

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

Remember, if you are using XHTML, you need to add the language=”javascript” attribute as well.

Next, we’ll put another script element where we describe our Flash:

<script type="text/javascript">
  swfobject.embedSWF("myFlash.swf", "myDivId", "300", "120", "9.0.0");

While I won’t go into too much detail about the Javascript aspect, basically you can replace “myFlash.swf” with the name of the Flash file (if it isn’t in the same folder, include the folder as well. So, if it was in the folder “flash”, it would be “flash/myFlash.swf”). The “myDivId” you would replace with the id of the div that has our alternate content. The “300″ is the width of our movie, in pixels. The “120″ is height”. The “9.0.0″ is the version of Flash Player required.

And that’s it. If you set it up properly, when you load it, your Flash will be shown if you have the Flash Player installed, and the alternate will be shown if you don’t, or if you have Javascript disabled.

Here is the full code for our test page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Flash Demo</title>
  <script type="text/javascript" src="js/swfobject.js"></script>
  <script type="text/javascript">
    swfobject.embedSWF("myFlashMovie.swf", "flashMovie", "300", "120", "9.0.0");
  </script>
</head>
<body>
  <div id="flashMovie">
  <p>
    You need Flash Player 9.0.0 installed to view this. You can get from Adobe for free:
    <a href="http://www.adobe.com/products/flashplayer/">http://www.adobe.com/products/flashplayer/</a>
  </p>
  </div>
</body>
</html>

This is the “dynamic” implementation of SWFObject, which does a lot of the work for you. There is also a static implementation as well, which we may cover in a later lesson. If you want to learn more about SWFObject, you can explore their documentation which has all the details about their great script.

Related Extra Credit

Why SWFObject? Aren’t there any other options out there? The answer to the last question is “yes”. There are at least half a dozen other alternatives, such as using the code Dreamweaver generates when you use it to insert a Flash, the old static way of just typing it yourself, or other scripts which are rather numerous.

The reason I, as well as many many other professionals choose SWFObject is because it works the best, is highly standards-compliant, and is just so easy to use. The other alternatives all lack in at least one or more of these ways.

In our next lesson, we’ll talk about how to include external CSS files and discuss more in-depth the reason you want to use separate files for different things like scripts and CSS, instead of just embedding it all.