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
Just thought I’d comment that flash seems to register each and every named anchor as it goes through it. So if you have 4 named anchors and jump to the last one you will have 1, 2 and 3 in your history as well.
This seems to be a fundamental flaw and makes me wonder if it’s only me who’s seeing this behaviour. In IE if you the ‘click’ sound turned on and select the fourth button to jump to the fourth named anchor then you can audibly hear it clicking several times.
I am aware of the history problem—but indeed your comment does shed some light on it…
I honestly thought that it had something to do with the “numbers” in the anchor name—appearantly not!
Thanks for your comment! The first step in solving a problem, is identifying it!
Update us if you do, I’ve been investigating it, but it seems to be the way that flash reads anchors on the timeline, sequentially, no matter if you’re jumping straight to one particular anchor, it runs thru them all. There must be a way around it, but it would explain why no one has really exploited named anchors for linking.
I have been building a site using something similar to teknision’s method of accessing the ‘hash’ property of the location object, but IE is the only browser that recognises that property and recently I switched my browser to firefox and feel guilty about making IE-only features!
I’ve only been using Flash for a little less than a year, and since near to the beginning flash anchors have befuddled me. I seem to be following the process, but for some reason it doesn’t work (so I’ve decided that I’m making some horribly stupid error and need help).
Essentially, whenever I create a keyframe and set it as named anchor, linking ‘page.html#anchor1′ always fails me and brings me to the first frame of the document. I’ve tried it with versions of Flash MX on my OSX and my XP, and with IE 5 and Safari for the mac and IE6 on my XP (I think). So far, every one of my attempts is unsuccessful in even the most basic of forms (without attempting any additional coding).
What could I be doing wrong, here?
Hmm. Very strange, especially since you’ve tested it for IE6 Windows.
Basically, it’s supposed to just work out of the box in IE6 Windows:
I mention this, because if it doesn’t even work in IE on Windows, then there is something wrong, and I don’t know what that is. Indeed making named anchors work in other browsers take a little more work, as mentioned in the article—but IE should be straightforward.
Some funny thing happened to me with the example of robert penner (which is linked in the article): it doesn’t work with netscape7.2 and firefox1.0 on winXP SP2, but if you open it in the internet explorer and netscape at the same time, any navigation in the netscape-window causes the explorer-window to navigate almost simultaneously. Even more funny: the Netscape – forward / backward – buttons don’t work in netscape, but the explorer! For example, if you click 3 in netscape, both ie and netscape go to 3, then if you click the backward – button of netscape, the explorer-flash-movie goes back again (to maybe 1)! Maybe a localConnetion bug?
The URL I got from your link (above) to the Penner Article was:
http://www.robertpenner.com/backbutton_mx/
It yielded a slightly incomprehensible frameset. But I found this on a subsequent Google search:
http://www.robertpenner.com/experiments/backbutton/backbutton.html
And obviously we all have the same access to google, but for what it’s worth here’s another promising page:
http://www.actionscripts.org/tutorials/intermediate/Enabling_a_back_button_within_flash/index.shtml
Good luck!
Hi again!
For me, this example
http://www.robertpenner.com/backbutton_mx/
doesn’t work with Firefox and Netscape, the forward / backward – buttons simple have no effect at all. And if I follow the instructions of this article it doesn’t work either, the javascript is executed correctly (flashPutHref() and flashPutTitle() do what they should, but the forward / backward buttons still have no effect on flash).
I tried to reproduce this strange explorer/netscape- behaviour of the localConnection – solution of Robert Penner, this morning it worked as I described above (the two different browsers seemed somehow “linked”, backward-button of netscape made the explorer react as netscape should… ) but now the explorer doesn’t work and netscape does fine.
I never experienced something like that, it’s strange, isn’t it?
Did anyone check the anchor-stuff with safari? For me (Mac OS 10.3, Safari 1.2) the only one that really works is robert penners solution with the localConnection – hint (this one: http://www.robertpenner.com/backbutton_mx/ ) but NOT the javascript – solution you can find at his website ( http://www.robertpenner.com/index2.html ), http://www.group94.com/ doesn’t work and the installments here don’t work either ( flash seems to run through all frames without code, as if you load an image in _root, which smashes all actionscript, too ).
Thanx for any idea!
Hi,
udo so how does robert penners localConection soloution actually work and is it totally cross browser compatible?
OK, seems like safari needs the localConnection, here’s the solution:
http://www.macromedia.com/devnet/mx/blueprint/articles/back_button.html
My installments doesn’t work on Safari !?
I’d love to be able to fix this: can you elaborate? Do they not show up at all, or is it “just” the back button / named anchor parts of it that borks?
And would this solution work?
Hi joen: its only the back-button, that don’t work, but if you use it, it crashes the whole flash. That’s the same effect I had using your netscape – workaround (thanx for the System.hascapabilities – idea anyway). in detail: if you navigate using the flash-navigation (1-2-3-4) everything is fine. but if you use the back-button after this, it’s like if the whole actionscript is deleted and flash runs through all frames looped… looks real flashy ;)
the workaround which works on safari is similar to the hidden-frame-with-javascript-solution of robert penner, the difference is: in the hidden frame theres a hidden flash-file, which uses a localConnection to communicate with the original flash. I didn’t try it out, but there’s a pretty cool explanation at macromedia:
http://www.macromedia.com/devnet/mx/blueprint/articles/back_button.html
The html-anchors like
http://www.noscope.com/journal/2004/04/named_anchors#comment-1735
work fine with safari
Goddamn you Safari! I really don’t have time to fix for a browser I can’t even test in! Why can’t it just work !?
But thanks for telling me, I’m glad Safari users can atleast SEE the installments.
Yep, sometimes you spend more time browser-bullshit-bugfixing than developing your application, it really sucks. But normally Safari is quite straight with everything.
In the hopes of saving someone else time…
I’ve spent the last 3 days trying to find a different solution to forward/back/bookmarking. And it didn’t work. I wanted to make a solution where named anchors could be simulated, so that content can be loaded dynamically and not need the named anchor frames to be there beforehand.
It kind of makes sense that this should work, right? If a browser is sent to its current url with a hash on the end, the browser should NOT reload, thus NOT disturbing the playing flash movie. Yet that hash should be retrieveable and sent to the flash movie, so the flash movie can tell itself where to go to…but again: it didn’t work.
Here’s what I tried to to:
In the browser:
The browser starts out by seeing if there’s a hash ‘#’ in the url. If there is then send that variable to the flash movie via a technique at : http://www.mustardlab.com/developer/flash/jscommunication/
(the reason for using this technique was to try to get around the javascript/Mac communication issue. It didn’t work though…but that wasn’t the bigger problem)
Regardless of whether or not the browser finds a hash it sends a message to the flash movie telling it that the flash movie can now start (again: message sent via the method described at the url above).
Inside the flash movie:
At first when the movie starts out it waits to hear from the browser, to see if this was a retrieved bookmark.
On every frame there’s a function that checks the global variable telling the flash movie what virtual named anchor it should go to.
If the movie determines that it should go to a new virtual named anchor it then tries to change the url and title of the browser. It makes the title something appropriate, and it adds a hash to the url that’s appropriate, so that if the user bookmarks the current state of the flash movie, if that bookmark is retrieved later the flash movie will know what to do with it.
And THAT’S where the bigger problem was: trying to change the url and title of the main browser window.
I found that in IE6 PC (didn’t test others) once any javascript call is made beyond the initial javascript execution you CANNOT change the document’s title. Secondly in IE6 PC you cannot change the hash properly, seemingly for internal security purposes. For my purposes this was the piano that finally broke the camel’s back. I tried to make gotoAndStop() calls within flash to force IE to display a hash in the browser’s url. However the anchor frames always needed to be in the timeline before the movie started, thus foiling my attempt to load them dynamically at runtime.
I was able to get it functioning perfectly under both NN and firefox for the PC. The key ended up being writing all of the virtual named anchors into the .html file from the database (with .php in my case) as named anchors (<a name="put the name here so the hash geturl doesn’t break"></a>).
As stated above, for some reason nothing ever worked on the Mac, though I was expecting that using the communication technique listed above would. I never got far enough to debug that though once things were solidly NOT working in IE6.
Note: using Flash MX 2004
-Hermes
gah! so near and yet so far…
This would be such a cool thing to be able to do, but it is frustrating the hell out of me!
Following your tutorial IE will only link to example.html#one once.
eg. in a set of four html links: example.html, example.html#one, example.html#two, example.html#three, I can go to anchor one, but thereafter none of the other links work except for the link to the page itself with no anchors. Once I click the ‘vanilla’ link with no anchor I can then click an anchored link and it will work once only…
In firefox, everything seems to work (showing the local anchor #’s in the address bar) but will only show the updated title & frame of the flash file if I hit refresh….
The only thing I can thank that I have done that is different to your ‘installments’ is to link to the flash file from an html page rather than from the flash file itself, but this shouldn’t be a problem should it? – It kind of being the whole point of the excercise!
thanks for any ideas… you’re doing a great job by posting this tutorial anyhow!!
:)
em
Ha – ok I was being a muppet with the IE problem: instead of replacing the first example of anchor frame code with the second ‘System’ bit, I added to it..
oops…
Firefox still not behaving – could it be a recent thing as I just updated FF to 1.0.3 tonight….
thanks for any help…
Hi!
Did anyone play around with the localConnection – in – hidden – frame – idea? OK, it’s frame – stuff, but I found it works pretty cool on all browsers I tested, without javascript…..
tute:
http://www.macromedia.com/devnet/mx/blueprint/articles/back_button.html
Any negative experience with that?
does anyone know how to use scenes in flash jumping from one scene to another? would you care to share it with me? plz..
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)
There is
nextScene();
too!
May 6th 2005,
thanks for that Joen – any ideas re: firefox problem though? (comment 18)
muchas gracias…
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.
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.
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
http://blixt.gotdns.com/blixt/index.html#ss=pid&pid=14&page=download
maybe a new lead to this old thread?
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.
Joan,
yep pretty cool! also found this on my travels:
http://www.unfocus.com/Projects/FlashSuite/#Home
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
a pretty impressive solution at last!
http://blog.jensfranke.com/2006/02/11/orange-project-%E2%80%93-the-technical-view/
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!
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.
Hi,
i would love a in-depth tutorial :-) i hate the fact that flash sites break this basic browser rule.
cheers,
Gareth
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…
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,
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