The Layer Animation Project

 < Day Day Up > 



The idea behind this movie is to have several animations going at once, and use actions and slight of (Free)hand to make a simple game-type movie (shown in Figure 12-5). The concept is that herons and egrets have interesting eating habits and don't necessarily like broccoli. Clicking various menu items causes the heron to eat what has been clicked.

click to expand
Figure 12-5: The Hungry Heron Diner movie

Instead of having you go through the building process, the document ( HeronDiner.fh10) and the completed movie (HeronDiner.swf) are on the CD-ROM that comes with this book. You can find them in the chapter12_exercise/HeronDiner folder. Double-click the .swf file to see the final results before tearing into the movie's construction. Depending on your experience, you may figure out how it was done before reading about it.

Deconstructing the Diner movies

Drag  HeronDinerLayers.fh10 to your desktop from the CD. Double-click its icon to open the file in FreeHand 10. To view the movie, double-click the  HeronDinerLayers.fh10 1.swf file in that same folder. This movie contains five pages and consists of 20 layers. Here's how it was constructed.

  • Reed background — I made the area by drawing a few reed shapes consisting of a light and dark ribbon, similar to a blade of tall grass. I used the FreeHand tool to keep an organic look to the shapes. Each shape was copied, and pasted into the Graphic Hose panel (left side of Figure 12-6). When the entire set of five reeds was completed, I set the options on the right side of Figure 12-6, and randomly sewed the reeds across the background. At times, a reed is planted in an unlikely place, and has to be moved manually (which isn't too difficult). The sign is a simple rectangle with an edge added to it. The sign's legs are rectangles with other rectangles pasted inside for shadow effects.


    Figure 12-6: Reeds were pasted into the Graphic Hose (left) and applied with the settings on the right.

    Note 

    If you are a true FreeHand masochist like me, you may want to build the movie yourself. If so, there is a file named HeronDiner Symbols on the CD. Place that in your FreeHand ® English ® Symbols folder on your hard drive. Start a new document, give it a size of Web, and use the symbols to build the page.

    As the reeds were spread with the Graphic Hose, parts of them ended up outside of the page margins. When I was through placing the reeds, I ran a selection box across the top of the page while holding down the Alt (Option) key. Then I selected the Knife tool and in its dialog box (double-click the Knife tool icon in the Toolbox), I selected Straight, Close Cut Paths, and Tight Fit. It's a simple matter to run the Knife tool across the top edge of the page to cut off the top edge of the ragged reeds. Then hold down the Alt (Option) key again and drag a selection box just outside the top of the page to select the cut-off pieces. Press Delete twice to clear all the remnants. I created the right and left sides of the page in the same manner and used the same technique to clean up the ground areas on either side of the page.

  • The Happy Heron sign — I made the sign from simple rectangles. The posts have shadows pasted inside them, but aside from that, it's a no-brainer. The words (Fish, Snake, Frog, Broccoli) have been converted to paths, and will be the navigation links.

    The major text block is inside a rectangle with radiused corners. I gave it a Lens Fill of Lighten with a value of 66%. You can change that value according to taste and individual situations. I cloned the rectangle, and cut it with the knife in two places. The top half has a half-point stroke; the bottom has a two-point stroke. I placed text on top of the lens-filled rectangle and converted to paths to eliminate font problems. During construction, I kept "live" the text on the Pasteboard in case editing was necessary.

  • The snake — I created animations one at a time on Page 6 (which was deleted when the movie work was complete). I made the frog and snake as a three-object, eight-step blend, and the fish is a 17-step blend attached to a path. The snake starts curved one way, goes straight in the middle of the animation, and curves the opposite way on the other side (by mirroring the artwork). Both the frog and snake have eight steps in their blends. (FreeHand automatically gave them 25 steps, but that would have been too much time for the movement.) To change the number of steps in the blend, go to the Object inspector. I drew a v-shaped wake with the Pencil tool (so it would remain more or less organic) for the snake as it enters on the right. In the middle position, I distorted it a tad, and distorted it again on the left side. I blended the three-object wake separately from the snake, but gave eight steps.

  • The frog — The frog starts out sitting down, extends his arms and legs (legs and legs?) at the top, and sits again (a clone) at the end. All the parts of the frog (eyes, body, belly, legs, and arms) are joined to make the blend.

  • The fish — I did the fish differently. First I drew it; then I applied a 17-step blend. I drew and distorted an ellipse so it looks as though the fish is traveling up and out, down deep, and across to jump again. I attached the animation to the path (Modify ® Combine ® Attach Blend to Path).

  • Ripples — To be consistent and make everything simple, I created ripples around the signposts and the heron's legs as three objects. Each object has a different shape and color. I created only one signpost ripple, and reflected it for the other side. All have an eight-step blend to fit with the rest of the movie.

  • Splash! — I drew the splash at the point where the fish leaves the water and hits it again. I selected the fish nearest the point of entry (into the air or water), noting the layer, and placed the appropriate splash art on that layer. The exit splash is made from a reflected clone of the entry splash and placed on the same layer as the fish leaving the water.

  • Fish underwater — I selected all the fish under the water and gave them a tint of the above-water fish color so they would have the appearance of being under the water.

Animating everything at once

It really doesn't take all that long to make all the animations. FreeHand actually does most of the work. You can do all the animations at one time. Select all the blends, place them on the Foreground layer, and choose Xtras ® Animate ® Release to Layers. If you miss a blend, you will notice that when you test the movie you'll have a single frame with the blend sitting on it. It flashes by without any animation. Stop the test, and release the blend to layers. Each time you run this Xtra, be sure to select the Use Existing Layers option. Keep the Layers panel open at all times, and make sure that you don't end up with more than 17 layers (with this particular movie, your mileage may vary). If you accidentally have a blend on a different layer — for example Layer 4 — and you release to layers, the animation for that blend starts at a higher level, and additional layers are added, creating a mess. If you see numbers higher than you expect, choose Undo, and move your blend to the correct layer. Then run the Animation Xtra again. If you don't, the movie will be discombobulated when it runs, because new layers will have been added out of order.

Then test the movie. You should see ripples, a swimming fish and snake, and a hopping frog. Success! Now the real work starts. First, you explore a five-page movie that uses Page and Layers animation. Then the same movie is explained as a nine-page layers animation (that has a few added features).

The process

The point of this movie is to tell the heron what to eat. When you select an item from the menu, the heron darts his neck out and eats the selection. To save time for the demonstration, a splash image fills the screen for a single frame that implies something has happened. When the splash leaves the screen, the selection (fish, snake, or frog) has disappeared from the animation. The other two meals continue with what they were doing. The punch line for this movie appears when the user clicks Broccoli. That action takes the user to another page, where a simple five-layer animation shows the heron indicating that it doesn't like broccoli. At the end of the animation, a frame event returns the movie to Page 1. Because every page of this movie becomes a separate scene, static elements are placed on the Background (or any other layers below the Separator bar in the Layers panel).

  • Page 1 — The three animations (fish and its splash, snake and its wake, and frog) occupy a 17-layer animation stack. If you turn the visibility of the Background layer off, you can see all the animated objects. The movie is set up to play automatically. All the menu item buttons are linked to their separate pages, similar to the page for the Fish link shown in Figure 12-7.

    click to expand
    Figure 12-7: The Navigation panel settings for the Fish link

  • Page 2 — Page 2 is a clone of Page 1, only the objects concerned with the fish animation have been removed. Animations run from lowest layer to highest layer, with the splash graphic on the lowest layer to create the surprise element in the animation. Because you're already on the Fish page, you could change the Fish button's navigation link to make a pop-up, such as a burp, or take the viewer back to Page 1. In this movie, the buttons kept their links throughout the movie.

  • Pages 3 and 4 — One page removes the snake animation, the other deletes the frog animation. Both pages are cloned from Page 1.

  • Page 5 — Again, Page 5 is a clone of Page 1, but this time minus the heron graphic. I drew a single graphic of the bird with his mouth open, cloned it to different sizes, and placed it on layers. I used the first six layers. The last three are feathers moving a little each frame. Because you can't place a sound in a FreeHand movie, I placed the word graphic on the last few frames. I cloned the top word and placed it on the top layer (Layer 17). Then I gave it a Go To Page 1 Frame event to begin the movie over again.

If you tear the FreeHand file apart, you'll notice some red squares on the left side of the heron. I wanted them to be obvious for the project, because they're important to the functioning of the movie. One object has a Play Action Frame event for the page it occupies; the second object uses a Go To Frame event to take the movie to the bottom of the layer stack for the current page and keep the animation running on this page until another event occurs. In a real-world movie of this type, the red squares would become any one of the objects in the animation.

Layers animation comparison

In an animation such as this, you can also use masks that appear on pages to cover up an on-going animation (make the selected meal disappear). This isn't as easy or quick as the previous version, but you have more options. This version of the same movie uses the same Page 1 as the previous example, and the same basic animation for the last page, but that's where the similarities end.

  • Page 1 — This page is identical to Page 1 in the previous example. It is a bit more valuable in the scheme of things, however, because it contains all the visible animation for all scenes (excepting the last scene). There's a difference in the menu board, though. A new object has been added to the bottom, named Formal Attire Required. The links from the menu items are different as well. Instead of a Go To, these objects use Load Movie to move to the corresponding page.

  • Page 2 — Page 2 contains only a splash. Actually, there are two splashes: one on the bottom layer that is set in the Navigation panel to play on a Frame event. That action moves the movie to the next layer, which contains an identical splash. This splash has a Load Movie on Frame action that starts the movie that's playing on Page 3. So, this page is on-screen for two frames, and the second frame takes us to Page 3.

  • Page 3 — Page 3 has no background elements, unlike the previous version of the movie. In fact, it contains only the area in which the fish swims. An outline was drawn surrounding the fish area on Page 1. I cloned the water and beach areas and cut and pasted inside the outline. I drew a registration rectangle, cut from the page and pasted onto Page 3, in one of the corners of Page 1. Using the rectangle (with snap to guides on) I aligned the mask on the page and then discarded the rectangle. I placed the mask on the bottom layer, and then cloned it. I applied the clone to the next-higher layer and repeated the process until each layer included a mask. Had this been in a simple area without multiple graphic elements, or if I had been working with simple geometric shapes, I could have made a blend and used the Animate Xtra (Release To Layers) to distribute the mask to all the layers.

  • Pages 4 and 6 — These pages are identical to Page 2. They consist of the two splashes; one plays, the other uses Load Movie to move to the next page.

  • Pages 5 and 7 — The same concepts used on Page 3 were used here. Instead of making an outline mask, a different method could be quicker. Use the frog as an example. Select all the frog elements on Page 1. Use the Union Xtra to create one complex shape. Then use the Inset Path Xtra with a minus value to widen the shape by a few pixels to allow a little slop in the mask. Then, as before, select any elements that fall under the mask, cut them, and paste them inside the mask.

  • Page 8 — For the last page in this animation, the same frames were used from the other version of the movie. The problem was that the feeding heron remained on the background while the animated heron popped out of the corner. It just didn't work. So I made a mask using the technique described in the previous paragraph. I cloned it and placed it on all the layers in the Page 8 animation. The top layer has an Action of Stop, with an Event of Frame action, and the word graphic has an On (Press) event and an Unload Movie Action, which stops (dumps) the current movie, and allows the movie that's playing in the background to continue.

  • The Formal Attire Button; Page 9 — For a Start/Stop Drag action, I decided that the viewer could put a napkin around the heron's neck. Not very imaginative, but not too much work either. The words on Page 1 have a Load Movie On (Press) event to Page 9. I drew the napkin and placed it on Page 9 so it would show up in a clear space on the menu board. The napkin has a Start/Stop Drag action with an On (Release) event. FreeHand uses the opposite command to stop a Drag action. If you choose Press, releasing the mouse stops the dragging. At times you just can't get rid of whatever you're dragging. Try double-clicking.

Testing and exporting the movie

I have to reiterate the importance of checking the Movie Settings panel before assuming that everything is the way it's supposed to be. Use the Setup button as you Export the SWF file. If you are working with multiple movies, you will definitely run into problems. The settings stay with your FreeHand application, not the document. This is the first thing to look at when someone tells you that your movie doesn't work on his or her machine.



 < 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