feedburner
Enter your email address:

Delivered by FeedBurner

feedburner count

Flash: Alpha Mask Effect

Labels: , ,

 Happy New Years everyone! I am finally back after a long year of school work. Now let's kick off the new start of Learn2Flash with an easy image effect tutorial.


The Final Result:




Step 1) Open up a new Flash File (ActionScript 2.0) and click on - Modify - Document to adjust the Height:307 Width: 404.

Step 2) Import the image to the stage (Ctrl+R) and change the picture's dimensions to the same as above in the properties section. Remember to Align it to the stage.

Step 3) Go to Modify - Convert to Symbol (F8) and convert it into a MovieClip. Once that's done in the Instance Name field enter "pic" as shown below and also tick the box "Use runtime bitmap catching".


Step 4) Still on your picture layer, click on the 15th frame and press F5 or right-click, Insert Frame.



Step 5) Create a new layer above your picture and draw a small oval in the center (Stroke: None, Fill: Black). Select the oval and press F8 to make this a MovieClip Symbol. 

Step 6) Select your oval and in the Instance Name field enter: mask_mc.(This is an important step as it will be used in our ActionScript).



Step 7) Go to Filter and add Blur to your oval at Blur X: 100, Blur Y: 100.



Step 8) In frame 15 of your oval, press F6 to Insert a Key Frame (Right Click, Insert Keyframe) and in the 15th frame use the Free Transform Tool (Q) to click and drag your oval to become bigger (but smaller than your actual picture).

Step 9) Right click in anywhere between the 1st and the 15th frame and click on Create Motion Tween.

Step 10) Create a new layer and this is where the AS code will be inserted. On the first frame press F9 to insert the AS code link .



Step 11) Go to the 15th frame and create a Keyframe (F6) and insert this code if you do not wish the Flash to replay.




Finished and Enjoy your holidays!



15 comments:
gravatar
best-tutorials.org said...
January 3, 2009 at 11:26 PM  

add to www.best-tutorials.org

gravatar
Anonymous said...
January 6, 2009 at 9:31 PM  

very good

gravatar
Anonymous said...
March 4, 2009 at 1:52 AM  

great

gravatar
mann said...
March 7, 2009 at 1:52 AM  

fantastic

gravatar
mann said...
March 7, 2009 at 1:53 AM  

fantastic :)

gravatar
Mark said...
April 21, 2009 at 4:55 PM  

How would you do this in ActionScript 3?

gravatar
Learn2Flash said...
April 22, 2009 at 12:55 AM  

Hi Mark:

To be honest I really have no clue because this effect is only supported in earlier versions of Flash (actionscript 2). Maybe it is possible for you to find similar effects on the web that is compatible with AS3?

-Learn2Flash-

gravatar
Mark said...
April 23, 2009 at 5:26 AM  

I couldn't get it to work even in AS2 to be honest. Maybe it's just me, but I did everything the tutorial says and many times.

gravatar
Mark said...
April 24, 2009 at 12:15 AM  

It works just fine in AS 2 at least! Thanks!

gravatar
Mark said...
April 24, 2009 at 1:03 AM  

On my opinion, you dont need a keyframe in the 15th frame of the oval, just the tween and transform will do. For me it worked when I omitted that keyframe,

gravatar
Learn2Flash said...
April 24, 2009 at 3:34 AM  

Hi Mark:
Glad it worked out fine for you. Feel free to make up your own creations of how to do the same effect, that's why we're here isn't it? To learn to flash :)

-Learn2Flash-

gravatar
slideshow said...
April 29, 2010 at 3:34 PM  

works fine and smoothly... is there a way to add this to backgrounds of elements such as a div?

gravatar
Anonymous said...
May 7, 2010 at 3:47 AM  

You know.. after 2 days google search i found this. thanks... thank you very much.

gravatar
Mike Thomson said...
June 4, 2011 at 10:08 AM  

Hi, thanks for this very informative article. I like it. =)
Cheers from t shirt printing company.

gravatar
Mike Thomson said...
June 4, 2011 at 10:10 AM  

Hi, thanks for this very informative article. I like it. =)
Cheers from t shirt printing company.

Post a Comment

Post a Comment