“Deep-linking” to different frames/states in a Flash application

Posted December 14, 2006 11:52 am
Filed under: ActionScript, Articles by Paul, Flash, Tutorials, User-centered design

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.

You can leave a comment, or trackback from your own site.

27 Comments so far

  1. December 14th, 2006 at 12:14 pm
    David is reported to have said:

    Also, check out: http://joeberkovitz.com/blog/urlkit

    Regards,
    David

  2. December 14th, 2006 at 12:46 pm
    Richard is reported to have said:

    Or http://www.asual.com/swfaddress/

  3. December 14th, 2006 at 1:06 pm
    Paul Neave is reported to have said:

    There’s also HistoryKeeper: http://www.unfocus.com/Projects/HistoryKeeper/

  4. December 14th, 2006 at 1:21 pm
    nyë is reported to have said:

    In my opinion, best way to have deep linking in Flash is using SWFAddress, It’s opensource, easy to use, works on most browsers,…
    I’m using it in my new site (still not finished) and it’s cool!!

    Bye! ;)

  5. December 14th, 2006 at 2:53 pm
    Algis is reported to have said:

    Yes SWFAddress rocks. I made full flash blog using it. You can have a look at it here: http://www.blog.incito.lt

  6. December 14th, 2006 at 3:21 pm
    Bill Napier Design » Blog Archive » Deep Linking into Flash is reported to have said:

    […] Want to learn some techniques for linking to a particular frame or anchor? Paul Robertson details how to deep link to Flash on his blog today. […]

  7. December 14th, 2006 at 3:22 pm
    Bill Napier is reported to have said:

    Paul,

    Cool summary! Thanks for listing these …

  8. January 6th, 2007 at 9:14 am
    flasher is reported to have said:

    In the past I was using frame anchors but I found them to be alittle buggy sometimes it worked and sometimes it didnt!

  9. April 14th, 2007 at 3:37 am
    linking to specific frame - kirupaForum is reported to have said:

    Kramer auto Pingback[…] Nevermind. It was a jargon issue. It’s always a jargon issue it seems! http://probertson.com/articles/2006/…cation-states/ […]

  10. May 3rd, 2007 at 10:32 am
    Adobe - Flash General Discussion is reported to have said:

    Kramer auto Pingback[…] Try this one, it’s a bit more clearer. http://probertson.com/articles/2006/12/14/deep-linking-flash-application-states/ […]

  11. May 21st, 2007 at 10:53 pm
    accessing frame from outside of flash - ActionScript.org Forums is reported to have said:

    Kramer auto Pingback[…] I swear i’ve seen that somewhere before..im looking. mcm I found something that should help […]

  12. July 1st, 2007 at 11:06 am
    sohail is reported to have said:

    I want to build an application which would
    allow people to upload a photo and then manipulate it online. Kind of
    like the Liquify filter in Photoshop.
    Hers is an example i found by inmind: http://www.kirupa.com/developer/mx2004/liquify.htm
    The idea being that anyone
    could upload their photo and change things like nose shape or other
    things on the image. Then I’d like them to have the ability to
    download the image they just created along with their before image
    next to it.

    The question is, can this be done in Flash or some other application?

  13. July 18th, 2007 at 7:12 am
    gotoAndLearn() Forums • View topic - 2A website browse trough address bar navigation is reported to have said:

    Kramer auto Pingback[…] you guys can help me out witht he best solution . i already found a few links in google like this..http://probertson.com/articles/2006/12/ … on-states/any more help would be greatly […]

  14. August 8th, 2007 at 4:16 am
    SparkDigital is reported to have said:

    Excellent summary, thanks. I’m struggling with the following though, maybe someone can give me a hand:

    I created a flash header encorporating the navigation with the main sections of the website represented (have a preview on http://preview.hosts.co.uk/~swinsidelodge-hotel.co.uk/index.php) but would like to play a set number of different frames depending on which section the page is in. The site uses one php template for all pages and has a cms where (sub)pages can be created.

    Is there any way to write the flashvars so that it picks up in which section (each section is in a different folder on the server) the page is and make it play the appropriate frames?

    Thanks,

    Konrad

  15. August 20th, 2007 at 10:41 am
    Paul is reported to have said:

    (I already replied to Konrad by email, but I thought others might be interested in the reply, so I’m re-posting it here as well.)

    @Konrad:

    Just to make sure I understand, it sounds like you’ve got the same .swf file used in various html pages, which are in different folders on the web server, and you want the swf file to play different frames depending on which html page it’s playing in.

    It sounds like you’re already on the right track, since you mentioned FlashVars — that’s probably the best way to make the same swf behave differently in different html (or php, or whatever) pages.

    It sounds like you’re using a single php file as a temple, that controls the header part of the page. If you can change the php code of the template or pages directly, you could write some php that checks the containing folder, and writes a keyword (or even a frame #, or whatever) into the FlashVars part of the HTML that embeds the swf in the page. You could then use ActionScript to check for that word or number in your SWF, and jump to the appropriate frame. I’ve written some information about working with FlashVars here, that includes some examples of something similar:
    http://probertson.com/articles/2005/02/14/flash-databases-urlvars-flashvars/

  16. September 4th, 2007 at 1:57 pm
    mustcodemore.com: 04.07 is reported to have said:

    Kramer auto Pingback[…] Deep linking to flash from HTML […]

  17. September 10th, 2007 at 11:13 pm
    stefanmedia » Blog Archive » Deep-linking within Flash websites is reported to have said:

    Kramer auto Pingback[…] there was a blog posting about “deep-linking” to different frames/states in a Flash application. What’s cool about […]

  18. September 22nd, 2007 at 12:04 am
    Steve Mac is reported to have said:

    I use SWFAddress for deep linking in flash, above all the best feautre i like is, it supports all new and old browser and firefox, easy to use.Excellent summary, thanks

  19. October 2nd, 2007 at 8:07 pm
    David Stiller’s blog » Blog Archive » How to Build an Interactive Flash Video (FLV) Load Progress Bar is reported to have said:

    Kramer auto Pingback[…] The key is to interact with the HTML page itself, whether by PHP or some other server-side language, as described here … http://probertson.com/articles/2006/12/14/deep-linking-flash-application-states/ […]

  20. November 17th, 2007 at 3:39 pm
    Can you link from HTML page within a labeled frame inflash 8? - Web Hosting Forum - Industry Discussion, Webmaster Forum is reported to have said:

    Kramer auto Pingback[…] Re: Can you link from HTML page within a labeled framein flash 8? Try this one, it’s a bit more clearer. […]

  21. June 11th, 2008 at 4:09 am
    Gavin Adams is reported to have said:

    I was trying to create an anchor link using Mx2004 and I was having no luck until I realised that the anchors need to be on the main screen and not hidden in movies within the scene.

    I therefore created an anchor and then ran a gotoandstop command to the movie and frame name.

    Example.

    Scene : Main
    Frame : 5
    Anchor : Comp
    Action : Pages.gotoAndStop(“Comp_01a”);

    Once I had made sure the “Pages” movie was available on Frame 5 all worked.

    You still need to set the HTML template to “Flash with Named Anchors”.

  22. July 22nd, 2008 at 2:34 pm
    torinkropp.com » Tips and Techniques » Deep-linking flash states is reported to have said:

    Kramer auto Pingback[…] http://probertson.com/articles/2006/12/14/deep-linking-flash-application-states/ […]

  23. October 22nd, 2008 at 7:31 am
    george fasal is reported to have said:

    the first method outlined does work, however this is only true if your flash file is on one long scene and not within a movie clip. i would wonder if it is possible to redirect to a sub scene or a frame within a movie clip that is lower in the hierachy on the flash swf

  24. January 1st, 2009 at 6:28 pm
    jojo is reported to have said:

    i have made a flash movie that i want to be able to link to from an external html file. i managed to get this to work by using flash anchors - not as hard as i would have thought, hurrah! but when i use the links, while it jumps to the correct spot in my movie, the rest of the buttons in my flash movie stop working so i can’t navigate within it any longer.

    i don’t understand why this happens because the movie works fine when i don’t access it via the html links.. and anchors are sending it to a certain point of the movie that i know works, not a new and untested spot…

  25. March 23rd, 2009 at 11:45 am
    Website created in flash... just have 1 issue... please help. - Graphic Design Forum is reported to have said:

    Kramer auto Pingback[…] It IS possible, here are a couple resources… http://www.adobe.com/devnet/flash/ar…p_linking.html http://probertson.com/articles/2006/…tes/#flashvars […]

  26. June 9th, 2009 at 4:13 am
    gotoAndLearn() Flash Forums • View topic - 2A website browse trough address bar navigation is reported to have said:

    Kramer auto Pingback[…] you guys can help me out witht he best solution . i already found a few links in google like this..http://probertson.com/articles/2006/12/ … on-states/any more help would be greatly appriciated-rth […]

  27. June 29th, 2009 at 8:27 pm
    HTML link to FRAME in SWF - ActionScript.org Forums is reported to have said:

    Kramer auto Pingback[…] Try this link. […]

Add your comment





Comment notes

Please keep comments on topic. Comments that are inappropriate or offensive will be edited or removed.

Paragraphs and line breaks are automatically converted to HTML, and quotation marks are converted to “smart” quotes.

The following XHTML tags can be used: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . All others will be removed.

Articles by Type

Articles by Topic

Random Reading

Currently...

Subscribe