Using Named Anchors in Flash

Named anchors have existed on the web since early iterations. They are used to jump between sections of one page, most commonly seen as “back to top” links linking to “#top”.
For an example of how named flash anchors work, you can view My installments.
Flash got the ability to use named anchors in version 6 (or MX), as part of a larger focus on usability. Macromedia promised the ability to deep-link, bookmark, and use the browsers “back” button.
While they, technically, delivered what they promised, it didn’t really work as well as it could have. Thus, I haven’t seen named anchors used in a Flash presentation… ever.
1. The Problem
Well, first of all, it doesn’t work in Mozilla out of the box. You have to script your way out of it, which I will explain later in this article.
Secondly, the “back-button”, doesn’t work properly. Quite simply, a history of visited anchors is not kept up to date, meaning the back button will take you back to the previously Flash-authored anchor, not the correct past history state. Additionally, due to the JavaScript nature of Flash anchors, the back button might not always refresh the content.
*Note:* While there are solutions to making the back-button work, they are fairly complex, and beyond the scope of this article. Instead, I’ll refer you to other articles at the end of this one, that may solve that problem.
Finally, and probably the most important reason for named anchors not being adopted, is that they link _directly_ to the frame that has the anchor, meaning that any actionscript, preloading & other use of non-linear animation in Flash will not be triggered. Fortunately, this issue can be solved.
2. Benefits
Despite the above-mentioned cons, named anchors are still worth your time, because:
# They add usability
The end user is used to how the browser works, not necessarily how Flash sites work. Using named anchors will bring the experience closer to how websites are supposed to work
# They allow bookmarking
Visitors will bookmark things they like. Maybe they’ve found an article, or an image they like, and they’ll bookmark it. If this bookmark doesn’t later on take them where they expect to go, it’s bad karma.
# They allow deep-linking
Today, many websites spread via blogs, instant messaging & email. If people can copy your URL and paste it into their email or instant messaging client, or link to it via their blog, they will. But only if the link is deep, meaning it will bring you to the location where they copied the URL.
# They do not interrupt the flow of Flash
Music can play un-interrupted over several named anchors, when running in Flash. This means that, without using HTML frames, you can link to new URLs in your document, yet not stop the music playing. This was the main reason for using named anchors in my installments.
3. Creating Named Anchors
Making named anchors in Flash is as easy as pie:

Quite simply put: when you make a framelabel in Flash, you can tick off the small checkbox below the label name that says “Named anchor”. This will make the framelabel look like this:

For Internet Explorer only users, this is all you have to do.
3.1. Making it work in Firefox and other browsers
By default, the above mentioned code works in Internet Explorer.
For it to work in Mozilla and other browsers, we need to do some simple javascripting.
First of all, we need the script. It’s built-in to one of the Flash Publish templates, so let’s use that:

Publishing with this template, will add the following code to your document:
// This is only needed for Netscape browsers.
function flashGetHref() { return location.href; }
function flashPutHref(href) { location.href = href; }
function flashGetTitle() { return document.title; }
function flashPutTitle(title) { document.title = title; }
This javascript (when invoked) changes the addressbar to reflect the framelabel we’re on, as well as change to document title.
I personally added this code as well:
// Store document title so we can retrieve it docTitle = document.title
It stores the current document title in a variable. The reason for this is, we’ll be changing this document title later on to reflect the named anchor. But instead of replacing the entire document title, we’ll just add it to what is already there.
With this javascript added, we’re close to the goal, but not there yet. We must call upon this javascript from within Flash. To do so, add this action to every anchor frame you have:
getURL("javascript:flashPutHref('#myframelabel');flashPutTitle(docTitle+' - myframelabel');");
… replace “myframelabel” with the label name of the anchor frame.
This code works in mozilla, but breaks Internet Explorer. What now? We must make sure this code is only run when not on explorer.
After some testing, I’ve found that systems that do not have “accessibility” usually need the code. Thus, the following code will make sure the javascript code is only run on systems that need it:
if(System.capabilities.hasAccessibility != true) {
getURL("javascript:flashPutHref('#myframelabel');flashPutTitle(docTitle+' - myframelabel');");
}
Perfect! This code will manually change URL and Title to reflect the framelabel we are on, but only in browsers that doesn’t do it automatically.
3.2. Update, May 6th 05: The Problem with Safari
Recent events have shown that Safari is having problems with deep links to named anchors. To put it simply, if Safari directly visits a named anchor such as @flashcontent.html#named_anchor@, it will go into an infinite loop. It seems that the either there is a bug in Safari, or it is simply the only browser that has problems with the JavaScript mentioned in section _3.1_. I hope to find a solution to this in the future. Until then, a quick fix is to use the following ActionScript in place of the ActionScript mentioned in the end of section _3.1_:
theOS = $version.substr(0,3)
hasAccessibility = System.capabilities.hasAccessibility
if(theOS != "MAC" && hasAccessibility != true) {
// Safari can't handle anchors, so we'll disable'em
getURL("javascript:flashPutHref('#"+theImage+"');flashPutTitle(docTitle+' - "+theImage+"');");
}
4. Utilizing “frame 1″ actionscript when using named anchors
As mentioned, Flash jumps directly to the named anchor, and skips any initial actionscript. This is a serious problem when working with actionscript. Nobody wants to have a new copy of all your actionscript on every named label…
The solution to this is using the benefits of the named anchors, but not following their rules to the dot. For instance, in the named label frame, type down a variable containing the name of the label, and send it to frame 1. Frame 1 will then distribute accordingly.
For instance, frame 5 has the named anchor “gallery”. When linking to mypage.html#gallery, it jumps directly to this frame. But gallery needs the actions in frame 1 (which it skipped jumping there). So instead of having the “gallery” framelabel actually be in the “gallery” section, we merely make it a dummy frame that stores where we want to go, and goes there later on. To do this, we type the following code in the dummy “gallery” frame:
theFrame = "gallery"; gotoAndPlay(1);
This stores the name of the frame we landed on in a variable, and manually proceeds to frame 1, where it gets all the actionscript it needs. Now that it has this actionscript, we want to send it to the REAL gallery section. To do this, we could use the following code:
gotoAndStop("real_"+theFrame)
This would send us flying to the frame label called “real_gallery”, just like we wanted from the beginning. This combines the best of two worlds.
5. References
* How to make the back button work in Flash, by Robert Penner.
If you want the back button to work perfectly, it currently seems as though the best solution is to use Flash’s @localConnetion@ (Thanks Udo).
* Enabling a back button within Flash
(Thanks Jason)
* Macromedia: Pet Market Back Button
(Thanks Udo)
6. Conclusion
Flash’s Named Anchors feature indeed promised more than it could deliver. Even so, with some work, some patience and a little help from your friends, they can help out immensely.
It is also important to note, that if you don’t mind that it won’t work on all browsers and the back button behaves a bit strangely, then you don’t have to read past section 3. It really should be enough.
Let’s hope that’s the case for all browsers in the future.
- Making IE Specific CSS or Code (Conditional Comments)
- Using Named Anchors in Flash
- Fahrenheit 9/11
- Myst IV
The Actionscript to jump between scenes is:
gotoAndPlay("name of the scene", framenumber);
All the other stuff (creating scenes...) you do with the frame-inspector (window->scenes) (Flash MX)
Quote
There is
nextScene();
too!
Quote
May 6th 2005,
Quote
thanks for that Joen - any ideas re: firefox problem though? (comment 18)
muchas gracias...
Quote
Udo - earlier you were asking about the localConnection problems with two browsers (IE & Firefox). I refer you to http://www.mustardlab.com/developer/flash/jscommunication/ for more information (Under the Heading "Important Information"). In short, localConnection is shared across browsers by the movie's ID. There's probably a work around, but in most real world cases it works as it should.
Quote
Semi-related comment. I'm using a flash app. created by airtightinteractive (.com) called Simple viewer. Now its an image gallery that works great, reading image info from an xml file (image name/url, caption etc.). A typical xml entry looks like this Whatever.jpgSomethin. Where this relates to this article is that Simple Viewer can process CDATA info (i.e. html tags---such as links..with anchors!) in the caption section of each image. So, the Flash reads the xml file and pulls an image url and in my case a caption with an anchor link, and loads it all into the movie. However, when using anchor links, for instance, a caption refers to a given file index.html#whatever, IE and apparently only IE (not Firefox) refuses to process the anchor part of that link and returns the user only to the index.html file. As mentioned, Firefox actually returns the proper link including anchor. So to recap, Flash loads the XML w. CDATA within, Flash processes, dynamically loading jpgs with associated captions and links including anchors but IE fails to use these anchors. I assume therefore that this is an IE only problem, that when Flash has a link to an HTML page within it it doesn't process the anchor part of a given url. Possibly IE requires a more definite absolute url? Irritating in the extreme. Any ideas? Thanks a bunch.
Quote
Hi there,
just a qn here. Is it possible to link from say a button in frame 1 to a specify text in frame 8? I am quite new to flash. I have already got a link from frame 1 to frame 8. Just that I would like to link it to a specify text like what we do in html by using anchor. Was thiinking am I able to do it in flash?
thanks
Quote
http://blixt.gotdns.com/blixt/index.html#ss=pid&pid=14&page=download
maybe a new lead to this old thread?
Quote
Gareth,
Very interesting. It's not quite working completely yet, but what I'm the most interested in from that example is not the fact that the back button works, but rather how he can send information directly into Flash using the query string, without reloading the Flash!
I'll take a closer look at that. Thanks for posting the link.
Quote
Joan,
yep pretty cool! also found this on my travels:
http://www.unfocus.com/Projects/FlashSuite/#Home
Quote
Something I am running into: I have several pods on one page and each pod has video house in them with a link to the FLV's. So far it moves the user to the top. However if I exceed clicking more than 2 or 3 times - it takes me to a white blank page in IE with errors.
What I notice is; it is cycling though page titles as if each time it refernce another name
i.e
Original page title: My site (first click)
on second click it changes that to site
and on third click I get that white page.
Somehwere when it runs through the code I get an error.
This is what I have in my flash movie on each button
loadMovieNum(links[p], 2); // This loads my movie
getURL("javascript:flashPutHref('#top');flashPutTitle(top+' - top');"); // this takes me to the top
HELP!!! driving me nuts
Quote
a pretty impressive solution at last!
http://blog.jensfranke.com/2006/02/11/orange-project-%E2%80%93-the-technical-view/
Quote
Yes! the orange project site implements a solution that I've been able to use.... to finally make forward/back and bookmarking happen in a dynamically loaded flash movie!!!
The solution combines
the history keeper thing
of Kevin Newman, which is used on the orange project site
and Flash 8's new ExternalInterface class
link here
if people are interested in knowing how it was done please let me know. It's late and I don't have the time to describe it all at the moment... lots of javascript wrangling...
But I'd love to save other people time.
Also: the method really isn't perfect. For instance if you try to use the orange project site for a while I'm sure you'll see little flaws here and there with the history mechanism. It's better than anything so far though!
Quote
Hermes said:
Personally, I'd like to know, and I'm sure a lot others would also.
If you want to write an article on your own website (if you have one), I'd be interested in prominently linking it from this article.
Otherwise, you'd be welcome to "guest author" content for this very article, seeing as it's fairly highly ranked in Google.
You could, of course, also write up your response in the comments here, but if it's really a good solution, I think it would be worth moving it to the top :)
Let me know.
Quote
Hi,
i would love a in-depth tutorial :-) i hate the fact that flash sites break this basic browser rule.
cheers,
Gareth
Quote
Thanks for the link. The History Keeper thing looks like it's gonna go far as soonas it's issues are sorted out.
Do you have a working example of the method that you can share, and also explain how one would edit it, etc?
Help would be appreciated. I downloaded the History Keeper files but unfortunately I don't know how to modify them :-(
Thanks again...
Quote
even though i truly appreciate all the help you provide above, i am getting an flash script error for v3.2. the error occures in the "if(theOS
= true) {" line. the error description says: Operator '!=' must be followed by an operand.
please advise.
thanx,
Quote
Dont waste your time like i did trying to replicate this old fashion way
(what doesn't work by the way)
Just visit this tutorial
http://www.gotoandlearn.com/play?id=107
it does everything and more
Quote