Introduction to Flash

30 minutes
Share the link to this page
Copied
  Completed
Before you dive into 2D Flash Animation, get familiar with the amazing facilities Flash offers! Know how to use the many tools available in Flash's Toolbox. Also explore the host of facilities the software's Menu Bar offers. This tutorial will familiarize you with the Interface of Adobe Flash and demonstrate how to interact with it to get the best results.

Transcript

Hello, and welcome to character animation tutorials from our Roja media. In this tutorial, we'll get introduced to the amazing tools in Flash and know how to use these tools in detail. We'll also get introduced to the user interface of the program, so we can use its power to the max. Ready. Let's start by learning how to create a new document. You can either go to the File menu and click on New File Menu, new Flash file ActionScript 3.0.

Or you can simply press Ctrl plus and on your keyboard. Okay, now let's click on the document size button. The Document Properties window will pop up. In the Properties tab. You can change the name add a description, change the documents, dimensions Background color. Now we'll notice that the default settings on the document size and the frame rate are 550 by 400 pixels and 12 FPS respectively.

But for all the work that we are going to do in Flash, the settings should be 720 by 576 pixels for the document size and 25 FPS for the frame rate. So, what we need to do is make our documents size and frame rate as default so that we will not need to change them every time we open a new document. Now go to dimensions and make the width 720 and the height 576 pixels. Then go to frame rate and make it 25 fps or frames per second. Make sure the ruler unit is set to pixels. Now once your settings are Right click on the make default button.

This will change your default settings to the ones you have just entered, so that you will not have to change the document settings every time you open a new document. Now let's click on OK. Here we have the title bar. You can change the file name from untitled to whatever you want, by going to File, Save, control plus S. Type the name you want to give to the file. For example 123 and click Save. Your file will be saved by that name.

Below the title bar, we have a horizontal bar, which is the menu bar. We can also see a vertical bar on the left side of the work area. This is the tool bar. Every tool can be accessed in two ways. You can either go to the bar and click on it or use Key. Using shortcut keys is the fastest way to access a tool.

You can avoid going through all these sliders. This area that looks like a white sheet of paper is the work area. This is where you will actually draw your objects and characters and then animate them. Below the work area is the properties bar. This displays all the properties of the document, for example, resolution, frame rate, etc. If you want to hide the properties bar, you can simply click on the small cross at the top right corner.

To access the Properties tab again, go to the windows menu and choose the properties option and click on Properties again, or you can simply use the keyboard shortcut Ctrl f3. Now to the toolbar. You can hide any unhide the toolbar, either by going to Window tools, or by pressing Ctrl plus f2. On the keyboard. You can choose whether you want the toolbar to be wide or tall by clicking on the double arrows about the toolbar. Now let's look at each tool in detail.

Notice that when you roll over the mouse on a tool icon, it displays the shortcut for that particular tool. The first is the selection tool. The shortcut is V. This tool is used to select any object on your work area. What we are going to do here is that we are going to study the tools that are most used in character animation to start with. After that, we'll move on to the other tools that are rarely used for character animation. This way, you'll be able to know which tools are more important from the characters Animation perspective.

Okay, let's head to the rectangle tool. Now, the shortcut for this is R. Now, let's get to know the tool a little more and see how to use it. As the name tells us, this tool is used to draw rectangles. Let's write out this tool. Here we have drawn a rectangle. You'll notice that the rectangle already has a color field to it.

It has a default stroke to now let's see how to change the color fill and the stroke color. To do this, we'll need the selection tool. Click the selection tool, left click hold and drag it till the entire rectangle is selected and then release the mouse button. You'll notice that the rectangle is filled with a dotted texture. This means that the rectangle is selected. Now go to the stroke color tool.

The shortcut for this is as select the color black for the stroke and select green from the fill color option shown by the paint bucket icon. We can see that both the stroke and fill colors have changed. Now notice that the stroke fill and the color fill tools can also be seen in the Properties bar below the work area. Here, you will be able to control the thickness of the stroke. You can use the slider or enter a value into the box next to the pencil icon. The minimum thickness of the stroke can be 0.25 and the maximum 200.

Normally we use one here next to value box you can see many types of strokes. The tennis line is the hairline and the solid line is the default. line. There are several other stroke styles to choose from. One thing to remember here is that if you choose a broken line, your object still remains intact. And you can use any of these strokes just as a normal stroke.

It can be curved and manipulated, just like a normal stroke can. The fill properties of the object also remain intact. You can also use the custom option in the Properties tab to choose the stroke style. If you wish to delete an object in your work area, simply selected with the Selection Tool and press the delete button on the keyboard. Now let's draw a square using the same Rectangle tool is just like drawing a rectangle except you need to hold down the shift key on the keyboard while you draw the object when you hold the shift key, the purpose program keeps all sides of the object equal, even when you scale it up or down. When you are finished drawing, you'll notice that your object is a perfect square, we can now move to the oval tool.

The shortcut for this is to draw a perfect circle using the oval tool, use the tool holding down the Shift key on the keyboard. The properties of this tool are the same as the rectangle tool. Try all the options in the property tab to see how they work. Next, we have the rectangle primitive tool. This is almost the same as the rectangle tool. The only difference is that you can curve its corners using this tool.

To adjust the corners, visit the properties bar. Under the field color option, you can enter values or simply use the slider to get curbs on the four corners. Now we look at the oval primitive tool, just like the rectangle primitive tool. This tool allows you to draw half circles and other complex shapes made from a circle with much ease. You can experiment a little by altering the values of the start angle, a and angle and inner radius in the Properties bar. Then comes the poly star tool.

Using this tool, you can draw a Pentagon. The properties are the same as the rectangle tool and the oval tool. As before, if you want to draw an equal sided Pentagon, just hold down the shift key while drawing the object. Next is the brush tool. The shortcut is B. Now let's widen the toolbar so we can see the icons in the bottom easily.

Here you can see the brand options. Here, you can choose the brush size. beside it, we have the option to choose a brush shape. Now let's take a flat slanted brush tip somewhat like a calligraphy pen tip and switch on the use pressure option. This gives us the effect of a calligraphic pen. Now switch off the use pressure option and see the effect.

You can try out all the combinations in the brush size, brush shape, and brush pressure to know how these tools work. For then you have the use tilt option to control the thickness and direction of the stroke. Moving ahead, let's check out the different brush modes. We'll draw an object so that we can clearly see what option does what we have already seen the paint normal mode so let's move to the next one. Do remember that modes of the brush tool and the eraser tool are very rarely used in character animation, but it's worthwhile to know about them. In the paint fill mode, the brush works only on the filled up area of the object.

It doesn't change the stroke color at all. It also doesn't color the outer part of the object. In the paint behind mode, your brush will paint behind the object. It doesn't disturb the objects fill. It also keeps the stroke unchanged. Let's see the paint selection mode now.

To see how this works, let's select a part of the object with the Select tool. See the dotted texture on the object that is the selected area. Now let's paint with the brush. As you paint over the object, you will notice that only the selected areas being painted without disturbing the rest of the object. The last mode is paint inside. In this mode, if you start with a brushstroke outside the object, the brush doesn't paint the object, but everything around it, but when you start with a brushstroke inside the object, the brush paints only inside the object and ignores all the other areas.

Now you know how the brush tool in Flash works. Practice the brush tool using a good quality pen tablet. Now let's move to the eraser tool. The shortcut is E. To see how the eraser tool is used. Let's draw an object. Now, go to the faucet tool showing the tap icon.

When you click on the fill of an object using this tool, it removes the fill in just a single click wizard In the erase shapes and types options and get a big eraser. This will help us see how the different eraser modes work. Start with erase normal mode. Here, the eraser tool will erase everything in the work area. Next comes the erase fields mode. Here you will notice that the eraser will only erase the fill inside the object, it will ignore the stroke of the object.

Now, select the erase lines mode. In this mode, the eraser removes just the lines or strokes of objects, the fields are kept intact. We now move to the erase selected fields mode. To see how this works. Let's select part of the object. Let's see how the eraser works on the object.

The eraser only removes the fields in the selected area. It ignores the remaining parts of the object and keeps the strokes undisturbed to Now we come to the erase inside mode. The eraser here affects only the fill in which you begin an eraser. If your first stroke is inside the object, it will erase only inside the object. Now we move to the line tool. You can also use the shortcut key and Okay, here's our line.

Now, a small pointer for you. Remember how we hold down the shift key to draw a perfect square or circle? Well, if you want a perfectly horizontal or vertical line, hold down the shift key when you draw a line. To change the properties of the line, you can visit the Properties tab. Now let's change the lines color using the stroke color swatch. You can check out the various stroke styles in the drop down menu.

We can see that the line thickness is five letters Enter a different value in the box, say three, you can use the slider to to make the line thicker or thinner. Here's another point for you always keep the object you're working on in the center of the screen. To bring this line into the center, you will have to use the Hand tool, you can access it with the key edge. See the hand, right. This tool lets you move the work area so that the object is right in the center. You can click and move the area just like you would move a sheet of paper on your desk.

Okay, so now we have got the line in the center. After the Hand tool, let's look at the Zoom tool. You can click on the magnifying glass icon in the toolbar or simply tap the key Zen on your keyboard. With the Zoom tool, you can zoom in, notice the plus sign. You can also zoom out by simply holding down the Alt key and clicking. Notice the negative sign are these tools clear.

Practice them a bit before you go ahead. All right, now let's look at how we can get curved lines. Go to the Select tool, bring it close to the line, see the curve under the cursor. Now click and drag your cursor up the line curves up. Now drag your cursor down to get a line curving downwards. Practice this technique a little so you get the hang of it.

Let's see how we can get more curves from the same line. Let's try to make it a wavy line. For this, we need this sub selection tool shortcut key is a. When we click on the line using this tool, you'll notice that we can see two points on the line. These are called nodes. And we can also see two dotted lines coming out upwards.

These are handles they are used to adjust the curves. For instance, pull down the handle on the right side. See how the line turns into a wavy line. Practice this till it gets easy. There is one pointer worth mentioning here. If you use the sub selection tool on a straight line, your handles and nodes fall on the same line and it gets a bit difficult to find the ends of the handles.

There's a solution to this. curve the line just a little bit before you start using the sub selection tool. See how the handles are clearly visible now Okay, now let's turn towards the layer stack just below the name of your document and check layer properties. To begin, let's change the layers name. Just double click on the word layer to get an editable text bar. Here, you can enter the name you want for this particular layer.

Now, let's quickly look at the two icons on the top of the layer. One is the eye icon, and the other is padlock icon. clicking on the icon will hide and unhide your layers. Clicking on the padlock icon will lock your layer. If a layer is locked, you will not be able to work with anything on the locked layer. You will have to unlock it first.

When we have many objects on many layers to work on, it is very, very important to make sure you EHRs are not edited by mistake. When you lock the layer, the layer is safe. Okay, now let's get back to the layer properties. When you double click the box icon at the extreme right, you get this panel, you will see several options in this panel. You have an option of changing the layer name here again, you can even change the outline color using the color swatch. As you can see the color of the handles and the nodes has changed.

Now, a single click on that same square will show you everything on the work area in wireframe mode. That means it will show all objects in a thin line. Returning to the line, a point worth remembering. The best way to get curved and complex lines is by keeping the number of nodes to a minimum. As you can see here, too many nodes are very difficult to manage. The curves don't remain smooth with them.

Some pointed aims show up in several places. Another very important tool in our toolbox is the snap to objects tool. Please switch this on and draw a triangle. See how the snap tool makes it easy to make the angles meet. Now switch the tool off and try to draw a similar triangle. The ends don't meet do they.

Now choose the Select tool and switch on the snap tool. Bring the cursor close to the line. As soon as you see a curve. Click and drag the line up. Notice that the line doesn't curve. It creates a sharp bend instead.

Work a bit more with the snap mode on and off to get comfortable with it. We'll see how to add notes to a single line to get complex shapes. For this, we have the pencil tool. The keyboard shortcut for this is why, let's use the straighten mode first, please try drawing as many complex lines as you can to see the effect of this tool closely. This tool sort of works like the snap to objects tool, it tries to snap your drawing into a straight line. Please do some freehand drawings with this mode on and you will understand exactly how this works.

Let's see the ink mode. Now. In this mode, your drawing remains exactly as it is. So when you want no interference from the software in your drawing, work in the ink mode. Then comes the smooth mode. This is the best mode to keep normally this mode smoothens your drawing so that it does does not look crooked, it tries to use a minimum number of nodes.

Look at the difference between the two. The drawing made in the ink mode is full of nodes, this will always make it look crooked. Whereas drawing in smooth mode makes your drawing look good. Here, you can even control the value of the smoothness. Please try these three modes for some time to get to know the difference between them. Next, let's move to the pain tool.

Shortcut is P. Click on a line with the pain tool. And you can create nodes as you click. When you click the second node, it will automatically connect with the earlier node. So you can build your shape using nodes. When you click and hold, you're able to curve the line that connects to two nodes you have created. You can control the curves of that line till you get the shape you want.

Then we have the Add anchor point tool. The shortcut is equal to using this tool, you can add an anchor point, which is just like a node, but we'll give you two handles, so you can edit the curves on both sides of the anchor point. Please use this tool a few times just to get a hang of it. Next is the Delete anchor point tool. The shortcut is the dash key on your keyboard. You can delete extra anchor points or nodes on a line by simply clicking on them with this tool.

The last tool in the selection is the Convert anchor point tool. shortcut key See, with this tool, you can convert the anchor points to angles, the lines straighten up and the anchor points are converted into sharp angles. Please use it a few times. So that You understand how to use it completely. Now we move to the paint bucket tool. I'm sure it must be quite clear to you by now, what this tool is for.

Yes, it is used to fill an object with color. Right next to it is the ink bottle tool. You can use this tool to change the stroke color or outline color of an object. Another important point, you can go to Window menu color. This pops up a panel that helps you control the stroke colors as well as the fill colors of all objects in your file. You can even create your own custom colors.

Here we have created a new custom color which wasn't in the swatches and we have filled the rectangle with this. Now suppose we want to color another object say this circle With this exact shade of green, what do we do? Answer the eyedropper tool. This tool will create a swatch of the color that you click on. Once you have this color on your palette, you can just click on the other object and fill it with your chosen color. Let's see some more features of the color panel.

From this panel, you can control the transparency of the objects Phil. You can do this changing the values in the alpha bar. If your value in the alpha bar is hundred, that means your fill is completely opaque. If it's 50 that means it's half transparent. Experiment with the custom color and alpha options so that you get familiar with all of them. Let's learn how to use the lasso tool now.

First, let's draw around rectangle. Now go to the lasso tool. The shortcut is L. Now, click the magic Vande mode. using this tool, you will be able to select an area of the object in freehand. Notice how the dotted texture appears in the area we have just selected. The icon next to it lets you change the threshold and the smoothness of your selection line.

The next is the polygon mode. This is like the lasso. The only difference is that this is not a freehand tool. As you click it connects the points in a sequence to create a sharp Angular selection. Use the lasso tool with the magic wand and polygon modes active. With practice you will get comfortable with the different types of selections they offer.

Now, we go to The free transform tool. As the name suggests, this tool helps you edit your object in several ways. To know how, let's first draw an object, choose free transform tool, shortcut key Q. As you can see here, there are several modes you can use this tool in. You can scale the object uniformly or non uniformly. You can rotate it, you can skew it and stretch it.

You can also distort it at the corners. The envelope mode adds several points to the objects. This makes it possible to transform it into innumerable shapes. Try all these modes to get an idea of where and how you can use them. Now to the gradient Transform tool, let's draw an object to taste this to lawn. Here it is now Press F to access the gradient Transform tool.

Now let's go to the Window menu and choose the color panel. You can also use the shortcut shift f9 to access the color panel. Here we have the panel. Now select linear from the color type options. Now you'll see a gradient in the bar at the bottom of the color panel. It shows a gradient that goes from black to white.

Now let's go to the lock fill option and click it off. When lock fill is turned on, it will not fill the object with the exact gradient created in the color panel. So it's best to keep the lock fill option off. This way, you will get the exact Gradient Fill on the object. You can edit the gradient in the color panel using the color handles in the gradient bar. You can add multiple shades in the gradient using the color swatches in the toolbar to just like you can transform an object.

With the free transform tool, you can transform a gradient to click F on your keyboard to access the gradient Transform tool. With this tool, you can stretch and rotate the gradient and also use the skew, Distort and envelope modes just like the free transform tool we learned before. Notice the color panel options. The color type option gives you several choices in types of gradients with which to color your objects. Check out the radial option. You can add new colors and shades to your Gradient by simply clicking and adding color handles on the gradient bar.

To remove a color from the gradient, simply click on the color handle of the color you don't want and drag the color box downwards until it disappears. Simple. We have now come to the end of this tutorial. We hope you enjoyed learning the tools in Flash. Now, please try out all these tools several times so that you get familiar with them. The more you practice these tools, the more easily you will understand the subsequent tutorials.

You might even develop your own style and unique ideas to use them in your career, or other media. Enjoy bringing this tutorial to you. Thank you for your time.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.