Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Using the Library
At this point, the Stage looks exactly the same as it did before. Recall that you imported the graphics into the Library. But where is this Library?
- To access the Library, press Command+L (Ctrl+L). Alternately, you can choose Window > Library or click the Library button.
- In the Library panel, click the disclosure triangle to open the world.psd Assets folder.
- Click the disclosure triangle to open the Assets subfolder.
)
Inside this subfolder are all the original images from the Photoshop file. The little tree icon to the left of each image’s name indicates that it is a simple PNG or JPEG. The items below the images are movie clips (note the blue gear icons). There’s one movie clip for each Photoshop source image (because you asked Flash to create movie clips in the Import to Library dialog).
So what’s the difference between a movie clip and an image? The best way to explain this is to evoke Wonder Woman. If you’re as geeky as we are, you know that Wonder Woman (unlike Superman) doesn’t have the power of flight. However, she has an invisible airplane. So when you see her “flying” through the sky, it’s not really Wonder Woman who is flying—it’s her invisible plane. Wonder Woman is just along for the ride.
In Flash, images—like Wonder Woman—can’t fly. That is, they can’t move around the screen. They can’t be animated. Instead, you have to put them inside an invisible vehicle and animate that. You move the vehicle and the image goes along for the ride. To viewers, it looks like the image is moving, because the vehicle it’s inside is invisible. Movie clips are those invisible vehicles. So all those movie clips in the Library are invisible vehicles with your Photo-shop images riding inside them like passengers. When you animate, you’ll use these movie clips and just leave the original source images (the ones with the tree icons) in the Library.
){kind=small}
Adding Library Symbols to the Stage
The technical term for Library items is symbols. Adding symbols to the Stage is as simple as dragging them from the Library and dropping them where you want them to appear. A symbol on the Stage is called an “instance,” because it’s actually a copy of the symbol.
- Drag the water movie clip from the Library and drop it on the Stage so that its upper-left edge lines up with the upper-left edge of the Stage.
- Drag the map movie clip to the Stage so that it covers the water.
- Drag the ship movie clip to the Stage twice, putting each instance of it in a different body of water.
- Select one of the ships and reverse its direction by choosing Modify > Transform > Flip Horizontal.
- With the ship selected, press the Q key to switch to the Free Transform tool. Hold down the Shift key while dragging one of the corner handles inward to make the selected ship smaller. Press V to switch back to the Selection tool.
- Select one of the smaller ships. In the Properties panel, click the disclosure triangle next to Color Effect, then choose Tint from the Style drop-down menu.
- Click the color swatch to choose a yellowish tint, and then adjust that tint with the sliders under the drop-down menu. Adjust the tint to match that in the figure shown here.
- Add the plane movie clip to the Stage, placing it above Africa.
- With the plane movie clip still selected, click the Add Filter button at the bottom of the Properties panel, choose Drop Shadow, and then adjust the shadow’s setting to your liking in the Filters area of the Properties panel.
- With the plane still selected, press Command+D (Ctrl+D) to duplicate an instance. This has the same effect as dragging another instance from the Library.
- With the second plane selected, click the Swap button in the Properties panel. Select the jet symbol.
- In the Library, right-click the jet source image (not the movie clip). From the context menu, choose Properties.
- Click the Import button and choose the file jet2.png from the Chapter_02 Project Files folder. Then click Open.
- Add a few more planes and ships, resizing, flipping, and styling them as you please. Save your work by pressing Command+S (Control+S) on the keyboard.
Notice the helpful guidelines Flash displays to help you place images. If you need help positioning the movie clip, select it and then adjust the image’s X and Y coordinates in the Properties panel. Set both its X and Y coordinates to zero.
)
)
)
)
)
){kind=small}
){kind=small}
){kind=small}
)
){kind=small}
Note that the jet takes on all the properties (including filters and position) of the plane. Much like After Effects, you can update an item in the library to use a different source file.
)
)
You must click OK to swap the files. Flash swaps the jet image in the Library for another image.
)