Download - Flash 5 Tutorial

8/13/2019 Flash 5 Tutorial

1/13

Welcome to the Flash 5 tutorialsection. 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 havethe software and have not installed it yet, click hereto go to theInstallationtutorial.

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 yourcompany, equipped with an up to date database to show the right information at the right

time to creating a button for your web site. n e!ample would be a "tock #icker. Flash is

very easy to use and a very effective tool in the web development industry. $neadvantage 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 orNetscape Navigator.

Work environment:

Flash is a little like the programPaintfor Windows. lthough it is used mainly for

animation, if you have ever usedPaint, creating graphics and artwork in Flash is thesame way. You have all the same tools thatPaint uses, such as the square&rectangle tool,

the circle tool and the line tool. #he work environment in Flash consists of four ma'orparts(

1 - The Stage:

#he stage is the area in which you will be working. #he stage is basically your drawing

board, where you can create, add and delete your work. #he stage)s* are the only areas inwhich you can put in graphics, 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

#he timeline is the area that represents moving ob'ects in your stage. #he timeline is

consisted of frames and layers. +ach frame is a brand new image. sing simple tweening

motions will allow you to modify your ob'ects in your timeline to produce a quick movie.-ayers represent each layer of transparency on your stage, you can have as many layers

as you want and you can only see ob'ects on the layers.

3 - Library

#he library is 'ust 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 - anels

#he panels used in Flash allow you to control anything you do, such as modifying yourte!t, of setting effects for a symbol. #he advantage about the panels is that they can be

hidden allowing you more work space to work on. /o to Window 0 1anels for a

complete list of your panels.
http://www.siteownersdesign.com/design-tutorials/flash/install.shtmlhttp://www.siteownersdesign.com/design-tutorials/flash/install.shtmlhttp://www.siteownersdesign.com/design-tutorials/flash/install.shtml


2/13


3/13

which will make your line perfectly smooth and clean. 3ow you have perfect lines, the way you want

them to be displayed.

#he paint brush tool(

#his 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. "elect the brush tool, and draw some lines inyour stage. 1lay with the straighten and smooth options and notice the resemblance to the pencil tool.

#he paint bucket tool(

$nce you have deleted all the shapes and lines on your stage, create a new square on your stage. 3ow you

will notice the colors in the square are the colors you have selected earlier. 4hoose the paint bucket

tool, and then select a color from your 8fill8 menu . 3ow 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 coloryou 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 a more effective

result, click and drag the paint bucket while in the square. You will notice a gradient being produced and

moved in your square. -ater I will show you how to create your own gradients. 3ow you have a good ideaon how to fill in your shapes.

$utlines(

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

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

for your line. 3ow while your line is still selected, go to Window0 1anels0 "troke where a panel

containing stoke options will appear. 4hoose the 5ashed option and notice your line will have a new look

along with the color you have 'ust added to it. #hat:s it, you now know how to add style to your lines.

3ow that you have completed the 5rawing section, please make sure you close this document and open a

new one for the ne!t section, "ymbols.

In Flash, a symbol represents a movie clip, button or graphic that you have created.

"ymbols make it easier to use the same ob'ect 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 andremove symbols you have created. We will also learn how to add effects to these

symbols, enhancing your movie.

4onverting to symbols(In the stage area, draw a graphic of your choice, using any tool and colors of your choice.

$nce you have a new shape on your stage, select it. Your drawing is now selected, from

the menu, go to 8Insert0 4onvert to "ymbols8. window will appear in the middle of

your screen called 8"ymbol 1roperties8. 4hoose the graphic option, then name yoursymbol 8my drawing8. )"hown in figure ;.


4/13

)Figure ;..;*

)Figure >.;*

7esi6ing and 7otating(

sing the shape you have converted into a symbol, select it, and click on the resi6e

button, and resi6e it to any si6e you want. "elect your symbol again, and this time click

on the rotate button, and rotate your symbol by dragging it in a circular motion usingthe little white circles surrounding it. When you are done, deselect your symbol.

)"hown in figures >.> and >.2*

)figure >.> and >.2* 7esi6ing and 7otating symbols


5/13

dding effects(

"elect your symbol, and from the menu, go to 8Window0 1anels0 +ffects8. You can set

any effect you want to your drawing, in this sample, I used my light yellow happy faceand turned into a light blue happy face using the dvanced +ffects. 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.

)Figure >.?*

+diting, 7enaming and 5eleting symbols(

"elect your symbol on your stage, and hit 5+-+#+. Your graphics is now gone from the

stage, but not from the library. In the library, choose your symbol, and now slide it ontothe stage area. 3ow you have your drawing back where it used to be. #o rename, edit,

delete or duplicate, you must right click on your symbol in the library, and select one of

the above. 4lick on +dit, 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 "cene ; by clicking on the 8"cene

;8 button above your timeline. 3ow rename your symbol to My

First 5rawing. If you are getting tired of your little drawing, now:s the time to get rid of

it, right click on it in the -ibrary, and select 5+-+#+. n alert window will show up,and you must click Y+" to completely delete it. 3ow you are left with a blank movie

clip, perfect for the ne!t lesson.

#his concluded the "ymbols section, please proceed to the -ayers section.

-ayers are simple transparent sheets that are placed one on top of each other. #hese

layers can be moved around, added and they can also be deleted. #hey organi6e yourmovie and all you to affect ob'ects without affecting the rest of your movie.

When editing ob'ect on a layer, the layer selected will be the only layer that is being

modified. #o activate another layer, you must click on it to select it. While it is selected,the layer will be highlighted until you deselect it. #o let you know if a layer is active, you

will notice a small pencil beside the layer name.


6/13

)Figure >.*

#he image above is what layers look like. You see here that there are three layers, and

layer 8one8 is selected.

4reating and modifying layers(

4reate two more layers by clicking the new layer button. new layer is created. 3owdo it one more time to have a total of three layers. 1erfect, now you must rename your

layers. #o do this, you must click on your layer, and then double click it, you can now

change that names of the layers. In layer ;, rename it to "quare, then in layer >, rename it

to #riangle, and finally rename layer 2 to circle. $nce this is done, you should have the

layers looking like Figure >.@ below.

)Figure >.@*

3ow, in the "quare layer, draw a small square image located at the far left of your stage.

3ow select the #riangle 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 4ircle layer, and draw a circle at the far right end of your stage. $nce this is

done, you have three different shapes that go with three different layers.

You can set the order of your layers, to minimi6e the appearance of some ob'ects, or 'ust

to be more organi6ed. #o set the order, you simply click and drag the layer up or down to

the position you want.

)Figure >.A*


7/13

"et the order of your layers to 4ircle, #riangle and then "quare. You now see how easy it

is to create, rename and move layers.

-ocking and Biding layers(-ocking layers is useful at times to protect other work while you are drawing more

graphics. #o lock or unlock a layer, you simple click on the pad lock button and it willdisplay a locked layer. #o hide a layer, you simple click on the hide button, and all the

content from the layer you 'ust hid will be invisible until you unhide the layer.

Baving te!t 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. Baving a Flash web site without any

te!t would be kind of boring. You can transform te!t into symbols and give them effectsto make it look more attractive, but you can also make it look e!cellent using a little

ction "cript. In this section, we:ll learn how to create normal, input and dynamic te!t, as

well as how to modify your te!t.

Inserting Casic #e!t("elect the te!t tool, and click anywhere on the stage. You will notice a small te!t bo!,

with a blinking line it it, waiting for you to type. #ype in a line of te!t, and you will

notice that your line will always remain one line. #his is due to this te!t bo! 3$# being

word wrapped. You can type forever and it will always be one line until you hit 8+nter8to start on a new line. If you want to set a specific width, select the te!t tool once again,

and this time, instead of 'ust clicking, click and drag a te!t bo! of your si6e onto the

stage. You can now type, and as soon as you get to the end of your te!t bo!, it willautomatically start a new line.

4reating Input bo!es(

When you create input bo!es, this will allow users to type in the bo! in the movie. Youcan use this to create Flash forms, or 'ust to play around with. $pen you te!t panel8Window0 1anels0 #e!t8 and go to the #e!t $ptions tab. "elect Input #e!t from the drop

down menu, and you can now insert a te!t bo! on your movie. 4lick and drag a bo!, then

go te!t it out by hitting 4#7-=+3#+7 on your keyboard. You can type te!t into it fromthe movie you 'ust created.

4reating 5ynamic #e!t(

5ynamic te!t is the most important tool you can use regarding te!t. #his allows you to

add any te!t you want, but you need to make the te!t bo! a variable and have it load fromsome ction "cript. From the te!t panel, choose 5ynamic #e!t from the #e!t $ptions

tab. )figure >.A* #hen select multiline from the second drop down menu. #his is the hard

part, making it a variable and adding te!t to it.


8/13

)figure >.A*

3ow you see how this should look from the #e!t 1anel, call it te!t, and hit +nter. 3ow,go to frame ; on your stage, and right click on frame ;. /o to ction, and select the

ctions category from the menu. 4hoose 8"et Dariable8 from the list, and in the

8Dariable8 field, type in te!t, then in the 8value8 field, enter some lines of te!t. $nce thisis done, test your movie by hitting 4#7-=+3#+7, and you should see some te!t on the

stage area in your movie.

Modifying te!t(

If you want to modify your te!t, there are a few different ways of doing it. You canchange it:s color, or change it:s alignment, change it:s si6e or make it Cold. ny te!t

modifications are made through the 4haracter panel. /o to Window0 1anels0 4haracters.

3ow select your te!t bo!, and from the 4haracter:s panel, change the te!t to the colorgreen, it:s si6e to >E and make it Italic. 3ow you have te!t the way you want it to look.

You can do this until you have the results you want and then deselect your te!t bo!.

Figure >. is what the 4haracter 1anel looks like.

)Figure >.*

3ow you know how to add te!t to your document, please proceed to the Cuttons section.

#he button symbol is equiped with the ability to change it:s appearance according to whatstate the button it. #heree e!ists four states, p, $ver, 5own and Bit. You can see

buttons in their normal state which is the p state. You can then interact with it by rolling

your mouse :over: the button. When you click on the button, it:s state will be :down: as


9/13

long as the mouse remains pressed. 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.

"tates of the button(

;. p is the state used whenever the mouse pointer is not over the button.>. $ver is used when the mouse pointer is over the button.

2. 5own is the state attained when the button is clicked.?. Bit is invisible and defines the area where the button will react to the mouse pointer.

4reating Cuttons(br0 #o create a button, you need to first have a symbol. $n your menu,

go to 8Insert8 and choose 83ew "ymbols8 or hit 4#7-=F on your keyboard. #he8symbols 1roperties8 window will open, choose button, and call it button &. 4lick $9.

)s shown in figure >.., 8$ver8 is the >nd part of the button. When the user:s

mouse is on your button, Frame > will appear, and frame ; will disappear. Frame 2,85own8 is the part of the button that is clicked on. When a user clicks on the button, theywill see the image on Frame 2. Finally frame ?, 8Bit8 is the frame that lets you decide

where you want the button to be activated. +!ample, if you have a square button, and the

8Bit8 frame is a circle shape, when you are viewing your movie with the button in it, onlya circle around the square will be considered by Flash the button.

)Frames shown in figure 2.E*

)Figure 2.E*


10/13

In frame ;, draw a rectangle shape, and then add some te!t to it. #he drawing you 'ust

added to frame ; is now what users will see. 3ow, click on frame >, and hit F@ on your

keyboard, this will add a new keyframe, and you will notice your button from frame ; iscopied over. You can either leave it as is, but that:s not e!citing or change it:s look. /ive

the te!t a bold look, and change the color of your square. When users put their mouse

over the button, they will now see what:s on frame >. "elect frame 2, and hit F@ onceagain. You do not have to do this if you do not want to. Frame 2 is only viewed if the

user clicks on your button, but then again, it:s up to you. #he image from frame > is now

copied onto frame 2, you can modify it the way you want it to look. "elect frame ?, andhit F@ again. In frame ?, you do not have to change anything, because no matter what, no

one will ever see what:s on frame ?. You now have a new button, return to the stage,

and from the library, slide you new button onto it. 3ow you may

want to add some actions to your button, read the following for more details on how to doso.

dding ctions(

You have created a button, you may want to assign an action to it now. #his could serveruseful 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 8ction8. You are now in

the ction 1anel. From the Casic ctions button, select the get7- command. 3ow type

in a 7- of your choice, and close the ction 1anel.)s shown in Figure 2.;*

)Figure 2.;*

Your button has now a link assigned to it. If you want to test it out, go to 84ontrol0+nable "imple Cuttons8 or press 4#7-=-#=C and you can now click on your button.


11/13

"ave your movie as button &.flaand continue to the "ound section, you will need your

button for this ne!t section.

dding sounds to movies and buttons really enhances your movie:s e!perience. In this

section, you will need to create a new button by following this guide hereor if you havedone the 8Cutton8 section already, 'ust open your button&.fladocument and we can begin.

Importing the sounds(#o import sounds, you must go to File0 Import and select the sound files you want to

import. For this tutorial, we will be using > sound files called 8$ver8 and 85own8. You

can download them both into a GI1 file by clicking here.When you have the soundsdownloaded, un6ip them and import them into your movie. 3ow that you have them

imported, you want to make sure you have them imported for sure, go to your library

84#7-=-8 and see if your files are there.

dding sounds to events(3ow that we have our sounds, we can now start using them. First sound called 8$ver8

will be used in the button we have created earlier as a mouseover effect. $nce a use puts

his mouse on your button, it will play the sound. "econd sound we have is called 85own8

which will be used on the button as well. When a user clicks on the button, the sound willbe heard. 3ow, from your stage, right%click on your button and choose +dit from the

menu. You are now in your button:s stage. In your timeline, select frame > 8$ver8 and

then open your sound panel 8Window0 1anels0 "ound8. Figure 2.; shows you the8"ound 1anel8.

)Figure 2.;*

From the drop down menu in your sound panel, select the over.wav file, and now you will notice in your 8$ver8 frame, a line across the frame.#his means that the sound has been successfully added to this frame. 3ow for frame 2 85own8, you will add the down.wav sound. #o do this,

select frame 2 and from the sound panel, select down.wav from the drop down menu. #hat:s it, you have inserted all your sounds into yourbutton and you can now save your document.

+!porting your button(

3ow you will have to e!port this button if you want to have it on your web site. From the File menu, choose +!port. "ave your button asbutton.swf, and click $9. nother screen will pop up called 8+!port Flash 1layer8, 'ust click $9 and you:re movie is now e!ported and ready

to be used.
http://www.siteownersdesign.com/design-tutorials/flash/buttons.shtmlhttp://www.siteownersdesign.com/design-tutorials/flash/sounds.ziphttp://www.siteownersdesign.com/design-tutorials/flash/buttons.shtmlhttp://www.siteownersdesign.com/design-tutorials/flash/sounds.zip


12/13

1lease proceed to the nimation section.

Flash is mainly used for animation worldwide, now let:s learn how to make some. In thissection, we:ll learn how to create Motion #weens and "hape #weens. You can also have

animation:s change colors, resi6e, rotate and more.

4reating #weened "ymbols(

From your menu, go to :Insert0 3ew "ymbol:. 4hoose :Movie 4lip: from the options andname it m! clip. You will be taken to a new stage area similar to the main stage. 5raw a

small circle, then select it, and go to :Insert0 4reate Motion #ween:. 4hoose frame >

from your timeline and hit F@ on your keyboard. ll the frames from frame ; to frame >are now purple, and have an arrow line pointing to frame >.

While frame > is still selected, take your circle shape, and move it to another spot onyour stage. Bit +nter, and you:re circle will move on it:s own.

4reating "hape #weens(

"hape tweens are a different source of tweening. You do not need to have symbols, 'ust

basic drawings. 4reate a new symbol, choose movie clip and name is my clip >. 4reate acircle, select frame ;, then open your Frame 1anel, 4#7-=F. From the panel, select

"hape from the drop down menu, and now select frame > and hit F@. #his time you will

notice a green set of frames.

$n frame >, delete your circle by selecting it and draw a square. Bit +3#+7 and you:llsee your circle morphing into a square. #hat:s it for shape tweening.

#o save your work, you simply have to save and e!port it. #o save your movie, go to

:File0 "ave as: and save it as what you want to. #o +!port your movie, so you can use it


13/13

on your web page, go to :File0 +!port Movie: and save your movie as what you want.

3ormal Flash movies are saved as .swf format.

1ublishing your movie can be done in different way. You can publish an B#M-document, have your .swf file and some other files such as gifs, 'pgs, or bmps. #o set up

your publish settings, go to :File0 1ublish "ettings:, select the types of publishing youwant, then select $9. #o publish the movie, go to :File0 1ublish: or hit F;> on your

keyboard. #hat:s it, you can now use your movie on the web.

1ermission to reprint this tutorial in its entirety is granted only if all information below

this notice, including the link, is included as it is written. Crought to you by( "iteowners

-td.% "iteowners5esign.com is part of "iteowners.com network and offers professionalweb designservices and tutorials.
http://www.siteownersdesign.com/http://www.siteownersdesign.com/http://www.siteownersdesign.com/

Download - Flash 5 Tutorial

Top Related