Hello, we welcome you to another flash tutorial from Aroha media. This tutorial will deal with the topic of background detection. If you see any animated movie or show made in Flash, you will find that all scenes have different backgrounds. This depends on the location of the scene in the story. Now, generally, all these background images are in the bitmap formats like JPEG, BMP, PSD, PNG, Tiff, and others. This makes them heavy, so they're not suitable for use in Flash.

So how do we use images if they are in bitmap format? Well, for this, we need to convert the bitmap format into vector format. The vector format is not just right for animation. It also reduces your file size substantially. And lets your software work faster and better. In this tutorial, we'll learn how to trace bitmap files manually.

We'll also learn how to fill colors and see how to convert them into vector symbols. From now on, we'll refer to background as bg. Let's begin the tutorial. Press Ctrl plus n to create a new file. Now, we need a bitmap to trace. For this, go to the File menu, select the import tab and click on the Import to stage option.

To open the Import dialog box. Go to the location of the file you want to import and press open. We have chosen a jpg image of a desert. The image is now on your stage. Now, let's scale it up to suit the stage. To open the scale and rotate dialog box, press Ctrl plus alt plus S. Or simply go to the Modify menu, select transform, and click on scale and rotate.

We have entered devalue 175. You can choose the value that matches your stage dimensions. A pointer is good here. Whenever you are reading a file for animation, it is helpful to name them. To rename the layer, double click on the word layer and enter the name. In your case, we have named the layer sketch.

Now we need to trace this bitmap. For this we need a new layer, click the Add New Layer tab in the layer stack and rename the layer as vector. He has a guideline for you. When you are tracing the bitmap on another layer, always lock the BG layer for clicking the layer under the lock icon. Now that the original bitmap is safe, you can work on the vector layer. Remember to save before you go to the next step.

Whether you have a UPS or not, it's a good habit to keep saving the file every five minutes. You can choose your location, enter a name and save the file. We have named the file, bg. Now, let's begin tracing this desert bitmap with the tools we have learned in an earlier tutorial. The tools most used for BG tracing our Zoom tool, line tool, Pencil Tool selection tool, and the sub selection tool will do this one object at a time. While doing this, we'll be using shortcut keys to access access these tools so that the tracing becomes faster.

Practice doing this. For example, let's begin work with the cactus plant as the right to zoom it. Press Zed and click and drag to bring it closer. You can also use the keyboard shortcut control plus. While you're working on any other tool, you can also use the Hand tool to move the stage for a better view. Just hold down the spacebar to access the Hand tool, move it with your mouse pen, and then release the spacebar to get back to your active tool.

Now, two very important reminders. First, whenever you want to trace a bitmap, you must check if you're on a different layer. Second, big section is all about dividing the big into separate editable objects. Okay, now We'll begin tracing with the help of the line tool, press n to access it and activate the snap tool. Since the BG has various colors, choose a line color that will easily stand out. Let's use red for the time being.

This is done by creating a group to begin with press Control plus G to create a group, you will see that the BG has faded a little bit. Let's draw the characters on the right corner first. With the line tool, draw a straight line and then adjust it to match the object. You can bend and curve the line by using the selection tool, press V. Sometimes the object in the BG is incomplete. Like in our case, the characters isn't complete. But to make the object animation friendly, we must complete the object if the corners persist you Use the sub selection tool, press a move the handles to smooth on the corners and match it with the object as much as possible.

Note that we are now creating objects that will have similar color fields. If the colors in the BG are different, you can choose to create separate groups for them. The only condition is that the objects outline must form an enclosed object so it can be filled. If the outline has a leak, then the object cannot be filled. You will notice that you will be using the line selection and sub selection tools a lot while tracing bitmaps manually. This is very important part of getting trained in Flash animation.

So don't skip this at all. We recommend you to use this sub selection tool a lot. It's one of the most powerful tools in Flash. The more command you have over this tool, the better you will get at matching the objects closely. Sometimes, you might need to add a corner to achieve a specific shape. To do so, you hold down the Ctrl key and drag the line you can return to the curve mode by releasing the control key.

As you practice you will find your speed increasing. You might even find your own techniques to trace bitmaps keep at it till you get really proficient. Okay, we are done with the object. Now delete any lines that might divide the object. This one for instance, delete any such lines. Let's move on.

To drawing the tones of the characters. For this, we need the pencil tool, press Y o, the line is too thin. Let's increase the stroke to match the object. Let's increase the stroke strength to five. It's too much. Three might be more suitable, right?

Okay, let's begin. We'll try to match them to the original image. Remember to draw the thorns even in the parts not original present in the image. We might need to show the complete characters when we animate the scene and move the background while drawing the object and the thorns, if you want to move the stage around, you can simply hold down the spacebar. This allows you to navigate the screen easily. You can release the spacebar to get back to your drawing.

Now, let's see what we have got. Click on this cage layer right below the icon. We have a group with the shape of a cactus, just like the one in the bitmap. Now click again to unhide this cage layer, click on the first keyframe of the vector layer and press escape. We did this to ensure no object is selected on this frame. Moving on to tracing another object, that means we need another group.

Again, press Ctrl G to create a group. Okay, this time, we'll take the most distant part of the big, the tall structures. Select the Zoom tool to bring the structures closer, and then select the line tool again for work. You will find that the line tool remembers the past stroke value three. To change it, double click on the line to select it. And in the property tab, enter the value one.

Now, let's do the drill again. Trying to match the tracing to the object. Note that we have kept the snap too long. This makes it easier to trace in continuously without leaving any little In the line, of course, after the ends of the object are joined, you can switch the snap tool off to work on the finer details and curves. Make a point to use the selection and sub selection tools to the max. You can add curves or corners when necessary with the selection tool or manipulate the handles to achieve better control over the shape of the object.

Now, note that when we come to the ages of the object, we always extend it a bit. Just like we extended the cactus tree earlier. This is to make it more animation friendly. In the case of this object, we have also extended it vertically. At present, it might appear as if the groups will overlap on each other. But in the final output, it won't happen because flash gives us the facility to change the order of the groups.

We'll come to that soon. For now, seal the outline borders and remove the unnecessary lines and do some editing to match the object. Now, double click outside the work area to come out of the group. When we select the object, we see this blue box surrounding it. This means we have created a separate group here. Let's hide this cage layer to see what we have got.

We have the cactus and the faraway structures. Next, let's race the sun now. How do we do that? Remember to create a group before you begin tracing a big press Ctrl G, select the oval tool or press O. Now we need a perfect circle here. So, we'll hold down the shift key on the keyboard as we click and drag the tool on the stage.

He has a close enough circle. we'll delete the fill for now and compare if it fits the sun in the BG. Perfect. If it doesn't fit, you can press Ctrl Alt s keys for the scale and rotate dialog box. Here you can put the scale value till you are satisfied. You can also use the free transform tool to scale it uniformly.

Press Q and hold the shift key for uniform scale. Double click outside the screen area and hide the skates layer. Now we have three options The characters, the rocky structures and the sun. Okay, back to tracing again. As usual, first, press escape, and then press Ctrl G before you begin any interesting. This time, we'll take the other characters on the left.

Let's hide these other ad groups so they don't disturb us. In the layer stack, click the vector layer below the eye icon. Let's begin drawing with the line tool. Again. We'll be using the same tools to create this practice. And now the thorns.

Let's enter the stroke value as three. It's not matching this line because the object is in the distance. We need a smaller stroke, say to know 1.5 should be okay that gives us a good point to remember As the objects in the BG go away from the viewer, their outlines should reduce. It gives the effect of distance and adds depth to the animation. Okay, done with the tracing. Now, let's again come out of the group by double clicking outside the work area.

How This sketch layer to see the four separate groups we have created. Let's now trace the characters that looks like a claw. For that, go to the vector layer, press escape and press Ctrl G. This line tool remembers the last stroke value. Let's change it to one. Now use the same tools and create the characters When you want very intricate shapes, you can also use the pencil tool for tracing shapes. Press why, at the end of this tutorial, you will achieve a lot of command over the line tool, Pencil Tool selection tool and sub selection tool.

No randomly draw the thorns to the characters Let's double click outside the work area to see where we have reached. We have added another object. Okay, let's trace the last cactus No, no, this is so far away, one can hardly make out its outlines so So, what to do, press Ctrl C to copy and Ctrl Shift v. To paste it in place. We need a smaller tree. So, press Ctrl Alt s to access the scale and rotate dialog box. Match the object size with the characters in the big.

Okay, now let's flip this one to match the characters as close as possible. Go to modify, select transform, and click on flip horizontal. What we did just now is we reuse an existing object. This is the most important technique used in Flash animation. When you create new objects, the file size can increase a lot. But when you reuse an existing object, the file size stays under control as your skills increase You learn to reuse objects to achieve good results.

We are done with this cactus now, off to the clouds in the sky. Create a group by pressing Ctrl G as before. Use the line tool to start with. The cloud is behind the cactus, but we need a full shape. So, use your imagination to work out the shape of the cloud. Where intricate strokes are needed, use the pencil tool.

Delete the extra lines and smoothing the corners using the selection and sub selection tools. As far as possible, try to avoid corners Now we need the two other clouds, we can copy and scale the same cloud. One quick trick to copy is to click on the cloud, hold down the Alt key and drag the object to the new position. Here, you have created another cloud. Now, use the scale and routed facility to scale it down to 50%. Now let's match it to the cloud in the BG as much as possible.

We can use the free transform tool here to skew the shape. Let's customize the cloud a bit. So it appears a bit different from the previous cloud. Now, let's duplicate the cloud again. To create the third one using the alt click and drag technique. We'll go to modify, select transform, and click on Flip Horizontal to flip the object side to side.

Now, press Ctrl Alt s for the scale and rotate menu, scale it down to 70%. That's our third cloud. Notice that we now have three clouds and we have reused the first object instead of creating all new ones. See how fast you can do it. Now, we need to create four layers of the ground. Let's begin with the overlay a ground as before, press Ctrl G to create a new group.

Begin to trace the object. All the objects right now overlapping on each other. This might confuse you, but when we fill the objects and arrange them according to the order, the BG will seem absolutely okay. We'll come there soon. We are using the same tools again to create the overlay or ground. Let's come out of the group check.

Looks good. Now, move to the next layer of ground. Create a new group and begin tracing with the line tool. Note that we are always extending the size have every new shape from all sides. This will help us to create dynamic camera movements later. The steps for creating the ground is the same.

So let's speed up through the third and fourth ground levels. Remember that once we are inside the group, we are hiding the other objects by clicking the vector layer under the icon. This helps us concentrate on one shape instead of getting confused in the other group objects Now, the innermost ground is almost flat. So we have used the rectangle tool here, press our after we fill the colors will be still better able to match the groups with the big. Now what remains is this cactus on the extreme left and the bushes beneath the cactus. And let's not forget the sky.

Press Ctrl G to create a new group and draw a rectangle with the rectangle tool. Delete the fill for now. We'll fill it with the right shade later. Let's create the bushes now in a new group. We need the pencil tool here, as these should be a bit intricate. Let's draw a bush and then copy paste it.

Use the alt click and drag technique to create Be the bushes. For the third Bush, we need some extra drawing with the pencil tool. Make sure you remove the unnecessary dividing line within the object before you move to the next step. The next step is filling colors in the group objects. We are going to use the eyedropper tool here. Let's fill this subgroup first.

Select the eyedropper tool in the tool bar and click on the sun in the big image. Note that the tool has selected the exact color and created a swatch for it. Now, double click and enter the sun object. Now select the paint bucket tool in the toolbar and click inside the sun. Now double click on the red outline and deleted your sun is ready. Now to the clouds.

Use the eyedropper tool again to pick the color. Enter the color Objects one by one and fill them up with the paint bucket tool. After that, delete the outline. You'll see that the objects are slowly beginning to emerge into a fully traced bg. Now, do the same with the first cactus redressed here, you also need the stroke to be of the same color as the film. So, select the right color from the palette.

Remember, it was the first object so it is below all the layers. To bring it up one level at a time, press control up arrow. You can do the same using the Modify menu. Select the arrange tab and explore the options there. You can explore the other options to see the effect. Let's turn our attention to fill in the Rocky structures in the distance.

Note that these are not solid colors. We'll need to fill these with gradients. So we'll need the color tab, you can access it from the windows menu. You will see that the color tab is showing the type as solid right now. Click on the down arrow to select linear gradient. Now we need to change the gradient.

For this. Select the bend symbols on the gradient bar and choose a color to match the BG color. After we have done some basic choosing, double click the structure group. Select the paint bucket tool and click once inside the object and important pointer here. Always keep the lock color tab in the toolbar off when you're filling gradients. Now, we can begin changing the gradient composition to suit the original bg.

We'll choose the gradient Transform tool to rotate the gradient. We can experiment a bit here to achieve better results. You can simply select the field now and add colors in the gradient bar. The changes you make reflect in the object immediately. Okay, the rocky structures are ready. Now we have another filled group object But the rocky layer should be above the sun layer.

We need to send the sun layer backward. Select the sun group and press Ctrl plus down arrow. you'll observe that the sun goes to the back of the rocky layer. We'll have to use these keys often to arrange the layers in the right order. Now let's fill the sky group. Let's work on the gradient first.

Choose the colors close to the ones in the original bg. Observe that when we want a gradient, we cannot pick colors from the original image. The color picker option is only available for solid fills, not for gradient fills. Here we have a nice orange and yellow gradient. Now, enter the sky group. Select the paint bucket tool and click inside.

Now use the gradient Transform tool to rotate the gradient such that it matches the original. Okay, our sky is ready. We needed to be at the back of all other objects. So simply selected and like we did before, press Control plus down arrow. Keep doing the same till the Skyler goes behind all other layers. Now fill up all the cactus plants with the same color.

Remember that you also need the stroke to be of the same color as the fill. So check the color swatch and choose the right color. Follow the same procedure for the little bushes below the cactus Time to change the look of the groundless to these need gradient fields to so look at the original color in the BG and enter the group objects. You can now create the appropriate gradients for all of them one by one. When you're working with the ground groups ensure that you delete their red outlines. As you can see, as we go closer to the sun, colors of the ground objects are becoming brighter.

As an animation artist, it is very important that you understand this little issues. Now, observe what happens if the line is incomplete. The object doesn't get filled to fill an object Ames must be joined. Now we can see the film. The ground object closest to the sun must be the brightest as it would get brighter light from the sun after You fill colors inside the object, you have to arrange them in order using the ctrl and arrow keys. Now, the same rule applies to the cactus plants.

Let's edit their colors to this one is the closest to the sun. Let's select a brighter shade in the same color. There you go. Before we go any further, let's raise an object we left out the characters. On the extreme left, we need a new group. So press Ctrl G, and begin we'll use the line selection and sub selection tools as before Just as before, we'll be extending it beyond the borders of the original image.

Now we have all the objects Ready with their fields, we can see that they are still looking like different objects. We can't show the screen as it is in animation we need to fix which part needs to be visible to the audience. For this, we need a mask layer here. We'll be studying about mask layers in detail in another tutorial. For now, let's see how it actually works. In the layer stack, click add new layer, rename it as mask.

Now, select the rectangle tool from the toolbar. To ensure that we know the visible area. We will fill the box with red you can choose any other color to in the color tab, set the transparency or alpha value to 50%. Now draw the box to cover the area that should be visible after you draw it if any changes are required, you can Use the free transform tool to adjust the height and width. When you are done with the size, go to the layer stack again. Right click on the mask layer and click mask.

You'll notice that now only the part covered by the box on the mask layer is visible. Everything else is invisible. Note that if we removed the automatic lock on our vector layer, the red patch chose to resolve this, simply click below the icon on the mask layer to hide the patch. What we have done till now is called BG dissection. We converted the BG into different objects by tracing them into different groups. We filled them up with the colors to match the original picture.

And now the group objects are ready for conversion into symbols. Let's proceed to the next step. Namely preparing our vector BG for animation. To do this, we need to convert each of these groups into symbols. Before that, we must first check if we have converted the entire BG into separate objects. For this, simply click on object and move it a bit.

You can immediately click Control Zed to undo the action. This step might look unnecessary, but it's very essential. We must always ensure that the entire BG is deselected before going forward to animating them. Okay, we are good to go. Let's begin with the sun. Select the sun and go to modify, convert to symbol or simply press f8 to open the Convert to Symbol dialog box.

Select graphic radio button marked the registration point in the center and named the Simple as sun, click OK. Now, press Ctrl l to open the file library. All symbols and imported files are stored in the file library of your documents. You can see the sun graphic that we just created. Now we will go on to convert all the objects into graphic symbols. This is essential because we want to use them in character animation. What's the use of this library?

Well, suppose that accidentally the sun gets deleted from the stage, we can always drag it back on the stage from the library. This is another reason why all important objects in Flash project must be converted to symbols. Now, let's say in the sun back by pressing Ctrl plus Down Arrow till it goes behind the rocky object. Next slide. The sky object. Again, press f8.

Choose the graphic radio button and center registration point and name it as sky. you'll observe that when you convert an object into a symbol, the symbol comes in front of all other objects, you can hold down the Ctrl key and click the down arrow key to reposition the object as required. In the same way, select the clouds one by one, and name them as cloud one. Cloud two and cloud three. Now to the cactus plants I named them as 3132333 ball and three, five We'll name the rocky structure as building. Next are the ground groups.

Let's name the upper moose ground over layer as ground oil and other three as ground to ground three, and ground four. At every point you will find it necessary to rearrange the symbols according to their order. All right, we just converted all our groups into symbols. Now comes the next step. Preparing the vector BG layer for animation. For this, first hide this sketch layer, and the mask layer, click on the keyframe of the vector layer.

Press f8 to open In the Convert to Symbol dialog box name it has desert. Okay, what we did just now is we placed all the objects into one symbol. Double click on the layer to enter the symbol desert, you will see all the objects on a single layer. To make them ready for animation, we need each symbol on a different layer. Here, we don't need to manually add layers and cut and paste these objects on the new layers. We can do it in one single operation How?

First select all the objects by pressing Ctrl plus a now, right click on the selected objects on the stage. Select the option distribute two layers. You will find that the objects are still in their own places, but they are now distributed in different layers. This is helpful For animation, note that the software names the layers according to the symbolic names. Now, there are some layers with no specific names. This is because we did not convert the objects on these layers into symbols.

See, we missed converting the bushes into symbol. Let's do it now. Select the three bushes and press f8 and name the symbol as bushes. Now again, right click on the bushes symbol and select distribute two layers. You'll see that a new layer with the name bushes has appeared. Now we can delete the layers with no names.

Also observe an important aspect of this function. The order of the objects is preserved by flash. So you don't have to reorder the layers here. Come out of the desert graphic now. Lock all the layers to see the mask applied RBG is ready for animation. In this tutorial, we learned how to dissect a background bitmap.

We also learned how to use flash tools to trace a bitmap and turn its parts into separate vector objects. Most importantly, now we know how to read a bitmap image into an animatable vector bg. We recommend you go through this tutorial very carefully. Take the step by step approach to learn and explore every little detail until it becomes second nature to you. In our next tutorial, we'll learn about another vital aspect of character animation, camera movements. Before that, ensure you have got the basics in this tutorials right this character animation tutorial on BG detection was created by our media.

Thank you for your time. See you in next tutorial.