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:
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:
- Select the keyframe you want to be able to target
- 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
- In the “Label type” drop-down choose “Anchor”
- 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:
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).
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:
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