Note: a new article based on this one was published on the Adobe Developer Center in September 2007. The article (”Deep-linking to frames in Flash websites”) includes more background and detail of the first technique (the no-code approach) described in this article, but doesn’t discuss any of the other approaches.

I got an email from “Brent” asking me if it’s possible to give someone a url that links directly to a particular keyframe of a Flash application:

Maybe you can tell me if this is possible or not, I have a feeling it’s not cause i’ve been searching through google and not finding anything written about it. Can you target a specific keyframe in a flash movie through an HTML page link (possibly using PHP? or javascript to feed the info to flash?) The reason for doing this would be if, for instance you had a flash site with different sections and wanted to give someone a link to your contact section without having them navigate to it… is this possible?

Indeed, it is possible.

There are a few ways to accomplish what Brent was asking about. In fancy buzzword circles they might call it “using REST with Flash” or “creating RESTful urls that work with Flash”, or something like that (the key term being “REST”, which means having distinct urls for direct-linking to different states of a web-based application).

I. Using Flash’s frame anchors

The first way is one you can do within Flash itself, without needing any ActionScript. You can assign “anchors” to keyframes on the timeline. If you’re familiar with adding frame labels to frames, it works pretty much the same way:

1. Select the keyframe you want to be able to target
2. In the Property inspector enter the anchor text (the text that will be added to the url to link to the particular frame) in the “<Frame Label>” field
3. In the “Label type” drop-down choose “Anchor”
4. Finally, to make it work you have to open File > Publish Settings, and in the HTML tab, in the Template field, choose “Flash with Named Anchors”

To link directly to a particular keyframe, just use this format: “html_page_name.html#anchor_name” (replacing “anchor_name” with whatever name you gave the keyframe in step 2 above).

Admittedly I’ve never used this in production. I did a quick test and it seemed to work fine in Firefox 2.0 and Internet Explorer 6; but I couldn’t say if it will work in other browsers.

Also note that if you want to use frame labels (e.g. for ActionScript navigation) and anchors on the same frame #, you need to create them separately. In other words, you need a keyframe on one layer at that frame with the frame label, and another keyframe on another layer of the same frame with the anchor.

II. Using FlashVars and server-side code (url variables)

For a more involved (but well-tested) approach, you could use FlashVars with PHP to pass in the url. Basically you would make your html page url look something like this:

html_page.php?section=profile

The value that you pass in to the “section” variable could be a frame label, or just a value that you’re going to use in ActionScript somehow.

Then in the actual php source, in the part of the HTML that embeds Flash Player, you’d put something like this in:

<object ...>
<param name="FlashVars" value="section=<?php echo($_GET['section']) ?>" />
...
<embed ... flashvars="section=<?php echo($_GET['section']) ?>" />
</object>

(Note, I’m just writing this php from memory, and it’s been a while since I did php, so I may be putting the wrong thing there – but hopefully you get the idea).

If you’re using one of the JavaScript libraries for embedding the SWF, such as SWFObject or Adobe’s Active Content technique, those libraries already have built-in functionality for FlashVars, so you should be able to find examples of how you’d add the FlashVars with those libraries.

Anyway, that’s the HTML/PHP side of things. Back in Flash, on Frame 1 of the main timeline you’d add code like this:

this.gotoAndStop(section);

The variable named section is ‘magically’ created by Flash Player, as a result of the FlashVars code that was written into the html by php.

For more on FlashVars, you can see this post I wrote a while ago:

Using URL Variables and FlashVars

And you can see these slides/notes from a presentation I gave to an Adobe users’ group covering FlashVars and related techniques:

Slides and notes from “Flash to external data communication”

III. Using Kevin Lynch’s technique for making linkable Flash applications

Finally, there’s an even more complex but fancy and re-usable approach that was shared by Kevin Lynch, formerly of Macromedia and now Chief Software Architect for Adobe. It’s more involved code-wise, but it’s pretty slick:

Making Rich Internet Apps Web-Friendly

This technique (like the first one) doesn’t require anything special on the server – it uses JavaScript and ActionScript to do all the work. The advantage it has is that it updates the url in the browser window as you navigate around in the Flash SWF – so that not only can you have urls that link to different application states, but it’s easy and obvious to discover what those urls are.