Alrighty, Someone had some interest in this sig i created where a window slides back and forth showing a clear part of a blurred picture. So i figured i would make a tutorial out of it.

We start off in photoshop. Create a new blank picture thats 500x100.

Next add whatever you would like to the canvas.. this is the picture i will be using:



Now that you have you picture ready, save it as a jpeg, and call it clear.

Now that you have saved that, in photoshop go to image>adjustments>desaturate. This will make your image black and white.

Once you have done that, go to filters>blur>gaussain blur. Set the radius to 5 or 6. click ok. You image should look like this.



Go to save as, and save this as a jpeg, call it blur.

Open up Flash. Go to modify>document and change the dimensions to 500x100.

Next you will import your clear.jpeg and blur.jpeg into the library by going to file>import to library> then navigate to the files. press F11 to open up the library window if it is not alread open.

Now create 3 layer in flash. Call the bottom layer blur. The middle layer should be called clear. and the top layer name it mask.

lock all layers except blur. In your library window, grab blur.jpeg and drag it onto the stage(or the work area).

Using the align window (ctrl+K if its not already open, or window>align) click the button that says "to stage" then hit the buttons "align horizontal center" and "align vertical center" This should match your picture up with the work area.

Now lock the blur layer, and unlock the clear layer. You will repeat the same process with the clear.jpeg. drag it into the stage area and center it just like you did with the blur picture.

Now lock the clear layer and unlock the mask layer. We will now make the window.

Click on frame 80 on the mask layer. Holding down shift, click on frame 1 on the blur layer. All 3 rows should be highlighted. right click for the frame menu to come up, then choose insert frames.

Now click on the rectangle tool. Under the color menu, which is right below where you picked the rectangle tool, click the pencil icon. a color swatch should appear. in the upper right corner of the box, click the white square with the diagonal red line.

Drag out a box in the stage area. Under the properties window at the bottom of the screen, change the height and width to the following. H=137 W=151.

Move the box to the left where it is just off of the picture. right click on the box and select convert to symbol. Name it mask, and select graphic under behaivior. click ok.

Now go to frame 40, and on the mask layer right click and select insert keyframe. While holding down the shift key, grab the box and move it all the way to the right, just off of the picture.

somewhere between frame 1 and frame 40, right click and select create motion tween. When you drag the slider between 1 and 40, you should see the box move from left to right.

Now right go to frame 80 and right click. Select insert keyframe. Hold down shift and grab the box. Move it back to the left, just off of the picture. in between frame 40 and 80, right click and select create motion tween.

Now that you have created the moving box, select the mask layer, right click, and select mask. Go to control>test movie and you should have something that looks like this:



All that is left is to export, go to file>export movie, then name it and save it as an animated gif.

If you have any questions about this tutorial, or having problems with it, either post or PM me, i will be happy to help.

what is the newest version of photoshop

i believe it is photoshop CS... which is what i used... and the version of flash is Flash MX...

cool tutorial. thanks for posting it

no problem, im glad you liked it Im trying to think up some other stuff that i know how to do in flash, photoshop, and 3ds max cuz its fun to share knowledge haha

Hi I'm new to animation.I wanto know if we should be good at drawing to do animations. Please give me a detailed explanation about that

-renuka