Creating opacity gradient mask in Flash 8

26.01.08

Filed Under: Tutorial

You need Flash player to view this. Click here to proceed to download page.

I’m a flash user since version MX, it is a very great tool to create interactive web contents. But there is one effect I want to achieve but couldn’t do in Flash: creating opacity mask. But thing had changed. Opacity mask can be done in Flash since version 8! Hopefully I am not too late to know this. Here I am going to tell you how to create opacity gradient mask with just few lines of codes in Flash.

To do this tutorial, you need Macromedia Flash 8 of course and a picture to mask. Before proceed, you can try to feel the opacity mask effect by dragging the masked image in the flash above, and starts the tutorial.

First, launch the Flash 8 program and create a new flash document. Then, import any picture you like to use and convert it to a movie clip symbol by pressing F8. Then giving this movie clip an instance name call “picture”. Now you can lock the layer and create a new layer on top.

Next, you need to create a opacity gradient mask to mask the picture. Select the Oval Tool and draw out a circle on top of the picture. Delete the stroke if exist and make the Solid Color Fill to Radial Gradient. Now you have to make an end point of the gradient transparent by dragging the Alpha level from 100% to 0%. The circle gradient now is from color and faded to transparent. Select this circle and convert it to movie clip and giving this the instance name “mask”.

Create another layer, and on the first frame, enter the code below:

// to set the mask
picture.setMask(mask);

// to make the opacity gradient mask draggable
mask.onPress = function() {
startDrag(”mask”);
};
mask.onRelease = function() {
stopDrag();
};

Now here is the magical part. To make the opacity mask works, you need to tick Use runtime bitmap caching for “picture” and “mask” instances shown below. It is just located at the bottom of Blend option.

Creating draggable opacity mask in Flash

After ticking for both instances, save this flash document and Ctrl+Enter to test this movie. Now you should have your opacity gradient mask working by just using simple Action Script! Hope this tutorial helps and here I upload my source file to download for your reference.


Download tutorial file (21KB)

Enjoy reading? Subscribe to RSS for future content!

Related Post

14 Responses to “Creating opacity gradient mask in Flash 8”
    Kean Hui
  1. Kean Hui

    Yo! wah is damn cool this tutorial, i love it men, thank for sharing this tutorial! Keep it up men!

  2. jayhan
  3. jayhan

    Glad that you like it, Kean Hui :)

  4. Chris
  5. Chris

    Great job and thanks for sharing it!

  6. niceet
  7. niceet

    very useful

  8. jayhan
  9. jayhan

    Thank you very much :)

  10. Waqas
  11. Waqas

    Cool… I’ve been looking for this from so long ;) Great !

  12. jayhan
  13. jayhan

    Glad that you found it :D

  14. SABER
  15. SABER

    It does not work, can you help me in this regards, I am using Flash MX

  16. jayhan
  17. jayhan

    hi SABER, Flash MX does not support this feature, you need at least Flash 8

  18. mo7lq
  19. mo7lq

    great….thank you

  20. ремонт офисов
  21. ремонт офисов

    Гммм…не понял ход мысли.

  22. sam
  23. sam

    thankyou for sharing, I’ve been frustrated with the same issue and have been forced to import .pngs from Fireworks to achieve the affect - this is great!

  24. arias881
  25. arias881

    Подскажите, как бороться с этим С П А М О М?

  26. Creating opacity gradient mask in Flash 8 | Tutorial Collection
  27. Creating opacity gradient mask in Flash 8 | Tutorial Collection

    [...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Thursday, July 2nd, 2009 at 4:14 pm and is filed under Adobe Flash Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]

Leave a Reply

Subscribe to comments feed RSS.