Flash Mask Effect

Click here to see another example. Tutorial is on the video section of the forum.

Part1: Getting the images and editing it in Photoshop.
First find a image that you want to add the effect to, I found the image I used in this tutorial from freephotosbank.com. Click here to copy the image I used, after copying the image and paste it into Photoshop. Duplicate the image 2 times, click on the layer you duplicated and click Filter Blur -> Gaussian -> Blur... as shown below.

After that the window below will come up, change the Radius to 6.5 pixels and click ok.

If you want to give you image any kind of effect you can do it. I added a stroke to the images using blending options. After you are satisfied with your images you have to export both the blurred image and the original. we will do this one at a time, Hide all the layers except the one you want to export

after that click File -> Save for Web... save the image as JPEG. Repeat this for the blurred image.

Part2: Importing the images into Flash and working with it.
Create a new Document using the settings shown below. The dimensions will depend on your image size you are using.

Next import the Blurred image first into flash File -> Import -> Import to Stage.

Change the X and Y positions to 5 as shown below.

Create a new layer, and import the Original Image. Use the same position as above. Your layers setup should look like the screenshot below.

Part3: Creating the Icon that follows the icon.

Next insert a New Layer and name it border, as shown below.

Click on Frame 1 of the Border layer. Click on the Rectangular Tool using the settings below.

Create a small square.

Next insert a New Layer and name it Mask, as shown below. Make sure the layer position is the same as mine in the image.

Click to select the Mask Layer using the Rectangular Tool with the settings below.

Create a Rectangle in side the border, as shown below.

Part4: Adding the code to allow the mouse to follow your courser.
First we need to convert the images on the mask and border layers to a movie clip. Make sure the Mask layer is selected right click on the Blue square and select Convert to Symbol

The window below will come up select Movie Clip and click ok.

After that click windows-> properties -> properties

Change the Instance Name to px1 as shown above. Repeat step 4 for the border layer. In this case change the Instance Name to px2.

Click on the first frame, of the border layer and open up the Action window. with the action window open copy and paste this code into the First Frame.

speed = .9; setInterval(CursorMovement, 40); function CursorMovement() { px2._x = speed*(px2._x-_xmouse)+_xmouse; px2._y = speed*(px2._y-_ymouse)+_ymouse; }

With that click on the first frame, of the Mask layer and add the code below.

speed = .9; setInterval(CursorMovement, 40); function CursorMovement() { px1._x = speed*(px1._x-_xmouse)+_xmouse; px1._y = speed*(px1._y-_ymouse)+_ymouse; }

At this point your layers should look like the image below.

Part5: Adding the Mask Effect.
Right click on the Mask Layer and click Mask.

Now go test your movie.

Finished:
Well that is it. Hope it is what you expected. If you have, any questions or comments feel free to e-mail me or leave a message on the forum. If you are having a hard time with the tutorial email, me and I will try to help. I also created a video tutorial for this example. The file is a 9 MB flash file. I have the link up on the video section on the forums. Users have to register to view the file, click here to register and view the file.

----------------------------------------------------------------------------------------------

Posted in: Mask in Flash