Muttering Small Talk At The Wall - The Digital Vision Media Blog by Steve Wilkison

For quite awhile I’ve been trying to find a way to create “deep links” in Flash files. Here’s the problem:

When building standard HTML pages it’s very easy (obviously) to create links to specific pages so that it’s possible to send someone a link that goes to a particular page in a website. For instance, if I want to send someone to the Home page of the Michelle Wright website I would use this link: http://www.michelle-wright.com. But, if I wanted to send them to her Photo Gallery page I would use this link: http://www.michelle-wright.com/photos.html. I’ve created what we call a “deep link” by adding a slash and the page name to the end of the main URL. Using this syntax it is possible to create a link that goes anywhere in a website, no matter how deep the page is buried and how many folders you have to navigate through. But Flash presents a unique problem. I can build an entire website in Flash, with lots of different pages and sections, but when it comes time to “embed” this Flash file on an HTML page for the web there will only be one HTML page. One page holds the Flash file and though the visitor may navigate throughout the Flash file, they never leave that one HTML page. I’ve never found a way to create an HTML link (like the one above to Michelle Wright’s Photo Gallery) that can cause the Flash file to move from one point to another. Until now.

While investigating into and learning more about SWFObject 2 (a method for embedding Flash .swf files on an HTML page) I discovered “flashvars.” Once I got the concept down it took me a little while to work out all the code necessary (some on the HTML page, some on the Flash file) to create the deep links I was looking for. Here’s how I did it:

1. First the Flash file:
I created a simple Flash file in Flash CS4, using AS3.
a. First I created a “labels” layer and then on the timeline I created three separate frame labels: at frame 10 I entered “ten”; at frame 20 I entered “twenty”; and at frame 30 I entered “thirty”.
b. I then created an “actions” layer and added “stop();” actionScript to each of these frames on that layer.
c. Next I created a “text” layer, adding keyframes in frames 10, 20 and 30. At each one I then entered the words “ten,” “twenty” and “thirty” respectively.
d. Going back to the “actions” layer, in frame 1 I added the following code:
stop();
var theScene:String = root.loaderInfo.parameters["gotoscene"];
if(theScene == “ten”) {
gotoAndStop(”ten”);
} else if(theScene == “twenty”) {
gotoAndStop(”twenty”);
} else if(theScene == “thirty”) {
gotoAndStop(”thirty”);
}
stop();
var theScene:String = root.loaderInfo.parameters["gotoscene"];
if(theScene == “ten”) {
gotoAndStop(”ten”);
} else if(theScene == “twenty”) {
gotoAndStop(”twenty”);
} else if(theScene == “thirty”) {
gotoAndStop(”thirty”);
}

So, what I have done is first stop the movie at this frame. Then the movie checks the root.loaderInfo.parameters for a flashvars variable named “gotoscene.” I use a simple “if/else if” statement to check what was passed into the movie via “gotoscene.” If it is “ten” it moves to frame 10, if it is “twenty” it moves to frame 20 and if it is “thirty” it moves to frame 30. My goal is that by using a query string on the URL I can move the Flash file to the particular frame I want.

2. Now the HTML file:
I created a simple XHTML transitional document and saved it with a .php extension instead of an HTML extension so that I could use PHP within it.
a. Just before the DOCTYPE declaration I inserted this code:

<?php
$gotoscene = NULL;
if (isset($_GET['scene'])) {
$gotoscene = $_GET['scene'];
}
?>

This will check the URL to see if a “scene” variable is being passed to it like this: http://www.digitalvisionmedia.com/examples/scenetest.php?scene=twenty. If the variable and value are being passed in it will store the value in a new variable named “gotoscene.”
b. Now I use SWFObject 2 to embed the Flash file I created in step one via the “static” method.
c. I add the following “param” element to the code:

<param name=”flashvars” value=”gotoscene=<?php echo $gotoscene; ?>” />

So, I’ve just created a flashvars variable with a value that equals the value being passed in by the URL query string. Now this flashvars variable will be passed to the Flash .swf file as it is loaded, be read by the ActionScript in frame one (root.loaderInfo.parameters["gotoscene"];) and move the Flash player to the appropriate frame. Volia!
You can view my finished file here. You’ll note that when the file loads all you see is a blue rectangle. But, if you amend the URL from:

http://www.digitalvisionmedia.com/examples/scenetest.php
to
http://www.digitalvisionmedia.com/examples/scenetest.php?scene=ten

you’ll find that the Flash movie movies to frame 10. We’re still on the same HTML page, but we’ve manipulated the Flash file, via the URL entered, to move to a different point in the movie. If you change the “ten” to either “twenty” or “thirty” you can move to those points as well.

So, what does all this mean to me? Before, if I wanted to create a full artist website in Flash, with things like a Bio page, a Discography page, a Photos page, etc., I would have no way of sending someone directly to one of those pages. I would have had to say, “Go to the Home page and then click on the Bio link.” Now, I can code the Flash and HTML files appropriately and then send someone a link that goes directly to the part of the site I want them to visit. Very cool. Next I’ll look at a way of using the dynamic SWFObject 2 embed method to do this without PHP.

There are a variety of ways to embed Flash files on web pages. However, SWFObject 2 has clearly emerged as the front runner. Dreamweaver CS4 uses SWFObject 2 as its default method. Using Dreamweaver it’s very easy to embed a Flash file on an HTML page. Dreamweaver does all the “heavy lifting” and writes all the necessary code with one click of the mouse. Recently though I noticed that Dreamweaver uses a file called “swfobject_modified.js” which appears to be, at least slightly, different from the “swfobject.js” file that SWFObject 2 normally uses. I thought I would spend some time looking into SWFObject 2 and try to get a better understanding of what it is and exactly what it does.

A quick Google search took me to the project’s Home Page. From there I headed straight to the “SWFObject documentation” page. In a nutshell, SWFObject 2 is a method for embedding .swf files on HTML pages. It offers two “standards-friendly” methods of doing so, both of which use JavaScript. It can detect the Flash Player plugin that the visitor has installed in their web browser and point them to a Flash Player download page if their version of the plugin is not new enough to support the embedded content. It also has the ability to display “alternative content” in the event that the visitor’s Flash plugin is outdated, if they have no Flash plugin at all installed or if they have JavaScript turned off. Another advantage of the “alternative content” is that it can easily be indexed by search engines.

SWFObject 2 offers two methods for embedding your Flash files: static and dynamic.

The static method embeds both the Flash content and the alternative content using standards compliant markup and it relies upon Javascript to resolve any issues that markup alone cannot solve.

The dynamic method is based on marked up alternative content and then uses Javascript to replace that content with the Flash content if the correct Flash plugin is installed and if JavaScript is turned on.

The documentation offers several pros and cons for each method. The static method uses more standards compliant code, has a better embed performance and does not rely upon JavaScript to embed the Flash file. So, if a visitor has JavaScript turned off they will still be able to see the Flash file. The only real advantage to the dynamic method is that avoids “click-to-activate mechanisms” that Internet Explorer and Opera once used. Fortunately, these methods have been phased out of the most recent browsers. Additionally, Dreamweaver uses the static method. So, it seems clear to me, that for most of my projects the static method seems to be the way to go.

Using the static method of SWFObject 2 involves three basic parts:

1. Embed both the Flash content and alternative content using standards compliant markup. This basically involves using the “object” tag to state which Flash .swf file you are embedding. There are few required “attributes” such as the height and the width of the Flash file, a “type” for Internet Explorer browsers, a “classid” for all other browsers and a “data” attribute that declares the name of the Flash file for Internet Explorer browsers. A “movie” parameter on the object tag is used to declare the name of the Flash file for all other browsers. As with many web related things you have to write code for Internet Explorer and then additional code for all other browsers. As I’ve said my entire career, Internet Explorer sucks. You can add a variety of other attributes and parameters to configure the Flash file, including turning off the menu, looping the file, starting play automatically, scaling the file, making it transparent, etc.

2. Include the “swfobject.js” JavaScript file in the head of the HTML page. This simply pulls in the necessary JavaScript code from an external file.

3. Register the Flash content with the SWFObject library and tell SWFObject what to do with it. Here two required “arguments” and two optional “arguments” are used. The required arguments are the ID of the markup and the Flash Player version you want to target. The optional arguments involve a JavaScript callback function and an “Adobe Express Install” file that displays an Adobe download dialog instead of the Flash content when the required plugin is not available.

There is a great SWFObject Generator available as either an HTML page or an AIR program to help you generate the code necessary for any embedding you need to do. I found the AIR program to be quite helpful.

One really great thing that came out of my looking into SWFObject 2 was that I finally figured out how to create HTML links that go to a specific place in a Flash file. I’ve been wanting to do this for a long time and had never quite figured out how. With normal HTML pages it is, of course, quite easy to create links from one page to another. But when you have a Flash file that contains different “pages” or “sections” the entire Flash file is embedded on one HTML page. In the past this made it impossible to write an HTML link that could move to a particular place in a Flash file. With SWFObject 2 you can use “flashvars,” variables that can be  passed along to the Flash file. Using these, along with PHP, it’s possible to create an HTML link to actually move to a specific place in a Flash file. I’ll write more in depth about that next.

There is also an “API” (application programing interface) available which allows developers and programmers to tie into 11 methods of the SWFObject 2 code and reuse them. For instance, you can check the visitors Flash version and display that on the page, you can create a link to remove a Flash file from the page or you can access the parameters from the URL query string (this only seems to work with the dynamic method however).

For now though let me just say that SWFObject 2 is quite impressive and very versatile. As I said, it’s easy to use the built in ability of Dreamweaver to utilize it when embedding a Flash file. But by doing some investigation and learning on my own I’ve discovered a lot more possibilities and options.

Resources:
SWFObject 2 Home Page
An excellent video tutorial on SWFObject 2
An excellent written tutorial on SWFObject 2