|
|
|
|
|
|
|
|
When you need to add dynamic elements such as animations to your scene, such as smoke, fire, traffic, people, etc., you typically want to simulate its appearance moving behind elements of your photograph. In this example, let's see how to make smoke appear from behind a bush (pictured on the right). You can use this procedure to simulate depth effects for static and moving objects, for example, cars, people, or other vehicles.
The basic concept is to think of the layers in Flash like pieces of cellophane. If you place opaque or translucent graphics on different layers, and view it from the top, you can see the graphics as a composite image based on the graphics on each layer and which layer is above another layer. For this example, on the bottommost layer, you place the base image, the smoke on the next layer above that, and then a special graphic, called a mask layer, to hide areas of the layer on which you have smoke.
Step 1. The first step is to open up a new Flash document. The timeline will be shown at the top, which will look like this:
Step 2. Next, we want to bring a photograph or image of the scene. Click on the File menu, and the Import > Import to Stage... menu item, and find a GIF or JPG of your background.
Step 3. When you have brought in the image, you will see a filled-in dot on the timeline in the keyframe marked 1. For recordkeeping, rename the layer from Layer 1 to "image" (you can do this by clicking on the layer name, Layer 1, and typing the word "image" [no quotation marks]).
Step 4. We're going to put the smoke on a new layer above the image. It's a good idea to keep things in your movie on different layers -- it makes it easy to isolate them if you need to make the invisible during editing, or otherwise treat it differently from other elements in your movie.
Now create a new layer on top of your image layer. Do this by clicking on the small sideways page with a plus sign (lower left corner of image above). This will create a new layer, by default, called Layer 2. Notice the empty dot shows up, meaning there is nothing in this layer yet.
Step 5. Let's overlay a CS Effects particle generator In our example, we opened the Components panel (Window > Components), found the CS Effects generator component, and placed it on the tree. Make sure the element is on Layer 2 by clicking on the empty dot, not the filled in dot on the image layer!
When you are done with this, your layers should look like this:
You can rename your Layer 2 to something like "smoke", just so you remember what is on that layer.
Step 6. If you were to test the movie now (which is fine, if you're working alongside us), you would see the smoke in front of the tree. Now we need to make a mask region to block the smoke from appearing in front of the tree, but let it show up behind and above the tree. Create a new layer, name it "mask", and use one or more of the drawing tools on the main Toolbar (rectangle, paintbrush, point-to-point pen tool, etc.) to draw the region you want the smoke to appear. Make sure you are drawing on the mask layer, not on one of the other layers. The color is not important at all, only really the filled in area. For example,
Strangely enough , this is called a "mask layer" even though you are drawing the part that should show through, not the part that is masked, which would make more sense based on the word masked! (we don't know how Macromedia came up with that term!). Make certain that the stuff you draw is on the mask layer.
Important: If you are using Flash 8, after you have drawn your shape, click on Modify > Break Apart. This changes your drawing to the crosshatch pattern you see in the figure above. Any painting you do will be created as a Drawing Object which you need to Break Apart in a similar manner.
Step 7. Now it simply looks like a blob on top of some portion of the image. To activate the mask, right-click on the name of the layer (in our case, "mask"), and choose "Mask":
You can tell that it worked properly if the little icons in from of the mask layer and the smoke layer change to a green patterned circle and rectangle, as illustrated here:
You'll also see little locks appear on the layers. Flash automatically "locks" the layers to prevent accidental changes. You can unlock the layers by clicking the lock icon, and then you can modify the elements on that layer. For example, you might want to change the mask region, or alter parameter values of your CS Effects instance. If you do not unlock the layers, you cannot select the elements to change them.
When you complete this step, you will see the blob disappear, and you will see your element cropped to within the boundaries of the visible part of your mask. Test your movie, and you will see the smoke rise from behind the tree!
Tips for Added Realism: In this case, you see a sharp border between the smoke and the tree. Masking is only possible with sharp borders, but you can make your mask fill very detailed so it does not have such a uniform edge. Another trick is to create a layer on top of your mask layer and place graphics there with transparency (a more advance design technique). Because the layer is on top of the mask, it will cover the graphics on layers below it, giving the appearence of being in front of (closer to the viewer) the smoke.
|
|
|
|
|
|
|
|