Flash 5 Tutorial Introduction
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. 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.
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 that Paint 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, 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 modify your 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.
Using 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 and let 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.
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:
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. You’ll notice the line isn’t 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 in your 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 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. Later I will show you how to create your own gradients. Now you have a good idea on how to fill in your shapes.
Each shape you create such as triangles, squares and circles have an outline, which is a line surrounding 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. That’s 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 open a new one for the next section, Symbols.
In 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 have a 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)
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.
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)
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
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 happy face 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.
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 your symbol 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, now’s 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 are simple transparent sheets that are placed one on top of each other. These layers can be moved 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.
The image above is what layers look like. You see here that there are three layers, and layer “one” is selected.
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.
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.
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.
This concludes the Layers section, please proceed to the Type and Text section
Type and Text
Having 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 can also make it look excellent using a little Action Script. In this section, we’ll 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 the second drop down menu. This is the hard part, making it a variable and adding text to it.
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. 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.
If you want to modify your text, there are a few different ways of doing it. You can change it’s color, or change it’s alignment, change it’s 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 Character’s panel, change the text to the color green, it’s 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.
Now you know how to add text to your document, please proceed to the Buttons section.
The button symbol is equiped with the ability to change it’s 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, it’s 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.
(As shown in 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 user’s 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)
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 that’s not exciting or change it’s 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 what’s 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, it’s 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 what’s on frame 4. You now have a new 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.
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)
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.
Adding sounds to movies and buttons really enhances your movie’s experience. In this section, you will need to create a new button by following this guide here or 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 clicking here. When you have the sounds downloaded, unzip them and import them into your 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 will play 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 button’s 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”.
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. That’s 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 you’re movie is now exported and ready to be used.
Please proceed to the Animation 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 Tweens and Shape Tweens. You can also have animation’s change colors, resize, rotate and more.
Creating Tweened Symbols:
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 you’re circle will move on it’s 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 you’ll see your circle morphing into a square. That’s it for shape tweening.
Saving Flash Files
To 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. That’s it, you can now use your movie on the web.