Using Symbols and the Library in Flash MX
This chapter is from the book
This chapter is from the book
This chapter is from the book
You've learned to use Flash's tools and panels to create, modify, position, and import basic elements—such as text and graphics—for your Flash movies. Even using simple elements, your movies can quickly become large and complex. In this lesson, you'll learn to use symbols, libraries, and the Movie Explorer to manage your movies and keep them small, fast, and organized. You will also learn how to use and how to import bitmaps.
)
This is what the ZooMX web site will look like after this lesson.
WHAT YOU WILL LEARN
In this lesson, you will:
- Learn about the file types that can be imported
- Import bitmaps
- Create a symbol
- Explore the Library panel
- Create a folder to organize the contents of the library
- Open an existing movie as a library
- Add instances of symbols to the movie
- Edit symbols and groups
- Use the Movie Explorer
APPROXIMATE TIME
This lesson takes approximately 1 hour to complete.
LESSON FILES
Media Files:
assets.fla
fish.jpg
frog.jpg
lion.jpg
mara.jpg
sleepy_tiger.jpg
Downloadable as assets.zip
Starting Files:
Lesson03/Starting/zoo6.fla
Downloadable as zoo6.zip
Completed Project:
Lesson03/Completed/zoo13.fla
Downloadable as zoo13.zip
Importing Bitmaps
Flash supports two image formats: vector and raster. Vector graphics are created with lines, curves, and descriptions of their properties. Commands within a vector graphic tell your computer how to display the lines and shapes, what colors to use, how wide to make the lines, and so on. You have already added some vector graphics to your movie—the shapes you drew in Lesson 2. In fact, most strokes and fills drawn using Flash's drawing tools are vector graphics. You might have also used a drawing program, such as Macromedia FreeHand, to create such images. Raster images, also called bitmaps, are created with pixels. When you create a raster image, you map out the placement and color of each pixel, and the resulting bitmap is what you see on the screen.
You are by no means limited to artwork you can create in Flash. You can use your favorite draw program or you can import existing artwork. Flash can import the following formats in Windows and on a Macintosh: GIF and Animated GIF, JPEG, PNG, Adobe Illustrator (EPS, AI, version 6.0 or earlier), AutoCAD DXF (DXF), FreeHand (FH7, FH8, FH9, FH10), FutureSplash Player (SPL), and Flash Player (SWF) files.
In Windows, you can also import Bitmap (BMP), Enhanced Windows Metafile (EMF), and Windows Metafile (WMF) files. On a Macintosh you can also import PICT.
If QuickTime 4 is installed, you can import MacPaint (PNTG), Photoshop (PSD), QuickTime Image (QTIF), PICT, Silicon Graphics Image (SGI), TGA, and TIFF (TIFF) files. QuickTime also lets you import BMP on a Macintosh and PICT in Windows.
In this exercise, you will import some bitmap graphics to add to your movie.
1) Open zoo6.fla.
)
You'll find zoo6.fla in the Lesson03/Starting folder on the CD-ROM that comes with this book. This is the file you completed at the end of Lesson 2, so if you still have it open you're ready to go.
2) Select the Welcome Text layer and add a new layer above it. Name the new layer Main Page Bitmaps.
)
You are going to add your bitmap graphic to this new layer.
You might find it useful to lock all of the other layers so you don't accidentally move anything. Right-click (Windows) or Control+click (Macintosh) on the name of the newly added Main Page Bitmaps layer and choose Lock Others.
Remember, you can add a new layer by clicking the Insert Layer button at the bottom of the timeline. You can also choose Insert > Layer from the menu or right-click (Windows) or Control+click (Macintosh) on the Welcome Text layer and choose Insert Layer to add a new layer above the selected layer.
NOTE
To delete a layer, just select that layer and click the Delete Layer button at the bottom of the timeline.
3) With the Main Page Bitmaps layer selected, choose File > Import. Browse to lion.jpg in the Lesson03/Assets folder on the CD, and select it. Click Open
)
)
A bitmap graphic, lion.jpg, should appear on the stage. Though Flash is a vector-based authoring tool, you can also use bitmap images in Flash. Bitmap images are not created natively in Flash; you need to use an external application such as Macromedia Fireworks to create the files and then import them into Flash.
Unlike vector graphics, bitmap images are not very scalable. Simple bitmap images are often larger in file size than simple vector graphics, but very complex bitmap images (photographs, for example) are often smaller than comparable vector graphics. Flash can use Bitmap (BMP), GIF Image, JPEG Image, PNG Image, Macintosh PICT Image, MacPaint Image (PNT), and TIFF Image.
)
You can resize imported artwork the same way you resize artwork drawn in Flash, but be careful when you resize bitmap graphics. When you scale a bitmap, you can get pixelation, which means that parts of the graphic will not appear smooth. When you resize a vector graphic, such as the graphics that you added in Lesson 2, the edges will stay smooth.
4) Select the arrow tool and click the bitmap you just imported. Use the Property inspector to set the X and Y to 20 and 70 respectively.
When you set the X and Y properties, the bitmap will appear near the top right corner of the stage. It will overlap the orange portion of the background a bit, but you'll fix that later in this lesson.
When you select imported bitmap, the Property inspector indicates that you have selected a bitmap. The usual Height (H), Width (W), X, and Y settings are available. The Property inspector also displays the name of the selected bitmap (lion, jpg, or lion.jpg, depending on your system). There are also two buttons in the Property inspector: the Swap button lets you swap the selected image with another imported image and the Edit button opens the imported image in an image editor if you have one installed.
)
5) Choose File > Import to Library. Import fish.jpg, frog.jpg, mara.jpg, and sleepy_tiger.jpg.
When you use the Import to Library command, Flash imports the graphics, but you won't see them on the stage as you did with the lion bitmap. That's because the images are imported directly into the library. Don't worry if you don't know what the library is yet, that's what you'll learn later in this lesson.
6) Select the lion.jpg bitmap image on the stage and choose Edit > Duplicate. Select the duplicate copy of the bitmap and use the Property inspector to set the X and Y to 160 and 50.
)
The Duplicate command creates an exact copy of the selected element and pastes the copy on the stage. The duplicated copy should be selected when it's created. If the duplicated copy is not selected when it's copied, use the arrow tool to select the copy. You can then use the Property inspector to move the bitmap to the desired coordinates.
7) Make sure you still have the second copy of the lion.jpg bitmap selected and click the Swap button in the Property inspector.
When you click the Swap button the Swap Bitmap dialog box opens. You should use this dialog box to swap the selected bitmap for one in the library.
8) Select mara.jpg in the Swap Bitmap dialog box and click OK.
After you click OK, the second instance of the lion.jpg graphic should be swapped with the mara.jpg graphic.
The Swap Bitmap dialog box displays all of the bitmap graphics in the library. You will only see one bitmap on the stage, the lion.jpg graphic, but you should see several bitmaps in the Swap Bitmap dialog box.
)
Click on each of the file names. As you do, you should notice a thumbnail of the image appear in the dialog box.
9) Save the file as zoo7.fla in the FlashTFS folder on your hard disk.
Now that you have some bitmaps in the movie, let's learn about symbols.