Per-Pixel Text Effects #2
Chapter 1, Visual Effects
|
9
HACK
Extend the Effect
By changing the time interval before each dot disappears, you can create dif-
ferent transition effects. For example, changing the timer values based on
the position of the dots serves as the basis for many common pixel-based
transitions:
// Left-to-right wipe
initDot.timer = 1000 + (Math.random( )*(initDot._x)*10);
// Diagonal wipe
initDot.timer = 1000 + (Math.random( )*(initDot._x + initDot._y)*5);
Final Thoughts
Masking is a very underutilized feature of Flash. It’s one of those features
that seems to have no real use until you delve deeper. No surprise then that
many of the coolest effects
[Hack #21] seem to use it extensively!
HACK
#2
Per-Pixel Text Effects Hack #2
Create advanced text effects and transitions that operate on the per-pixel
level.
The problem in simulating per-pixel effects in Flash is that potential perfor-
mance degradation limits how many fake pixels you use. You have two ways
Figure 1-5. Setting up a transition between two layers
10
|
Chapter 1, Visual Effects
#2 Per-Pixel Text Effects
HACK
to keep this number small: keep to small images (as we did in the per-pixel
transition effect hack
[Hack #1]), or use the effect on an image with lots of
background pixels (which you can ignore to reduce the number of fake pix-
els needed).
Although it’s probably obvious in hindsight, it took me ages to realize that
text fits the “lots of background pixels” criterion. A quick trawl on the Web
suggests that it really isn’t obvious because nobody else seems to be using
this hack.
In this hack, we’ll make the text appear to coalesce from pixels spread out
over the screen. Of course, you can implement various effects using differ-
ent calculations for the mask pixels’ positions.
The hack comes in two parts:
Converting the text block’s shape into 1 × 1 squares (i.e., our “fake
pixels”)
Animating the fake pixels
Here are the steps:
1. Create a text field and enter some text.
2. Press Ctrl-B (Windows) or
c-B (Mac) or choose Modify Break Apart
twice to turn the text field into a primitive shape.
3. With the text still selected, press F8, and convert it into a movie clip
symbol named
text. Make sure the Export for ActionScript checkbox is
checked and specify the linkage identifier as
text. (Delete the clip
instance from the Stage, as we’ll be adding it at runtime from the
Library with MovieClip.attachMovie( ).)
4. For the effect to work, the movie clip’s registration point must be at the
top left of the text. Enter Edit in Place mode by double-clicking the
movie clip; then to select all the text choose Edit
Select All and enter
0 for X and Y values in the Properties panel, as shown in Figure 1-6.
Figure 1-6. Setting the registration point for the selected text symbol
Per-Pixel Text Effects #2
Chapter 1, Visual Effects
|
11
HACK
You must turn your text into a primitive shape for this hack to work using
the Modify
Break Apart command (we’ll see why later), which is not ideal
because it adds to the filesize. For a lot of text, it can bloat the filesize con-
siderably. One way around this is to include each letter in your font as a sep-
arate clip containing a primitive shape and form them into sentences at
runtime. Although this sounds like a lot of additional bytes to add to your
SWF, remember that Flash effectively does the same thing when you save
font outlines to your SWF, which you have to do whenever you want to
treat font characters as graphic elements.
You also need to create a second movie clip with linkage identifier
dot. The
dot clip should consist of a 1 × 1 rectangle, with X and Y positions both set
to 0 as shown in Figure 1-7 (use the Properties panel to set these because the
dot will be too small to see).
This code replicates the “zoom in from the sides with blur” effect, but this
time the text really does blur (the effect is usually simulated with alpha), as
shown in Figure 1-8, because we are splitting the text into pixels as part of
the effect.
Figure 1-7. The 1 × 1 pixel mask
Figure 1-8. Per-pixel text effect, steps 1 through 4

Get Flash Hacks now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.