The Page Animation Project

 < Day Day Up > 



The concept of this animation is simple and silly. You can see the completed movie on the CD-ROM that comes with this book. The movie is called  BirdFacts101.swf and is located in the chapter12_exercise folder along with the original FreeHand artwork. Double-click the file's icon to start Flash Player and run the movie. There are five labeled eggs at the bottom of the screen. When the cursor is over four of the eggs (a mouse-over event), the Go To Flash action moves the movie to a particular page. The last egg requires the viewer to click the mouse (an On Press event) that takes the movie to a page that has a frame event that causes six layers to play in succession. A rectangle lies directly beneath the eggs, and when the cursor is over the rectangle, the movie returns to Page 1 of the movie.

It sounds complicated, but if everything is correct, the movie works. One little mistake, and nothing happens. Working with actions follows high-school physics laws: For every action, there is an equal but opposite reaction. With a FreeHand movie, you have to apply an action to get something to happen, and apply another action to get it to stop or change. Working out the original concept is probably the toughest part. For that, I usually make a simplistic movie design, based on my pencil-and-paper sketches of the concept. Geometric shapes serve as graphics, and not a single word is typed onto the pages. I make the buttons, layers, pages, and actions work in this dummy document. When it functions the way I want it to, I use it as the blueprint for the final work. This approach cuts the work to a minimum, and I get the skeleton built before worrying about putting flesh on it.

Creating the artwork

To make the project go quickly, the artwork has been converted to symbols and is on the CD-ROM that comes with this book:

  1. Open the CD and copy the BirdFacts101 Symbols file found in the chapter12_exercise folder. Paste this document into your FreeHand English/Symbols folder. To make things easy, all text in the document has been converted to paths. This solves the problem of missing fonts, but it also negates some of the choices in the Movie Settings panel.

  2. Open FreeHand and start a new document.

  3. In the Document inspector, change the page size to Web size (550-pixels wide by 400-pixels high).

Obtaining symbols

You learned how to create symbols in Chapter 8. For this exercise, you'll use some symbols that have been created for you. Just as in a working environment, symbols can be exchanged between artists on different computers and operating systems.

  1. Open the Library (Windows ® Library).

  2. Select Import from the Options menu on the Library panel.

  3. The window should open to the English folder. Open the Symbols folder, and double-click BirdFacts101 Symbols.

  4. A new window opens, showing a dozen or so symbols. Select the top-left symbol. Hold down the Shift key and click the last symbol in the window to select all the symbols. If you only want to import two or three noncontiguous symbols, use the Control (Command) key. Click the Import button.

Provided your computer doesn't crash, the library fills with this movie's symbols. The Library should look like Figure 12-1.


Figure 12-1: The Bird Facts 101 Library contains all the elements for the movie.

Layering the art

Remember that symbols are more or less "dumb" when you place them in a document. Any actions you applied to them will not work, and of course, you can't modify them other than normal transformations — no color or attribute changes. To make a symbol functional, it must be removed from its instance. At that point, actions work, but the artwork has been grouped, so you can work with it as it is, or ungroup it. Because you removed the instance, any changes you make to the symbol itself don't affect the art you just placed and released.

Now you can begin to put the page together.

  1. Start by dragging an instance of Background graphic onto the document. Adjust it to fit the page.

  2. Open the Layers panel, and click the Background layer to move this graphic to the background so it will be viewable in all frames.

  3. Go to Modify ® Symbol ® Release Instance, to return the symbol to simple artwork.

  4. Drag Harry Heron onto the document, and place him as shown in Figure 12-2. Since you previously selected the Background layer, the symbol will automatically go to that layer.

    click to expand
    Figure 12-2: The basic layout for the Bird Facts 101 movie

  5. Drag the Page 1 text symbol onto the page and locate it as in Figure 12-2.

  6. Drag instances of Great Blue Egg, Great Egret Egg, Black-Crowned Egg, Cattle Egret Egg, and Goose Egg into position on the page. Save the document.

  7. The eggs have actions already applied to them, but in their symbol form the actions are inactive. To assure yourself of this fact, select any of the eggs and open the Navigation panel; all the attributes will be blank. Select all eggs and go to Modify ® Symbol ® Remove Instance.

  8. Ungroup the eggs that are selected.

The mechanics of Flash actions require an event to take the viewer back to a given page. In this case, you want the viewer to return to Page 1 whenever the cursor is not on an egg. Here, we have an action that has been applied to both background objects that cause the movie to stay on Page 1 when the cursor is over either of them.

If you select any egg and look at the Navigation panel, you'll see that each egg has a link to a page, and an action to cause the move to the page. Figure 12-3 shows a typical navigation setup for the eggs with a minor exception: Because there are no other pages, the Parameters field is blank in your document. When you add additional pages in the next steps, the Parameters field fills in automatically. An argument could be made that the viewer should click the egg to start the event, but I liked the idea of a mouse-over for the first four eggs, then a mouse click to drive the goose animation.

click to expand
Figure 12-3: The button attached to this Navigation panel moves the viewer to Page 3.

At this point, the page should look very similar to Figure 12-2, but you still need five more pages to fill out the movie. You can Opt/Alt-drag with the Page tool to create duplicate pages, or you can use the Duplicate command in the Document inspector panel. Use whichever method you prefer to create a single duplicate page:

  1. Go to Page 2, and drag the Great Blue INFO symbol onto the page. Place it on the Foreground layer.

  2. Make four duplicate copies of Page 2.

  3. Go to Page 3, drag the Great Egret INFO onto the page, and align it with the Great Blue INFO box. To help with the alignment, lock the Great Blue box, Shift + select the Great Egret box, and use the Align panel to center it vertically and horizontally. Click outside the page, select the Great Egret INFO box, and choose View ® Hide Selection. Then select the Great Blue INFO, unlock it, and delete it.

  4. Save, and move to Page 4. Drag the Black-Crowned INFO symbol onto the page and align it as you did Page 3.

  5. Repeat the process for Page 5. Go to Page 6 and delete the Great Blue INFO instance. Save.

It's time to work out some of the details of your movie. Choose a random page and check the eggs in the Navigation panel to make sure they're linked correctly. With a single egg selected, click the binocular icon to the right of the Link field. This action selects all objects on the page that are linked to that particular page, so you should see six objects selected in the Object inspector. The parameters should be complete for each link: The Links field has the page you want to jump to; the Action should be Go To; the Event should be On (Over); Parameters should be to the same page as Link, and Foreground should be in the middle field.

Now test the movie before things get more complicated. Use the Control Menu (FreeHand 10) or open the Controller panel (FreeHand 10 and MX) and select Movie Settings. Set them as shown in Figure 12-4. Note that there are no fonts in this particular movie. However, if there were, you could utilize the Maintain Blocks feature to allow the text to be edited in Flash. If you don't need to do any future editing, choose Convert to Paths to eliminate font issues. Then select Test Movie. FreeHand collects all the information, and after a few seconds, the movie starts. It should remain static until you run the cursor over one of the eggs. As soon as the cursor is over an egg, the movie should move to the appropriate page and stop until you move the cursor over the background area again, returning the movie to Page 1. When you've had just about enough excitement, close the Flash Player window to return to your FreeHand document. Correct anything that may have been wrong. You can check things out in the original FreeHand document that is on the CD-ROM that comes with this book.

click to expand
Figure 12-4: The Movie Settings panel for this movie

Final animation

You might have noticed that clicking the Goose egg leads you to a blank page. All the elements you need are in the Library. If you want to have a simple static page, you can place the Swoosh Marks and Legs Only symbols on the page with the YeeHaaHooooo text graphic. If you want to make a slightly more complicated animation, make copies of the legs and apply them to successive layers. The YeeHaaHooooo text was broken down into several smaller chunks for the movie on the CD-ROM, and placed on the same layers as the legs.

Making links

At times, you want to let your viewer print scenes from your movie. You can continue on with the movie you've built, or jump right into the FreeHand artwork ( BirdFacts101.fh10) on the CD-ROM.

To add printability, you make a few modifications. First, we'll require that the viewer click the Background to return to Page 1, by changing the action in the Navigation panel from on (over) to on (press). That's not asking too much, and it solves a major problem: how to get from an egg to another object without going back to Page 1.

Getting past Page 1 is the easy part. But, how do you select a page to print? There are two easy methods for selecting a page to print, depending on how you want the movie to play. To simplify your decision-making process, think about where the user has her/his cursor on the page. To make the discussion simple, let's work on Page 2 only:

  1. One method is to clone the egg and place the word "PRINT" inside it.

  2. Then, with the egg selected, go to the Navigation panel and choose Print from the Action menu.

  3. For the Event, choose On Press.Select Page 2 from the Parameters menu, and All in the middle. All prints the background and all visible layers. If you want to only print a particular layer, you could select it here.

The second method might not be as economical, but could enhance the users' experience by making them move to the silhouette of the bird. To accomplish this, select the bird and set the Navigation panel as in the previous method.

Testing the movie

Test the movie as before, with the Test Movie command. When you get to the Goose egg, you should see an animation (if you made one), and clicking an egg or bird prints that page. Clicking the background takes you to Page 1.

Moving outside the movie

Now that you're an accomplished movie producer, how do you get out of the movie business and into the real world? Simple. More actions. This time, go to Page 6 — the Goose page. Select the Goose egg and open the Navigation panel. Type a Web address in the Links field (remember the http:// part of the address). When the linked Goose egg is clicked, the computer starts your browser, and you go to the Web page in the link. You can go to other movies or HTML pages if you place them within the same folder as the current movie.

Exporting the movie

When you're sure that everything is working, go to the File menu and choose Export. Then select Macromedia Flash SWF as the file type and click the Export button. FreeHand creates a Flash Player file that you can place in an HTML page (Dreamweaver), or use as a stand-alone movie.



 < Day Day Up > 



Macromedia Studio MX Bible
Macromedia Studio MX Bible
ISBN: 0764525239
EAN: 2147483647
Year: 2003
Pages: 491

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net