Project Management

Design functional Web menus in a Flash

If you've used your browser during the past year, you've seen how prevalent Flash has become on Web sites. So why aren't you using it?Here is a quick tutorial that can get you started.


Editor’s note: This article originally appeared in TechRepublic’s Web Development Zone TechMail. Subscribe, and you’ll receive information on Web-development related projects and trends.

An overwhelming number of Web sites now employ Flash movies as their front-end page. The amount of creativity that goes into most of these sites is amazing—so much so that a novice to the Flash environment could easily be intimidated.

But never fear: Web Developer is here to help you get a grip on this versatile technology. In this article, we'll tell you how to create basic Flash Web menus. If you want to check out Flash on your own, you can get a free, fully functional, 30-day trial version of Flash 5 at Macromedia.com.

Get familiar with Flash
Flash provides us with a platform-independent, programmable interface design tool. Particularly exciting is the latest release’s capability to parse and process XML. This gives client-side distributed processing a lot more power than is available with JavaScript and DHTML.

We have been successful in performing at least rudimentary site design with Flash 5. After weeks of study, we concluded that an in-depth understanding of Flash isn’t required in order to produce a functional Web menu.

Java programmers will feel right at home in Flash 5. Flash ActionScript has many features and syntax conventions that are similar to the core JavaScript programming language.

ActionScript is based on the ECMA-262 specification, an international standard for the JavaScript language developed by The European Computer Manufacturers Association (ECMA). Developers familiar with writing event-driven programs will also find the Flash object model quite familiar.

For those of you not familiar with Java or event-driven object models, everything that you need to complete a basic Flash menu can be gleaned from the program’s help files. Pay particular attention to the sections on symbols, buttons, and mouse events. Buttons are commonly employed for menu selectors, with the assigned action type GetURL typically providing the functionality. The GetURL method uses the standard URL and Target window syntax found in normal HTML.

A sample Flash menu
To get you over your first Flash jitters, let's walk through a simple menu design project. Within Flash, create a new project file with Stage dimensions of 400 pixels by 180 pixels. This sets the on-screen size of our Flash object.

The next step is to create the buttons for our soon-to-be menu. Double-click on the Rectangle object on the Tool Palette and set the corner radius to 12. Pick your button color and draw a rectangle. This rectangle will establish the size and shape for our menu buttons.

We must now designate this object as a Graphic. Select the image, press the [F8] key, select Graphic as the symbol type, and then name your button graphic appropriately. The graphic will now appear in the Library.

You can delete the original image from the Stage (since we can now replicate it from the Library) and prepare to make the buttons by pressing [Ctrl][F8], setting the type to Button, and naming the object. Click OK to continue.

You will notice that the Stage appears different, especially the Timeline. Button symbols only have four frames—which correspond to mouse events—in the Timeline. Select the button graphic symbol from the Library and center it on the Stage. Flash uses keyframes (identified by a dot in the rectangular box on the Timeline) to define change points on the Timeline. You should have one keyframe in the "up" position on the Timeline.

Select the next frame and press [F6] to add a new keyframe. You should see the button graphic on the Stage when you select any frame on the Timeline. Continue adding keyframes as necessary to complete the Timeline.

Now we will label the buttons and insert informational text messages into the menu. Add a new layer to the button symbol by using the Insert menu selection. Add keyframes for all the frames on this layer as well. Select the frames on this layer and add the button labels by using the Text tool from the Toolbox.

Click the Scene 1 label above the Timeline to return to the main Stage. Select the newly created button symbol from the Library, drag it onto the Stage, and position it as desired. With the button selected, right-click and select Actions to display the Object Actions panel.

Click on Actions to expand the section if it is not already fully displayed. Scroll down and click on GetURL. On the URL line, enter the Web address that you wish the button to point towards. On the Window line, enter the destination target only if you want to bring the page up in a frame. For this practice demo, select this option and call the target "FrameOne."

Save the project and select Publish to create the SWF file and HTML file necessary to display your new menu. Edit the HTML file and, after the closing object tag, add the code for an IFrame. For an example, see the code snippet below:
<iframe width="640" Height="480" name="FrameOne">

Save the file and open it with your browser to test your results.

While a bit crude, we hope that this little exercise helps eliminate some of the fears of getting started with Flash. For more information, Macromedia provides learning materials at:
  • The Flash Tutorial

  • For additional tutorials and open source .fla files:

    Got any good Flash links?
    Are there sites or resources you use to help you maneuver Flash? Share them with us. Post the URLs in a discussion below or send us an e-mail. We’ll use them in upcoming articles.

     

    Editor's Picks

    Free Newsletters, In your Inbox