Client LoginView your Shopping CartHelp & Frequently Asked QuestionsEmail Us
Home Services Portfolio Web Design Pricing Dreamweaver Templates Web Applications Free Tutorials About Contact Us
Services > CSS Web Design | Professional Logo Design | ASP.net, ASP & PHP Programming | Flash Animation & Programming | Reliable Web Hosting | Website Maintenance
Portfolio > Web Design Portfolio | Web Programming Portfolio | Logo Design Portfolio | Web Design Pricing > Custom Web Design | Logo Design | Business Card Design
Web Design Guide > Website Design w/ Dreamweaver & Fireworks | Fireworks CS4 Cool Features | Photo Effects | Text Effects | Graphic Design Ideas | Web Design Ideas
Website Navigation Ideas | CSS Styles Tutorial | Dreamweaver Template | Server Side Includes | Flash Tutorials > Flash Effects | Flash Sound Button | Sound On/Off Button
Flash Preloader | Import External Data | Promotion > SEO Tips | Google Tips & Page Rank | JavaScript > Date Validation | Email Validation | Phone Validation | Tip Boxes

Photo Masking Effects

How to create simple photo masking effects with Flash

In this Flash tutorial you are going to learn how to create great looking photo masking effects. We will be covering: Simple Photo Masking, Motion Photo Masking and Smooth Fade Photo Masking.

Recommended Version: Adobe Flash CS4 Professional

Compatible Versions of Flash for this Tutorial

Flash MX 2004 & below | Flash 8 | Flash CS3 | Flash CS4
Note: For uses of lower versions of Flash some visual interface images would differ.
Recommended Version: Adobe Flash CS4 Professional
You Are Here ::: Home >> Free Tutorials >> Flash Tutorials >> Photo Masking Effects

Please carry out the following steps in Flash to create the photo masking effects.

Simple Photo Masking

  1. Import (Ctrl + R) any color photo to be masked and its black & white version onto the stage.
  2. Now add a new Layer and move the Color picture into it. Make sure both pictures are perfectly on top of each other.
  3. Add a new Layer above the color picture layer and name it as 'Image Mask'.
  4. Draw any vector, say a rectangle with a height more than the picture height and width say 100. Convert the vector to a graphic symbol (select and press F8).
  5. Right-click the Layer named 'Image Mask' and select Mask from the pop-up menu. This command will make the current 'Image Mask' layer to mask the layer below it (containing the color photo), resulting in the color photo being shown only the area specified by the mask layer.
  6. Save your work and test the Movie (Ctrl + Enter). The movie will look similar to our example above. That's it you have learnt simple photo masking.

Motion Photo Masking

  1. Advanced effects can be created by using Motion Tweened animation as a mask on an object in Flash.
  2. In the above example Create Motion Tween for the rectangle graphic and make the mask slide up and down, the timeline is shown below:

  3. Fig: Timeline of Advanced Mask

  4. Save your work and test the Movie (Ctrl + Enter). That's it, your cool photo masking advanced effect is ready!

Smooth Fade Photo Masking

Read how to create a smoothly fading photo masking effect and also learn optimization tips while masking photos.


In the following Flash tutorials you'll learn how to create cool flash effects using simple techniques like tweening, masking, etc.:

We would love to hear your comments and any suggestions on future tutorials we can add to this section. Thanks!

Fill the below form to submit your comments (or suggestions):
Bookmark and Share this web page.
Sponsored Link(s):
Beauty Templates | Business Templates | Christian Templates | CSS Templates | Education Templates | Family Templates | Flash Templates | Free Dreamweaver Templates
Food Templates | General Templates | Government Templates | Health/Medical Templates | Hi-Tech Templates | Kids/Childcare Templates | Low-cost Budget Templates
Personal Templates | Pets Templates | Photography Templates | Profession Templates | Real Estate Templates | Sports Templates | Telecom Templates | Travel Templates
Free Tutorials > Web Design Tutorials | CSS Web Design | Fireworks Tutorials | Dreamweaver Tutorials | Flash Tutorials | SEO Tutorials | Javascript Tutorials | PHP Tutorials