• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Seminar 4. Using Symbols in a Movie > Creating the Site Symbols and Stage Insta...

Creating the Site Symbols and Stage Instances

Now that you know a little more about Flash MX’s functionality and its use of symbols, it is time to convert your Honeycomb Web site objects into symbols. Typically, the process of creating your design and converting objects into symbols occurs simultaneously as you develop your movie. As you plan any movie, you should think about your use of symbols and how can you create and use your symbols most efficiently and effectively in your site. In regard to The Honeycomb site, several rectangular shapes are used in the design and for the buttons. This should be the first symbol you create because it can be used as an instance throughout the design.

Creating a Square Symbol

Looking at the design you have created so far for The Honeycomb site, you realize that all the shapes you’ve used are rectangular. Creating a square symbol is a smart move at this point in your site development. Instances of the symbol can be used for the footer, footer shadow, header, header shadow, menu bar, and buttons. Now, you will begin to build the site using this symbol. Follow these steps to create the square symbol:

1.
Use your Honeycomb.fla file from Seminar 3, “Creating a Movie,” or open 03Honeycomb.fla from the Seminar04/Samples directory on the CD-ROM that accompanies this book.

2.
Select Insert, New Symbol to open the Symbol-Editing Mode for creating your square symbol.

3.
In the Symbol Properties dialog box, name the symbol square and select the Movie Clip behavior (see Figure 4.30). Click OK to close the dialog box.

Figure 4.30. This symbol will be used for many objects in The Honeycomb site, so you should make it a movie clip symbol because this behavior is more versatile than just a Graphic behavior.


4.
The Symbol-Editing Mode opens with a blank Stage. Select the Rectangle tool, and set the Fill modifier setting to Black and the Stroke modifier to None. Click and drag a rectangle on the Stage.

5.
With the Arrow tool, click the rectangular shape to make it active, and then access or open the Info panel. Set the Width to 50 and the Height to 50. Set the registration point to the upper-left corner, and then set the x and y coordinates to 0 (see Figure 4.31).

Figure 4.31. Setting a registration point with x and y coordinates of 0 in the upper-left corner makes precisely aligning and sizing the symbol instances used in the site easier.


6.
Exit Symbol-Editing Mode by clicking the Scene 1 tab or the back arrow in the upper-left corner of the Flash MX Stage.

7.
You have created your square symbol. To view it, open your library by selecting Window, Library (see Figure 4.32).

Figure 4.32. Notice that you have the design template as a bitmap symbol also in the library. When you import an image, it automatically is added to your library as a bitmap symbol.


Creating the Background Design

Now that you have the square symbol, you can place instances of this symbol for re-creating the background design. In Seminar 3, you created the basics of the background design to learn the tools, panels, and features of Flash. Now you will re-create each of these objects using the square symbol. This requires deleting the background design that you have created up to this point. Follow these steps to create the background design with the square symbol:

1.
If you have turned off the Snap to Guides feature, turn that on by selecting View, Guides, Snap to Guides.

2.
With the Arrow tool, select the header object on the Stage. This also makes the header layer active. Delete the header object from the Stage.

3.
Drag an instance of the square symbol onto the Stage. Click in the upper-left corner of the instance and drag it to the upper-left corner of your Stage. A circle displays at the drag point and adheres to the guides that outline the Stage.

4.
With the instance of the square symbol active, click the Free Transform tool from the toolbox. Handles display around the instance; drag the middle handle on the right side so that it adheres to the guide that outlines the right edge of the Stage. Click and drag the bottom middle handle of the instance, and drag that to the guide that defines the bottom edge of the header rectangle (see Figure 4.33).

Figure 4.33. You also could have used the Info panel or Align panel to align the instance to the upper-left corner of the Stage.


5.
Select the header shadow layer to make it active. The header shadow object on the Stage also becomes active. Delete the header shadow object. Drag another instance of the square rectangle onto the Stage.

6.
Again, click and drag the instance by the upper-left corner so that it adheres to the guides that define the upper-left corner of the header shadow.

7.
Select the Free Transform tool from the toolbox and adjust the handles so that the instance adheres to the guides that define the header shadow area.

8.
In the Property Inspector, click the Color pop-up menu and select Alpha. Then click the Alpha box and type in 25 (see Figure 4.34).

Figure 4.34. This sets the alpha effect for this instance to 25% transparency.


9.
Repeat steps 5–8 to re-create the footer and footer shadow on the appropriate layer. Use Table 4.2 to configure the correct Color Effects for these instances.

Table 4.2. Honeycomb Background Design Composition
Object Effect Settings
Footer None 
Footer Shadow Alpha 25% Alpha Effect


Creating the Menu Bar

The next step is to create the menu bar using symbols. This requires a background object and the buttons. All the rectangular shapes can be created using the square symbol. Therefore, you will nest an instance of a square symbol inside a new symbol to create the button on the menu bar. Follow these steps:

1.
Select the menu bar layer to make all that layer’s contents active and delete these objects.

2.
From the library, click and drag an instance of the square symbol onto the Stage. From the upper-left corner of the instance, click and drag it to the top of the Stage but keep it aligned with the guides that define the left edge of the menu bar area.

3.
Click the Free Transform tool from the toolbox and resize the instance so that it adheres to the guides that define the right edge of the menu bar area. Click the middle handle at the bottom of the instance and resize it so that it adheres to the bottom guide that defines the bottom edge of the Stage.

4.
In the Property Inspector, set the Color pop-up menu to Alpha and then type 20 in the Alpha box (see Figure 4.35). Press Enter to apply this setting.

Figure 4.35. This sets the alpha effect for this instance to 20% transparency.


5.
The menu bar holds all the site’s buttons, so make it its own symbol by selecting it and selecting Insert, Convert to Symbol. You are now nesting the square instance for the menu bar inside of a new symbol.

6.
In the Symbol Properties dialog box, name the symbol menu and keep its behavior as Movie Clip.

A new symbol for the menu is now accessible in the library (see Figure 4.36).

Figure 4.36. The menu symbol nests the square symbol inside it.


The background design has been re-created using just one symbol: the square symbol. An instance of the square symbol was also used to create the menu bar. The menu bar instance has been converted to its own symbol, thereby nesting the square symbol inside the new symbol. Next, you will create a button symbol and use it for the four activity buttons. Instances of the square symbol can also be used for these buttons.

Creating the Activity Button

The buttons for the four activity areas of the site are the next objects to be developed. In the workshop for Seminar 3, you created only one button, not all four. This workshop develops all the buttons using instances of the symbol and text blocks. You can do this by focusing first on the About Me button and making it its own symbol. Then you can duplicate this symbol, rename it, and modify it to reflect the other buttons for the activity areas. Follow these steps to create your buttons:

1.
Create a new symbol for the About Me button by selecting Insert, New Symbol. Name the symbol about me button. Select the Button behavior, and then click OK to go to the Symbol-Editing Mode.

2.
Rename Layer 1 to button background.

3.
With the button background layer active, access or open the library by selecting Window, Library; then drag an instance of the square symbol onto the Stage.

4.
In the Property Inspector, set the Width to 169 and the Height to 33; then press Enter to apply these settings to the instance of the square symbol.

5.
From the library, drag another instance of the square symbol onto the Stage. Using the Property Inspector, set this instance to a Width of 163 and a Height of 27.

6.
With the second, smaller instance of the square symbol selected, in the Property Inspector, select the Color pop-up menu and select Tint. Click the Tint Color modifier to display the color palette and set the hexadecimal value to FFCE31 (see Figure 4.37).

Figure 4.37. This changes the square instance to a yellow color.


7.
Now align both instances to each other so that the yellow instance is centered inside the black instance and they both are centered on the Stage. Using the Arrow tool, select both instances by Shift-clicking each of them. Access or open your Align panel and click the Align to Stage button. Then click the Align Vertical Center button and the Align Horizontal Center button (see Figure 4.38).

Figure 4.38. The registration point for the Home button instance is in the center.


8.
Next, you’ll create the label for this button. Insert a new layer above the button background layer. Name this layer button label.

9.
Click the Text tool from the toolbox and in the Property Inspector, set the font to Arial, the font size to 14, and the font color to black. Then select the Auto Kern option and select the Bold option. With the button label layer active, click anywhere on the Stage to set a text block, and type ABOUT ME (using all uppercase).

10.
Click the Arrow tool to make the text block active. From the Align panel, with the Align to Stage button active, again click the Align Vertical Center button and the Align Horizontal Center button (see Figure 4.39).

Figure 4.39. The About Me text block is centered in the button background.


11.
The button design is now set; exit the Symbol-Editing Mode by clicking the Scene 1 tab in the upper-left corner above the Stage area.

Creating the Other Buttons

With the About Me button created, you can now create your other buttons. To save time and energy, you will just duplicate the About Me button and then change the text block to reflect the activity area of the site. Do the following to create these other buttons:

1.
From the library, select the About Me button to make it the active library symbol.

2.
Click the Options menu in the upper-right corner of the library and select Duplicate. This opens the Symbol Properties dialog box.

3.
Rename the button to matching button. Leave the behavior set to Button and click OK.

4.
From the library, double-click the matching button symbol to launch the Symbol-Editing Mode.

5.
With the Arrow tool, double-click the ABOUT ME text block so that you can make edits to the text.

6.
Change the button label to MATCHING.

7.
With the Arrow tool, click the text block to make it the active object on the Stage. Access or open the Align panel and align the text block both vertically and horizontally centered to the Stage.

8.
Repeat steps 2–7 to create two more button symbols named puzzles button and ducks button. Label the puzzles button as PUZZLES and the ducks button as IN QUEST OF DUCKS, using all uppercase. Your movie library should resemble Figure 4.40.

Figure 4.40. Keep the behavior set to Button because you are creating another button.


9.
Exit the Symbol-Editing Mode.

Adding the Buttons to the Menu Bar

At this point in the site development, you have all the button symbols created as well as the menu symbol. You have also nested the square symbol as a component of each of these symbols. Now you must finish developing the menu symbol by placing buttons on it. You will also use a new feature of Flash MX: pixel-level control. This feature enables you to precisely create and position objects on the Stage using the movie grid and gives you the ability to place and size objects at the pixel level. Because you are working from the Design Template for button positioning, it is beneficial to edit the menu symbol directly on the Stage. Therefore, you will perform an Edit in Place command on the menu symbol located on the Stage. To do this, follow these steps:

1.
If the Guide: Design Template layer is hidden, unhide it and then lock it so that it can’t be accessed.

2.
Using the Arrow tool, double-click the instance of the menu symbol on the Stage to make it active. This launches the Symbol-Editing Mode using the Edit in Place feature (see Figure 4.41). You know you are in Symbol-Editing Mode by the Menu tab located above the Stage area on the left.

Figure 4.41. The Stage dims so that you can focus on the menu symbol but still see other Stage content to use as a reference.


3.
Turn on pixel snapping by selecting View, Snap to Pixels. Increase your view to focus on just the four buttons by clicking the Zoom tool and dragging a marquee around the four buttons. This new feature of Flash MX enables you to adjust the position and size of an object one pixel at a time.

Tip

If you increase your Stage magnification above 400% and have View, Snap to Pixels turned on, the movie grid displays, further enabling you to have precision in your design and object placement.

4.
From the library, drag an instance of the about me button symbol onto the Stage. Position it on top of the About Me button, as indicated in the Design Template (see Figure 4.42). You are now nesting the about me button symbol inside the menu bar symbol.

Figure 4.42. By turning on pixel snapping, you are precisely positioning the instance of the about me button symbol.


5.
From the library, drag instances of the other three buttons and position them on the Stage as the design template indicates.

6.
Exit the Symbol-Editing Mode by clicking the Scene 1 tab or the Back button in the area above the Stage on the left.

Creating the Login

Finally, to finish The Honeycomb site design, you need to create the login area of the site. You will again use the square symbol as an instance for creating this area. Follow these steps to create the login area:

1.
Select the user login layer to make it active.

2.
Create a new symbol by selecting Insert, New Symbol.

3.
In the Create New Symbol dialog box, name the symbol login and set its behavior to Movie Clip. Click OK to launch the Symbol-Editing Mode.

4.
To save time and to ensure you have the same dimension for the login area as the activity buttons, you can open a button symbol and copy the Stage objects that make up these buttons. From the library, double-click the About Me button symbol to access this button in the Symbol-Editing Mode. Select Edit, Select All to select all the components of the About Me button. Then copy these components by pressing (Command-C)[Ctrl+C].

5.
Now switch back to the login symbol by double-clicking it from the library.

6.
Paste the copied button by selecting Edit, Paste in Place. The Paste in Place command pastes the copied object in the same location in which it existed in the original object (see Figure 4.43).

Figure 4.43. The copied components of the Home button are now centered on the Stage.


7.
Click just the ABOUT ME text block to make it active and delete it.

8.
Click the yellow instance of the square symbol, and in the Property Inspector, click the Color pop-up menu and select Tint. Click the Tint Color modifier and select the white color swatch.

9.
Rename Layer 1 to login background. Insert a new layer above this layer and name this layer login label.

10.
On the new login label layer, create a text block by clicking the Text tool, and in the Property Inspector, set the font to Arial, the font size to 14, and the font color to black. Also, select the Auto Kern and Bold options.

11.
Click above the login box to set a text block, and type WHAT’S YOUR NAME?. Using the Arrow tool, click the text block and position it above the login box.

12.
To center the text block vertically to the Stage, access the Align panel. Click the Align to Stage button and the Align Vertical Center button.

13.
Exit the Symbol-Editing Mode by clicking the Scene 1 tab.

14.
Click the login layer and place an instance of the login symbol on the Stage. Position it based on the design template (see Figure 4.44).

Figure 4.44. The login area enables the end-user to log in to the site.


Tip

If you need to adjust the login instance to match the Design Template exactly, double-click the login instance on the Stage. This launches the Edit in Place feature of the Symbol-Editing Mode, dimming your Stage and focusing on just the login symbol. Reposition the objects of the login area based on the design template. Exit the Symbol-Editing Mode to return to the movie.


Tip

You can use the left and right arrow keys to position the login instance on the Stage. Each arrow key moves the active object 1 pixel per keypress. If you hold down the Shift key while pressing the arrow keys, you will move the active object 10 pixels per keypress.


Organizing the Movie Library

Now that you have many of the symbols created for the movie, you should organize your library. A common practice is to make a folder you can use for grouping your movie buttons. This movie has four buttons and a menu bar that will be the main navigation for the site. Follow these steps to organize your movie’s library:

1.
Open or access The Honeycomb movie library.

2.
Click the New Folder icon in the lower-left corner of the library panel. A new folder displays in the library; rename the folder menu bar.

3.
Click and drag the menu symbol on top of the menu bar folder. It is dropped inside the library as you release the mouse button.

Note

When you create a new folder, it displays with a folder icon that is thin, indicating that it contains nothing. When you add a symbol to the folder, the folder icon gets wider, indicating that it now contains a symbol or symbols.

4.
Repeat step 3 for the about me button, ducks button, matching button, and puzzles button to drop each of these symbols into the menu bar folder (see Figure 4.45).

Figure 4.45. Double-click the menu bar folder to open or close it.


Viewing the Site

You should always check your work as you develop in Flash MX. The design template is nice for helping to create the site, but it limits you from seeing what you have designed. You must hide the Guide: Design Template layer. To do this, follow these steps:

1.
Click the dot in the Show/Hide column of the layers area of the Timeline (see Figure 4.46).

Figure 4.46. Hiding the Guide layer enables you to see your design of the movie. Your movie should match this figure.


2.
Save the movie as Honeycomb.fla.

If you want to compare your Honeycomb site with a movie that is completed up to this point in the book, open the 04Honeycomb.fla file located in the Seminar04/Samples directory on the CD-ROM that accompanies this book.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint