This site is now just an archive over the rise and fall of Flash. The domain flashmagazine.com is available for sale
Login | Register

Working with dynamic anchors

Using Flash MX, you can enable the browsers back and forward buttons. Unfortunately, Flash MX cannot create anchors dynamically. There are still ways to build dynamic sites with this feature, but you need to know a few things.

Anchors are widely used in HTML to send the user to a specific place in a document. The most common use for this is a "Take me to the top"-button at the end of a page. Clicking the link will move the browser window to the top of the page (or wherever the anchor is placed). Using Flash MX, we can use anchors in Flash too. Check this tutorial for a brief introductory to anchors in Flash.

The following are problems I solved when working on a site using both HTML and Flash, pulling data from a common database. The Flash site was to have the same functions as the HTML site, so back and forward buttons was desired.

There are several problems to solve when using anchors with dynamic sites:
1. Not all browsers support this feature
2. The anchor names cannot use spaces and what you call the anchor name will be part of the users address bar/bookmark
3. If a user bookmarks a frame, exactly this frame will be opened when the movie loads the next time. For static Flash files this is fine, but for dynamic files it's a pain.

1. Detecting browser support
First, you'll need to detect if the users browser supports the use of anchors. There's no certain way to do this, but I've figured that browsers that support accessibility will most certainly also support anchors.

 

if(System.capabilities.hasAccessibility){
     do something
  } else {
    do something else
  }


At the moment, only IE supports the anchors feature, so all other browsers must get somewhat alternative content.

An anchor is nothing but a frame label with the small box below the frame label ticked. Problem is: browsers not supporting anchors will get problems if they enter a frame containing one, so you will have to put the anchors at the far end of the timeline and content for all other browsers at the start of the movie.

2. No spaces in names
If your anchor name contains spaces, the browser will fail to load content properly. Not too hard to fix as you can always use the underscore character instead, but the name will also be added to the users bookmark. If your HTML page has the title "FlashMag" and the frame is called "First_frame", the bookmark will read FlashMagFirst_frame". Make sure that the HTML page title has a space after it's title and choose generic anchor names like page_1, page_2 unless you do specific things on each frame rather than browse "pages".

3. Fixing the timeline
Before I added back-button support, I would just call a makePage-routine to draw the desired page when the user clicked the menu or a link. Now I would have to do this differently. As said before, FMX cannot set the anchors dynamically, so you will have to set up your movie with a lot of manual anchors with generic names. I chose to add about 35 of them, hoping that nobody would browse more than this.

Every time the user request a page the playhead should move forward to the next anchor on the main timeline and thus enable the back-button. To keep track of the history of pages, I added an array with the page IDs and moved my makePage-routine to each of the anchor frames. This way, the

 

if(_root.makePageOffset){
 makeApage(_currentframe-_root.makePageOffset);
} else {
 gotoAndPlay(1);
}


Notice in the code above that I ask for the existence of the variable makePageOffset. If this variable is not set, the user has entered the page from a bookmark. Doing so moves the playhead in the Flash movie to that anchor and thus bypasses all the code in the previous frames. This makes all scripts fail as they have never been run, so checking for the existence this variable will save the day in those cases.

Wrapup
There are obviously a lot more to making dynamic sites than this, but the notes above should save you some troubles when trying to accomplish the task of enabling the back-button for this kind of sites.

If only Macromedia will allow for spaces and dynamically named anchors, this may become really useful and common in Flash-only sites and applications.

If you wish to add to this article with your own experiences, contact the author from the link above.

 

About Jens C Brynildsen

Jens has been working with Flash since version 3 came out. Since then, he's been an active member of the Flash community. He's created more than a hundred Flash games (thus the name of his blog) but he also creates web/standalone applications, does workshops and other consulting. He loves playing with new technology and he is convinced that the moment you stop learning you die (creatively speaking). Jens is also the Editor of this website.

Get new stories first

Click to follow us on Twitter!

 

Comments

No comments for this page.

Submit a comment

Only registered members can comment. Click here to login or here to register