Flash Tutorial I: How to vectorialize in Flash and draw in vector art

• 27/08/2008 - 00:00
• Author: Ryuichi
• Tutorial
• 4 Comments
• Read in IT

Hello Flash-artist wannabe! The purpose of this tutorial is to map out a JPEG image (or bitmap) and transform it into vector graphics. We'll use Flash to create our image. Yeah! Ok, this is called vector art: the aim is to make an image zoomable at will without losing definition or quality. Before someone brings up the controversy that I shouldn't use flash and I should use Adobe Illustrator or Freehand, I'll tell you straight away that next tutorial will teach you to animate your characters, which the aforementioned programs really can't do. So, if you already have them in flash, it is a nice advantage. And now, let's work!

Time needed: about 1 hour
Difficulty: Pretty easy... more or less

1. Open Flash. (Was that really necessary...?) Go to File, Import, Import to stage. We will use this step to import our JPG image. If you've drawn the image on paper and need to scan it into the computer then do that. If you don't know how to acquire an image with a scanner, is better you take a look here.

2. Choose your image and click IMPORT:

3. This should be the result. Your image should be centered on the Stage:

4. Now we will create a layer. A layer is like a contact paper above our image and our work is to trace those lines.
Click on the "New Layer" button, as highlighted below in point A. You will see the new layer, like in the B point in figure below.
We have to work in this layer now.

 

 

5. Block Layer 1 clicking the padlock icon (point C in figure below). This layer is holding our JPG image and we should now work on that. Then, select layer 2 clicking on the empty rectangle (point D below).

6. When you vectorialize, you should use the Zoom tool often. Click on the Magnifier icon on the left:

 

 

7. Let's suppose you need to vectorize your character's face. You already have clicked the magnifier. Now move your mouse in the upper right corner of the stage, and start to click & drag. Create a "box" around the character's face, and release the click:

8. Ok, that's how the zoom works. Our image, as you can see, is grainy. Don't worry, that's why we need to vector it!

9. Now, to make the trace easy, we will choose a showy color for our pencil. Click in the point A, shown on figure below and pick a color. My pick is a blinding magenta (B):

10. Now click on the Straight Line tool (A in the figure below), then go over the JPEG and start to click and drag to create straight lines following the main idea of original figure. Take a look below:

11. Ok, now you have created some messy lines. Now click on the Black Arrow Tool (see below). You can curve your lines: move your mouse below the straight line, click and drag. Try to make the vector line to fit togheter the JPG line.

That should do the trick. By the way, it's highly possible you could run into some small problems, so let's prevent them before they start.
Important advice: remember to use the zoom tool to magnify your image or to make it smaller, but do not zoom too much, because your original JPG image will be too much grainy and it will be difficult to understand.
If you have traced a bad line, just click on it and press DEL or Backspace on your keyboard to delete it.

Common problems during vectorialization

Here a set of problems that you could run into. For each one I've a solution and you can fix your work without easily without any miracles.

12 A. PROBLEM: My line has a too pointy of an edge.

12 B. SOLUTION: Move your cursor over the edge. You will see a small "L" near mouse pointer. Drag this edge gently until a small circle appears near your mouse pointer. In this way you can round off this unwanted point.

 

 

13. PROBLEM: Two lines are overlapping each other in the wrong way. In this example magenta and red lines overlap where the red lines should be over the magenta ones:

14a. Same for this situation:

14b. SOLUTION: Draw the line on an empty space. Curve it and then drag it to the desired space. To move a line, you have to select it: click over the line and then drag it. Please follow the steps shown below.

 

15. PROBLEM: I've just drawn some lines wrong, how can I backtrack my steps?
15a. SOLUTION: Piece of cake. Go to Edit menu and choose Undo. You can also use CTRL + Z on your keyboard (or APPLE + Z on mac). You can Undo more than once.

16. If you wish to take a look to your traced image and hide the JPG, you can do that at any time. Just click on the small dot in "Layer 1" as shown below.

A red X will appear. Just click on that to show your JPG image again.


17. Save often, save now!
Remember to save! It may seem expected, but remember to do it even if you your work isn't finished. Flash tends to... ehm...crash often, so let's have File -> Save as a good friend.

18. When your work is completed, it should appear like this:

19. Ok almost done. Let's transform the blinding magenta line to a sober black one. Click on frame one, as shown below. I mean, the box with the black dot. In this way all the content of Layer 1 will be selected at once.

20. Click on the border color tool, as shown below. It is on the left, there is a pencil icon above and a colored box below. So, click this colored box (A) and choose the black color (B). You've already done that in step 9, remember?

21. Yeah, bye bye blinding magenta! Now all of the lines are black. Ok now adjust the thickness of this line. Do not remove the selection (if you have already click away, re-do step 19(. Take a look to below "Properties" menu. Click on the combo-box "Solid" and choose "Hairline". This will make our line much more professional.

22. Now we have a black hairline vector art. Check that everything is ok before going on.

23. Now we will remove "Layer 2" that contains our original JPG image. Click on "Layer 2" as shown below, and then click on the "Trash" icon (B). Farewell, layer 2!

24. Now you'll have just one layer with just your vector art. Congratulations, you're done!

On the next part of this tutorial, we will talk about the colors. Notice that now you can zoom this image withot losing quality!

Credits: Akio character is © by nanoda.com - original Akio model by Ryuichi and Yuki_Sakuma - Chibi Akio Model by ShikakuSuika - Adobe Flash is © by Adobe Corporation.