Client LoginView your Shopping CartHelp & Frequently Asked QuestionsEmail Us
Home Services Portfolio Rates & Deals Dreamweaver Templates Web Applications Free Tutorials About Us Contact Us
Web Design Guide > Best Web Design Tools | Web Design Ideas | Web Design Tips | Navigation Tips | Fireworks Tips | Rollover Images | Swap Images | CSS Styles Tutorial
Dreamweaver Tips | Dreamweaver Template | Server Side Includes | Dreamweaver Behaviors | Flash Tutorials > Flash Effects | Flash Sound Buttons | Sound On/Off Button
Flash Preloader | Importing External Data | Promotion > SEO Tips | Google Tips & Page Rank | JavaScript > Date Validation | Email Validation | Phone Validation | Tip Boxes

Flash Photo Masking Effects

Flash Animation Tutorials >> Cool Flash Effects >> Photo Masking Effects

Flash Tutorial to create simple photo masking effects

Please carry out the following steps in Macromedia 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.

Advanced 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

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

Cool Flash Effects

Effect 1: Fade-in Fade-out Effect

Effect 2: Zooming Effect

Effect 3: Advanced Alpha Tweening - Ripple effect

Effect 4: Simple Photo Masking

Effect 5: Advanced Photo Masking

Absolutely FREE Web Templates
Check out these quality free web templates and download them without any registration or sign-up!

FREE Web Design Guide
From web design tips & ideas to HTML, CSS Styles, Fireworks & Dreamweaver you'll find all you need to know about effective web site design right here!

Quality Dreamweaver Templates
Professional quality dreamweaver templates in over 20 categories, starting at just $9.95! Instant download & easy customization

Services > Rapid 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 | Print & Logo Design Portfolio | Flash Animation Portfolio | Outsource Clients Portfolio | Client Testimonials
Rates & Deals > Web Design Rates | Custom Web Design Pricing | Logo Design Pricing | Business Card & Letterhead Pricing | Web Hosting Plans | Website Maintenance Plans