Hello, and welcome to flash tutorials from Aruba media. This tutorial will introduce you to one of the most fundamental and important concept in Flash animation symbols. When you're through with this tutorial, you will have a basic knowledge about what they are, how to create them, and how they can be used. We recommend that you view this tutorial and practice this topic as many times as possible. Ready? Okay, let's begin with a fresh document.

In flash, it is always desirable to work with objects after turning them into symbols. Not only does it allow you to edit the individual object anytime it protects your object from getting accidentally edited symbols is that they keep the file size down. So your five minute animation doesn't turn into a one GB file. All right. So, to define it simply, objects in Flash are called as symbols. Clear.

Okay. Now, symbols are of three types, movie clip, buttons, and graphic symbols are mainly used in motion twin animation, and are the most important part of any flash animation project. Out of the three types of symbols will first learn about the movie clip symbol. Let's draw a circle to begin with. Now, using the Select tool, shortcut key v selected, now go to the Modify menu, convert to symbol or simply tap f8 on your keyboard. This will open the Convert to Symbol dialog box.

Here, you can specify a name for your symbol. You can decide whether you Want to create a movie clip symbol, a button symbol, or a graphic symbol. You can specify whether you want the registration point or pivot point at the top or bottom, at the left or right in the extreme corners or in the center. This point defines the axis of rotation for the symbol. You can change the registration point anytime. However, it might seriously affect your animation.

For all practical purposes, it is safest to keep this point in the center. Since we are concentrating on the basics right now, we'll skip the Advanced Options. We'll learn about them in another tutorial. Getting back to naming our symbol. In our case, let's name it ball. It is very important to give a name that helps one recognize what the symbol is all about.

It's a professional habit and the earlier you learn it Better. After the name, click the radio button for movie clip and press OK. Now, let's animate the ball. Go to the keyframe on frame one of the timeline area. Move the ball to the extreme left in your work area. Click on the 35th frame and add a keyframe there by pressing the shortcut key f6. While you are on the 35th frame, move the ball manually to the extreme right.

Now let's smooth on the balls journey. Click on any frame in the timeline. Come to the Properties tab at the bottom of your work area. In the twin option, select motion. To preview the result. Press Enter.

This technique is called motion twin animation. In Motion twin flash creates in between frames based on objects starting and ending positions. We'll learn more about this technique as we go further Let's see how to use the movie clip symbol in a slightly different way. The most important benefit of using a movie clip symbol is that we can add filters to it. To access the filters tab, go to the Window menu properties option and click on filters. You will find the filter tab docks with the Properties tab in the bottom.

These filters are mostly used in animations created for web design. Click on the plus sign in the filters tab. You will see many filters listed in this drop down menu. You can also save your own settings as presets. This option helps you reproduce the exact effects you have created for another project. You can even combine the default filters for an effect and save it as a new preset.

For now let's explore the radium add filters in the software. Let's select drop shadow. For example. Notice that the ball now has a shadow, giving it a 3d field. In the quality option, choose high. You can change the blur intensity, either by entering a value or by using the slider.

In the strength option, you can alter the spread and hardness of the shadow. You can even change the color of the shadow. Explore even more possibilities by changing the angle of light and the distance of the shadow from the symbol. The knockout option makes the object transparent so that the shadow can be seen through it. The Inner Shadow option shows just the shadow inside the objects borders. The hide object option hides the object completely, but keeps the shadow intact.

If you don't like the effects, and want to try another filter, just click the minus sign ball is back. to its original look, let's try the blur filter from the drop down menu. Here you have the option to change the percentage of blur intensity. You can choose between high and low quality. Next preset is glow. Here too, we can adjust the blur percentage, blur strength and quality.

Just like in the drop shadow filter. Here we have the knockout option. That decal is the main symbol and makes it transparent so that we can see the shadow through it. The Inner Glow option two decal is the object and shows the glow color within the objects borders. experiment a bit with all these options along with glow color to get a feel of this filter. Next comes the table filter.

This filter gives a 3d look to the object, giving it a cushiony and soft feel. explore the options of strength, angle and distance in this filter. Also try out different colors for shadows and highlights. Note the changes taking place in the object's appearance with the use of the options. You can choose from three types of bevel, namely, Inner Bevel, outer bevel, and full bevel. Now, let's see if we can animate this filter.

Go to the timeline, and press f6 to create a keyframe on the 20th frame. Now, right click on any frame between one to 20 and choose motion twin. Now, click on the keyframe at 20th frame and make some changes in the filter options. preview the animation Now, let's remove the motion twin. For this, right click on any of the frames in between and choose removed when done Need a filter by pressing the minus key in the filters tab. Next is the gradient glow filter.

In this filter, we are not trapped in one or two colors. We can choose as many as we want from the color swatch by clicking on the color handles. You can also explore other options like strength, quality, angle, and distance in this filter. There are three types of gradient glows available, inner, outer and full. Let's animate this filter to see its results. Go to the 15th frame on the timeline, and press f6 to create a keyframe and make some changes in the filter options.

Now, right click on any frame between one to 15 and choose motion when preview the animation. An important pointer can be understood here. Symbols cannot be given shaped when Motion twin is the only animating options for symbols. Now, let's remove the motion twin and the filter as we did before. Let's try out the gradient bevel now. This one is slightly better than the gradient glow filter, as it has combined options from gradient and beeville filters.

The features and options available are very similar to each other. You can explore all these options and animate them as we have done for other filters. The adjust color filter is a very useful one. It's a combination of the brightness, contrast, and saturation hue filters. The software gives a reset button to take all the values back to default. Now, let's see if we can make something out of this filter by using the options.

As usual, let's animate it. At the last frame. Select the object Press CTRL ALT s to bring up the scale and rotate dialog box. Enter the value 500 in the scale box. To preview the effect, press enter the color changes along with the scale, enhancing the filters effect. Play around a bit.

Try and utilize other tools and facilities in the software in combination with all the filters to make the most of them. You can add any number of filters to a movie clip symbol. This is one of its strengths. over to the next step. Let's learn how to create a video from your Flash file. For that, let's animate the bevel filters first.

Now, go to File Menu, export export movie, choose the windows API format. Choose your destination location. Name the file ball, and click Save the export windows API lock box pops up there. Keep the dimensions as width 360 by height 288 pixels. We'll explore the other options in the dialog box in another tutorial, go to the destination folder and open the file in a video player. Congratulations, you just created a movie clip.

And that brings us to the end of our movie clip symbol session. Now, let's learn about the second type of symbol the button. We are going to create a button with filters. Here's what we are aiming at. Begin the project in a Flash file. Select the oval tool and draw a perfect circle in your work area.

Using the Select tool, double click on the circle and press f8 name the new symbol as button. Keep the registration point in the center and click OK Here's your buttons involved, let's apply filters to the button. It's interesting that filters are used much more and frequently in buttons on the web than in animation. To access the filters tab, go to the Window menu properties option and click on filters. You will find that the filter tab docks with the Properties tab at the bottom of the work area. As we have done earlier, select the glow filter by clicking on the plus sign.

Use the options and make some changes to the parameters. Now, let's do something new. Let's add another filter and see how the two filters work together. We have chosen the bevel filter in our case. This is because we need a 3d look to make our buttons interesting. All set.

Now, let's edit our button symbol by double clicking it Notice that the timeline here is different. It has four frames with headings, up, over, down and hit. These are the four stages, a button operates in up before the mouse pointer comes over the button over after the mouse pointer hovers over the button down when the user clicks the button, hit when using the hit option if you have added a new shape that is larger than that of your actual button, when your cursor goes over that shape, which might be outside the button, it is still activated. Let's design the button for these four stages now. First, let's copy the up frame to the over stage. For this, simply click on the timeline frame below over and press f6 now press CTRL ALT s to bring up the scale and rotate dialog box.

Enter a higher value than the previous in the scale box. After scaling up, change the blue color of the object using the fill color box, choose a slightly darker shade. Go to the frame under down. Click f6 to add a keyframe, again called the scale and rotate dialog box and input the original scale value of the object. Change the color of the object again to a slightly lighter shade. You can choose the original color to now let's exit the symbol by double clicking away from the object.

Notice that the object has retained the 3d look given by the filters. Now, we'll have to check if the button is working. There are two ways to test it. You can preview the file by pressing Ctrl plus enter, or you can go to the control menu, enable simple buttons. The shortcut key for this is control plus alt plus b. Now move your mouse pointer over the button and click on it, you can see that the button is active.

Observe how the three different frames inside the button are working. We can add various shapes like rectangles, triangles, ovals, stars, etc. To create a different types of buttons in the same way as we created this button. If we want to use this button in a website, we'll have to add some programming to it. When the appropriate code is generated, a button becomes able to operate on the web. Let's edit our button a bit further.

For this, we'll have to disable the active button. You can again go to the control menu and switch off Enable simple buttons or simply press Control B from your keyboard. Okay, now the button is editable. Double click on the button symbol to edit it will now check the HID stage. To do this, click on the blank frame under hit and click f6. Now, select the rectangle tool from the toolbar and create a rectangle that is just a bit larger than the circle.

Now, add a new layer by clicking on the Add New Layer icon in the layer stack. Select the line tool with the snap tool on on the new layer. draw a triangle in the center of the circle. Press Zed and use the Zoom tool to see the triangle in detail. Adjust and edit the triangle with the Select tool again. Now fill white color inside the triangle by selecting it from the fill color.

Scratch, double click on the outline of the triangle and deleted you can do the required editing of the triangle at this stage for the buttons look and feel. Next step is to turn the triangle into a movie clip symbol. For this, press f8 on your keyboard, select the movie clip radio button and name the symbol as play and click OK. Now, while the triangle is selected, go to the filters tab from the drop down menu. Select drop shadow filter, keep the quality as high. For the time being. We'll keep the default values as they are.

Press CTRL ALT B to enable the button. Notice that still, only the circle is animated. The triangle is yet static. So let's go back to editing the button. Click on the second frame in front of the layer with the triangle. Click To add a keyframe, call upon the scale and rotate dialog box and scale it up in the same proportion as we had scaled up the circle.

Do the same for the downstream. Add just the positions of the triangle in the three frames to your satisfaction and exit the buttons symbol to preview the result. Notice how the arrow is now scaling proportionately with the button. Good. With this, we have completed our session about buttons involved. Now we move to the last type of symbol.

The graphic symbol will begin with a new file. Select the oval tool and draw a circle. Choose a color from the fill color swatch in the toolbar. Press f8 to access the Convert to Symbol dialog box. Name the symbol select the graphic radio button and keeping the registration point in the center. Click OK Enter the symbol by double clicking on it.

Once inside, again, select the circle, press f8 and name the symbol as ball. Select the graphic radio button and keeping the registration point in the center. Click ok. Here's a very important point to remember. In character animation, we use the graphic symbol type almost 95% of the times. The reason for this is that we can apply single frame, play ones and loops to the graphic symbol.

Let me tell you what these three terms mean. We use the single frame graphic when we have an object in our project that is static. In character animation, we mostly require a single playing of a symbol instance. In these cases, we use the play once option. The Loop option is used in walk cycles and run cycles. We'll learn about these three in detail later.

Till the time, we recommend you explore these simple types as much as possible and as long as possible. So, here we have the ball graphic, click on the 45th frame in the timeline, and press f6 to add a keyframe. While we are on the 45th frame, let's move the ball to the extreme right of the work area. As we have done before, choose motion twin. Next, let's come out of the scene symbol by clicking in the empty area. Scroll the timeline to the hundredth frame on the hundredth frame insert frame by pressing f5 it's important to remember that there is a difference between a frame and a keyframe.

Now, we'll be able to understand the single frame play once and loop options in detail. Now, go to the first frame and select the object Notice the loop option in the property tab. Now, enter the value 10 in the text box in front of the first option. Note that the position of the ball has changed from its original position to its position on the 10th frame inside the graphic. This means that the symbol scene will play from the 10th frame. If we play the animation now, we find that it skips the first nine frames.

The animation is playing from the 10th frame to the 45th frame. We have looped this animation for 100 frames. That means frames 10 to 45 will keep on playing till the hundredth frame. This is called loop. Now let's change the option to play once and the first frame to one. Let's play the animation now.

Note that the animation only played till the 45th frame and then stopped for the next 55 frames the ball was on hold. This is called the play once function. As we go on deeper into our character animation tutorials, will slowly understand this in a much better way. Now let's again change the function in the property tab to the single frame function and the first frame to one. let's preview the animation. Observe that the ball did not move from its position at all.

This is because in this option, only a single frame plays. For instance, if we enter the value 45 in the first frame text field, only the 45th frame would play. So even though we have 100 frames for the animation to play, the ball will stay stuck on a single frame. Here is some key information for you. The single frame function is used when animating character lip sync and static poses. Let's recap what we saw earlier.

Choose the play once option and enter the value as one. The animation plays just once. Choose the loop option entering the value as one. The animation is 45 frames long. So in 100 frames, it plays a little more than twice. Remember another pointer.

All the symbols you create in your file are stored in the library of that file. To access the library, go to the Window menu library, or simply press Ctrl plus L. Let's see what more we can do in the graphics symbol. Let's go into the ball symbol by double clicking it. Note that you are now inside the ball graphic, which is inside the scene graphic. The object is in the break mode. Click on the 10th frame and press f6 to add a keyframe.

Select any frame between One to 10 in the property tab, select shaped when. Now, go to the 10th frame and select the sub selection tool. Select the nodes and change the shape of the circle. play the animation to see the gradual morphing of the circle into the new shape. Now, click on the scene graphic symbol and play the motion twin animation here. See how the shape tween and motion twin are playing at the same time.

We see that there is a jerk in animation. Let's choose the play once option here, preview the animation node that the animation is playing only once. After that it stayed constant till the 45th frame. Let's remove this, click on the 45th frame and look at the options available in the Properties tab. We see that the value there is one that's why it is so In a circle shape. This happens because the symbols are not synchronized.

Here's another tip for you. Before you start any animation, select the layer from the layer stack, right click on it, and click on synchronize symbols. Let's see what happens now. Still not working, because the value entered in the first text field is five. To solve this issue, we need to go to the 45th frame on the timeline. There, right click and choose Create motion twin.

Now click on the object at the 45th frame. Play one's 45 right now, change the function to loop and preview the result. Now it's working better, but we can still see the jerk. Let's get rid of that. Go to the innermost object by double clicking the scene symbol and then the ball symbolic We'll have to edit the shape to in just a little bit here. Click on the keyframe on the 10th frame, drag it and place it on the seventh frame.

Then click on the first keyframe. Right click and select Copy frames. Now click on 15th frame on the timeline, right click and select Paste frames give shaped rein to the frames. Drag the seeker bar on the timeline to see if the animation seems smooth. It does good. Now let's take it by going one level up in the scene simple, no jerks here either.

And now still outside on the main stage, we have chosen the loop function here to now let's see the other options in the color drop down menu. Double click to enter the scenes in ball. Now choose the keyframes and change the object's properties to see How properties like brightness and contrast can be animated. You can use the sliders to change the values. The Alpha property is about transparency, you can try giving the value of zero percent alpha on the first frame, and hundred percent on the last. As the animation progresses, the transparent object gradually becomes solid.

You can try doing the same for the tint option to experiment with various colors to see the amazing effects for yourself. In another tutorial, we'll check this wrap options in the Properties tab in detail. Did you enjoy this tutorial on the types of symbols in Flash? If yes, you would enjoy exploring the limitless possibilities that this topic presents to you as an animator. Do practice a lot on symbol types. This tutorial explaining the basics of character animation was brought to you by Roja media.

Thank you for your time.