Importing Bitmaps

I l @ ve RuBoard

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 moviethe shapes you drew in Lesson 2. In fact, most strokes and fills you make 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 files.

If QuickTime 4 is installed, you can import MacPaint (PNTG), Adobe Photoshop (PSD), QuickTime Image (QTIF), PICT, Silicon Graphics Image (SGI), TGA, and 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.

    graphics/03fig02.gif

    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 .

    graphics/03fig03.gif

    You are going to add your bitmap graphic to this new layer.

    You might find it useful to lock all the other layers so you don't accidentally move anything. Right-click (Windows) or Control-click (Macintosh) the name of the newly added Main Page Bitmaps layer and choose Lock Others from the contextual menu.

    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 or right-click (Windows) or Control-click (Macintosh) the Welcome Text layer and choose Insert Layer from the contextual menu 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.

    graphics/03fig04.gif

    graphics/03fig05.gif

    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

    graphics/03fig06.gif

    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 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 appears near the top-right corner of the stage. It overlaps the orange portion of the background a bit, but you'll fix that later in this lesson.

    When you select an 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 platform). 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.

    graphics/03fig07.gif

  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 yetyou'll learn that 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 .

    graphics/03fig08.gif

    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. 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 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.

    graphics/03fig09.gif

    Click each of the filenames. As you do, a thumbnail of the image appears in the dialog box.

  9. Save the file as zoo7.fla in the FlashTFS folder on your hard drive.

    Now that you have some bitmaps in the movie, let's learn about symbols.

I l @ ve RuBoard


Macromedia Flash MX. Training from the Source
Macromedia Flash MX: Training from the Source
ISBN: 0201794829
EAN: 2147483647
Year: 2002
Pages: 115
Authors: Chrissy Rey

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