Working with Pixels -CodeIdol

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.

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.

In the case of bitmaps, breaking them apart lets you work with them in nontraditional ways. For example, you can select a portion with the Selection or Lasso tool and remove it, or you can use the Bush tool and paint a new color into it. These are behaviors commonly associated with shapes, but a bitmap that has been broken apart doesn't exactly behave like a shape. For instance, if you click a color hoping to select it, you will find that the entire bitmap is selected.

This is because the bitmap is still behaving as if it were intact, as though you simply modified the container in which it resides. This can be demonstrated using the bitmap_break_apart.fla file in the /05/Working with Pixels folder, as shown in Figure. After breaking apart the bitmap, step 1 shows the upper-right corner of the bitmap selected by the Selection tool. Step 2 shows that selection deleted, seemingly removing that portion of the bitmap. Step 3 shows the lower-right corner being moved like a traditional shape. Finally, step 4 reveals that the bitmap is still seen in the previously deleted area. What's more, the bitmap continues in areas previously never occupied by its container. This demonstrates what is commonly called bitmap tiling.

As seen in step 4 of this figure, when a bitmap is merely broken apart, a single newly created shape is filled with the tiling bitmap. When a bitmap is traced, it is replaced with multiple newly created shapes that contain normal vector fills.

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.

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:

Create a new, blank document and save it as bitmap_tile_tween.fla in the /05/Working with Pixels folder.
Import the bitmap_tile.png file found in the same folder.
Break apart the bitmap using Modify Break Apart (Ctrl/Cmd-B).
Select the Eyedropper tool and click on the bitmap. Your fill chip will switch to the new pattern.
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.
In the timeline, select frame 24 and add a keyframe. This will create a 2-second animation using Flash's default 24 fps.
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.
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.

Using the Gradient Transform tool, you can scale, rotate, and skew tiled fills for interesting effects
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.)
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.

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). This is just how the shapes you are familiar with would behave if a bitmap was never involved.

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:

Create a new, blank document and save it as bitmap_trace.fla in the /05/Importing Pixels folder.
Import the cheesecake.jpg file found in the /05/Importing Pixels folder.
Select the bitmap, but do not break it apart. Instead, choose the Modify Bitmap Trace Bitmap menu command. The dialog seen in Figure will appear. The Color Threshold setting allows you to adjust how clearly Flash separates similar colors. This is similar to Photoshop's 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.

Adjust the settings in the Trace Bitmap dialog box
Start with the default values and see what you get. Next, try higher and lower color thresholds, and experiment with the other settings. Figure shows three such settings groups and their results. When you're done experimenting, save your work.

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 doesn't 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:

With the bitmap tracing still visible, select all the vectors in the tracing using Edit Select All.
Choose the Modify Shape Optimize menu command. This will bring up the Optimize Curves dialog shown in Figure.

Bitmap tracings, as well as any other vectors, can be made more efficient by removing unneeded curves
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.

Methods

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.

Jan. 17, 2008, 9:48 a.m.posted by daemonhell

Working with Pixels