FLASH CLASSROOM TUTORIAL - EXPLORING THE FLASH CS3 INTERFACE

EXPLORING THE FLASH CS3 INTERFACE

Anytime you are working in a new application, it is good to take a good look around the interface to learn about the features and see what tools are available. Flash CS3 is a huge program and it is possible to use the application for years without utilizing the full range of tools available. This tutorial will focus on exploring the core workspace in Flash and the main tools that you will use when completing the tutorials on this website. Lets Begin... Look at the diagram below and then explore the interface of your version of Flash CS3. Identify all the different areas that are labeled below.
MENUBAR The menu bar contains drop down menus that allow you to choose options that edit, open, close or control your movie. TIMELINE The timeline is made up of hundreds of frames. A frame that contains a black circle is called a keyframe. PANEL SETS In the section at the right of the screen, we have Panel Sets. Panel sets have items we can change that relate to the movie you are creating.

STAGE This is the area where you create your movie. You can draw images, import media and develop animations in this area.

TOOLS PANEL The tools panel contains the tools you can use to select, draw, paint, fill, resize, rotate and manipulate your images. The bottom half of the tools panel contains the modifiers. Modifiers are the options you have for the different tools.

ACTIONS PANEL (Press F9 to view) The actions panel can be expanded to allow you to create actionscript. By using actionscript, you can create interactivity in your Flash movie.

PROPERTIES PANEL The properties panel contains the options you have for the tool or object you are working with.

The Flash Classroom www.flashclassroom.com Tutorial by Kristine KopelkePage 1 of 5

FLASH CLASSROOM TUTORIAL - EXPLORING THE FLASH CS3 INTERFACE

TASK 1 Becoming Familiar with the Tools Panel The tools panel is used frequently in Flash CS3. It has tools that can be used as well as view, colour and tool options. Each time you click on one of the tools in the top section, the Options section will change. This is important to note because you may find your tools are doing strange things. Strange?? Well, an example of this is when you try to use the pencil tool. When you open Flash CS3 for the first time, the pencil tool is set on the straighten option. This means that when you try to draw, all the lines will be made straight. If you want to draw a curved or wriggly line, you will need to click on the straighten option button and change it to smooth or ink. This will enable you to draw the shape you want. Explore the Tools Take some time now to explore each tool and the different options and properties for each tool. You will find these tools are very powerful for an image editing program and will provide you with hundreds of easy ways to change the look and feel of the image you are making. There are also additional options or properties relating to the tool in the Properties Panel shown below. The contents of this panel will change depending on what you have selected on the stage. This is what the properties panel looks like when you have the black Arrow Tool selected. This panel has options that allow you to change the size, background colour and frame rate of your movie.

The options in the properties panel change when you click on each tool. This is what the properties panel looks like with the pencil tool selected.

The Flash Classroom www.flashclassroom.com Tutorial by Kristine KopelkePage 2 of 5

FLASH CLASSROOM TUTORIAL - EXPLORING THE FLASH CS3 INTERFACE

TASK 2 Changing your view of the Stage There are several ways to change your view of the stage in Flash CS3. One of the easiest ways is to use the drop down menu that is located at the top right hand corner of the stage. This menu has a range of options including the percent that you wish to view your movie in. Other options include Show Frame which alters the view to just the area of the stage and Show All which allows you to see every item you have put on or off the stage. Add some shapes on the white and grey areas of the stage and trial these views. You can also alter the view by changing the options located in the View menu. This menu provides you with a range of magnification options. A very easy way to change the view is to use the View tools that are located on the Tools Panel. The Hand Tool allows you to drag the stage around until you can see the area you wish to focus on.

The Magnifying Glass Tool enables you to zoom in or out. To zoom in, simply click on the stage with this tool selected, to zoom out, hold down the Alt tool as you click. TASK 3 Exploring the use of Guides, Grids and Rulers To help you layout your objects on the stage, Flash offers a number of tools in the View menu. These are described below. Rulers:
When you select this option in the view menu, rulers appear on the top and left hand side of the stage. These are useful for laying out objects a certain distance apart.

Grids:
When selected, a grid will appear on the stage. This grid is only visible when you are working on your file and wont actually appear in you final movie. You can edit the colour and spacing of the grid and can also snap objects to the grid.

Guides:
Guides are similar to the grid, in that they are used to help you line up objects on the stage. To add guides, you need to have the rulers visible. Click on either ruler and drag towards the stage. A guide will appear that can be positioned on the stage. You can add as many guides as you need. To remove your guides, drag them back onto the ruler.

The Flash Classroom www.flashclassroom.com Tutorial by Kristine KopelkePage 3 of 5

FLASH CLASSROOM TUTORIAL - EXPLORING THE FLASH CS3 INTERFACE

Task 4 - Understanding the Timeline The timeline contains the frames of the animation and will display them in sequence from left to right. When your animation is viewed, the viewer will see the frames in sequential order starting at frame 1. Flash will automatically play your animation from Frame 1 and will continue along the timeline until it reaches the last active frame. If you have created multiple scenes, Flash will work sequentially through the frames in the first scene and then will move automatically to the second scene and so on. If you want the user to interact with the flash file, you need to add actions and buttons to your flash movie. Features of the timeline
TIMELINE VIEW OPTIONS Located above the layers on the timeline are three very useful buttons. The eye button can be clicked to make the contents of layers invisible while you work. The lock button can be clicked to lock layers and the square button can be clicked on to make layers appear in outline view. To apply any of these views to individual layers, simply click on the dot underneath the button of your choice on the layer you want to apply the view to. FRAME NUMBERS These numbers represent the number of each frame on the timeline. TIMELINE SIZE OPTIONS This button opens a menu that enables you to change the size of the frames on the timeline.

CURRENT FRAME LAYERS Layers are viewed from top down. This means whatever is on the top layer, will be at the front of the stage. You can rearrange layers by dragging them into the order of your choice. To create a new layer, click on this tool.

DURATION (seconds) SCROLLBARS Enable you to scroll along the timeline and up and down the layers.

DOCUMENT PROPERTIES Double click here to launch the Document Properties box shown to the right. This box allows you to change the stage dimensions, the background colour and the frame rate. By default, the frame rate is set at 12 frames per second.

To add a guide layer when creating an animation using guides, click on this tool. To add folders to organise your layers, click on this tool. To delete a layer, click on the layer and then select this tool.

ONION SKIN TOOL The timeline is also home to the Onion Skin tool allows you to see the contents of frames that are next to each other. When doing intricate animation, it allows you to see where an object was in a previous frame, in order to line it up in the next frame. From an education perspective, this tool is fantastic, as it provides teachers with a powerful tool to demonstrate to students how much work the computer is doing for them by creating the additional frames. The screenshot below shows the Onion Skin tool in action. It is providing a view of the contents of a series of frames within our tween. To change the range of frames that can be viewed, simply alter the dark grey selection area directly above the layer where the frame numbers are. This can be shortened or extended.

The Onion Skinning Tool

Onion Skinning region

Onion Skinning in action.

The Flash Classroom www.flashclassroom.com Tutorial by Kristine KopelkePage 4 of 5

FLASH CLASSROOM TUTORIAL - EXPLORING THE FLASH CS3 INTERFACE

Task 5 - Using the Library The final feature of Flash that we will explore as part of this tutorial is the Library. Every flash file you create, has its own library where you can store symbols or media that you use throughout your flash file. The library houses all imported media such as photographs, clipart, video and sound files. You can open up the library in your flash file by selecting Window > Library (or F11). You can also create your own media in Flash and can save these as symbols. For example, in the library to the right, the moz1 symbol is shown. This is a button symbol which features a dengue mosquito. Library items can be used as many times as you like throughout your animation. You could drag 20 of the mozzie images onto your stage and this would not make the file size any larger than if you had just one. Another benefit of using the library is that if you edit the library symbol, it adds the edit to the symbol on every instance it appears on the stage. Library Terminology SymbolA symbol is the name of any object saved in the library. It can be used over and over again in your flash movie. Instance - An instance is one copy of a symbol that is used in the flash movie. Instances can be given names in the properties panel and will change when the original symbol is edited. Using Multiple Libraries You can have multiple library panels open at once. Flash has a collection of Common Libraries that can be opened by selecting Window > Common Libraries. These libraries include sounds, buttons and learning interaction components.
CONCLUSION

This tutorial has provided you with an overview of the most predominant features of the Flash CS3 interface. You are now ready to complete some of the other tutorials on Flash Classroom.

The Flash Classroom www.flashclassroom.com Tutorial by Kristine KopelkePage 5 of 5