Section 5.2. Working with Pixels

5.2. Working with Pixels

While major pixel pushing is reserved for other applications, such as Photoshop or Fireworks, Flash still offers a few ways to edit bitmaps to creative effect.

5.2.1. Breaking Apart a Bitmap

In one way, breaking apart a Flash asset is equivalent to sending it one rung down the Flash evolutionary ladder. Depending on how you created your assets, a symbol can be broken into a group, which can be broken into a shape. The same is true of text: a word can be broken into letters, which can then be broken into shapes.

Note: If you haven't already read about the Modify Break Apart command in Chapter 1, you may want to do so now.

5.2.2. Using Bitmap Fills

Once you break apart a bitmap, it is possible to eyedrop its image into a fill pattern. That pattern can then be used as a fill for a larger shape, creating a seamless tile, as seen in Figure 5-5.

Figure 5-5. When a larger shape is filled with a bitmap, the bitmap tiles seamlessly

Once you have a bitmap fill, you can do some creative things with it. For example, you can cover large backgrounds with a sacrifice in file size that pales in comparison to a full bitmap of the same dimensions. In the next project, you will try something a little less intuitive. You can apply tweens to the fill itself:

  1. Create a new, blank document and save it as bitmap_tile_tween.fla in the /05/Working with Pixels folder.

  2. Import the bitmap_tile.png file found in the same folder.

  3. Break apart the bitmap using Modify Break Apart (Ctrl/Cmd-B).

  4. Delete the bitmap, select the Rectangle tool, and fill the Stage with a new shape. You will see that the fill is a repeating pattern created by the bitmap you broke apart.

  5. In the timeline, select frame 24 and add a keyframe. This will create a 2-second animation using Flash's default 24 fps.

  6. Still in frame 24, select the Gradient Transform tool and click on the shape. You will see the same tools you used to manipulate the color background in your Jimi Hendrix poster in Chapter 1. Grab the upper-right corner of this tool grid with your mouse, and drag down and to the right a bit. This will rotate the fill.

  7. Grab what was the lower-left corner of the square, and scale the fill. Hold down the Shift key to scale the fill proportionally, if you prefer. Your fill should look somewhat similar to Figure 5-6.

    Figure 5-6. Using the Gradient Transform tool, you can scale, rotate, and skew tiled fills for interesting effects

  8. Next, click in the keyframe in frame 1, and select Shape from the Tween menu in the Properties panel. (If your Properties panel is not visible, show it from the Window menu.)

  9. Test your file. Your bitmap fill will scale and rotate to the extent that you changed it. If you want to check your work, open the bitmap_fill_ animation.fla file in the /05/Working with Pixels folder.

5.2.3. Tracing Bitmaps

In the previous project, you saw that a bitmap behaves as a fill when broken apart. However, you can also convert bitmaps into shapes that respond the way you've come to expect shapes to respond. This is accomplished by tracing the bitmap into a collection of vectors.

Using this technique, Flash will analyze a picture and attempt to outline discrete areas of color, based on tolerance settings you provide. The result can be clarified by comparing the process to breaking apart a bitmap, described earlier. Once traced, the first difference is that you can now select an area of vector with one click. After removing that area, pulling away the lower-right corner will effectively increase the size of the self-contained shape manipulated (Figure 5-7). This is just how the shapes you are familiar with would behave if a bitmap was never involved.

Figure 5-7. A traced bitmap behaves just like a collection of simple Flash shapes

For your next project, trace a bitmap to gain some experience with the dialog settings:

  1. Create a new, blank document and save it as bitmap_trace.fla in the /05/Importing Pixels folder.

  2. Import the cheesecake.jpg file found in the /05/Importing Pixels folder.

  3. Select the bitmap, but do not break it apart. Instead, choose the Modify Bitmap Trace Bitmap menu command. The dialog seen in Figure 5-8 will appear. The Color Threshold setting allows you to adjust how clearly Flash separates similar colors. This is similar to Photoshops Tolerance setting. A higher number means that more hues will be included in any given selection. The Minimum Area setting dictates the minimum number of adjacent pixels that must be included in any single shape. This allows you to set the granularity of the vectors, preventing too many from being created. (This is somewhat akin to using fewer polygons to make a 3D model more efficient.) The Curve Fit and Corner Threshold settings both contribute to how curvy, or blocky, each vector shape is.

    Figure 5-8. Adjust the settings in the Trace Bitmap dialog box

  4. Start with the default values and see what you get. Next, try higher and lower color thresholds, and experiment with the other settings. Figure 5-9 shows three such settings groups and their results. When you're done experimenting, save your work.

Figure 5-9. These three tracings show the successive result of decreasing Color Threshold, Minimum Area, and Curve Fit/Corner Threshold settings. For example, the Color Threshold settings were 100, 50, and 25, from left to right.

Note: If your results are not similar, test your movie. If you then see noticeably different results, you may have your Preview Mode set to a speedier, but rougher, setting. Try changing your View Preview Mode setting to a higher value. If your Flash authoring doesnt slow down significantly, this will enable you to preview your files more accurately as you work.

Comparing your file size before and after the tracing usually results in a file size drop, although that's not always true. Sometimes trace tolerances can be set too strictly, and a highly compressed image can be converted into many small vectors, which actually increases file size. One way of getting the most file size economy following a bitmap trace is to optimize your curves:

  1. With the bitmap tracing still visible, select all the vectors in the tracing using Edit Select All.

  2. Shape Optimize menu command. This will bring up the Optimize Curves dialog shown in Figure 5-10.

    Figure 5-10. Bitmap tracings, as well as any other vectors, can be made more efficient by removing unneeded curves

  3. Experiment with the Smoothing setting, being sure to enable the "Use multiple passes" and "Show totals message" options. The former, although slower, will be more accurate and will usually result in a slightly better looking optimization. The latter will show you the amount of reduction in total curves accomplished by the process.

As a comparative example, bitmap_trace_02.fla, found in the /05/Working with Pixels folder, is an interactive look at different trace settings, complete with possible shape optimization data. Open and test the movie to see the difference a setting can make.


When reading a text that includes discussions about ActionScript, you will frequently run across the term method. A method is an action that is taken by an object, akin to the way a verb and a noun work together. For example, just as a DVD can play, so can a movie clip.

You have already seen several uses of methods. For example, in Chapter 3, you used the stop() method in the main timeline of your animation project, and in Chapter 4, you used methods such as gotoAndPlay() and getURL() for part 2 of the same project.

There are two common structures for methods. The first is when a method affects any timeline (or other object) in which the method call itself resides. In this usage, the method is sometimes included without additional syntax. For example, in Chapter 4, your replay button used the gotoAndPlay() method to control the main timeline, which is where the replay_btn was placed:

 replay_btn.onRelease = function() {     gotoAndPlay(1); }; 

Another example usage is when you want a method to affect a specifically referenced object, such as a different movie clip. For example, the following line instructs a movie clip called legs_mc to stop:

 stop_btn.onRelease = function() {     legs_mc.stop(); }; 

Here you see that the method is attached to the specific object in question with the dot syntax you've used in previous projects. You will use this approach in the next chapter, as you expand the interactivity used with movie clips. In both cases, it is helpful to recall the aforementioned mnemonic device: the relationship between object and method is very similar to the relationship between noun and verb.

Flash 8(c) Projects for Learning Animation and Interactivity
Flash 8: Projects for Learning Animation and Interactivity (OReilly Digital Studio)
ISBN: 0596102232
EAN: 2147483647
Year: 2006
Pages: 117

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: