Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to Make an Animated Movie


Published on

We show you how to make a basic animated movie using GIF Animation and free software available on the internet. This movie is about a butterfly flapping it's wings.

  • Be the first to comment

How to Make an Animated Movie

  1. 1. Bucky Shows You How To Make A Smiley Movie. Let’s learn how to make a butterfly - flap it’s wings. Let’s Make a Movie ! Animations by John Bray
  2. 2. We want to make a butterfly “FLY”. That is, flap his wings in flight. The Story Line Animations by John Bray Bucky’s Trainer <ul><li>Things you will need to make a movie: </li></ul><ul><li>A graphic editor, such as Photoshop, PictureIt, Corel Photoprint, PaintShop, Paint.Net, etc. I recommend “GIMP”. It has all the features you need and it’s FREE! </li></ul><ul><li>A GIF Animator. I prefer to use Corel’s PhotoPaint but there are several low cost and free ones that are excellent (CoffeeCup +) </li></ul><ul><li>A good “Imagination” and a little patience. </li></ul>
  3. 3. You need an image to begin the process. Your image should be either .gif, .jpg, .bmp, or some other raster image. Eventually, all of the images should be converted to the GIF format. Make sure the size fits your planned movie size. Sometimes you can find free graphic downloads that will work for you. The first step is to make the wing an “object.” This is easy to do. I recommend that you zoom in so you can see your work better. Using your rectangle mask tool - highlight and draw a frame around the wing. - see next page.
  4. 4. See the image left. I have drawn a rectangle mask around one of the wings. Take care not to include anything but the wing and avoid highlighting any other body part. Next, you will “cut and paste” the wing back in the same place you cut it from. This creates a new object on the page in the same position as the original. This is our butterfly with wings ½ of the way down. Drawing a Mask Creating a New Object
  5. 5. Here’s an illustration of how to cut the wing off using Corel’s PhotoPaint. “Control X” is the keyboard shortcut in this program. By the way, it’s good practice to save your file often. You will be glad you did. Also, if you are a bit nervous about taking a step, save your work in a backup copy with a different file name. That way if you make a mistake you can always recover the back up file and start from there. This is our butterfly with wings ¾ of the way down. Cutting an Pasting PS. You will always make a backup of your work. The question is will you do it before or after you loose your file 
  6. 6. After the wing is cut, you should do a “paste” action - and as a “new object” in the current drawing. Typically, this is the default “paste” operation, but not always. The purpose of making the wing an independent object is so you can distort and manipulate the object to a shape that mimics a wing “flap.” See illustration on the next page. This is our butterfly with wings all of the way down. Paste as a “New Object”
  7. 7. Here’s a close-up of the “Cut and Pasted Wing”
  8. 8. Our next step is to “distort” the wing object so that it shows a single step in the downward flapping motion. In Corel’s PhotoPaint you can click on the object 3 times and it goes into the distort mode. Notice the arrows on each corner above. Use your graphic programs ‘Help” function to find out how to do it in your software. Distorting to our desired shape.
  9. 9. You can see in the illustration to the left that I have “distorted” the wing downward and compressed it somewhat. I did this by selecting the node on the upper right hand corner and dragging it down. This step begins the process of creating “movement.” Remember in cartooning and animating you create the “illusion” of motion. To do this you must fully imagine how the wing of a real butterfly appears to distort. So you are really mimicking nature. Select and Drag
  10. 10. Before this step do the right wing to match the left and save that image as image2. Here is an illustration of the wing down one more step in the motion to make image3. Save as image3. Note that I’m only showing the process with a single wing. In reality you should do each step with both wings. Otherwise, your butterfly will only flap one wing and that could be a little embarrassing for an animator  . Making Position 2
  11. 11. This distortion is the last step in the “down” motion of the wing. Again, please remember to do each step with both wings. Save the image as image4. As you complete each step of the wing distortion for both wings you should save the image as a new gif file. This means that for this animation you will wind up with 4 separate images. See next page. The final Distortion
  12. 12. Note the ‘ragged’ edge where we cut the wing. Using the ‘eraser’ tool, erase this off so it does not distract the eye. Keep your image clean.
  13. 13. Here’s how it should look when you finish erasing the jagged edge. (Don’t worry if there are small imperfections because with the speed of the motion they will not be discernable.) The little square is my eraser tool niblet size. Note that I have zoomed in to make the precision erasing easier. Once we have completed this step with both wings and you have four images, you are ready to begin the Animation sequence. Finished Job
  14. 14. Here is what the image looks like with both wings distorted in the “down” motion. <ul><li>The four images should consist of: </li></ul><ul><li>The beginning image, </li></ul><ul><li>Step two’s distored image of both wings starting the down motion </li></ul><ul><li>Step there’s further compressed wing in the downward direction, and </li></ul><ul><li>The final ”wings down” image above. </li></ul>Both “Wings Down”
  15. 15. This brings us to the final stage of the movie creation – Creating Motion. I am using CoffeeCup’s Gif Animator program for this instruction. It is an easy to use animator and it’s inexpensive. I think $29 as of this writing. You begin the animation process by loading your images into your software in the same order as you created them. When you are saving the images I recommend that you save them numbered to designate the order you plan to show them, i.e., image1.gif, image2.gif, image3.gif, etc. Now, LET’S ANIMATE THIS BEAST 
  16. 16. As you can see, CoffeeCups Gif Animator program makes this step of the process really simple and easy. If you get a little confused, use the “Help” tab to get you started. Note that I am showing 7 images rather than the four we created. One of the secrets to animation is to ‘reuse’ your graphics as much as possible. This results in a smaller gif file and it saves you unnecessary work. What I did above is to duplicate images 2, 3, and 4 and imported them in the software in the order that shows the wing doing the “up-flap” after it does the “down-flap”. This will make for a smoother transition between frames. GIF Animator
  17. 17. One of the variables you need to get correctly is the frame speed. This software calls it the frame “delay” Depending on the animation you are making, the speed needs to be in relation to the actions occurring. As a flapping wing moves rapidly you will want the speed to be relatively fast. I used 100 mili-seconds. That works out to about .06 seconds on this software. One of the most rewarding aspects of designing animations is the trial and error methods you get to use. You can set the frame delay at one speed, test it by playing the movie, and then adjust as needed to create the effect you are after. Setting Frame Delays
  18. 18. On a butterfly animation, you probably want the movie to do a continuous loop. You don’t see many butterflies in the air not flapping their wings. Also, you need to set the size of the movie. This is done by setting the size of the graphic images you are using. A typical ‘Smiley” is 32x32 pixels. However, I find it easier to make the images around 300x300 Pixels first and then resize them when I have finished the distortions and edits. In some software you can wait and crop and resize the movie as the last step. This is the easiest way - if your software allows it. Final Settings
  19. 19. HOORAY ! Did your butterfly fly? You just created your first movie ! You should be proud of yourself. I hope this was an instructive and enjoyable process for you. Now is the time to begin using your imagination and creating your own animations. I suggest you become an “observer” of the natural world. Nature provides a limitless supply of bugs, bees, birds, and all sorts of critters that you can study and animate. Most importantly, make sure you have FUN with this!
  20. 20. I still remember the ‘thrill’ I got when my first movie actually worked. It is a fun and rewarding way to use your creative talents. This movie was a simple and basic one. I’m sure that when you get going you will create some amazing movies. I can’t wait to see them. I would really appreciate you telling your friends about my website. Visitors are my lifeblood. Here’s the link to the home page if you want to copy it: www.Smileys 4 (Clicking on it takes you back to the homepage.) Did you have fun? Animations by John Bray