Loading...


bookmark - Creating A Blur Animation Using photoshop and Flash

Creating A Blur Animation - Using photoshop and Flash

 
 Discussion by gamerchick39 with 5 Replies.
 Last Update: February 19, 2008, 11:22 am
 
bookmark - Creating A Blur Animation Using photoshop and Flash  
Quickly Post to Creating A Blur Animation Using photoshop and Flash w/o signup Share Info about Creating A Blur Animation Using photoshop and Flash using Facebook, Twitter etc. email your friend about Creating A Blur Animation Using photoshop and Flash Print
Reply / Comment New Discussion / Topic Share / Bookmark E-Mail a Friend Print

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:

ewjcolor.jpg

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.

ewjbwblur1.jpg

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:

ewj.gif

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.

   Tue Jul 26, 2005    Reply         

what is the newest version of photoshop

   Tue Jul 26, 2005    Reply         

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

   Tue Jul 26, 2005    Reply         


cool tutorial. thanks for posting it :)

   Thu Jul 28, 2005    Reply         

QUOTE (Neverseen)

cool tutorial. thanks for posting it :)
[post="46164"]<{POST_SNAPBACK}>[/post]


no problem, im glad you liked it :P 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 :P









   Fri Jul 29, 2005    Reply         

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

   Tue Feb 19, 2008    Reply         


Quickly Post to Creating A Blur Animation Using photoshop and Flash w/o signup Share Info about Creating A Blur Animation Using photoshop and Flash using Facebook, Twitter etc. email your friend about Creating A Blur Animation Using photoshop and Flash Print
Reply / Comment New Discussion / Topic Share / Bookmark E-Mail a Friend Print

Similar Topics:

I Need A Few Tips On Creating Brush...

Umm...need some tips and guidelines for photoshop. Im not very good because , mainly , i dont use brushes. I use only filters. All the brushes that i have are alright...but im interested in creating my own. I hope someone here can help me...can you? ANyone? My friend t ...more

   22-Oct-2005    Reply         

Photoshop Tutorial Creating Action...

For those of you who don't already know, Photoshop has these nifty little features called Actions. Now, these actions can be used for many things, including the creation of beautiful and eye catching effects, maximizing your productivity, or simply to carry out the tedious and mundane tasks that ...more

   28-Jan-2006    Reply         

Photoshop Tools Reloaded

Info: Did you ever wonder, while working in Photoshop: what does this tool do? Then this brief tutorial is for you. You will learn what are the most used tools in Photoshop, their names, what to do with chosen tool, and for what purpose. [img]http://img225.ima ...more

   21-Jul-2006    Reply         

3dsmax Tutorial #4 My next reactor Tutorial   3dsmax Tutorial #4 My next reactor Tutorial (2) (1) How To Add A Film Edge To Your Photos Adding a film edge  How To Add A Film Edge To Your Photos Adding a film edge