Tutorial : Tracing “Torako” with Adobe Flash

31 Mar 2010, tagged in , ,

Tracing an image using Adobe Flash is very simple. You only have to understand the basic characteristics in shaping lines on this application.  In this tutorial I will show you step-by-step on how to trace a scanned image in Adobe Flash.


  1. First, you need a sketch. You will have to scan the sketch to trace it in Adobe Flash. Here is my sketch. It’s a baby Tiger her name is Torako.
  2. Then open Adobe Flash. to import your scanned image. You need to go to File > Import > Import to stage
  3. The image will appear on the center of the stage. You can scale up or down the image if you want.
  4. Next you need to make a new layer. This layer is for tracing the image. Don’t forget to lock the original layer (your image) by clicking the “padlock” button beside the “eye” button. If you need to rename the layer, “double click” the layer and name it as  you like.
  5. Use line tool to trace the image. Find the “line Tool”  icon on your Flash Application. Look at the picture below for line Tool icon
  6. Then, Select a color you like for tracing. I suggest bright colors because they’re bold and very helpful.
  7. Before tracing a complex image, you need to know how to make basic lines in Flash.
    make a straight line:
    just “click” and “drag” your mouse to make a straight line

    make a curved line:
    click “selection tool”, to make a curve you only need to move your pointer to the center of the line then “click” and “drag” it to direction you want. this action will make a curve from a straight line

    editing nodes:
    to edit a node, you will need to “click” Subselection Tool, then “click” at the curve you made. The nodes then will appear. You can edit these nodes as you want.

    case sample:
    How to make a bow from this overlapping lines in 1 layer?

    The answer is you have to make  both lines (vertical and horizontal) in two different layers. Shape the horizontal line to become a bow using “selection tool”. “Right click” at the curved line and select “cut”. Go to layer where vertical line placed and at the empty stage “right click” and select “paste in place”. Now you have your bow shape.


    note: if you make the vertical and horizontal lines in 1 layer, then use selection tool to make a curve directly on horizontal line, the vertical lines will act like a border to the horizontal line and prevent you to make a bow curve like this picture below,

  8. Back to the image, now after you learn about basic lines in Flash, you are ready to trace your image.  Using Line Tool, Make straight lines on your image in one new layer (look at step no.4) above. Look at the picture below for details
  9. Shape the curves from those straight lines . Look at the picture below for details
  10. When you finished tracing the image, go to the layer your image placed and  click the “eye” icon beside the padlock icon. The red “x” will appear and your scanned image now unseen.
  11. Choose the outer outlines. To do this you need to hold shift button on your keyboard and click the outer outlines one by one (also click the outer lines of the eyes) after all lines selected, change outlines size to 3 points (go to properties panel, if the panel doesn’t appear, go to window > properties )
  12. change the selected outer outlines color to black by clicking the color box on tool panel. Now we have a vector outlines and we’re ready to color it.
  13. This file will have .fla extension when you save it. And it’s a vector file. If you need a bitmap file , you can go to File > Export > Export Image . You can choose any type of bitmap file as you want.

On my next tutorial I’ll show you how to color the artwork we made on Flash. Keep visiting our blog for more drawing tutorials. See you! :)
Subscribe to RSS

About the author

poy

  • http://siriokun.com/ Rio

    wah rapih euy jadinya, keren poy!

  • http://rajasa.com Aria Rajasa

    awesome! :D tutorial flash yang menarik. Abis ini bikin tutorial illustrator dong :D
    .-= Aria Rajasa´s last blog ..Track your accomplishments, monthly! =-.

  • http://www.avnesh.hpage.com avi

    thnx bro….very helpfull information…