all about flash 5

8/8/2019 All About FLASH 5

1/28

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 meansthe 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 thereare 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:
http://www.freewebmasterhelp.com/static/tutorials/flash5/example.htmhttp://www.freewebmasterhelp.com/static/tutorials/flash5/example.htm


2/28

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 severalother 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.


3/28

Part 2 - Drawing

Part 1 - Introduction

Part 2 - Drawing

Part 3 - More Tools

Part 4 - Symbols & Animation

Part 5 - More Symbols

Part 6 - Layers & Buttons

Part 7 - Actions

Part 8 - Sound

Part 9 - Exporting Your Animation

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.
http://www.freewebmasterhelp.com/tutorials/flash5/1http://www.freewebmasterhelp.com/tutorials/flash5/3http://www.freewebmasterhelp.com/tutorials/flash5/4http://www.freewebmasterhelp.com/tutorials/flash5/5http://www.freewebmasterhelp.com/tutorials/flash5/6http://www.freewebmasterhelp.com/tutorials/flash5/7http://www.freewebmasterhelp.com/tutorials/flash5/8http://www.freewebmasterhelp.com/tutorials/flash5/9http://www.freewebmasterhelp.com/tutorials/flash5/1http://www.freewebmasterhelp.com/tutorials/flash5/3http://www.freewebmasterhelp.com/tutorials/flash5/4http://www.freewebmasterhelp.com/tutorials/flash5/5http://www.freewebmasterhelp.com/tutorials/flash5/6http://www.freewebmasterhelp.com/tutorials/flash5/7http://www.freewebmasterhelp.com/tutorials/flash5/8http://www.freewebmasterhelp.com/tutorials/flash5/9


4/28

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, therectangle'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 sobefore 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


5/28

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.

Part 3 - More Tools


Part 2 - Drawing

Part 3 - More Tools




Part 7 - Actions

Part 8 - Sound


Introduction

In the last part of the tutorial I showed you some of the basic drawing tools in Flash. Before I show youhow to create animations in Flash, I will first explain some more of the tools available to you. These toolsare not as important as the ones I showed you last week but, to create good animations, it is useful toknow 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 thepaintbrush - 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 thetools bar.

Dropper Tool


6/28

The dropper tool, like the ones in graphics software, is used to pick a colour off one part of the screen anduse it as the fill or line colour. If you click on a fill, the fill colour will be set and the pointer will change tothe 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 themouse. 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 atthe top is the faucet tool. This makes the eraser work like the fill tool - you just have to click once toremove the fill from an area. The part on the left is the special option. This allows you to choose the typeof eraser you use. The default is Erase Normal, which works like a normal eraser tool. Some of the otheroptions 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:


7/28


8/28


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.
http://www.freewebmasterhelp.com/tutorials/flash5/9http://www.freewebmasterhelp.com/tutorials/flash5/9


9/28

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 sizeuntil 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.


http://www.freewebmasterhelp.com/tutorials/flash5/1http://www.freewebmasterhelp.com/tutorials/flash5/1


10/28

Part 2 - Drawing

Part 3 - More Tools




Part 7 - Actions

Part 8 - Sound


Introduction

In the last part I introduced you to Symbols and how you can use them to create animations in Flash.

There are other things you can do to symbols, though, as well as moving them around and changing their

size. In fact, almost any change to a symbol can be animated.

Rotation

Resizing a symbol is not the only thing you can do to it. Symbols can also be rotated. To do this create a

movie and draw a large red square in the middle. Then, select the square and make it a symbol (F8).

Give it a name and choose Graphic as the type. Then go to frame 30 and insert a keyframe. In this new

keyframe choose the black arrow from the Tools menu and then click on the Rotation option:

which is found next to the Scale option under the Options section for the arrow. Then click on one of the

white handles that appear round the rectangle and drag the mouse until the rectangle rotates to about 90

degrees (or any rotation). Then all you have to do is right click between frames 1 and 30 and choose

Create Motion Tween to animate your rotation.

Animating Text

Text, like images can be made into symbols and animated in exactly the same way as images can. The

technique is exactly the same except for one difference: even when it is a symbol you can still edit text by

double clicking on it. Apart from this you can rotate it, scale it, move it and perform any other changes that

you normally could.

Importing Images

You can import any graphic into Flash and then use it as you would as if it had been created in Flash.This is especially useful for pictures such as photos which could not be created using Flash's graphics

tools. To import an image is very simple: just go to File then Import... find the image on your hard drive

and then click Open. The image will then appear on the stage. You can now resize it and make it a

symbol if you want to.

Symbol Effects

There are several effects you can apply to a symbol which are slightly different to what you have already
http://www.freewebmasterhelp.com/tutorials/flash5/2http://www.freewebmasterhelp.com/tutorials/flash5/3http://www.freewebmasterhelp.com/tutorials/flash5/4http://www.freewebmasterhelp.com/tutorials/flash5/6http://www.freewebmasterhelp.com/tutorials/flash5/7http://www.freewebmasterhelp.com/tutorials/flash5/8http://www.freewebmasterhelp.com/tutorials/flash5/9http://www.freewebmasterhelp.com/tutorials/flash5/2http://www.freewebmasterhelp.com/tutorials/flash5/3http://www.freewebmasterhelp.com/tutorials/flash5/4http://www.freewebmasterhelp.com/tutorials/flash5/6http://www.freewebmasterhelp.com/tutorials/flash5/7http://www.freewebmasterhelp.com/tutorials/flash5/8http://www.freewebmasterhelp.com/tutorials/flash5/9


11/28

done. This involves using another one of the floating palettes. Firsly, click on a symbol to select it. Then

find the Effects pallette. If it is not immediately visible look for the Instance pallette then click on the

Effects tab. You will get a pallette like this:

There are four different options. First, select Brightness. This will allow you to change the brightness of

the symbol. You can either type in a percentage (between -100 (for darkest) and 100 (for lightest) where 0

is the current value) or you can use the slider which can be accessed using the little arrow next to the

percentage box.

Tint allows you to place a tint colour over the symbol. On this part you have a few options. Firstly you can

specify the percentage for the tint between 0 (no tint) and (100) fully coloured. Values around 50% usually

give quite good results. You can also choose your colour and there are three options for this. You can use

the standard Flash colours menu, choose it from the large Colour Selector at the bottom or you can enter

an RGB value in the three boxes.

Alpha is a very useful option. It allows you to make your symbol partially or fully transparent. You can

choose from a percentage (like for the brightness) where 0 is invisible and 100 is the normal symbol. This,

as you can probably work out, is how you create fading effects in Flash. You create a symbol and start it

and alpha 0% then use a motion tween to animate it to 100% for a fade in and the opposite for a fade out.

The fourth option, Advanced just combines these three effects.

These effects are quite hard to explain so 02this Flash movieshows you all the different effects in action.

Multiple Animation

You don't only have to change one thing at once when you animate a symbol. For example create a

symbol of a square. Create a keyframe at frame 30. Then click on the symbol in frame 30. Use the scale

tool to make it much bigger. Then use the rotate tool to turn it to a different angle. Finally use the effects

pallete to set the alpha at 100%. Now go back to frame 1 and click on the same square. Go the effectspallette and set the Alpha to 0. Then create a motion tween between frames 1 and 30 and play your

movie.

You now have a square which rotates and grows while fading in.

http://www.freewebmasterhelp.com/static/tutorials/flash5/effects.htmhttp://www.freewebmasterhelp.com/static/tutorials/flash5/effects.htmhttp://www.freewebmasterhelp.com/static/tutorials/flash5/effects.htm


12/28


Part 2 - Drawing

Part 3 - More Tools




Part 7 - Actions

Part 8 - Sound


Introduction

In the last parts I have taught you how to create simple animations. In this part I will explain how Flash'slayers work and how you can create simple buttons.

Layers

One major feature of Flash is that, like several image editing programs, everything you do is put intolayers on the screen. Layers are like pieces of transparent plastic. You can put pictures text andanimation on them. Layers higher up have their content over the top of layers lower down. So fareverything you have done has been contained in one layer, though.

Layers are controlled through the timeline, which you have seen before:

As you can see, there is only one layer in this animation, Layer 1. The first thing you should do is torename this layer. Although your animation will work with it being called Layer 1 it is much easier tounderstand what you are doing if you use proper names for your layers. Doubleclick on the name andtype in Scrolling Text.

Now you will want to put in some content for this layer. Make a symbol with the text:

This is my Flash Animation

And make it a symbol. Now move it right off the left edge of the stage. Insert a keyframe at frame 120 andin that frame move the text to off the other side of the stage. Now make a motion tween. Your text should'scroll' across the screen.

Now you can add another frame. Click the little icon on the timeline with a + sign on it. This will add a newframe above the one you are currently using. Rename this to Circle.


13/28


14/28

Part 3 - More Tools




Part 7 - Actions

Part 8 - Sound


Introduction

In the past 7 parts of this tutorial I have showed you how you can create visual effects using Flash. In this

part I will show you how you can create an even better user experience by using sound in your animation.

Importing Sounds

Before sounds can be used in your animation they must be first made available for the software to use.

To do this you must use the standard Import menu. To access this go to File, Import. From here you can

select each file you want to import (just as you did in an earlier part with images). The only confusing

thing about this is that once you have imported your sound you will see nothing special on the screen.

This is because the sound has been added to the library.

The Library

The library is not only for sound, but is actually one of the most useful parts of Flash when you start to

create large movies with many elements. Basically, the library contains all the objects you have in your

movie, the three types of symbol (movie, button and graphic) and all sounds. This can be very useful as,

to add something to the movie from the library you just drag it to the position you want it on the stage.

You can also preview all the objects here, graphics will appear in the top window and if you select abutton, sound or movie clip you can watch or listen to it by clicking the little play button which appears in

the preview window. You should be able to see and preview any sounds you have added here.

Adding Sound

Sound is added using the sound palette. This is in the same palette as Instance, Effect and Frame. If it is

not on the screen go to Window and choose Panels, Sound. The sound palette will probably be 'greyed

out' at first. Insert a keyframe into your movie and click in it to make all the options available.
http://www.freewebmasterhelp.com/tutorials/flash5/3http://www.freewebmasterhelp.com/tutorials/flash5/4http://www.freewebmasterhelp.com/tutorials/flash5/5http://www.freewebmasterhelp.com/tutorials/flash5/6http://www.freewebmasterhelp.com/tutorials/flash5/7http://www.freewebmasterhelp.com/tutorials/flash5/9http://www.freewebmasterhelp.com/tutorials/flash5/3http://www.freewebmasterhelp.com/tutorials/flash5/4http://www.freewebmasterhelp.com/tutorials/flash5/5http://www.freewebmasterhelp.com/tutorials/flash5/6http://www.freewebmasterhelp.com/tutorials/flash5/7http://www.freewebmasterhelp.com/tutorials/flash5/9


15/28

In the first 'Sound' box you can select the sound you want to play. If no sounds appear here, you have not

yet imported any into your movie. Check the Library to see if any appear.

Now the effect box will be available. This is not particularly important just now. The next box is the Sync

box. You can choose Event, Start, Stop and Stream. The only ones you really want to learn about at the

moment are Event and Stream. They each have their own features.

Stream

Streaming sounds work like streaming audio on the internet. The sound does not need to be fully loaded

before it starts playing, it will load as it plays. Streaming sounds will only play for the number of frames

that are available for it (until the next keyframe). This is fine for background sounds but it will not work

very well for a button.

Event

Event sounds are mainly used for when someihtng happens in your movie. Once they have started

playing they will continue until they end, whatever else happens in the movie. This makes them excellent

for buttons (where the button moves on to another frame as soon as it is clicked). The problem with Eventsounds, though, is that they must fully load before they can play.

Adding A Streaming Sound

It is much easier to manage your sounds if you put them on a separate layer. Insert a new layer and place

a keyframe at the beginning. Using the sounds palette select the sound you want to play and select

Stream from the Sync. If you want the sound to loop change the value in the Loops box (for some reason

a value of 0 (default) will cause the sound to play once).

Now you must insert some frames to give the sound time to play. Insert a frame (or keyframe) at about

frame 500 in the movie (this will give most sounds time to play). When working out how many frames are

needed remember that the movie will play at 12 frames per second. A graphical representation of thesound will appear in the frames it will be playing during so

that you can see how much space it takes up. Press CTRL + Enter to preview your movie.

With the sound on a separate layer you can have your movie running on other layers while the sound

plays in its own layer.

Adding An Event Sound to a Button


16/28

Adding an event sound to a button is nearly as easy as adding a streaming sound. Either create a button

or use a pre-made one and right click and choose Edit. This will allow you to see the 4 different states of

the button (as you learned about in part 6. Usually sounds are placed in the Over or Down frames. To

make a sound play when the mouse moves over the button choose Over and to hear it when the button is

clicked choose Down.

Insert a new frame and then put a keyframe for the button state you want to use. Click in the frame and

use the sounds palette to add an Event sound. You don't need to put in any extra frames as an event

sound will play until it finishes. Now return to the movie and use CTRL + Enter to test it with the button.

Effects

The effects option allows you to add a variety of effects to the sound as it plays. The preset ones are quite

self explanitary but you can also use the Edit.. button to create your own. This will open a window with the

the waveform representation of the sound (left speaker at the top, right at the bottom). On the top of this is

a line which is the volume control (the top is full volume (the volume the sound was recorded at) and the

bottom is mute). By clicking in the window you can insert little squares. The line goes between these

squares. You can also drag them around the screen. By doing this you can change the volume of the

sound at different points throughout its playing time, and make it different for each speaker.

Flash 5 Tutorial IntroductionWelcome to the Flash 5 tutorial section. In this tutorial, we will cover all the basics of Flash and a few

advanced features it has to offer. First thing you need is the software. You can download a demo of the

software at the Macromedia site, click here. If you have the software and have not installed it yet, click

here to go to the Installation tutorial.

What is Flash?

Flash is a vector graphic based application. It is used worldwide to produce movies, animation,

presentations and more. You can use it to create presentations for your company, equipped with an up to

date database to show the right information at the right time to creating a button for your web site. An

example would be a Stock Ticker. Flash is very easy to use and a very effective tool in the web

development industry. One advantage to Flash is it is a cross-browser platform, which means you can

show your movies in any browser out there, such as Internet Explorer or Netscape Navigator.

Work environment:

Flash is a little like the program Paint for Windows. Although it is used mainly for animation, if you have

ever used Paint, creating graphics and artwork in Flash is the same way. You have all the same tools thatPaint uses, such as the square/rectangle tool, the circle tool and the line tool. The work environment in

Flash consists of four major parts:

1 The Stage

The stage is the area in which you will be working. The stage is basically your drawing board, where you

can create, add and delete your work. The stage(s) are the only areas in which you can put in graphics,


17/28

and while your movie is in play on a web site, and only the content in the stage will be displayed. You can

also use special features and import your graphics from other programs.

2 Timeline

The timeline is the area that represents moving objects in your stage. The timeline is consisted of frames

and layers. Each frame is a brand new image. Using simple tweening motions will allow you to modifyyour objects in your timeline to produce a quick movie. Layers represent each layer of transparency on

your stage, you can have as many layers as you want and you can only see objects on the layers.

3 Library

The library is just a small database where Flash stores all your graphics and symbols. From the library,

you can click and drag symbols onto your stage area, which saves you a lot of time, instead of re-creating

new graphics.

4 Panels

The panels used in Flash 5 allow you to control anything you do, such as modifying your text, of setting

effects for a symbol. The advantage about the panels is that they can be hidden allowing you more work

space to work on. Go to Window > Panels for a complete list of your panels.

Flash 5, now allows you to import MP3 sound files. This new feature allows you to play music, add sound

effects to your buttons, etc. This new feature is only useful using supported sound files, such as .mp3 and

.wav.

Remember to open a new document for each tutorial. This will make it easier to work with, and a lot

faster.

To begin, continue to Chapter II.

DrawingUsing the drawing tools, usually located on the far left section of flash, you can create artwork, buttons,

even layouts for a flash movie or a flash web site. This section will show you how to use these tools andlet you try them out for yourself as we go. With these tools, you can draw lines, circles, squares and other

shapes. These tools are pretty much what you have expected them to be, simple drawing tools.

Pointer:

The pointer in Flash is basically the cursor. You will need the pointer to move, select, resize different

objects in your movie. To select an object, you can either double click on it, or click and drag over it.

The oval tool:

Select the oval tool from your Tools menu and then click and drag a circle shape onto your stage.

You can start from anywhere from your stage, and once you are satisfied with the size and shape of your

circle, let go of your mouse. Tip: If you hold down your shift key, while drawing a circle, you will obtain a

perfect circle. Once this is done, you have a new circular shape on your stage area.

The rectangle tool:


18/28

Select the rectangle tool from your Tools menu and then click and drag a square or rectangle onto

your stage. You can do this the same way you did to create a circle. Tip: If you hold down your shift key,

while creating a rectangle, you will notice a perfect square being created. Once you are satisfied with the

size and shape, let go of the mouse.

Rounding over a rectangle/square:

To create a rounded rectangle/square, select your rectangle tool from the Tools menu, then select the

Rectangle Radius Modifier tool. Set the size to 5, then click on OK. Create your shape, and notice

how the edges are rounded while you are drawing.

The pencil tool:

The pencil tool allows you to draw shapes on your stage freehand. This means that you and your hand

control the position, length and curves in your line. Select the pencil tool from your Tools menu and

draw a line on you stage. Youll notice the line isnt perfect, but there is a way to improve it. Select the line

by clicking on it two times, and then go to your line options and select the straighten button. Once

this is selected, your line will become more straight then it was before. You can also add the smooth

option which will make your line perfectly smooth and clean. Now you have perfect lines, the way you

want them to be displayed.

The paint brush tool:

This tool is practically the same as the pencil tool, since it uses the same options as well as giving you the

same appearance you would get from your pencil tool. Select the brush tool, and draw some lines inyour stage. Play with the straighten and smooth options and notice the resemblance to the pencil tool.

The paint bucket tool:

Once you have deleted all the shapes and lines on your stage, create a new square on your stage. Now

you will notice the colors in the square are the colors you have selected earlier. Choose the paint

bucket tool, and then select a color from your fill menu . Now that you have selected a new

color, click in the square with your paint bucket, and your new color will be applied. You can do this with

any color you wish, and as many times as you want. If you want to apply a gradient to your square, simple

choose the color menu, and select one of the default gradients. You can click in your square, and for amore effective result, click and drag the paint bucket while in the square. You will notice a gradient being

produced and moved in your square. Later I will show you how to create your own gradients. Now you

have a good idea on how to fill in your shapes.

Outlines:

Each shape you create such as triangles, squares and circles have an outline, which is a line surrounding


19/28

the shape. Select your line, by double clicking it, and go to your line color menu, and choose a

color for your line. Now while your line is still selected, go to Window> Panels> Stroke where a panel

containing stoke options will appear. Choose the Dashed option and notice your line will have a new look

along with the color you have just added to it. Thats it, you now know how to add style to your lines.

Now that you have completed the Drawing section, please make sure you close this document and opena new one for the next section, Symbols.

SymbolsIn Flash, a symbol represents a movie clip, button or graphic that you have created. Symbols make it

easier to use the same object over and over again without having to re-create it, which is a waste of time.

In this section, we will learn how to create, modify and remove symbols you have created. We will also

learn how to add effects to these symbols, enhancing your movie.

Converting to symbols:

In the stage area, draw a graphic of your choice, using any tool and colors of your choice. Once you havea new shape on your stage, select it. Your drawing is now selected, from the menu, go to Insert> Convert

to Symbols. A window will appear in the middle of your screen called Symbol Properties. Choose the

graphic option, then name your symbol my drawing. (Shown in figure 1.9)

(Figure 1.9)

Click OK and you will be taken back to your stage. Select your drawing by clicking it once now, and you

should notice a line surrounding it.

Library:

Flash takes it upon itself to add all your graphics and buttons to a small database called the Library. This

is where flash allows you to view, edit and remove items you have created. To view the Library, hit

CTRL+L and it will show up. (Shown in figure 2.1)


20/28

(Figure 2.1)

Resizing and Rotating:

Using the shape you have converted into a symbol, select it, and click on the resize button, and

resize it to any size you want. Select your symbol again, and this time click on the rotate button, and

rotate your symbol by dragging it in a circular motion using the little white circles surrounding it. When you

are done, deselect your symbol.

(Shown in figures 2.2 and 2.3)

(figure 2.2 and 2.3) Resizing and Rotating symbols

Adding effects:

Select your symbol, and from the menu, go to Window> Panels> Effects. You can set any effect you

want to your drawing, in this sample, I used my light yellow happy face and turned into a light blue happyface using the Advanced Effects. You can play around with these options by selecting one of the options

in the pull down menu, until you get the result you want.


21/28

(Figure 2.4)

Editing, Renaming and Deleting symbols:

Select your symbol on your stage, and hit DELETE. Your graphics is now gone from the stage, but not

from the library. In the library, choose your symbol, and now slide it onto the stage area. Now you have

your drawing back where it used to be. To rename, edit, delete or duplicate, you must right click on yoursymbol in the library, and select one of the above. Click on Edit, and you will be taken to a new stage,

where you will be able to edit your drawing, and once you are done, go back to Scene 1 by clicking on the

Scene 1 button above your timeline. Now rename your symbol to My First

Drawing. If you are getting tired of your little drawing, nows the time to get rid of it, right click on it in the

Library, and select DELETE. An alert window will show up, and you must click YES to completely delete

it. Now you are left with a blank movie clip, perfect for the next lesson.

This concluded the Symbols section, please proceed to the Layers section.

Layers

Layers are simple transparent sheets that are placed one on top of each other. These layers can bemoved around, added and they can also be deleted. They organize your movie and all you to affect

objects without affecting the rest of your movie.

When editing object on a layer, the layer selected will be the only layer that is being modified. To activate

another layer, you must click on it to select it. While it is selected, the layer will be highlighted until you

deselect it. To let you know if a layer is active, you will notice a small pencil beside the layer name.

(Figure 2.5)

The image above is what layers look like. You see here that there are three layers, and layer one is

selected.


22/28

Creating and modifying layers:

Create two more layers by clicking the new layer button. A new layer is created. Now do it one more

time to have a total of three layers. Perfect, now you must rename your layers. To do this, you must click

on your layer, and then double click it, you can now change that names of the layers. In layer 1, rename it

to Square, then in layer 2, rename it to Triangle, and finally rename layer 3 to circle. Once this is done,you should have the layers looking like Figure 2.6 below.

(Figure 2.6)

Now, in the Square layer, draw a small square image located at the far left of your stage. Now select the

Triangle layer, and draw a triangle in the middle of your stage, but make sure that you fill in the triangle,

and you can use the line tool to create, and finally select the Circle layer, and draw a circle at the far

right end of your stage. Once this is done, you have three different shapes that go with three different

layers.

You can set the order of your layers, to minimize the appearance of some objects, or just to be more

organized. To set the order, you simply click and drag the layer up or down to the position you want.

(Figure 2.7)

Set the order of your layers to Circle, Triangle and then Square. You now see how easy it is to create,

rename and move layers.

Locking and Hiding layers:

Locking layers is useful at times to protect other work while you are drawing more graphics. To lock or

unlock a layer, you simple click on the pad lock button and it will display a locked layer. To hide a

layer, you simple click on the hide button, and all the content from the layer you just hid will be

invisible until you unhide the layer.


23/28

This concludes the Layers section, please proceed to the Type and Text section

Type and TextHaving text in your Flash movie is a good thing to have. You let users have the chance to read a little

about yourself, or about your company. Having a Flash web site without any text would be kind of boring.

You can transform text into symbols and give them effects to make it look more attractive, but you canalso make it look excellent using a little Action Script. In this section, well learn how to create normal,

input and dynamic text, as well as how to modify your text.

Inserting Basic Text:

Select the text tool, and click anywhere on the stage. You will notice a small text box, with a blinking line it

it, waiting for you to type. Type in a line of text, and you will notice that your line will always remain one

line. This is due to this text box NOT being word wrapped. You can type forever and it will always be one

line until you hit Enter to start on a new line. If you want to set a specific width, select the text tool once

again, and this time, instead of just clicking, click and drag a text box of your size onto the stage. You can

now type, and as soon as you get to the end of your text box, it will automatically start a new line.

Creating Input boxes:

When you create input boxes, this will allow users to type in the box in the movie. You can use this to

create Flash forms, or just to play around with. Open you text panel Window> Panels> Text and go to

the Text Options tab. Select Input Text from the drop down menu, and you can now insert a text box on

your movie. Click and drag a box, then go text it out by hitting CTRL+ENTER on your keyboard. You can

type text into it from the movie you just created.

Creating Dynamic Text:

Dynamic text is the most important tool you can use regarding text. This allows you to add any text you

want, but you need to make the text box a variable and have it load from some Action Script. From the

text panel, choose Dynamic Text from the Text Options tab. (figure 2.7) Then select multiline from thesecond drop down menu. This is the hard part, making it a variable and adding text to it.

(figure 2.7)

Now you see how this should look from the Text Panel, call it text, and hit Enter. Now, go to frame 1 on

your stage, and right click on frame 1. Go to Action, and select the Actions category from the menu.


24/28

Choose Set Variable from the list, and in the Variable field, type in text, then in the value field, enter

some lines of text. Once this is done, test your movie by hitting CTRL+ENTER, and you should see some

text on the stage area in your movie.

Modifying text:

If you want to modify your text, there are a few different ways of doing it. You can change its color, or

change its alignment, change its size or make it Bold. Any text modifications are made through the

Character panel. Go to Window> Panels> Characters. Now select your text box, and from the Characters

panel, change the text to the color green, its size to 20 and make it Italic. Now you have text the way you

want it to look. You can do this until you have the results you want and then deselect your text box. Figure

2.8 is what the Character Panel looks like.

(Figure 2.8)

Now you know how to add text to your document, please proceed to the Buttons section.

ButtonsThe button symbol is equiped with the ability to change its appearance according to what state the button

it. Theree exists four states, Up, Over, Down and Hit. You can see buttons in their normal state which is

the Up state. You can then interact with it by rolling your mouse over the button. When you click on the

button, its state will be down as long as the mouse remains pressed. A button can also have an

assigned action when a certain state is reached, because of this, there are four frames to define each

state of your button.

States of the button:

1. Up is the state used whenever the mouse pointer is not over the button.

2. Over is used when the mouse pointer is over the button.

3. Down is the state attained when the button is clicked.

4. Hit is invisible and defines the area where the button will react to the mouse pointer.

Creating Buttons:br> To create a button, you need to first have a symbol. On your menu, go to Insert

and choose New Symbols or hit CTRL+F8 on your keyboard. The symbols Properties window will

open, choose button, and call it button 1. Click OK.


25/28

(As shown in figure 2.9)

(Figure 2.9)

You will be taken to a new stage, called button 1. In this stage, you will notice four frames. Frame 1, UP

is the main frame. This will be the button, when nothing is being done to it by the user. Frame 2, Over is

the 2nd part of the button. When the users mouse is on your button, Frame 2 will appear, and frame 1 will

disappear. Frame 3, Down is the part of the button that is clicked on. When a user clicks on the button,they will see the image on Frame 3. Finally frame 4, Hit is the frame that lets you decide where you want

the button to be activated. Example, if you have a square button, and the Hit frame is a circle shape,

when you are viewing your movie with the button in it, only a circle around the square will be considered

by Flash the button.

(Frames shown in figure 3.0)

(Figure 3.0)

In frame 1, draw a rectangle shape, and then add some text to it. The drawing you just added to frame 1

is now what users will see. Now, click on frame 2, and hit F6 on your keyboard, this will add a new

keyframe, and you will notice your button from frame 1 is copied over. You can either leave it as is, but

thats not exciting or change its look. Give the text a bold look, and change the color of your square.When users put their mouse over the button, they will now see whats on frame 2. Select frame 3, and hit

F6 once again. You do not have to do this if you do not want to. Frame 3 is only viewed if the user clicks

on your button, but then again, its up to you. The image from frame 2 is now copied onto frame 3, you

can modify it the way you want it to look. Select frame 4, and hit F6 again. In frame 4, you do not have to

change anything, because no matter what, no one will ever see whats on frame 4. You now have a new


26/28

button, return to the stage, and from the library, slide you new button onto it. Now

you may want to add some actions to your button, read the following for more details on how to do so.

Adding Actions:

You have created a button, you may want to assign an action to it now. This could server useful if this

button will be used on a web site, you can redirect users to another web page with it. From your stage,

right-click on your button, and select Action. You are now in the Action Panel. From the Basic Actions

button, select the getURL command. Now type in a URL of your choice, and close the Action Panel.

(As shown in Figure 3.1)

(Figure 3.1)

Your button has now a link assigned to it. If you want to test it out, go to Control> Enable Simple Buttons

or press CTRL+ALT+B and you can now click on your button.

Save your movie as button 1.fla and continue to the Sound section, you will need your button for this next

section.

SoundsAdding sounds to movies and buttons really enhances your movies experience. In this section, you will

need to create a new button by following this guide hereor if you have done the Button section already,

just open your button1.fla document and we can begin.

Importing the sounds:

To import sounds, you must go to File> Import and select the sound files you want to import. For this

tutorial, we will be using 2 sound files called Over and Down. You can download them both into a ZIP

file by clickinghere. When you have the sounds downloaded, unzip them and import them into your
http://www.developertutorials.com/tutorials/flash/flash5-tutorial-050315-1334/page6.htmlhttp://www.developertutorials.com/tutorials/flash/flash5-tutorial-050315-1334/page6.htmlhttp://www.developertutorials.com/tutorials/flash/flash5-tutorial-050315-1334/sounds.ziphttp://www.developertutorials.com/tutorials/flash/flash5-tutorial-050315-1334/sounds.ziphttp://www.developertutorials.com/tutorials/flash/flash5-tutorial-050315-1334/sounds.ziphttp://www.developertutorials.com/tutorials/flash/flash5-tutorial-050315-1334/page6.htmlhttp://www.developertutorials.com/tutorials/flash/flash5-tutorial-050315-1334/sounds.zip


27/28

movie. Now that you have them imported, you want to make sure you have them imported for sure, go to

your library CTRL+L and see if your files are there.

Adding sounds to events:

Now that we have our sounds, we can now start using them. First sound called Over will be used in the

button we have created earlier as a mouseover effect. Once a use puts his mouse on your button, it willplay the sound. Second sound we have is called Down which will be used on the button as well. When a

user clicks on the button, the sound will be heard. Now, from your stage, right-click on your button and

choose Edit from the menu. You are now in your buttons stage. In your timeline, select frame 2 Over

and then open your sound panel Window> Panels> Sound. Figure 3.1 shows you the Sound Panel.

(Figure 3.1)

From the drop down menu in your sound panel, select the over.wav file, and now you will notice in your

Over frame, a line across the frame. This means that the sound has been successfully added to this

frame. Now for frame 3 Down, you will add the down.wav sound. To do this, select frame 3 and from the

sound panel, select down.wav from the drop down menu. Thats it, you have inserted all your sounds into

your button and you can now save your document.

Exporting your button:

Now you will have to export this button if you want to have it on your web site. From the File menu,

choose Export. Save your button as button.swf, and click OK. Another screen will pop up called Export

Flash Player, just click OK and youre movie is now exported and ready to be used.

Please proceed to the Animation section.

AnimationFlash is mainly used for animation worldwide, now lets learn how to make some. In this section, well

learn how to create Motion Tweens and Shape Tweens. You can also have animations change colors,

resize, rotate and more.

Creating Tweened Symbols:


28/28

From your menu, go to Insert> New Symbol. Choose Movie Clip from the options and name it my clip.

You will be taken to a new stage area similar to the main stage. Draw a small circle, then select it, and go

to Insert> Create Motion Tween. Choose frame 25 from your timeline and hit F6 on your keyboard. All

the frames from frame 1 to frame 25 are now purple, and have an arrow line pointing to frame 25.

While frame 25 is still selected, take your circle shape, and move it to another spot on your stage. Hit

Enter, and youre circle will move on its own.

Creating Shape Tweens:

Shape tweens are a different source of tweening. You do not need to have symbols, just basic drawings.

Create a new symbol, choose movie clip and name is my clip 2. Create a circle, select frame 1, then open

your Frame Panel, CTRL+F. From the panel, select Shape from the drop down menu, and now select

frame 25 and hit F6. This time you will notice a green set of frames.

On frame 25, delete your circle by selecting it and draw a square. Hit ENTER and youll see your circle

morphing into a square. Thats it for shape tweening.

Saving Flash FilesTo save your work, you simply have to save and export it. To save your movie, go to File> Save as and

save it as what you want to. To Export your movie, so you can use it on your web page, go to File>

Export Movie and save your movie as what you want. Normal Flash movies are saved as .swf format.

Publishing your movie can be done in different way. You can publish an HTML document, have your .swf

file and some other files such as gifs, jpgs, or bmps. To set up your publish settings, go to File> Publish

Settings, select the types of publishing you want, then select OK. To publish the movie, go to File>

Publish or hit F12 on your keyboard. Thats it, you can now use your movie on the web.

all about flash 5

Documents