Applying Masking to a Picture

In this toturial, you're going to learn how to apply Masking to a picture.

1:

Select the first layer, right-click it and rename it to "Picture".

  • Select the first keyframe of the "picture" layer and go to File>Import and import the picture you desire to mask.
Fig 1

Tip: It is strongly recommended to use a .PNG image format instead of a .JPG for best results in flash.

2:

  • Click on the icon to add a new layer. Name the new layer "Mask".

This layer will hold the object that will be used to reveal the base picture.

  • Select the Oval Tool from the Toolbar and draw a circle while the first keyframe of the "Mask" Layer is selected.
Fig 2

3:

  • Apply Motion Tween to the circle and make it go accross the picture.

Make sure you extend the keyframes of the "Picture" to match the length of the "Mask" keyframes as shown in Fig 3.

Looking good :) the next step is the last one and your mask should be ready!

Fig 3

4:

  • Right-click on the "Mask" layer and select Mask from the drop-down menu.

The result should be similar to Fig 4. You'll notice the base picture can only be seen through the oval shape you drew.

Fig 4
  • Go to windows>test movie.

You're done!

Be creative:

  • Try to draw different shapes of masks and apply additional motion tween to it.
  • Try to add Shape Tween instead of Motion Tween.
  • You can mask virtually anything, try masking Text.

Conclusion:

What we did:

  • We created 2 layers, the bottom one holds the stuff you want to be masked, and the top one is the object that is used to do the masking.
  • Applied motion tween to the Masking object.
  • Right-clicked on the masking layer and applied "Mask" to it.
  • Tested the movie.
Download *.fla

Close    To Top
  • Prev Article-Flash:
  • Next Article-Flash:
  • Now: Tutorial for Web and Software Design > Flash > Basic > Flash Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction