Introduction We're trying to make a word (or any shape) to
appear to be burnt (stamped with a hot metal) into a background. This effect
can be done without any scripting.
Concept Let's think
of what features within the software can be used to
accomplish the task efficiently. You can do this effect
by drawing each frame, but that won't be efficient).
If you look at a burnt paper, you'll notice that the
edges aren't solid color; the edges are partially burnt
and there's some kind of gradient. This kind of
effect seems to require the use of Gradient Fills
tool,
but unless the shape is a circle or a square, I don't
think the gradient tool will work. The Soften Edges feature is
more appropriate in this situation because impossible to
fill an irregular (arbitrary) edges with the gradient
tool.
Creating the burn process (the animation) seem to be
tricky also. It may or may not be possible to do in
Flash, but, clearly -unless we want to create each frame
of animation by hand- some kind of Tweenings will
need to be used.
Step 1
Import an image to be used as a background. Place on
on the stage on a separate layer. Call the layer: Background
Layer.
Step 2
Create a new Symbol, call it: BurnSymbol. Edit the symbol and type a word
in the symbol. Use a thin font, and the color Black,
with Alpha set to about 90%.
Here I'm using Arial Black with size 30, which is not quite thin, but
I will make it thinner on Step 5.
Step 3
Break apart the text into curves by selecting all the
letters (do Select All) and then doing Modify>>Break
Apart (or Modify>>Curves>>Break Apart
in Flash 4). Note: This will turn the text object
into curves and you won't be able to change the content of the text
anymore. We need to do this is because the Soften Edges tool only work on curve
objects, and not on a text object.
Step 4
I'm going to make the letter thinner here because we want to
soften the edges of the letters. Make sure everything
is selected, then do Modify>>Shape>>Expand
Fill (or Modify>>Curves>>Expand Shapes if
you're using Flash 4).
Select Inset. I'm using a Distance of 5 px.
That means that 5 pixels will be chopped from the edges of
the shapes. Here's what I got.
If you shrink the shape too much, the shape will get
messed up and you'll start seeing missing parts. In
that case, Undo and use a smaller distance. You might
need to experiment to get a good result.
Step 5
Select all of the shapes if not already selected. Then
do Modify>>Shape>>Soften Fill Edges.
I use distance of 10 px and 10 px. You might have to
experiment to get the best result. If the shape gets
messed up, undo and try again with smaller distance.
Here's what I got:
Step 6
Go back to the main scene. Create a new layer above
the Background Layer (you created the BackgroundLayer
on Step1). Call the new layer: BurnLayer.
Then insert an instance of the BurnSymbol you've just
finished editing into BurnLayer. (If the Burn Symbol
is too large, you can scale it to fit the background.)
Here, notice that the edges of the BurnSymbol are
soft. This is the result of doing the soften edges in
Step 5. Soften Edges added some kind of onion skins
around the edges with decreasing amount of visibility.
Step 7
Now there should be 2 layers on the movie: BackroundLayer
and BurnLayer. Extend the timeline to about 50
frames. Insert a Key Frame on the BurnLayer on Frame
50.
Step 8
Select the BurnSymbol on Frame 1, then do one of the
followings: For Flash MX: go to its Property panel. (ie:
right click on the symbol on the stage, then select Property).
For Flash 5: go to its Effect panel. (ie:
right click on the symbol on the stage, then select
Panel>>Effect).
Change the Alpha to 0%.
Step 9
If you test the movie now. You will initially only see
the background image, and suddenly, the text will
appear.
This is not exactly what we wanted. We want the
transition to be smooth, to accomplish that, we'll use
Tweening. Tweening is an interpolation process that
you can insert between two key frames. There are two
kinds of Tweening: Shape Tween and Motion Tween. We'll use Motion Tween to gradually increase the Alpha
value from 0% to 100%. (Why not use
Shape Tweens? Because we're not going to actually
changing the shape, we're just changing the visibility and
color property of the shape. - But, yeah, the naming is
kinda confusing.)
SO, right click on frame 24 or so, then select Create Motion
Tween.
Step 9 So now we have the BurnSymbol with Alpha=0% at frame 1,
and another BurnSymbol at Alpha=100% in frame 50.
Since we have 50 frames between Alpha=0% to
Alpha=100%, the Tween will add 2% on each frame. So in
frame 2, the BurnSymbol will have Alpha=2%, in frame 3,
Alpha will be 6%, and so on, until it reaches 100% at Frame
50.
Test the movie. You should get this below.
Nice enough so far. You might also want to add a
Stop command at the end so that the animation doesn't keep
repeating.
Step 10 Let's add some more key frames to create more illusions
of a burning paper. Insert a key frame on Frame 32.
Like in Step 8, we alter the appearance of the BurnSymbol For Flash MX: go to its Property panel. (ie:
right click on the symbol on the stage, then select Property).
For Flash 5:
go to its Effect panel. (ie:
right click on the symbol on the stage, then select
Panel>>Effect).
This time, however, we won't be just changing the Alpha,
but we want to change the color also. In MX, select the Advanced tab from Color,
then click Settings. In Flash 5, use the Effect
panel, and select Advanced from the pulldown.
Below, I changed the color and alpha
property of the Burn Symbol so that it appears more
red. Changing the appearance of a Symbol like this is
very similar to the way we change the Alpha value in Step8,
but now, you also have the xR (red), xG (greeb), xB (blue),
and xA (alpha) values that can be altered. You
can play around with the slider to increase/decrease the
red, green, blue color component). The illustration
below shows a reddened BurnSymbol because I decreased the
green and blue values.
This is how the Flash MX Advanced Property
looks like.
This is how the Flash 5 Advanced Property
looks like. It works the same as in MX.
Step 11 Test it, it should look something like this. The
BurnSymbol gradually becomes redder, then settles in.
Step 12 The remaining task is to add more
tweens in between the frames to make the transition
nicer.