H  1  2  3  4.1  4.2  4.3  5  6  7  8  9 

Hands-On: Flash MX 2004 the Basics

Exercise 4.1: Breaking Apart Bitmap Images

You can not edit any image in Flash MX 2004 that hasn’t been broken apart. Once you break apart the image you will be able to do just about anything you’d like with it. Use the following three mini-exercises to get some hands-on training.

  1. Import a bitmap file to the Stage.
  2. A selected bitmap will havea gray outline and white dots on the surface.Import a Bitmap image on the Stage. Center the bitmap graphic on the Stage by dragging it or use the Align panel.
  3. Select the bitmap graphic, notice that there is not a blue line around it, but a gray line with white dots. This is the sign of a bitmap not vector object.
  4. Chose Modify > Break Apart, the image is now a fill instead of a bitmap object. Notice all the little white dots all over the image.
  5. Select the Lasso tool.
  6. Use these Lasso settings in the Options menu at the bottom of the Tools panel. Select the Magic Wand tool and then select the Magic Wand Properties tool on the right, use these setting if you are downloading the images provided. The higher the Threshold setting, the more Flash will select for you to delete.
    The Magic Wand settings are Threshold: 20 and Smoothing: normal.
    The Magic Wand Setting dialog box.
  7. Clicking on the background will produce selection areas that can be deleted; it will take about three clicks to totally delete this background. If the red line around the bottle is annoying, you can use other bitmap editing tools to erase it.
    The background partially deleted.   The background totally deleted.

The results will always be better if you use a real image editing program such as Fireworks MX 2004, however, in a bind this will work.

Exercise 4.2: Tracing Bitmap Images and Turning into Vector Images

Now let’s try tracing a bitmap image so that the bitmap will turn into a vector image.

An imported bitmap image.

  1. Import a bitmap graphic to the Stage.
  2. Drag the image to the center of the Stage or use the Align panel.
  3. Select the image and then, choose Modify > Bitmap > Trace Bitmap.
  4. Use these settings in the Trace Bitmap dialog box:

    Color Threshold: range from 100 to 50.
    (A higher number equals a blockier image; a lower number equals a smoother image).
    Minimum Area: range from 8 to 4. Eight is the default setting. (Again a higher number equals a blockier image; a lower number equals a smoother image).
    Curve Fit: choose Normal
    Corner Threshold: choose Normal .


    The Trace Bitmap dialog box.An unacceptable traced bitmap image.

  5. Not an acceptable traced bitmap image. This wasn’t acceptable so I tried a Color threshold of 50. I didn’t like this one either so I tried a Color threshold of 20 and a Minimum area of 4 pixels. Not bad but I might have really increased the image size this way.
Changing the settings for the Trace Bitmap image.

I won’t know how big this file is until I optimize the file for publication and this won’t be the case for this demo. In the screen shot below the finished Traced Bitmap is on the right and the original bitmap graphic is shown on the left, certainly close enough to pass.

The original bitmap image. The acceptable traced bitmap now as a vector image.

The screen shot below shows what a Traced Bitmap vector file looks like when it’s dragged from one location to another. Now you can see all the vector lines that I’m worried about, this could be a large file.

What a traced bitmap image looks like when it is dragged from one location to another.

Viewing the Library.

Exercise 4.3: Filling Drawn Objects with Bitmap Fills

Now let’s try working with Bitmap fills. Perhaps you can find an interesting way to use this trick on one of your pages one day.

  1. Select a Bitmap image to Import to the Library.
  2. Choose the Color Mixer panel.
  3. Choose Bitmap from the drop-down menu. If you select a bitmap image from the thumbnails, it will automatically fill any shape you draw on the stage.
  4. Draw a shape on the Stage.
  5. The Fill Transform tool. The shape should be filled with a new Bitmap fill.
  6. Select the Fill Transform tool.
  7. Click on the newly filled image with the Fill Transform tool.
  8. The image used as a fill, but way too small.Dragging to enlarge the background tile image.
    That small white shape in the middle of the rectangle needs to be made larger. Locate the lower left triangle shape and then hold the [Shift] key down while you drag to enlarge the image . The image can be made into any shape or size now.

These image files were used in this exercise, you can find them here:

http://profal2.com/cis127/pdf/assets/flash/holdglass2.png

http://profal2.com/cis127/pdf/assets/flash/winebottle.png

http://profal2.com/cis127/pdf/assets/flash/wineimage.jpg

 

Back to Top