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

Breadcrumbs: Making the back button work for Flash

In this edition of breadcrumbs we'll make your Flash application even more usable with the web browser's back button. Basic knowledge of Flash MX is recommended.

In the ever increasing need to develop usable, functional Flash applications, integration into the web browser has never been more important. In Flash MX, Macromedia has introduced named anchors - an underused feature that takes developers one step closer to full browser integration.

Named anchors allows developers to identify key frames within their application that can be jumped between using the browsers forward and back buttons. The same feature can also be used to allow your web browser to bookmark a specific frame within your Flash application. In the tutorial I'll explain how to use the named anchor through a example Flash application.

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player



In the above example file a web surfer can select an thumbnail image from the photo album. Once selected the album provides an enlarged view of the picture with a short caption. For the user to move back to the thumbnail view they can use their web browsers back button.

Building the photo Album
To start building the example Flash application open Flash MX and create a new file.

On the Flash file's timeline we'll develop 3 key frames. The first key frame will consist of a thumbnail view with the second and third providing a detailed view of the selected image. Name the 1st key frame "thumbnails" and the remaining key frames "image1" and "image2" respectively. Don't forget to add stop() functions to each key frame.

image

With the frames labeled open the properties panel for the "thumbnails" key-frame and select the named anchor checkbox beneath the key frame label. You'll notice one this checkbox is selected the flag that identifies a labeled frame will change into a yellow anchor.

image

Next, lets create button objects for each of our thumbnail images. Sample images are available in the example flash application's source. Drag the two thumbnail images to the root of your application within the "thumbnails" key-frame.

With the buttons on the main clip select the buttons and add an onPress call back function to send the user to the detailed view key frame when selected.

 

on( press )
{
    gotoAndStop( "image1" );
}


Now import your detailed view images and place the graphic onto to the proper detailed image key frame. Test the application to make sure the thumbnails take you to the proper image when clicked.

Last, we need to open the publish settings dialog to publish our flash file with the proper HTML template. Once in the dialog select the "Flash with Named Anchors" option in the templates drop down box.

When you run the exported HTML you'll notice your browser's back button allows you to move from the detailed image view to the thumbnail list of images. You can also create a bookmark on a specific image and return to that frame without selecting the image on the thumbnail view.

Flash MX provides an option to make the 1st frame of your Flash application scene a named anchor on default. To do this open the preferences dialog in the edit menu and select the "Named Anchor on Scene" check box in the "General" tab.

The source to the example Flash file can be downloaded here.

Jason Michael Perry is the writer of Flash magazine's bi-weekly column breadcrumbs. View more of Jason's articles at the Breadcrumbs archive or his personal web site www.jasonmperry.com. You can also contact Jason with any questions or comments at Jason @jasonmperry.com.

 

About Jason Michael Perry

Jason Michael Perry is a freelance instructor, developer, and writer. Please check out his new book Breadcrumbs: ActionScript 3 by Smart Ameba Publishing. If you have questions, a topic you would like covered, or more feel free to email him at jason@smartameba.com.

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