Welcome 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. n e!ample would be a "tock #icker. Flash is very easy to use and a very effective tool in the web development industry. $ne 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. lthough 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 that Paint uses, such as the square&rectangle tool, the circle tool and the line tool. #he work environment in Flash consists of four ma'or parts( 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 in which 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 your te!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.

Flash ., now allows you to import M12 sound files. #his new feature allows you to play music, add sound effects to your buttons, etc. #his new feature is only useful using supported sound files, such as .mp2 and .wav. Remember to open a new document for each tutorial. This will make it easier to work with, and a lot faster. #o begin, click 3e!t to continue to 4hapter II. 5rawing( ,sing 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. #his section will show you how to use these tools and let you try them out for yourself as we go. With these tools, you can draw lines, circles, squares and other shapes. #hese tools are pretty much what you have e!pected them to be, simple drawing tools.

1ointer(
#he pointer in Flash is basically the cursor. You will need the pointer to move, select, resi6e different ob'ects in your movie. #o select an ob'ect, you can either double click on it, or click and drag over it. #he oval tool( "elect the oval tool from your #ools 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 si6e and shape of your circle, let go of your mouse. Tip If !ou hold down !our "shift" ke!, while drawing a circle, !ou will obtain a perfect circle. $nce this is done, you have a new circular shape on your stage area. #he rectangle tool( "elect the rectangle tool from your #ools 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 !ou hold down !our "shift" ke!, while creating a rectangle, !ou will notice a perfect s#uare being created. $nce !ou are satisfied with the si%e and shape, let go of the mouse. 7ounding over a rectangle&square( #o create a rounded rectangle&square, select your rectangle tool from the #ools menu, then select the 87ectangle 7adius Modifier8 tool. "et the si6e to ., then click on $9. 4reate your shape, and notice how the edges are rounded while you are drawing. #he pencil tool( #he pencil tool allows you to draw shapes on your stage freehand. #his means that you and your hand control the position, length and curves in your line. "elect the pencil tool from your #ools menu and draw a line on you stage. You:ll notice the line isn:t perfect, but there is a way to improve it. "elect the line by clicking on it two times, and then go to your line options and select the straighten button. $nce 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. 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 in your 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 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 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 idea on 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 and remove 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 your symbol 8my drawing8. )"hown in figure ;.<*

)Figure ;.<* 4lick $9 and you will be taken back to your stage. "elect your drawing by clicking it once now, and you should notice a line surrounding it. -ibrary( Flash takes it upon itself to add all your graphics and buttons to a small database called the -ibrary. #his is where flash allows you to view, edit and remove items you have created. #o view the -ibrary, hit 4#7-=- and it will show up. )"hown in 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 using the little white circles surrounding it. When you are done, deselect your symbol. )"hown in figures >.> and >.2*

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

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 face and 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 onto the 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 your movie 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.

)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. 3ow do 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*

"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 will display 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 effects to 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+nter8 to 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 will automatically 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. You can use this to create Flash forms, or 'ust to play around with. $pen you te!t panel 8Window0 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 from the 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 from some 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.

)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 this is 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 can change 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 color green, 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 >.F is what the 4haracter 1anel looks like.

)Figure >.F* 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 what state 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

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-=FF on your keyboard. #he 8symbols 1roperties8 window will open, choose button, and call it button &. 4lick $9. ) s shown in figure >.<*

)Figure >.<* You will be taken to a new stage, called button ;. In this stage, you will notice four frames. Frame ;, 8,18 is the main frame. #his will be the button, when nothing is being done to it by the user. Frame >, 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, they will 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, only a circle around the square will be considered by Flash the button. )Frames shown in figure 2.E*

)Figure 2.E*

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 ; is copied 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@ once again. 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 ?, and hit 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 do so.

dding ctions( You have created a button, you may want to assign an action to it now. #his 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 8 ction8. You are now in the ction 1anel. From the Casic ctions button, select the get,7- 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.

"ave your movie as button &.fla and 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 here or if you have done the 8Cutton8 section already, 'ust open your button&.fla document 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 sounds downloaded, 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 will be 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 the 8"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 your button 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 as button.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.

1lease proceed to the nimation section.

Flash is mainly used for animation worldwide, now let:s learn how to make some. In this section, 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 and name 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 on your 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 a circle, 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:ll see 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

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#Mdocument, 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 you want, 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 professional web design services and tutorials.