Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Project 9: Creating a Menu

In this chapter, you create a menu that triggers submenus when the user rolls over each main button. The submenus are text-based and animate in from the left side of the Stage. When the user rolls over menu items, a rectangle appears as well. Additionally, you design the menu using a PNG graphic that you import into the FLA file.

Users click buttons in the submenus to navigate to different parts of a website. You can use this menu with an all-Flash website or wit105-formatted content to form a hybrid website.

What is a hybrid site?

A "hybrid" website contains bot105 formatted and Flash content. Essentially, SWF files are embedded in a page layout alongsid102 content. A hybrid website might include a Flash menu and Flash "widgets" in a column, but us102 or CSS formatted text to display the main textual content of the website. Or, it might use Flash to create particular areas of the site to avoid page-refreshes. For example, a website might use Flash to display a photo gallery and a Flash menu for navigation, but use a PHP-based content management system to manage and update the site's text content. Therefore, the content is easily to optimize for search engines, and quick to build (using existing prebuilt CMS software), but Flash is used for eye-catching effects and so th102 page doesn't have to refresh each time a new image loads.

A distinct advantage of hybrid websites is that you can optimize the website for search engines. Although Flash-only websites can rank highly on the search engines like Google, and research is being performed into improving and expanding SWF file searchability, hybrid websites can easily achieve top-ranked results contrary to the opinion of some. For example, at the time of writing (and true for years now), you can search Google for "Flash MX" and "Flash MX 2004" and find two hybrid sites with Flash menus (Macromedia and [Flash-MX.com]) in the top two or three sites in the results. Therefore, Flash menus do not necessarily mean that you'll end up low in the search engine rankings.

When you build a hybrid website that has Flash elements on each page (such as the same menu on each web page), remember to keep the SWF file small so it appears quickly when the user clicks between each page.

For examples of hybrid websites, see [www.macromedia.com], [www.ejepo.com], and [www.trainingfromthesource.com]. The book's website is also a hybrid site.

A hybrid site contains Flash an101 content. This chapter's project is also a hybrid website.

[View full size image]

Using the Drawing API

You use the Drawing API (also called drawing methods) to draw lines and fills to create shapes, such as rectangles, ovals, stars or lines without any fill. You create these lines and fills using ActionScript, and even specify the transparency, size, and color of the graphics. You use the moveTo() method to specify where the line or shape is drawn, and other methods to fill in between lines to create shapes. Your lines or shapes then display when the SWF file plays in Flash Player.

You might think this is crazywhy not just draw the shapes using the drawing tools? It can actually be easier for some purposes to draw shapes using code, as you'll find out in this project. If you have to repeat a shape and only change the color, you can use the Drawing API and special functions. Not only does this save you having to draw the same shape, but it can reduce the file size of the SWF file, too.

One of the particularly interesting things you can do with the Drawing API is let your users draw lines and shapes when the SWF file plays. An example FLA of this exists in the Flash MX 2004 install folder. On your hard drive, open the Flash MX 2004 folder in the Applications (Macintosh) or Program Files (Windows) directory. Then navigate to the Samples/HelpExamples/drawingAPI folder.

The Drawing API includes a methods of the MovieClip class: beginFill(), beginGradientFill(), clear(), curveTo(), endFill(), lineTo(), lineStyle(), and moveTo(). You can apply the methods to a movie clip instance, or to a level. You learn how to use this ActionScript in the following exercise.

Exercise 1: Drawing rectangles for the menu

This exercise introduces you to the Drawing API by drawing rectangles on the Stage of varying dimensions and fill colors. The exercise then shows you how to extend the code and turn it into a custom function so it is highly reusable for other purposes, such as later in this project.

Complex shapes require complex code, because you have to tell the SWF file where to render (draw out) the lines at runtime. If your shape has many different points and lines to create, this means you have to add all of those points and lines using code. This requires a fair bit of Math knowledge, but it can be a fun challenge at times.

1. Select File > New to create a new Flash document, and click Flash Document in the General tab. Click OK to generate the FLA. Select File > Save As to save the new document as menu.fla.

2. Rename Layer 1 to actions. Open the Property inspector (Window > Properties) and make the following settings:

Background color of the Stage set to #919191.

Frame rate set to 24 fps

Width set to 515 px

Height set to 400 px

The optional start file, menu_start.fla, is in the Chapter 09 folder. This FLA document has these settings, has layers already created, and also includes a PNG file you use later on.

3. Select frame 1 of the actions layer. Add the following code in the Actions panel:

this.createEmptyMovieClip("box_mc", 1);
box_mc.beginFill(0x000000, 100);
box_mc.moveTo(0, 0);
box_mc.lineTo(100, 0);
box_mc.lineTo(100, 50);
box_mc.lineTo(0, 50);
box_mc.lineTo(0, 0);
box_mc.endFill();

First, you create a new movie clip called box_mc, which you use to apply the drawing methods to. This code introduces several new methods of the MovieClip class, which you apply to box_mc to draw the shape. The first new method you use is beginFill(), which sets a fill color and alpha level for the shape. This example uses a fill color of black (0x000000) and an alpha of 100.

The second new method is the moveTo() method, which defines the current X and Y coordinates where the shape should be drawn relative to the movie clip's registration point. The registration point is the upper-left corner of the clip when you create a clip using code. This method does not actually draw lines, it just sets the point from which you want to start "drawing."

The next method, lineTo(), moves the current drawing position to a new X and Y coordinate. This method actually draws the line, based on the coordinate you set with moveTo(). This previous snippet makes four calls to the lineTo method to draw each segment of the rectangle. The final method, endFill(), applies the fill color and alpha level to the lines drawn by the lineTo() or curveTo() methods.

4. Select Control > Test Movie to test the Flash document in the test environment. You'll notice a black rectangle that's 100 pixels wide by 50 pixels tall in the upper-left corner of the Stage, as shown in the following figure.

5. Now that you understand how to draw a simple rectangle using the drawing API, you can convert the previous snippet into a function, so you can easily reuse the ActionScript. Delete all of the code on the actions layer from step 3, and then type the following snippet:

function drawRectangle(target_mc:MovieClip,
fillColor:Number, alpha:Number, width:Number,
height:Number):Void {
with (target_mc) {
   beginFill(fillColor, alpha);
moveTo(0, 0);
lineTo(width, 0);
lineTo(width, height);
lineTo(0, height);
lineTo(0, 0);
endFill();
}
}

"Hard coding" is when you set a value in your ActionScript when it would be better (or easier) to set a variable. Hard-coding values can be quick and easy to do, except it causes problems sometimes because you might forget where you set the hard-coded values or parameters when you need to change them. By setting them as variables, you can centralize where you set values and change them easily and in one spot, no matter how many times you use them throughout the ActionScript.

As you can see, this ActionScript is similar to the code that you deleted from step 3 of this exercise. The main difference between the two snippets is that you pass the new ActionScript values when you call the function, instead of hard-coding values.

The second difference is that the ActionScript snippet uses the with keyword instead of retyping the path to the movie clip. See the following sidebar for more information on what this means.

The with Keyword

The with keyword lets you specify an object or movie clip to evaluate expressions or actions to. You specify the movie clip, and then apply the actions, set properties, and the like to that particular movie clip. For example, the following two blocks of code behave exactly the same way:

//uses with, applied to line1_mc
this.createEmptyMovieClip("line1_mc", 1);
with (line1_mc) {
lineStyle(1, 0x000000, 100);
moveTo(0, 0);
lineTo(100, 0);
}
//is the same as doing this...
this.createEmptyMovieClip("line2_mc", 2);
line2_mc.lineStyle(1, 0x000000, 100);
line2_mc.moveTo(0, 0);
line2_mc.lineTo(100, 0);

By using the with keyword, you don't have to retype the full path to the specified movie clip, which helps reduce the amount of ActionScript you have to write and clarifies your ActionScript (which is a benefit). In many other situations, it is better to write the full path in your ActionScript and avoid the with keyword.

6. Now you can draw a rectangle on the Stage using the following ActionScript. Type this code into the Actions panel.

this.createEmptyMovieClip("rectangle_mc", 100);
drawRectangle(rectangle_mc, 0xFFFFFF, 40, 320, 240);

The drawing API also has a curveTo() method, which lets you draw circles or even rounded rectangles. See [www.FLAnimation.com] for a bonus tutorial that uses this method.

This ActionScript creates a new movie clip on the Stage at a depth of 100, and then calls the drawRectangle() function. This function draws a semitransparent white rectangle with an alpha of 40%; that is, 320 pixels wide and 240 pixels high. By default, the rectangle always appears in the upper-left corner of the Stage. If you want to move the shape, you could set the rectangle_mc's _x and _y properties to a specific location.

You will use the drawRectangle() function later on to add a highlight color when your mouse moves over a button within the navigation.