Web Navigation in Flash MX

The Flash timeline is a masterpiece of interface design. Once a simplified take on the timeline in Macromedia Director, its expression in Flash MX is now just as feature-rich and powerful.

The shift towards object orientation kickstarted in Flash 4 helped that evolution a great deal. In earlier versions, almost all the program's interaction and animation capabilities were tied up in the timeline. Recent improvements to ActionScript and Movie Clips have taken away that emphasis, but this doesn't mean the timeline is no longer important. In fact, it's still a central element in the Flash interface, and knowing how to use it well is an essential skill whether you're creating sites in Flash or using it for animation.

Animation and interaction in Flash begins with the timeline, whether you're using it on the main stage, editing the timeline for a movie clip or tackling the reduced version found in Button Symbols. The program's strength is that you can create individual frames that contain any of the elements supported by Flash, from vector artwork to video. Keyframes are frames that enable you to define changes in animation or the content of a frame. The frames between one keyframe and another then display the content defined in the previous one.

In turn, each frame can be composed of a number of independent layers. One layer may run unchanged over several frames, while others may have a different set of elements in each frame. The timeline enables you to have any number of layers you wish, too. To help cope with this flexibility, a number of features enable you to organise the timeline. Name and colour-code individual layers so you can track them more easily, for instance, as well as group layers in folders, using whatever criteria you like.

The timeline's main function is to control playback of these frames over time. You can use ActionScript embedded in keyframes within the timeline to control this, or you can reference frames within the timeline from other objects. For example, a button may be programmed to send the movie to a numbered or labelled frame. When left unfettered, a movie will play back on screen at the set number of frames per second specified within the Document Properties dialog.

In this tutorial, we're going to create a simple, interactive project that will take you through every major function of the timeline. We'll be creating an interactive comic in a slideshow format that includes persistent frames, the use of keyframes, frame labels and ActionScript. The project will be controlled by navigation buttons that take users to labelled sections of the timeline, and will also require some organisation of layer elements. We've provided all the artwork for you as a library full of symbols that you can drag and drop directly to the stage. You'll be able to concentrate on working through the main features of the timeline, picking up secrets, hints and tips along the way.

INFO Words and Flash expertise by Karl Hodge. Wild For Adventure comic strip artwork by John Broadley - used with permission.

The files necessary for this tutorial can be downloaded from the PDF

Click here to download the tutorial for free

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.