The School for Champions is an educational website that shows you how to achieve your dreams.

School for Champions

SfC Home > Flash >

Explanation of scanning in drawings for Adobe Flash animations. Also refer to graphics, artists, images, tracing, bitmap, layers, publishing, GIF animation, Ron Kurtus, School for Champions. Copyright © Restrictions

Scanning in Drawings for Flash Animations

by Ron Kurtus (revised 3 February 2001)

A good graphics artist can use a special drawing tablet or even a mouse to create illustrations and graphics to use in Flash animations. For those of us that do not have such skills, a sheet of paper, a pen and a scanner can provide the pictures you need.

Questions you may have are:

  • What are the basic steps to follow?
  • What are detailed steps?
  • What is a sample of the result of this method?

This lesson will answer those questions. There is a mini-quiz near the end of the lesson.

Basic steps

The procedure for using a pen and scanner in creating an animations in Flash consists of:

  1. Plan out your animation
  2. Draw a picture on a sheet of paper
  3. Scan, edit and save picture as a bitmap
  4. Import it into Flash, adjust size of stage, and trace the bitmap
  5. Build your animation around the image

Details of steps

The following explains the steps to use a scanner for some of your animations.

1. Plan out your animation

When you scan in a bitmap and use it in an animation, plan to have the bitmap as your background or in a separate layer. You will have to add other layers for your animation.

2. Draw a picture on a sheet of paper 

Use a dark felt tip pen. Try to make the lines dark and connected.

3. Scan, edit and save picture

  1. Scan your drawing and save as a bitmap (BMP, GIF, or JPG).
  2. Use a drawing program such as PaintShop Pro to rotate, edit, and scale the picture to a size that will fit on your web page.
  3. Save picture. You might save it as another name in case your scaling was incorrect.

4. Import, adjust size of stage, and trace bitmap

  1. Choose File > Import.
  2. Choose Modify > Movie to adjust the size of the stage to fit the image.
  3. Choose Modify > Trace Bitmap to change the bitmap to a vector drawing.
    • You may have to adjust settings and repeat to get the desired smoothing, resolution and look you want.

5. Build animation

  1. Touch up your picture. Add color.
    • You may have to touch up and close lines if using Paint Bucket colors the rest of the stage.
  2. Name your layer and lock it.
  3. Add a new layer and build your animation.
  4. Save and publish the animation.

Example

The following animation shows a man and his echo.

I drew the man and the wall on apiece of  8 x 11 paper with a black felt tip pen. The picture was scanned in and saved it as a bitmap. Then it was rotated 90 degrees, so it was in the landscape view. I had to rotate it another 1 degree, because it did not scan in exactly straight. Also, the picture was scaled down about 50%. 

The picture was imported into Flash and the stage was scaled to fit the image. The bitmap was then traced. This had to be done and undone several times for adjustments to be made. Then coloring was added to add some pizzazz to the picture. The layer was locked and two new layers were added, one for the "Hey!" animation and another for the waves animation.

Demonstration of an echo, from a pen and paper drawing

Summary

You can draw a picture on a sheet of paper, scan it into Adobe Flash and then touch it up, as an alternative to using your mouse or a drawing pad to input an illustration to a drawing program. The method is simple and produces reasonable results.

Answers to Readers' Questions

Clever techniques can make you seem smart

Resources

The following are resources on this subject.

Websites

Flash Resources

Books

Top-rated books on Flash

Miscellaneous

Mini-quiz to check your understanding

1. Why would you scan in a drawing instead of using a mouse to draw?

You must justify purchasing your scanner

You don't have the skills to draw well with a mouse

Mice aren't very skillful at drawing

2. What important feature of Flash allows you to use a scanned drawing?

Creating animations that include changing shapes and colors

Multiple undo feature

Trace bitmap to make it a vector drawing

3. Why don't you need to color your original drawing?

Colors can be added to vector drawings in Flash

You can only use black-and-white animations

Flash automatically adds default colors to your drawings

If you got all three correct, you are on your way to becoming a Champion in Flash development. If you had problems, you had better look over the material again.

What do you think?

Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. We will try to get back to you as soon as possible.

Share link

Feel free to establish a link from your website to pages in this site.

Or use our form to send this link to yourself or a friend.

Students and researchers

The Web address of this page is
www.school-for-champions.com/flash/scanning.htm.

Please include it as a reference in your report, document, or thesis.

Where can you go from here?

School for Champions

Flash topics

Scanning in Drawings for Flash

The School for Champions helps you become the type of person that can be can be called a Champion.