//
you're reading...
Flash

Create Burning Image Effect

In this tutorial, you will learn how to create a burning effect to an image in Flash using advanced masking techniques.

Download flash document below:
Source File (.fla)

Let’s Start:

Here we are taking new flash document with action script 2.0. See the reference image below.

Creating an Advance masking effect with an image in Flash!

Step 1: Setting Up Document Properties

Now Select Modify from the menu bar and select Document or You directly can press ctrl + J to open the document properties.

Creating an Advance masking effect with an image in Flash!

Now change the stage dimensions as 600×433 and the FPS is 30, as shown in the Figure below. To start with the tutorials download the source.zip file that will provide you with the necessary files to be used in the tutorial.

Creating an Advance masking effect with an image in Flash!

Step 2: Importing necessary image

First import the downloaded used images from the source. To do that, Go to the File menu > Select Import > Select Import to Library. See the reference image below.

Creating an Advance masking effect with an image in Flash!

Step 3: Positioning images on to the stage

Before starting we already have layer 1, now name the layer as background. Drag the background image from the library on to the stage.

Creating an Advance masking effect with an image in Flash!

Align the image to the center of the stage using the align panel. Keep in mind that to align any item to the center of the stage, Press the “To stage” button.

Creating an Advance masking effect with an image in Flash!

Step 4: Positioning other images on to the stage

Insert a two other new layers and name them as man_normal and man_rock.

Creating an Advance masking effect with an image in Flash!

Step 5: Creating mask shape

Now insert a new layer above the man_rock layer, and name it as mask shape. Then copy the man_normal image and paste it on mask shape layer by pressing ctrl + shift + V.

Select the mask shape layer image and break apart it. To do that Select modify from the main menu and select break apart or Press Ctrl + B.

Creating an Advance masking effect with an image in Flash!

Now select the lasso tool from the tools panel and magic wand from the lasso tool option.

Creating an Advance masking effect with an image in Flash!

Now click on the transparent area as given in the reference image below and press delete to remove the transparent area.

Creating an Advance masking effect with an image in Flash!

Now select the remaining area using selection tool and fill any color in it.

Creating an Advance masking effect with an image in Flash!

This shape is that area where our effect will be displayed.

Step 6: Preparing the effect item

Now insert a new layer below the mask shape layer and name it as effect. Press Ctrl + F8 to create a new symbol. Type the name effect_mc and select type to Movie Clip.

Creating an Advance masking effect with an image in Flash!

Now create a line of yellow color as given in the reference image. Increase stroke to 15 and select the style to stippled. You can see the line effect.

Creating an Advance masking effect with an image in Flash! 14

Now convert the line to fills. To do that, Select Modify > Select Shape > Select Convert Lines to Fills.

Creating an Advance masking effect with an image in Flash!

Step 7: Creating the effect animation part 1

Now insert a key frame on frame 10. To do that, select the frame > Press F6.

Creating an Advance masking effect with an image in Flash!

Now flip this line to Horizontal after that flip to vertical. To do that, Select Modify > Select Transform > Flip Horizontal. Again do the same method but select Flip Vertical.

Creating an Advance masking effect with an image in Flash! Creating an Advance masking effect with an image in Flash!

Now Select any frame between frame 1 and frame 10 and create shape tween. To do that, Right click on the selected frame>Select Create Shape tween.

Creating an Advance masking effect with an image in Flash!

Step 8: Creating the effect animation part 2

Now come to the main time line and Insert a new movie clip symbol. To do that, Press Ctrl+f8. Type name effect animation and select the type movie clip.

Creating an Advance masking effect with an image in Flash!

Open the library panel by Pressing Ctrl+L. Then drag the effect_mc movie clip symbol from the library.

Creating an Advance masking effect with an image in Flash!

Copy this symbol four times. To copy, Press Ctrl+C, then Ctrl+V, how much you want.

Creating an Advance masking effect with an image in Flash!

Step 9: Placing the effect animation on the stage

Now insert a new layer above the man_normal layer and name the layer as effect.

Creating an Advance masking effect with an image in Flash!

Open the library panel by Pressing Ctrl+L. Then drag the effect_animation movie clip symbol from the library to the stage at the bottom.

Creating an Advance masking effect with an image in Flash!

Step 10: Applying blending modes to the effect

Now select the effect_animation symbol and Open the properties panel. To open the properties panal, Go to the Window menu > Select the properties. Apply the blending mode, to do that, Go to the Display option in the properties panel > Choose Add from the blending drop down menu.

Creating an Advance masking effect with an image in Flash!

Step 11: Applying Blur filter to the effect

Now apply the Blur filter. To do that, Go to the Filter option in the properties panel > Select new filter > Blur.

Creating an Advance masking effect with an image in Flash!

Now set the blur value. To do that, Set the Blur X and Blur Y value to 5px, and choose quality to High.

Step 12: Transforming the effect animation to fit in the shape

Now increase the width of the effect_animation symbol. To do that, choose Free transform tool from the tool panel then Select the symbol and increase the width.

Creating an Advance masking effect with an image in Flash!

Step 13: Creating motion tween for animation

Now go the frame 200 and insert a new key frame on effect layer. To do that, select the frame > Press F6.

Creating an Advance masking effect with an image in Flash!

Now move the effect_animation symbol to the top of the mask shape as given below the reference image.

30

Now select any frame between frame 1 and frame 200 of effect layer then Right click > select create classic tween.

Creating an Advance masking effect with an image in Flash!

Step 14: Creating masking

Now select the mask shape layer and right click > select mask.

Creating an Advance masking effect with an image in Flash!

Step 15: Creating masking two remove the man

Now insert a new layer above the man_normal layer and name the layer as mask.

Creating an Advance masking effect with an image in Flash!

Draw a rectangle on the mask layer to cover the man image.

Creating an Advance masking effect with an image in Flash!

Now go the frame 200 and insert a new key frame on mask layer. To do that, select the frame > Press F6. And decrease the height of the rectangle as shown in the reference image below

Creating an Advance masking effect with an image in Flash!

Now select any frame between frame 1 and frame 200 of mask layer then Right click > select create shape tween.

Creating an Advance masking effect with an image in Flash!

Now select the mask layer and right click > select mask.

Creating an Advance masking effect with an image in Flash!

Step 16: Giving stop action at the end

Now insert a new layer above all the layers and name the layer as Action. Select the frame 200 and press f6 to insert the key frame. Then press f9 to open the Action window, and write the given code as shown in the reference image below.

Creating an Advance masking effect with an image in Flash!

Now press Ctrl + Enter to see you effect. You will find the effect something like this.

Creating an Advance masking effect with an image in Flash!

Hope you enjoyed this tutorial on creating a burning effect on an image using advanced masking effects! Let us know what you think by sharing your comments in the comments form found below.

Tutorial originally taken from:
http://www.tutorialized.com

Discussion

No comments yet.

Leave a comment

Calendar

March 2012
M T W T F S S
 1234
567891011
12131415161718
19202122232425
262728293031  

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 6 other subscribers