In this tutorial, you will learn how to do an effect like the one you see below, with masking. It is a cool effect you can use in header animations, banners and whatever you can think of.
- Part 1
1. Step one, let's do some photoshop work.
Do an image in photoshop similar to the one above. To give the image a single tone, click image, adjustment, hue and saturation. Check the colorize check box and play with the settings. When you are done, save for web. Use as much much compression as possible (low quality) because we are going to import this jpeg image into flash and bitmaps bloats up the swf file size really fast..
- Part 2
2. Now for FLASH! open a new movie and set the dimensions to 500x350 with a nice frame rate of 20 - 30 fps. We want our effect to be smooth so a high fps is a must.
3. Set up the timeline with 2 layers. One for the bg image and one for the effect.
Now import the image we did in photoshop earlier in the BG IMG layer.Do not resize the imported image in Flash as flash handles bitmaps like browsers, they will look distorted if resized.
Go to the library (F11) and double click the bitmap symbol and uncheck allow smoothing. These are the little things you can do to make sure your animation turns out nice.
4. Now we are going to set up the mask.. select the line tool, use a thickness of around 1pixel and start tracing along the lines of the image. Do this on the EFFECT layer!
- Part 3
Be careful not to overcrowd the image with the lines. I had chosen this picture because it had alot of lines to play with. Select all the lines by clicking on the frame and press F8 to turn the lines in a Movieclip symbol, name it maskeffect or whatver.
Double click the movieclip and go into symbol editing mode. You now have all the lines in the movieclip on layer 1. Rename layer 1 to "Mask" by double clicking on the layer name. select all the lines again and got to Modify > Shape > Convert Lines to Fills. Now lock the layer, we will come back to it later.
5. Insert a new graphic symbol (CTRL + F8), name it "chrome" and do a nice rectangle and linear gradient fill it.
Make both ends of the linear gradient Alpha 0%.
6. Go back to the maskeffect movieclip timeline. Insert a new layer below the one you have now and drag the chrome graphic symbol from the library onto the stage.
Give the chrome symbol a left to right Motion Tween of around 20 to 25 frames depending on the speed you want it to be in. Ease the tween to a value of -100 so it accelerates towards the end.
7. Now go to the layer with all the lines converted to fills, right-click and select mask to turn the layer into a mask.
8. Test the movie (CTRL + Enter) and you should see your proud effect!
9. This concludes the Cool Masking Effect tutorial. I hope you've liked it.