The Flash Tour

[ LiB ]

I hope you brought your cameras , because we're about to tour the Flash interface. Take a quick peek at Figure 1.1i

Figure 1.1. A picture to remember! Here's the Flash Interface.

graphic/01fig01.gif


It looks like a neat workspace. I know you probably went ahead and started clicking around before arriving at this chapter. If you haven't even installed the program because you don't have it, go ahead and install the one provided on the CD at the back of this book. Follow the onscreen instructions and come back. I promise I won't go anywhere .

In the following sections, we'll be taking a closer look into the picture you see in Figure 1.1. As the tour guide in me says, "You can see the Toolbar to your left, while approaching your Timeline at the top: This is where all the action is coordinated and produced. If you look south, you can see the Properties panel. Dead-center is the stage. This is where the graphics are composed and modified."

NOTE

TIP

You should try some of the built-in lessons that come in the Flash Help system; these will help you acquaint yourself with the graphics portion of Flash.The Help system is a great complement to this book.To access these lessons, go to Help, Lessons. A dialog box that will guide you through the whole system will open .The system doesn't go into anything complex, but the basics are all you need for this book.This exercise is optional, and I don't require that you learn the lessons in order to follow along with this book.You can literally lock yourself in your room (for a month) with this book and your computer and you will learn how to pro gram games in Flash. If you are crazy enough to do that, go get some food before locking the door.

The Toolbar

Becoming familiar with the Toolbar can greatly improve your productivity. Check out the screen shot of the Toolbar in Figure 1.2.

Figure 1.2. Our utility belt, the Toolbar

graphic/01fig02.gif


The Toolbar is a nice set of tools that you will use and keep using. They will be there when you need them and when you don't. The Arrow tool to the top left will be your most commonly used tool. Right now, it doesn't seem too powerful, but you'll realize how important the tool is as you progress through the book. With it, you can click on an object to select it. You can also drag out a rectangular marquee to select portions of an object.

The white arrow next to the Arrow tool is a bit complex, but people who use Adobe Illustrator will definitely find it useful. This is a Subselection tool, which is similar to the Direct Selection tool in Illustrator; it can manipulate points and segments of a line. Again, this doesn't seem useful now, but it's crucial to know the Subselection tool is there when tweaking graphics to perfection .

If you look under the Arrow tool in Figure 1.2, you'll see that there is a Line tool there. Open Flash if it's not already open and select the Line tool. Go to the workspace and drag-and-click some lines. Check out my line work in Figure 1.3. I got a little carried away and tried drawing text, but forgive me, I have a passion for Flash. I hope you develop the same passion.

Figure 1.3. Line work on the workspace

graphic/01fig03.gif


There is actually a better way to write text in Flash. Flash has a very efficient Text tool that can do wonders with typography. That's definitely a plus if you are a graphic designer. I'll talk more about the Text tool in a minute.

The next tool we'll look at is the Lasso tool. As you can see in Figure 1.2, the Lasso tool is right next to the Line tool. The Lasso tool comes in handy when you want to select something that the square marquee (the result of using the Arrow tool) can't select. You can thus get into tight areas of a selection and even cut it away.

Try selecting parts of the line work that you made with the Line tool and then select the Arrow tool. Hover over the partial selection and drag the selection away. Check out Figure 1.4 to see what I'm talking about.

Figure 1.4. Lasso tool selection pulled apart with the Arrow tool

graphic/01fig04.gif


The next tool that we'll examine is the Text tool, which I mentioned previously. If you go ahead and click once on the workspace, you will get a cursor that looks like that in Figure 1.5.

Figure 1.5. The Text tool is ready for you to input text.

graphic/01fig05.gif


Once you're ready, you can go ahead and type in your message. It can be formatted in any way that you want through the Properties panel, which we will go over next. Select the Arrow tool once you're done typing your message. Figure 1.6 shows what I typed in.

Figure 1.6. Select the Arrow tool after you have finished typing and formatting your message.

graphic/01fig06.gif


NOTE

NOTE

I also went ahead and "published the movie." What this means is that I outputted the Flash Player file with the extension .swf. Find the GDA_PROG1.1.swf file on the CD in the GDA_CH01 folder, then go ahead and click on it.You will see the movie "play" in the Flash Player.There is only one frame in it, so it will look exactly like Figure 1.6 , except that it's in a window.You will learn how to publish your movie later in this chapter.

Under the Text tool you will see a small, white square. You can draw rectangles of any size with this tool. To the left of that, there will be a small white circle. You can draw circles and ellipses with this tool. You can choose a border color and a fill color by clicking on the small bucket in the Color panel in the Toolbar. You can then click-and-drag these shapes to draw them. Go ahead and take a minute to get acquainted with these tools. You'll see it doesn't take a rocket scientist to use them, but it does take a bit of practice to get familiar with them.

NOTE

TIP

You can always change the color of your vector shapes after you make them. All you have to do is select the Arrow tool and then click on the part of the shape that you want colored. If you want the whole shape selected, either use the square marquee (by dragging a square selection out) or by double-clicking on the whole shape. Once you have what you want selected, you can go ahead and use the Color panel on the Toolbar to change the color of the fill and/or stroke.

The Pencil tool is a freehand tool that is very easy to useyou can click it and just start drawing lines. The tool is right under the white circle on the Toolbar. You can select the type of line you want to draw from the small options panel at the bottom of the Toolbar. The Pen tool can do the same plus more. It's positioned right over the white square and it is generally an advanced tool and will not be covered in this book, but that shouldn't stop you from learning about it. If you really want to learn how to use it, I would suggest using the Flash Help file.

The next tool we will cover is the Free Transform tool. This tool, located under the Pencil tool, will create a box around the currently selected object. Take a look at Figure 1.7.

Figure 1.7. A shape being modified by the Free Transform tool

graphic/01fig07.gif


You'll notice tiny filled boxes around the edges of the marquee. These boxes are called handles . You can drag these handles to shape the selected object in various ways. Go ahead and experiment. You'll notice that you can scale, skew, and rotate the shape. You'll find yourself using the Free Transform tool often if you're picky with your composition.

The Ink Bottle tool, Paint Bucket tool, and Fill Transform tool will only be briefly covered here. The Ink Bottle tool allows you to change the line style of any shape. It also allows you to add an outline to any fill. The Paint Bucket tool, as I mentioned previously, allows you to fill solid and gradient colors into closed shapes. The Fill Transform tool will actually allow you to adjust gradient fills after they are applied to objects.

NOTE

NOTE

The reason I'm spending more time on certain tools than others is that I want you to focus on the tools that you will need to use in order to test your scripts. Remember that you bought this book to learn ActionScript, not computer illustra tion. Either way, the Flash Help file is great for this kind of stuff.You can find exten sive help on the tools that I covered only briefly. If you really want to get deep into things, go ahead and master the Pen tool.You will fall in love with it. Never mind Valentine's Day.

The last two tools that are left from the group are the Eraser tool and the Eyedropper tool. The Eraser tool will allow you to erase parts of a graphic (duh). It will not let you erase grouped objects or symbols. Keep this in mind when the damn tool seems to be broken. The Eyedropper tool will actually sample any color on your stage and change the color of the currently selected object to the color you picked. This comes in handy when you want to make a quick color shift.

That's pretty much it for the Toolbar. In the next section, you'll learn about another vital part of the Flash environment that will allow you to adjust tool properties to get exactly what you want. And you should get what you want; after all, you're the developer, aren't you?

Properties Panel

The Properties panel will allow you extensive flexibility throughout your Flash life. It will enable you to do things that can usually only be done with very expensive packages. Everything from color transformations to adjusting object behaviors can be accomplished with the Properties panel. Take a look at the Properties panel in Figure 1.8.

Figure 1.8. The Properties panel

graphic/01fig08.gif


Keep in mind that the Properties panel options will change depending on what you have selected.

Go ahead and select the Arrow tool and then select the gray area on the stage. Your panel should look like that in Figure 1.8. From here, you can actually get some practice using the Properties panel by changing some settings. You should be able to see the Background label on the panel. When you select it, the little pop-up shown in Figure 1.9 will appear.

Figure 1.9. The Color pop-up panel

graphic/01fig09.gif


Notice that your mouse arrow has become an eyedropper. This will allow you to change the color of the background of the stage to any color you pick onscreen. This is only one of the many ways to customize your movie. By default, the background color will be white. Figure 1.10 shows my background color changed (to a dark blue, which of course will appear as black in your book).

Figure 1.10. Background color changed to blue (no, really!)

graphic/01fig10.gif


On that same Properties panel, you can also change the frame rate (you don't need to worry about that now, we will come back to it). You will also find a button labeled Size with the dimensions of the viewable movie within its caption.

NOTE

NOTE

The gray area of the movie stage can be treated as a working area.This area is generally not seen when pub lished in the HTML page, so you can use it as a work table while you put together your puzzle on the actual stage.

Go ahead and click on the Size button on the Properties panel. A dialog box called Document Properties will open. Then take a look at Figure 1.11.

Figure 1.11. The Document Properties dialog box

graphic/01fig11.gif


From here you will be able to change very important settings. It is a good idea to settle on one setup before you continue through with your project. If you don't plan your setup ahead of time, you'll find yourself spending more time on the project than you expected or wanted to.

NOTE

TIP

You can also access the Properties panel by keyboard shortcut Ctrl+F3 for Windows users and Command+F3 for Mac OS users.

Now that you're somewhat familiar with the Properties panel, let's put this knowledge to (real) work. Go ahead and click on the Text tool and access your Properties panel. You should get something like Figure 1.12.

Figure 1.12. Text tool properties

graphic/01fig12.gif


Did you ever think that typing in text would have such complicated properties? Don't be intimidated because, though it is a lot of stuff, it's all relatively simple. You can change the font, font size, font position, text box position, and a few other things too, just like in your favorite word processor. Where I really want to focus is on the first drop-down box you see to the left of the Properties panel, the Text Type drop-down box. Take a look at the other options within this drop-down box in Figure 1.13.

Figure 1.13. Text Type drop-down box

graphic/01fig13.gif


For displaying text that will show information that won't be manipulated at all by ActionScript, the Static Text setting will suffice. The other two settings, Dynamic Text and Input Text, are actually the settings we will be using more often. The effect that they produce isn't as sharp static text, but the things you can do with the Dynamic and Input textboxes are great. If you go ahead and click on Dynamic Text in the Text Type drop-down box, the new panel layout will look like that in Figure 1.14.

Figure 1.14. The Dynamic Text settings

graphic/01fig14.gif


There are two things here worth noticingnew text boxes in the panel, one called Instance Name and the other one called Var. Once we jump into the ActionScript of things, you'll find yourself using these properties very often. I introduced them now so they won't come as a surprise later on.

Go ahead and click around on the text box Properties panel and change the text box type from Static to Dynamic to Input until you feel comfortable with these options. Try using different tools and modifying the different options that you get in the Properties panel. It's really the only way to learnthe practical hands-on experience.

The Timeline

The Timeline is one of the most complex and vital components in Flash. You will need to be completely comfortable working with it because the entire movie organization of the project is managed here. If you don't know how to use the Timeline well, your movie will suffer.

NOTE

NOTE

I keep referring to the current project as the "movie." This is the terminology used to reference the file that is output by Flash. Don't be intimidated by the ter minology. I'll introduce the vocabulary subtly enough so that you will begin speak ing Flash in no time.

Before we continue, check out Figure 1.15.

Figure 1.15. Your new friend, the Timeline!

graphic/01fig15.gif


The left pane in Figure 1.15 contains the layers that are in the current movie. A layer is a set of frames that can hold graphics and other information independently from other layers. They can be stacked upon each other, and the graphics on a higher layer will always be displayed over the graphics that are on a lower layer. Moreover, layers can be added, deleted, and moved around. There are also special kinds of layers that we won't cover in this chapter. The right pane contains keyframes (a major frame within a sequence of animation), empty keyframes, motion tweens, and shape tweens. In addition, you can also embed code within these frames. We'll get more into that as you progress through the book.

NOTE

NOTE

The word tween originated from the term "in-between." It is a term used to refer to the frames of animation that are played within keyframes. In other words, these tweens fill frames that lead from one keyframe to another.These help streamline ani mation while keeping the animation smooth and the file light.

In order to get a basic understanding of how layers work, let's dive into some exercises. Let's create some layers, delete them, and then make a simple tween that can be played back.

In Figure 1.16, you can see that the layer management controls reside at the bottom right and left side of the right-hand pane on the Timeline.

Figure 1.16. The layer management controls

graphic/01fig16.gif


The Insert Layerthe first control on the leftof course creates layers. Let's create a layer right now. Figure 1.17 shows the layer I created. It will be highlighted in black; what the highlighting means is that this is the current layer we're working on. It's always a good idea to keep track of the layer that you are in. This is especially true if you work in groups.

Figure 1.17. Creating a new layer

graphic/01fig17.gif


Now I'll name the layer I just created. Doing so is a bit redundant for these examples but it's good practice to name your layers in practical situations, after using or creating them. How do you do this? Just double-click on the layer name and Flash will allow you to edit the current layer name. You can see what I did in Figure 1.18.

Figure 1.18. Renaming a layer

graphic/01fig18.gif


The next button that you'll need to know about is the one that looks like a small trash can, at bottom-right of the layer pane. Click on the trash can with the new renamed layer selected. You will see it disappear along with its timeline (see Figure 1.19).

Figure 1.19. Deleting a layer

graphic/01fig19.gif


I have prepared a file called GDA_PROG1.2.fla; it can be found on the CD under the folder for Chapter 1. Figure 1.20 shows the Timeline. Let's examine it and let's see what these keyframes and tweens are all about.

Figure 1.20. Examining a project's timeline

graphic/01fig20.gif


One important thing that you should know about layers is that graphics on one layer can block the graphics of a layer under it. If you double-click on the file GDA_PROG1.2.swf you will see a scaling box that stretches over a circle. The circle is on the second layer while the box animation or tween is on the third. Is the picture starting to come together for you now? Make sure you understand the puzzle before moving on. See the screen shot of this .swf file in Figure 1.21.

Figure 1.21. GDA_PROG1.2.swf in action!

graphic/01fig21.gif


If you refer back to Figure 1.20, you will notice that I labeled the first layer Empty. I wanted to simply show you what an empty keyframe looks like. Besides not having any content on the stage, it looks like a hollow circle on the Timeline. To create empty frames after this keyframe, select the frame you would like to convert to a keyframe and then press F5. This is what I did in the second frame. Besides having drawn a circle on the first frame of the second layer, I also extended the amount of frames (by pressing F5) the circle will be displayed for. I wanted the circle displayed for 12 frames. This happened to be the length of the entire movie in this case.

NOTE

TIP

Layers can be moved up and down the stack by dragging them to their new position.This comes in handy when you want a certain animation to play over a background or other animations.

The third layer was a slightly more complicated case but can be mastered easily if you pay close attention to what I'm about to show you. It is a good idea, right about now, to create a blank project in Flash. Rename your layer Graphics and draw a square in the middle of the stage. When you're done, it should look like that in Figure 1.22.

Figure 1.22. Setting up a tween

graphic/01fig22.gif


Notice that there is a filled dot in the first frame because you created a graphic there. Now choose Frame12 on the layer and press F6. Notice that a gap is formed in between both Frames (1 and 12). What this actually did was copy the previous frame, which was Frame1, and paste it to Frame12.

Choose the Free Transform tool from the Toolbar while still on Frame12. Remember those little handles? Drag some of them in order to make Frame12 look different from Frame1.

Go back and select Frame1 and press Ctrl+F3 to open your Properties panel (press Command+F3 if you have a Mac). There is a little drop-down box on the Properties panel labeled Tween. You can use this to select the type of tween that you want. As we modified the graphic's shape, let's select Shape Tween (see Figure 1.23).

Figure 1.23. Selecting a Shape Tween

graphic/01fig23.gif


NOTE

NOTE

Shortcut commands can be found under their respective menus .To create keyframes with shortcuts, use the Layers menu in Flash. I suggest you orient your self so that you can quickly access the commands when you need them, no mat ter what you're doing.

As soon as you select Shape Tween (and I hope you were on the first frame), you should immediately see the Timeline change. The gap turned from gray to green, and there is now an arrow pointing from Frame 1 to Frame 12 (see Figure 1.24).

Figure 1.24. Experiencing a tween before your eyes

graphic/01fig24.gif


Your file is actually ready to be published, but we'll settle for playback right now. Press Enter (or Return if you are on a Mac) when you're done setting up. You will see your first animation play before your eyes. You can see what I produced in the file GDA_PROG1.3.swf.

Figure 1.25. My scaled box animation!

graphic/01fig25.gif


Congratulations! You can now tween shapes, make layers, set keyframes, and also set up blank keyframes as well as delete them. Not bad for a steep learning curve, eh? You also know how to use most of the tools that you definitely need. You also learned how to access the Properties panel in order to modify your movie in marvelous ways. Next up, we will go over what symbols are and how to create them. This information will only add to your arsenal. Let's keep rolling.

[ LiB ]


Game Development with ActionScript
Game Development with ActionScript
ISBN: 1592001106
EAN: 2147483647
Year: 2004
Pages: 162
Authors: Lewis Moronta

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net