Preparing the Timeline and Naming Anchors
When you begin a Flash MX project that needs to be bookmarkable, the first thing you should think about is how the timeline will support that functionality. The key to smooth navigation is the careful placement of blank keyframes and the proper labeling of those frames as anchors. In practice, you want a clean, predictable sequence that the browser can reference when the user clicks back or forward.
Open your document and create a new layer called Anchors. This layer will be the backbone of your navigation system. Insert a blank keyframe every five frames along the timeline. The choice of five frames is arbitrary; the important part is consistency. By spacing keyframes evenly, you give yourself a predictable pattern to follow when assigning anchor labels. If your movie has a different pacing, adjust the interval accordingly, but keep the spacing uniform throughout the piece.
Click the first keyframe in the Anchors layer and open the Properties panel. Here you will assign a label to the frame. In this example we’ll use the labels 1, 2, 3, and 4, but you can choose any naming convention that makes sense for your project. When you type the label, look below the Instance Name field and select the drop‑down option labeled Label Type. The default is “Frame” – change this to Anchor. This switch tells Flash that the label represents a named anchor rather than a simple frame reference. Forgetting to change the label type will cause the back button to fail, because the browser will not recognize the anchor during navigation.
Proceed through the rest of the keyframes, giving each one a sequential label and setting the label type to Anchor. The result is a series of named anchors spread evenly across the timeline. Once you’ve done that, save the file. At this point the Flash movie contains the metadata needed for anchor navigation, but you still need to give the audience a way to trigger those anchors.
To help the user understand where they are, add a second layer dedicated to visual markers. Name this layer Sections. Place a text field at the top of each anchor frame and type the corresponding section number or title. You’ll see a small box of text change as you move from frame to frame. This is purely for visual debugging during development; you can hide the layer later or replace the text with images if that suits the design better.
Now you’re ready to add the buttons that will allow the viewer to jump to each section. Create yet another layer called Navigation. Draw a square for each anchor you defined, then use the Convert to Button command (press F8) to turn the shape into an interactive object. Repeat for all four squares. When you’re finished, your timeline should contain three layers: Anchors, Sections, and Navigation
With the buttons in place, it’s time to attach the actual navigation logic. Double‑click each button to open the Actions panel. In the first button’s script area, enter the following code: on ( press ) { Replace “1” with the label of the frame you want the button to stop at. For the second button, use “2”; for the third, “3”; and for the fourth, “4”. These labels should match the ones you assigned in the Anchors layer. The gotoAndStop command is the core of the navigation; it tells Flash to jump to the specified anchor and pause, making it easy for the browser to pick up the new URL hash. At this stage your movie is structurally ready for anchor navigation. You have a series of labeled frames, visual cues to aid development, and clickable buttons that trigger the named anchors. The next step is to configure the publishing options so that the browser can recognize and use the anchors when the movie is loaded. Before you publish, consider adding a quick note to each button’s help tooltip, such as “Click to jump to section 1.” While not strictly necessary, it helps the user understand the purpose of each control, especially if the button design is minimalistic. When the movie is played, you will notice that clicking a button jumps the timeline to the correct frame, and the browser’s URL updates with the corresponding anchor (for example, Although the Sections layer was introduced earlier as a debugging aid, it can be turned into a useful user interface element. Replace the simple numeric labels with larger, more descriptive text or with icons that represent the content of each section. For instance, if section 1 covers a product overview, use an image of the product; if section 2 is a feature list, place a bullet list. These visual cues help the viewer orient themselves and make the navigation experience feel more natural. When crafting the navigation buttons, pay attention to their appearance. A plain square is functional, but you can enhance the user experience by adding rollover states, click sounds, or subtle animations. Flash’s button states - Normal, Over, Down, and Hit - give you a canvas to design each interaction. For example, you might make the button slightly larger when the cursor hovers over it, or you could add a subtle glow. The important part is that each button remains a separate interactive object that the user can click, regardless of the visual enhancements. After the button shapes are polished, revisit the Actions panel for each button. The script you entered earlier - gotoAndStop - is enough to jump to the correct anchor. However, you can make the navigation more robust by adding a check to confirm that the target frame exists. This protects against future changes to the timeline that might shift or remove frames. A simple conditional looks like this: on ( press ) { In most projects this extra safety net won’t be necessary, but it illustrates good practice: anticipate that the timeline may change and guard against errors that would break navigation. Also consider adding a brief animation after jumping to a frame, such as a fade‑in effect. This visual feedback lets the viewer know that the navigation was successful and that the movie has moved to a new section. The next layer, Navigation, should remain on top of the visual layers so that it is always clickable. If you place it behind the Sections layer, the button may become obscured by the text or images, preventing interaction. Adjust the layer order accordingly, placing Navigation above Sections, which sits above Anchors. This stacking order ensures that the clickable areas are never hidden behind other content. When you preview the movie in Flash, you’ll see that clicking each button brings you to the corresponding section, and the timeline pauses there. Pressing the Play button will resume the movie from that point. This is the interactive portion that lets users explore the content at their own pace. As you refine the design, you may want to adjust the interval between keyframes to match the pacing of the animations within each section, ensuring a smooth visual flow. At this juncture, the interactive structure is fully in place. The next phase involves publishing the movie in a way that embeds the anchor tags into the generated HTML, allowing the browser to interpret the anchor names correctly when a user bookmarks or navigates back and forward. To make the named anchors operational, Flash MX must generate HTML that includes In the Flash tab, confirm that the output file type is set to SWF and that any desired export options - such as smoothing or background color - are configured. Then switch to the HTML tab. Here you’ll find a drop‑down list labeled Template. Choose Flash with Named Anchor. This template instructs Flash to wrap the SWF in an HTML page that contains anchor tags pointing to the labeled frames. The generated HTML looks something like this: <html> Because the anchor names match those you assigned in the timeline, clicking a button in the movie will cause the browser to update the URL hash (e.g., Before you click Publish, review the Output settings to ensure the HTML file and SWF file are written to the same folder. Flash will also provide a preview of the generated HTML, allowing you to confirm that the anchor tags appear as expected. If you encounter any issues - such as missing anchor tags - double‑check that all label types are set to Anchor and that you selected the correct template. After publishing, upload both the SWF and HTML files to your web server. Verify that the page loads correctly in multiple browsers, such as Chrome, Firefox, and Edge. In each case, click the navigation buttons to ensure that the URL updates and that the browser’s back button takes you to the previous anchor. The ability to bookmark a specific section also improves the user experience, especially for longer videos where users may want to return to a particular point later. When you are satisfied with the anchor behavior, consider removing the Sections layer from the final version if it is no longer needed for debugging. Keep the Anchors and Navigation layers; they are essential for the functionality and should remain in the exported SWF. You can hide the Sections layer before the final publish to keep the visual output clean. At this point you have a fully functional Flash movie that leverages named anchors for bookmarking and navigation. The next section will address a subtle navigation quirk and provide strategies to ensure a seamless back‑button experience. Once the movie is live, open the page in a browser and use the navigation buttons to jump between sections. As you click back and forward in the browser, observe how the URL changes and how the SWF responds. Normally, pressing the back button should take you to the previous anchor and pause the movie there. However, a known quirk in this setup is that clicking the last button (the one that jumps to the final anchor) and then pressing back can sometimes skip the first anchor and land on the one before the last. This behavior stems from the way browsers handle hash changes when the last anchor is reached. Some browsers treat the final hash as the “end” of the navigation history, causing the back button to skip earlier entries. To mitigate this, you can insert an invisible anchor at the very beginning of the movie. Add a blank keyframe before the first named anchor and label it with the type Anchor. Update your navigation script to use gotoAndStop( "0" ) for the button that should bring the user to the start. In addition to the invisible anchor, consider adding a small script that resets the timeline to frame 1 when the SWF first loads. For example, in the first frame of the main timeline, insert: on ( init ) { This ensures that even if a user lands on the page with a hash that points to a later anchor, the SWF will start in the correct location. If the user then clicks back, the browser will navigate to the earlier anchor without skipping any. Testing should cover all major browsers and devices. Check how the anchor navigation behaves in mobile browsers, where back‑button handling can differ. Some mobile browsers do not support back navigation in the same way, so you may need to provide an explicit “Back” button within the movie itself. Another potential pitfall is that the anchor names must be unique and simple. Avoid using spaces, special characters, or numbers that start with letters that could be interpreted incorrectly. Stick to alphanumeric names like section1, section2, etc. If you do use spaces, enclose the name in quotes when using gotoAndStop
When everything works as intended, you can provide users with a direct link to a specific section. For example, the URL
gotoAndStop ( "1" );
}#1, #2, etc.). This is the core mechanism that allows users to bookmark a particular section of the movie or use the browser’s back and forward buttons to navigate between them. However, there is a subtle quirk: if you click the last button and then press the browser’s back arrow, the navigation may take you to the anchor before the last one rather than to the start of the movie. Understanding and addressing that quirk is the focus of the next section.Adding Visual Markers and Navigation Buttons
if (labelExists( "1" )) {
gotoAndStop( "1" );
} else {
trace( "Anchor 1 not found" );
}
}Configuring Publish Settings for Anchor Support
<a> tags with the appropriate name attributes. This is achieved by selecting the correct template during the publish process. Open the File menu and choose Publish Settings (or press Ctrl+Shift+F12). A dialog box will appear with several tabs: Flash, HTML, and Settings.
<body>
<embed src="movie.swf" ...>
<a name="1"></a>
<a name="2"></a>
<a name="3"></a>
<a name="4"></a>
</body>
</html>http://example.com/movie.html#2). When the page loads, the browser scrolls to the corresponding anchor, and the back and forward buttons navigate between the named anchors. This integration is what gives your movie a bookmarkable, multi‑page feel.Testing Navigation and Troubleshooting Common Issues
gotoAndStop( "1" );
}http://example.com/movie.html#2 will load the movie and pause it at anchor 2. This is especially useful for tutorials or product demos where viewers might want to jump to a particular part.
No comments yet. Be the first to comment!