Flash 5 Tutorial – Part 4 – Symbols & Animation the standard drawing tools in Flash

Introduction

Over the last few parts you have learnt how to use most of the standard drawing tools in Flash. In this part of the tutorial I will show you how to create your first Flash movie with animation.

Symbols

In order to animate something in Flash it must first be changed into a Symbol. There are three types of symbol: Graphic, Button and Movie. In this part of the tutorial I will just deal with Graphics.

To start, draw a filled circle in the middle of the screen, a few centimetres high. Choose the arrow tool and double click on the circle to select it and the line around it. Then press F8 on the keyboard. You will get a window called Symbol Properties. In this window you can give a name to your symbol so that you can refer to it later. Type ‘Circle’ (without the quotes) in the box and then select Graphic and click OK.

You will now notice that the circle apears with a blue line around it. The next thing you will want to do is to animate this circle.

The Timeline

To create animation in flash you must use the timeline:

The timeline window shows all the frames that make up your animation and all the layers (which will be covered later). Each small box in the timeline is a frame. The animation runs at 12 frames per second (shown at the bottom) as standard but this can be changed. As you can see above, there is a black dot in the first frame. This signifies that it is a keyframe.

Keyframes

Keyframes are very important in flash as they are used whenever something is changed. For instance if you wanted the circle to appear in another position later in the movie you would create a keyframe in the frame where you want it to change and then you could move the circle without affecting the rest of the movie. That is exactly what you are going to do now.

Right click in frame 50 on the timeline and choose Insert Keyframe. This will insert a new keyframe into the animation at frame 50 and it will contain the same information as the previous keyframe. You could have also chosen Blank Keyframe which will make a new blank keyframe but you want the circle to be in both keyframes in your movie.

Now, click in frame one and press Enter to play the movie. As you can see you now have a 4.1 second long movie of a circle in the middle of the screen – not very interesting.

To make something happen you will need to change the second keyframe. Click on it (frame 50) and the symbol of the circle will be selected. Now, with the arrow tool, click and drag the circle to the upper left hand corner of the stage. Then click in frame one again and press Enter to play the movie.

Animation

The movie you have created now has a circle which moves on the screen but, as you will have noticed, it stays in the same place and then suddenly moves in the last frame. Animations, like television and film, are made up many frames, each of which has a slight change from the last one. As they are played very fast (12 frames per second in flash) the object looks like it is moving. Luckily, flash has been built so that you don’t have to do all of this manually.

Acutally, animating the circle on the screen is amazingly easy because of the Flash feature called Motion Tweening. This feature will automatically create all the frames to go between two keyframes to animate an object which you have moved (in this case the circle). All you have to do is right click in any frame between your two keyframes and choose Create Motion Tween.

Once you have done this the frames will change from being grey to being blue with an arrow across them. This signifies a motion tween. Click in frame one and press Enter to view your movie. As you can see, now flash has made your circle move smoothly accross the screen and, if you click i
n the frames between your keyframes you will see that it has created all the frames in between.

Scaling

Motion Tweens can be used for other things as well as moving objects. You can also change their size. For this you will use the scale tool. Right click inn frame 80 and create a new keyframe.Your circle will be selected. Now choose the Scale tool:

from the Options section on the tools pallette (if it is not available make sure you have the black pointer tool selected). This tool allows you to change the size of objects. 6 white boxes will appear at the edges of the circle, just like in any other image application. Use the bottom right hand one to drag the circle size until it is considerably larger. You will also notice that the circle grows equally around its centre point. Now, as before, right click in between frames 50 and 80 and choose Create Motion Tween.

Flash 5 Tutorial – Part 3 – More Tools the basic drawing tools in Flash

Introduction

In the last part of the tutorial I showed you some of the basic drawing tools in Flash. Before I show you how to create animations in Flash, I will first explain some more of the tools available to you. These tools are not as important as the ones I showed you last week but, to create good animations, it is useful to know how to use all the tools.

Ink Bottle

The ink bottle tool is quite useful. If you have a block of colour (for example one created with the paintbrush – which will be covered later in this tutorial) you can click on it to add a line round the edge. The colour of the line placed round the edge will be the same as the colour selected as line colour on the tools bar.

Dropper Tool

The dropper tool, like the ones in graphics software, is used to pick a colour off one part of the screen and use it as the fill or line colour. If you click on a fill, the fill colour will be set and the pointer will change to the fill tool. If you click on a line, the line colour will be set and the pointer will change to the ink bottle tool.

Eraser Tool

The eraser tool is used to rub things out on the stage. It is used by just clicking and holding down the mouse. It does have a few options though:

The large section at the bottom is used to select the size and shape of the eraser brush. On the right at the top is the faucet tool. This makes the eraser work like the fill tool – you just have to click once to remove the fill from an area. The part on the left is the special option. This allows you to choose the type of eraser you use. The default is Erase Normal, which works like a normal eraser tool. Some of the other options are:

• Erase Fills which will leave all lines intact as you use the eraser but will rub out fills
• Erase Lines which leaves fills but rubs out lines
• Erase Inside which allows you to erase inside a shape without harming the edges

Paintbrush Tool

The paintbrush tool will paint lines all the time you have the mouse button held down. It has some options, though, which are like the eraser tool options:

• Paint fills, will only paint inside a shape
• Paint Behind, which will paint behind all shapes and fills

Pencil Tool

The pencil tool allows you to draw lines on the screen. It is different to a normal freehand tool, though, as it has three options which can be set:

This option will allow you to choose what flash does to your line once you have drawn it. The default option is Straighten. Flash will straighten out your line so that any part of it that is almost straight will be made into a straight line. The two other options are smooth and ink. Smooth will change your line so that it is smoothed out to make curves. The ink option will not make so many changes to your line but will still smooth it a bit and straighten some lines.

The Text Tool

The text tool is used for adding text to your flash movies. Just click on the stage where you want the text to appear and a cursor will appear, where you can type in your text. To make chan
ges you need to use the character palette:

The options here are quite self explanitary. The font section lets you choose the font for the text. With flash all fonts are embeded in the file so the user does not need to have the font on their computer. Below that is the size box which lets you choose the text size. Next to that are the normal bold, italic and colour options. Below that is the Tracking option. This allows you to choose how spaced out the characters are. At 0 the spacing is normal. If you increase this, spaces will be left between your characters. If you decrese it, your characters will start to overlap. The option below this is the superscript/subscript option and below this you can specify a URL for a link.

Flash 5 Tutorial – Part 2 – Drawing to draw basic shapes in Flash

Introduction

In the last part I showed you the Flash interface and explained exactly what Flash is. In this part I will show you how to use Flash’s drawing and painting tools to put something into your animation. At this point there will be no interactivity and nothing will move but once you know the basics you can develop this futher.

Basic Drawing

The first thing you need to learn how to do is to draw basic shapes in Flash. We will start with the most basic shape, the circle/oval. Before you start you might want to move some of the floating pallettes so that you can see enough of the stage to work on.

Firstly, choose the Oval tool from the Tools bar on the left:

Then, draw the oval or circle you want on the stage (just as you would in a normal graphics program). Holding down shift will force the object drawn to be a circle. Once you have drawn your circle you will now notice a few things about it. Firstly, there is a line around the circle and a fill inside it. These are changed using the colors section of the Tools bar:

The first option (set at black in this example) is the line colour and the bottom option (blue in this example) is the fill colour. To change them click on the box filled with colour. You will get a menu with a selection of colours. If you want to match the colour to a colour on your screen click on anything on the screen and its colour will be used.

Now, try drawing another circle or oval, but this time change the fill and line colours.

The next tool you will use is the rectangle tool:

As with the circle tool, this works in exactly the same way as in any standard grapics program, you can drag out a rectangle you want to draw and hold down shift to force a square. Like the circle, the rectangle’s line and fill colours are set using the colors section of the Tools bar.

The rectange tool, unlike the oval, has some options which can be set. These appear in the Options section of the Tools bar:

There is only one option for the rectange, the Round Rectangle Radius. This creates rectangles with rounded corners like this:

Click on the option. A box appears asking for the radius in pixels. The example above used a radius of 20 pixels but it is best to experiment to find the best setting for what you want. After you have set this draw another rectangle. This one should have rounded corners. Remember: Flash will remember this setting so before you draw another standard rectange you should set it back to 0.

Like any other drawing program, Flash also has a straight line too:

This works in exactly the same way as the line tool in graphics software.

The objects you have drawn can also be moved. You must be careful, though, as Flash treats the fill and the line separately, so to move both together you must double-click in the object before dragging it if you want to move them both.

Drawing Or Painting?

Flash is a very strange program for editing grapics. It is really a cross between a drawing and a painting program with some special features of its own. It is like a drawing program because you can move and change objects once you have drawn them but it acts like a painting program with fills etc. For example if you drew two circles, a large one with a black line and a blue fill and a small one with a black line and no fill, then moved
the small one on top of the bigger one. You could then use the fill tool to fill in the middle of the small circle, changing only part of the big one.

Flash also allows you to break up graphics using other ones. If you now moved the small circle away from the larger circle it would leave a white space behind where it used to be. This feature can be extremely useful.

Special Fills

AS well as filling a shape with a single colour you can also use Flash’s premade fills. They are found at the bottom of the fill box. There are three gradient fills but the best are the radial fills. These allow you to fill in any shape with a radial gradient (going from light to dark). The special thing about them is that the lightest part will be where you click your mouse when using the fill option:

so you can very effectively make 3D looking circles, which are excellent for buttons.

Flash 5 Tutorial – Part 1 – Introduction multimedia on web pages,

Introduction

Flash is one of the most popular technologies on the internet, with thousands of websites using it for introductions, animations and advertisements. Although many people feel that these animations are sometimes unnecessary, Flash has created a way of including multimedia on web pages, which will run over a standard internet connections. The recent release, Flash 5, has brought many changes to the creation of Flash animations. Many of the techniques covered in this tutorial will also apply to past versions of Flash, as well as Flash MX, the very latest version, though. If you are not sure what a Flash animation is like click here for an example. If this does not work you will need to download the Flash Plugin.

Why Use Flash?

Flash is one of the best multimedia formats on the internet today for several reasons. Firstly, the Flash plugin (required to view the animations) is installed on nearly every computer connected to the internet. All the major browsers come with it installed by default and, for those who don’t have it, the download is very small. Secondly, Flash is a ‘vector based’ program, which means the animations and graphics created by it have much smaller file sizes than a video or streaming media version of the same animation would be. You can also include sound, graphics and dynamically created information in your animation.

Flash provides a versatile and easy way for webmasters to create animations for their users.

What Do I Need?

As mentioned above, all you need to view a Flash animation is a modern web browser with the Flash plugin. To create Flash animations, though, you will need some software. Although there are other Flash creations on the market, Macromedia’s Flash 5, is by far the best and, as Macromedia created the Flash format, it always has the latest features in it. Unfortunately, the software costs $400, but you can download a free 30 day trial from Macromedia.

Once you have downloaded and installed the trial (or bought the software) you will be ready to start creating Flash animations.

The Flash Interface

When you first open Flash you will find an interface that looks something like this:

I will quickly cover the different aspects of this screen.

In the centre is the large white ‘Stage’. This is the actual movie where you will place all the objects you want to include in it.

Across the top of the screen is the timeline. This is where you insert all the actions that happen in your movie so that they happen at the correct times. It is split up into frames.

Down the left hand side of the screen is the ‘Tools’ pallette. This is where you will find all the tools for inserting objects and text into your animation.

There are also four floating pallettes on the screen. The ‘Mixer’ pallette allows you to choose the colours you will be using in your animation. It will change the colours of the currently selected object. The’ Info’ pallette will allow you to find out a bit of information about the object you have selected and will allow you to make changes to the properties of a tool you are using. The ‘Character’ pallette contains all the text formatting tools. Finally the ‘Instance’ pallette contains all the tools for changing objects when you are animating them, including sound and several other tools for making changes to your animation.

Each of the parts of the Flash window does many different things. Instead of going through each tool explaining what it does, I will show you examples and explain how to create them, showing you how to use each tool while doing so.