TechNote (Archived)

How to make a 'Back' button in a SWF file

A Web browser's 'Back' button is useful because it remembers each page that was visited, and you can trace your path back through pages. The 'Back' button remembers new HTML pages, though, and it won't help navigate items that are within a single HTML page. For instance, it can't navigate within a single SWF embedded in an HTML page.

Note: This TechNote is specific to Macromedia Flash 5. Named Anchors were introduced in Macromedia Flash MX. Named Anchors let developers select which frames the browser's 'Back' button will return to in a SWF. Named Anchors also allows "bookmarking" of selected frames in a Macromedia Flash animation. For more information on Named Anchors refer to the Macromedia Flash MX documentation (Help > Using Flash) under the chapter Working in Flash > Using frames and keyframes.

With the scripting in Macromedia Flash 5 it's simple to make a 'Back' button. But a continuous SWF is different from a series of separate HTML pages, because not every frame of the SWF is of interest. This implies that there are two distinct tasks: sending a message when a new interesting frame has been reached, and then actually going back to the previous interesting frame.

Although each movie would differ, particularly when navigating among multi-level movies, the following simple example shows these two main tasks in a single timeline. There are three steps.

Steps to make a 'Back' button:

In the first frame of the movie, initialize an array which will hold all the interesting frames that were visited:
```
 navStack = []; 
```
In each interesting frame, have a script add the current frame number to the list of interesting frames that were visited:
```
 navStack.push(_currentFrame); 
```

Attach the following script to the 'Back' button that sends the playback head past the most recent interesting frame to the previous interesting frame:

 on (release) {    if (_root.navStack.length > 1) {       recentFrame = _root.navStack.pop();       previousFrame = _root.navStack.pop();       goToAndPlay(previousFrame);    } }

How it works

When the movie plays, an array called navStack is created, and each interesting frame adds itself to this array as it's played. When the 'Back' button is pressed the script checks that there are enough bookmarks for meaningful navigation, then pops and discards the current starting point before jumping back to the previous interesting frame.

This is a simple example, and there could be more complex variations in more complex structures, but shows how to add interesting frames that were visited to a stack, and then to jump back to a previous interesting frame.