Links

Did You Know?

 

Getting to Know the Work Area

The Adobe Flash work area includes the command menus at the top of the screen and a variety of tools and panels for editing and adding elements to your movie. You can create all the objects for your animation in Flash, or you can import elements you've created in Adobe Illustrator, Adobe Photoshop, Adobe After Effects, and other compatible applications.

By default, Flash displays the menu bar, Timeline, Stage, Tools panel, Property inspector, and a few other panels. As you work in Flash, you can open, close, dock, undock, and move panels around the screen. To return to the default workspace, choose Default from the Workspace menu in the Edit bar just above the Stage.

workspace

 

About The Stage

As with a theater stage, the Stage in Flash is the area viewers see when a movie is playing. It contains the text, images, and video that appear on the screen. Move elements on and off the Stage to move them in and out of the rectangular area in Flash Player or the web browser window where your Flash movie will play. You can use the grid, guides, and rulers to help you position items on the Stage. Additionally, you can use the Align panel and other tools you'll learn about in the lessons in this book.

To see the work area around the Stage, use the Zoom tool (zoom ) to zoom out, or choose View > Pasteboard.

To scale the Stage so that it fits completely in the application window, choose View > Magnification > Fit in Window. You can also choose view options from the pop-up menu just above the Stage.

wksp2

 

Understanding The Timeline

Like films, Flash documents measure time in frames. As the movie plays, the playhead advances through the frames in the Timeline. You can change the content on the Stage for different frames. To display a frame's content on the Stage, move the playhead to that frame in the Timeline.

wksp4

 

The Property Inspector

The Property inspector gives you quick access to the attributes you're most likely to need. What appears in the Property inspector depends on what you've selected. For example, if a frame is selected, the Property inspector includes a Tween option; if an object on the Stage is selected, the Property inspector shows its x and y coordinates.

Choose the rectangle tool ( a ) and draw out a rectangle.

Choose the arrow tool (a) and double click the the rectangle to select it.

Notice the available options change in the property inspector. As you work with objects, be sure that you check the property inspector frequently to see what kind of options are available.

Frame Properties

a

Object Properties

a

 

****** Delete This Shape Before Continuing*******

 

Using the Tools Panel

The Tools panel—the long, narrow panel on the far left side of the work area—contains selection tools, drawing and type tools, painting and editing tools, navigation tools, and tool options. You'll use the Tools panels frequently to switch from the Selection tool to the Text tool to a drawing tool. When you select a tool, remember to check the options area at the bottom of the panel to ensure that you're using the fill, stroke, or other settings appropriate for your task.

Selecting a Hidden Tool

The Tools panel contains too many tools to display all of them at once. Some tools are arranged in groups in the Tools panel; only the tool you last selected from a group is displayed. If there is a small triangle in the lower-right corner of the tool button, there are other tools in the group. Click and hold the icon for the visible tool to see the other tools available, and then select one from the pop-up menu.

Selecting and Using a Tool

When you select a tool, the options available at the bottom of the Tools panel change. For example, when you select a drawing tool, the Object Drawing mode and Snap To Object options appear. When you select the Zoom tool, the Enlarge and Reduce options appear.

1. Select the Zoom tool in the Tools panel.


2. Select the Enlarge icon ( ) in the options area of the Tools panel.

*Note You can change quickly between zoom in and zoom out mode by holding the alt key

3. Click and hold the Rectangle tool in the Tools panel, and then select the Oval tool from the pop-up menu.

4. Click the Stroke Color icon ( ) in the options area of the Tools panel. The Adobe Color Picker opens.

*Note - Stroke is the line around a shape.

5. Select black in the Color Picker.

6. Click the Fill Color icon ( ) in the options area of the Tools panel. The Color Picker opens again.

7. Select #0099CC in the Color Picker.


8. Hold down the Shift key as you draw an oval .

*Note - Pressing the Shift key as you draw constrains the tool to draw a perfect circle. You can modify many tools by pressing a key while you use them.

11. Select the Selection tool ( ), and then select the oval.

*Note - In Flash, the stroke is treated as a separate object from the fill. If you want to select the shape and it's stroke, you must double-click the shape.

12. In the Property inspector, change the width and height values to 100.

*Note - If the lock box is selected, the height and width will remain in proportion. This mean that if you change either the height or width the other will automatically change to maintain the proper shape.

13. In the Property inspector, change the Stroke Height to 4.

14. Choose the Text Tool ( )

15. Click any where on the stage and then type your initials.

16. Select the Selection tool ( ), and then select the text box.

17. In the property inspector, increase the size of the text to 60, the colour to white and the font type to "Party LET" (or another designer font if Party LET is not available).

18. Use your arrow keys to nudge the text into place over the oval.

Your finished product should look similar to this:

19. Take a screenshot of this by pressing command + shift + 4

20. Then click and drag over the drawing.

This will generate a .png file on your desktop that you will use later.

Undoing Steps in Flash

In a perfect world, everything would go according to plan. But sometimes you need to move back a step or two and start over. You can undo steps in Flash using the Undo command or the History panel.

To undo a single step in Flash, choose Edit > Undo, or press Control+Z (Windows) or Command+Z (Mac OS).

To redo a step you've undone, choose Edit > Redo, or press Control+Y (Windows) or Command+Y (Mac OS).

To undo multiple steps in Flash, it's easiest to use the History panel, which displays a list of all the steps you've performed since you opened the current document. Closing a document clears its history.

To open the History panel, choose Window > Other Panels > History.

Drag the History panel slider up to the step just before you changed the font. Steps below that point are dimmed in the History panel, and they are removed from the project. To add a step back, move the slider back down.

*Note - If you remove steps in the History panel and then perform additional steps, the removed steps will no longer be available.


Working with Panels

Just about everything you do in Flash involves a panel. In this lesson the Tools panel, Property inspector, History panel, and the Timeline. In later lessons, you'll use other panels that let you control various aspects of your project. Because panels are such an integral part of the Flash workspace, it pays to know how to manage them.

To open any panel in Flash, choose its name from the Window menu. In a few cases, you may need to choose the panel from a submenu, such as Window > Properties > Properties, or Window > Other Panels > History.

By default, the Property inspector, Filters panel, and Parameters panel appear together at the bottom of the screen, the Timeline is at the top, and the Tools panel is on the left side. Most other panels are displayed on the right side of the screen. However, you can move a panel to any position that is convenient for you.

If you have changed your panel configuration and want to return to the original state choose Window > Workspace > Default

Tools Panel Overview

Using the diagram below, take some time to explore the tools that are available to you. You will not need to save your work, so feel free to really try things out.

You'll be asked to comment on a few of the tools in your next assignment.