List of Topics

SfC Home > Web Design > Flash >

 

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

This lesson will answer those questions.



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.


Clever techniques can make you seem smart


Resources and references

Ron Kurtus' Credentials

Websites

Flash Resources

Books

Top-rated books on Adobe Flash


Questions and comments

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


Share this page

Click on a button to bookmark or share this page through Twitter, Facebook, email, or other services:

 

Students and researchers

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

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

Copyright © Restrictions


Where are you now?

School for Champions

Flash topics

Scanning in Drawings for Flash




Flash topics

Basics

Also see



Let's make the world a better place

Be the best that you can be.

Use your knowledge and skills to help others succeed.

Don't be wasteful; protect our environment.

You CAN influence the world.





Live Your Life as a Champion:

Take care of your health

Seek knowledge and gain skills

Do excellent work

Be valuable to others

Have utmost character

Be a Champion!



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