Flash is not just an animation program. Flash can be used for interface design, animation, interactive forms, games, database integration. We are going to concentrate on basic animation with a bit of interface design and some fundamental interactivity. Before we can create anything in Flash we need to familiarize ourselves with the Flash tools and interface. We need to know what's in our toolbox and how to use the tools.
I encourage you to learn keyboard commands and/or context sensitive menus. The keyboard shortcuts can be customized by going to Edit>Customize Keyboard Shortcuts but I'm going to use the default shortcuts for this course.
When the instructions direct Windows user to "right click," Mac users use Control Click. Most of the screenshots and course content uses the Windows environment - some of the newer screenshots use MacOS X screenshots.
Let's Flash
You can launch your Flash program so it's open on your screen as I walk you through this lesson. In Windows, you can tile the windows vertically so one half of your screen will have the instructions and the other half will have the Flash program open. To tile your windows on your screen on a PC, right-click on your taskbar and select Tile Windows Vertically.
The Flash Toolbox
The interface section of this lesson is created entirely in Flash so you can see several examples of Flash features. The interface of the lesson will look similar to the Flash interface when you launch your program. Go ahead - explore the interface. Rollover, click. Take time to view the design of the interface. The interface lesson is for Flash MX and has not been updated for Flash MX2004. You will still see see many of the same features and layout.
You'll see that Flash has a main window called the stage, a window called the timeline, a window called the toolbox, and several panels including the most important new feature of the Properties Panel (or Properties Inspector) and Actions.
Before opening our movie, let's clarify some terminology.
A Flash file in its authoring environment is called a 'movie' and the file extension format is .fla (for Flash). When you publish your movie on the web, the final project file is also called a 'movie' with the file extension of .swf (Shockwave Flash) embedded into an accompanying .html document. When you publish your movie as a self-running application known as a projector, the file extension on a PC is .exe and on a MAC is .hqx.
In the Flash movie that follows, you will see examples of these features of Flash:
drawing graphics
importing graphics
importing sound
using static text
using html files in Flash to dynamically update text
scrolling text
user interactivity in the form of buttons and rollovers, allowing you to have some control over the viewing of different parts of the movie
simple motion tween animation
use of a simple preloader to hold your attention while the movie downloads on the web
using nested movie clips
actions to control the timeline and actions on buttons for navigation
The entire file without sound is a little over 100k without added voice-overs. The reason it's so big is because it includes large bitmap files. We'll learn about bitmaps later in the course. For now, just know that using bitmaps, photographs, and sound will increase your file size. Please be prepared to wait for some lessons to download.
Many designers use preloaders to entertain the viewer while the main movie is downloading. The purpose of the preloader is to maintain your interest and entertain you in the hope that you'll find the site worth waiting for as it downloads. If you're on a cable modem or faster connection, you won't be waiting long. If you're on a 28.8 or less, the designer will have to do some pretty good entertaining. Web surfers generally want pages to appear instantly and statistics tell us that the average surfer won't wait more than 8 seconds for a site to load.
Flash uses a standard menu toolbar for common commands such as File, Edit, View, Insert, Modify, Text, Control, Window, and Help.
Icon Toolbar
Below the standard menu bar is an icon toolbar with icons for the following commands:
new Flash movie, open Flash movie, save, print, find, cut, copy, past, undo, redo, snap to, smooth line modifier, straight line modifier, rotate, scale, and align.
The icon toolbar can be dragged and repositioned or hidden from view. In my example movie that follows, I have my Icon Toolbar hidden from view. You can access it by going to the Window Menu - Window>Toolbars>Main on the PC.
The toolbar can be positioned anywhere on your screen or it can be hidden from view. If hidden, you can access it through Window>Tools. On a Windows PC, double clicking on the top blue title bar will dock it to the left side of your workspace. When docked, the top blue title bar with close button will disappear. On PC and Mac you can expand or collapse the Tools Panel and all other panels. Each OS will have a different way of expanding, collapsing and closing panels. Experiment with mousing over or clicking on the dotted shape, white triangle, X close buttons, or anything else at the top left or right of the title on each palette. You'll find the appropriate icons on your operating system enabling you to move, expand, collapse, open, and close your panels.
When you launch this demo Flash movie, no tool will be active. Please click each tool and read the accompanying description of the tool. The descriptions have been placed in a scrolling text field. Please be sure to scroll down for each description until you see the bold word END. When you reach the end, you can select the next tool to learn about its options, properties, and description.
Please note that some tools have options which will appear in the lower area of the Tools panel called Options. Not all tools have options. Some tools will have properties that are displayed in the Properties Panel on the bottom of the screen. Not all tools have options or properties. The arrow tool which is selected in the illustration to the left has the Snap To option selected by default. The tool panel to the left is the default panel which displays when you first open Flash.
The active elements in this Flash movie are the tools, the magnification drop down menu, the frames per second box below the timeline which will bring up the document's properties, the menus. You can click the close button in the upper right side of the panel or window to close the individual windows. This interface of this demo illustrates the Windows environment. Flash in MacOS will look and function in a similar manner. Flash MX on OS X will look a lot more contemporary!
For those of you who use Dreamweaver, you'll notice a similarity of interface elements between Flash and Dreamweaver. The launcher buttons are in the same place on the interface.
This shot is grabbed from the bottom of the timeline. Look for it in the movie. You can access the dialog box for your document properties by double clicking on the 12.0 fps. You wouldn't think it's a button, but it is! Click on it in the movie to view the default movie properties. Then select the color chip to change the background color of your movie. To close the movie properties dialog box in the movie, click on the OK or Cancel button. On a Mac it looks less like a button than in this Windows screen shot.
The tools panel is the same for Flash MX and Flash MX2004.
Please click on the lower Flash logo to start the animation below:
INTERACTIVE FLASH DEMO
After you install and launch your Flash software spend some time going through the interface. Flash provides tooltips for buttons to help you identify keys and tools. Hold your mouse over a tool to view the tooltip.
By default, the column you see on the left will appear on the right of your interface screen. Notice that the Color Mixer Panel is expanded and the Color Swatches Panel is collapsed.
The upper right of all panels have an icon of a white bulleted list with a white triangle on the bottom line. Click this icon to access the context-sensitive Options Menu for the selected panel.
The top left of each panel's toolbar has a grab area icon of 5 black dots in two columns. They look like the letter "W" on its side. You can click, hold, and drag the panel away from the group and position it anywhere on your screen. You can also close each individual panel after you detach it from the grouping.
The F4 Function Key will toggle the visibility of the panels.
The Property Inspector (PI) or Properties Panel is an intuitive, easy to use panel that displays only relevant, context-sensitive settings and information on the selected tool, object, frame, etc. This MX feature affords you more screen real estate by allowing you to have fewer panels open at one time. Dreamweaver MX users will recognize this Panel and the consistency of interface elements.
The Properties Panel (known as the Properties Inspector or PI)
Click here to view a full-sized image of the Properties Panel for the Untitled-2 Document. The little white triangle on the bottom right collapses the bottom pane of the panel. There are no properties in the bottom pane of this Properties Panel. However, there are properties for the Movie's Size, Background color, Frame Rate and Publish settings.
Click here to view a full-sized image of the Properties Panel for the selected Frame. There are properties for the selected frame in the bottom pane of the panel.
Click here to view a full-sized image of the Properties Panel for the Text Tool. There are many properties for the text tool in the top and bottom panes of this panel.
The Flash Interface is customizable. You can expand and collapse, open and close, move and reposition panels and windows. This flexible workspace enables you to create an interface that is either web-design focused or code centric. You can save your customized workspace by going to the Window Menu - Window> Save Panel Layout... and entering a name for a specific layout. You may have multiple layouts to accommodate different users and/or projects. Any layouts with windows can be customized by dragging the windows or the column (gutter) between windows as I'm showing below to increase the width of the left pane of the timeline.
Explore the Flash Interface with this Interactive Flash Movie
The following Flash movie will introduce you to the power of Flash as you explore the drawing tools. Remember to read to the END of each scrolling text message when you click on a tool.
When you're through exploring the interface, go to Assignment 2. You will need to view this Flash Tools Interface Movie in order to do the Assignments for this lesson.
This shot is grabbed from the bottom of the timeline. Look for it in the movie. You can access the dialog box for your 
to start the animation below:
