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.  

You can download the sample movie here:

Notes
Once you understand the concept.  You can create a copy of the BurnLayer layer and make some variations to the effect, such as. 

Here, I added another layer on top of the burn layer.  The new layer contains the BurnSymbol that is motion Tweened to white.

 


(C) F. Permadi

<<INDEX>>