Creating A Blur Animation - Using photoshop and Flash

free web hosting
Free Web Hosting > Computers & Tech > How-To's and Tutorials > Graphics and Animation

Creating A Blur Animation - Using photoshop and Flash

gamerchick39
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:

user posted image

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.

user posted image

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:

user posted image

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.

 

 

 


Reply

stibz
what is the newest version of photoshop

Reply

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

Reply

Neverseen
cool tutorial. thanks for posting it smile.gif

Reply

gamerchick39
QUOTE(Neverseen @ Jul 28 2005, 03:44 AM)
cool tutorial. thanks for posting it smile.gif
*



no problem, im glad you liked it biggrin.gif 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 wink.gif

Reply

iGuest
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

Reply


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.

Recent Queries:-
  1. flash tweening reflection image horizontal slider - 42.44 hr back. (1)
  2. actionscript blur mask - 46.34 hr back. (1)
  3. photo blur mask flash actionscript tutorials - 67.36 hr back. (1)
  4. how to flash blurred image get clear mask - 75.54 hr back. (1)
  5. flash 8 blur animation - 77.72 hr back. (1)
  6. animated bottom flash - 98.17 hr back. (1)
  7. flash mx 2004 serial code? blured picture - 115.09 hr back. (1)
  8. photoshop animation flash export - 136.86 hr back. (1)
  9. how to create motion animations using photoshop cs2 - 138.41 hr back. (1)
  10. adobe flash blur animation - 175.93 hr back. (1)
  11. blur animated - 178.07 hr back. (1)
  12. photoshop blurry to clear animation - 187.40 hr back. (1)
  13. blur animation in 3ds max 8 - 188.60 hr back. (1)
  14. blurred mask on flash screen - 204.47 hr back. (1)
Similar Topics

Keywords : creating, blur, animation, photoshop, flash

  1. Create An Animation With Powerpoint
    (1)
  2. Photoshop 7.0 Wdc: Feature Area
    Photoshop 7.0 Web Design Component: Feature Area (3)
    Web design is a highly competitive profession when you have thousands, if not, millions of other
    professional web designs to rank up with. This small tutorial will attempt to draw out the
    simplicity of designing web components for a specific page. We will be creating a simple feature
    area box that conveys a clean, but professional impression. It is assumed that Adobe Photoshop 7.0
    is the image manipulation software being used and that the user understands the basic functions and
    menu navigation of this application. Start out by creating a new 500px by 250px document u....
  3. Learning To Use The Pen Tool In Photoshop
    (0)
    The Pen Tool is a great utility that everyone who wants to use Photoshop well should know about. In
    this tutorial I will cover a few things: 1. Basics 2. Things to Remember About the Pen Tool 3.
    Cutting Out an Object (1) Basics: Ok, so some people can use it, and others can't, but
    nevertheless it is a very useful tool that I find myself using every time I use Photoshop. It makes
    very nice curves and is much more flexible and useful than any of the marquee tools. To begin,
    select the pen tool from the bottom left of the third section of the left toolbar. Nex....
  4. Photoshop Abstract Signature Tuturiol
    (0)
    Well I made this a little bit ago for a site called Gamexe.net, note i put .com on accident but
    other than that it should work just fine. Please do not put this on any other website without my
    permission. If you want to know what brushes I used just ask, I don't feel like figuring out
    right now =P In response to buffalo i present you words! Complete Abstract Signature By =|
    |= Arkane of Gamexe.net DO NOT POST THIS ON ANY OTHER SITE WITHOUT MY PERMISION Create a new image
    350px x 125px Fill the layer with black Brush the layer white with an abstract brush ....
  5. Guts Tutorial For Photoshop
    (1)
    Quick and easy tutorial on how to make realistic guts/brains/slime in Photoshop. I originally made
    the tutorial for deviantART here . Hope you enjoy! Please contact me (shrooder@gmail.com)
    if you want to host/distribute this tutorial. I think you posted somewhere else about credits
    for tutorials, nice tuturial this but wont earn many credits because its graphical, I think Vujsa
    suggeseted cutting up the image into slices then using text to explain more of whats going on in the
    images. ....
  6. Photoshop Text Effect
    A photoshop text effect i found and thought was kool (1)
    Ok, well the other day i was making a video *dont ask why* and for the intro i wanted some pretty
    cool font, and font effects and so i experamented with Photoshop for a while until i came up with
    somthing i liked and i liked what i came up with so i think imma share it with people /biggrin.gif"
    style="vertical-align:middle" emoid=":D" border="0" alt="biggrin.gif" /> QUOTE First off i used
    the font Angryblue Available for download Here for PC's and Here For Mac's Now lets
    start off by getting a new or existing image, for existing image just open an exi....
  7. Photoshop Elements Tutorial: Importing Pen And Ink Drawings
    Scanning or photographing sketches with Photoshop Elements (0)
    This is a quick tutorial on how to import and process pen and ink sketches using photoshop elements
    using either a flatbed scanner or a camera with a document mode. I have a graphire digital tablet,
    but I have a lot of work that has already been done on paper and I also do a lot of paper sketches
    on the road. It is not hard to digitize these sketches, but it takes some care. I will talk about
    using both a flatbed scanner (HP OfficeJet All-In-One) and a camera (Kodak EasyShare Z700) with a
    document or text mode. Cameras with no optical zoom and no document mode are possi....
  8. The Very Basics Of Animation
    (8)
    Welcome, Many people feel they want to learn animation and want to do those animated effects. Most
    people think animation is very hard, but the fact is it isn’t at all. I thought that if I created a
    tutorial it would help people ion this situation to understand these basics of animation and how
    easy it really is once you spend some time with the piece of software you use whether it’s
    Macromedia MX Flash or something else, I use ImageReady, part of Adobe Photoshop and is very useful
    for animating. I wrote this tutorial for beginners wanting to learn the basics of Animati....
  9. Flash Button With Sound
    (9)
    This is a tutorial about adding sound to a button in Flash. 1.Go to menu
    :File\Import\Import to library 2.Select the sound file you want 3.Open the library panel
    (You can also press Ctrl + L) 4.Right-click on the sound you imported 5.Click "Linkage..." from
    the menu 6.Check "Export for ActionScript" & "Export in first frame". 7.Enter a name for sound in
    "Identifier" field (This is the name you will use to address your sound from now on) For example :
    "thesound" 8.Press "OK" 9.Choose an action frame of the movie where your button is in 10.In the
    acti....
  10. Adobe Photoshop Blur Tutorial
    HEAD of TRAP17.com GFX Crew (6)
    well this is going to be my first blow tutorial, well sort of since all you will be learning is a
    filter trick that picked up, so lets get down to the basics Step 1:start your computer Step 2:
    start adobe photoshop 7, 8(CS 1) , 9 (CS 2) Step 3: the next part well i would have to say use a
    big size document the one i used was 372x478 since i used the original size of the render when i
    start this project. Step 4: next you pick your render, i highly recommend getting a renders that
    doing some sort of action that requires motion, the one i used was a carnage/venom render....
  11. Making A Nice Looking Signature In Photoshop Cs
    Some basic Photoshop skills required... (17)
    Here's a guide you can use to help you make a signature image in Photoshop CS. Before we begin
    you need to pick out a good "render" for your signature. A render is basically an image that takes
    the focus in your signature, the render I will use currently looks like this First off I hit
    Ctrl+A and then Ctrl+C, then I go to File> New, and I set my image proportions to 410 wide, and 165
    high. Then I hit Ctrl+V and right click the eraser tool I select the Magic eraser tool, I hold down
    Ctrl and then left click my render. I move my render all the way to the right, th....
  12. Quick/easy Clouds Using 3ds Max
    Creating Volumetric Clouds Using 3DS MAX (0)
    Quick And Easy Volumetric Clouds Using 3ds Max (This tutorial takes estimated 2 mins if you have a
    basic knowledge of max but if not Ive included step-by-step pictures) 1. Open Max or If opened
    already reset it to a blank scene. First we are going to create the blue hemisphere atmosphere.
    2. Create a sphere. With the setting of Radius 50.0 and 32 segments. 3. Goto the modifier panel and
    add a "normal" modifier and make sure "flip normals" is selected. 4. Now add a edit mesh
    modifier. 5. Under the selection panel of the edit mesh modifier select vertex. 6. ....
  13. How To Use Pivot
    The stickfig animation maker (16)
    Hey Guys and Gals I wanted to show everyone Pivot. What is pivot you may be asking well its a
    stickfig animation maker . Not many have heard of it so ill instruct you on how to use it and where
    to get it. Where to get Pivot You can get pivot here: Pivot Now download it and install it.
    Now that you have it installed it load it and you'll see a screen like the one below: Now
    what you may be asking. You see the little red circles click on one and drag it to the right. It
    moves amazingly. Now click Next Fram and now your screen should look sort of like this....
  14. Importing Video Files In Flash Mx 2004
    (0)
    Importing video files in FLASH MX 2004 Flash support following video formats "MOV, AVI, and
    MPG/MPEG",you can import a video as an embedded or a linked file, NOTE : embedded video can be
    published as swf files, and linked video must be published in QuickTime format.If you import a
    video as an embedded file, you can edit the video settings before importing it, such as
    bandwidth,quality settings,color correction, cropping. for this purpose Flash use "Sorenson Spark"
    encoder and decoder. follow below steps for importing an embedded video clip: 1) To import the
    video ....
  15. 3ds Max Tutorial #2-creating Reflective Materials
    (1)
    The next tutorial is based on creation of a reflective material in 3ds max. this tutorial will help
    u create a surface that reflects everything in sight. 1. Fire up 3dsmax. 2. Press 'm' 3.
    Change the box where u see 'Normal' i.e. material type. Change it to raytrace. 4. Change the
    colours to the colours you want. 5. In the maps section click the box next to reflection. 6. Select
    raytrace from the list. 7. Apply the material to any object. 8. Render the scene
    Voila!!! you have created a reflective material. You can also try.. 1. Using the ....
  16. Photoshop Graphics Effects
    Learn how to make cool graphic effects (31)
    1) Open a new document (any size) and reset your colors by pressing D then X 2) Go to
    FILTER>RENDER>DIFFERENCE CLOUDS 3) Go to FILTER>BLUR>RADIAL BLUR with these settings Amount:100
    Blur Mehod: Zoom Quality: Best 4) Go to FILTER>ARTISTIC>PLASTIC WRAP with these settings Highlight
    Strength: 15 Detail: 9 Smoothness: 7 5) Do another FILTER>BLUR>RADIAL BLUR with the same settings
    as before 6) Go to FILTER>STYLIZE>GLOWING EDGES with these settings Edge Width: 2 Edge Brightness:
    20 Smoothness: 1 7) Press Ctrl+U to change the color (note: colorize box must be checked) ....

    1. Looking for creating, blur, animation, photoshop, flash

*RANDOM STUFF*





*SIMILAR VIDEOS*
Searching Video's for creating, blur, animation, photoshop, flash
advertisement




Creating A Blur Animation - Using photoshop and Flash



 

 

 

 

ADD REPLY / Got an Opinion! a humble request :-) RAPID SEARCH! Free Hosting [X]
Express your Opinions, Thoughts or Contribute your information that might help someone here.
Ask your Doubts & Queries to get answers.. "Together, We enlight each other!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE