Lesson 9 - Flash Basics
Flash is one of the most powerful programs for creative interactive graphics. Combining the graphical elements of Photoshop and Freehand over multiple timelines, the basics of Flash can be daunting. On top of this, Flash is driven by a complex scripting language called action script. Because there are so many aspects to Flash, having a firm understanding of the logic and foundation can expedite the learning process enormously.
GUI
Flash’s Graphic User Interface (GUI) is a combination of many programs. Many elements of it may be familiar to you.
The default set up looks like this:
- Main Navigation – This is the Menu Bar. Virtually every program has this bar. All main commands are executed through this menu, including timeline functions and copy/paste commands.
- Toolbar- Similar to most graphics programs, this is the toolbar. All graphics editing tools can be found on this toolbar, including marquee, paintbrush, object select, and type tools. If you are creating or editing graphics, this is where you will find your tools.
- Timeline- The timeline is a series of individual frames that run in sequence. All movies run on a timeline, although single frame movies appear to be static. The tab on top is the selected file. Underneath the tab is a representation of the nesting. This will make sense later. The horizontal axis is the frames, the vertical axis is the layers.
- Stage- The stage is the actual movie you are creating. It is a working file that shows the movie you are viewing in the frame you have selected. Depending on your depth, certain objects may appear different. Visibility and Outlines may also be toggled, so this area is not a perfect representation of the output, but rather, it is the most logical way to work on the document.
- Actions/Properties Panels – Flash is a panel (Macromedia’s equivalent of Adobe’s palettes) based GUI. Panels are miniature windows that used to edit an object’s properties. These are the two most important and frequently used panels. The actions panel is where you input scripts. This is the deepest and most complicated aspect of Flash, but also the most powerful. Using scripts, the possibilities are virtually limitless. The properties panel is an intuitive conditional panel. It shows the basic properties of whatever object is selected. Almost all properties can be accessed and viewed through this panel. By clicking on an object, a frame, or the stage, different properties can be accessed. This panel defaults to the Movie Properties.
- Right-docked Panels – Docked on the right side of the screen are additional panels. In Flash there are three kinds of panels- Design, Development, and Other. The Design panels are preferred for most cases, but you can customize a combination of as many or as few panels here as you like. Some Panels are Align, Color Mixer, and Transform. All design panels modify the properties of an object.
The GUI is much more complex than this and takes months to adapt to, but understanding this layout is crucial to operating efficiently in Flash. Once you are comfortable in Flash, you can customize your setup by undocking Panels and resizing windows. In the beginning however, it is best to keep it simple.
Logic
Flash operates on object oriented event driven language. What does this mean? It means that every element of your movie is an object with properties, and these properties can be altered and changed in run time when an event triggers it. For example, it is possible to create a button that triggers a rectangle change size. The button press is the event, the rectangle is the object, and size is one of the rectangle’s properties. While almost all elements within your document are objects with properties, there are three types of symbols you will primarily be working with. Symbols are graphic object with instances. This definition will make soon make sense. The three symbol types are: Graphic, Movie Clip, and Button.
Graphic- Graphics are single frame images. This can take the form of a vector or raster graphic.
Movie Clip- Movie Clips are independent timelines that are encapsulated into single frame objects.
Button- Buttons are four frame timelines that can trigger events.
Right now this is very abstract, so consider this metaphor:
Think of a graphic as a single image, say a screen capture from an episode of The Simpsons. An entire episode would be a string of many images, consider this string as the movie clip. The stage would be your TV, the area that displays it.
One area that gets incredibly complex is that symbols can contain other symbols and so on. For instance a Movie Clip contains many frames in one frame. Any one of those frames can contain another Movie Clip with multiple frames, this can go on ad infinitum. All symbols occupy single frames, and therefore, those frames can be placed into other symbols. This is already very confusing. It helps to extend the metaphor:
You can have single images (Graphic) from an episode of The Simpsons. Together these form another object, being a episode. The episode is its own self contained Movie Clip with its own timeline. Now consider a DVD with many episodes of The Simpsons. That DVD is another object (Movie Clip) with multiple episodes (Movie Clips) in it. This DVD is part of an entire season box set that contains 4 DVDs. So the box set is another object (Movie Clip) that contains 4 DVD (Movie Clips) that each contain 8 episodes (Movie Clips) that each contain 500 frames (Graphics). It’s just one object inside of another. Now imagine having a library of DVDs, some of them box sets, some single disc, some videogames. Setting up a stage is just like creating your own DVD collection, and eventually empowering the user to play any DVD or edit the packaging at will.
Naming, Targeting, and the Library
Creating Symbols is just like creating your own products. Once you create one, it is placed in your Library (another panel) and can be accessed at any time. You can also drag multiple copies of your object onto the stage. Imagine living with 3 Van Damme fans and all of them own a copy of Kickboxer the movie. Each copy would be the same symbol, but different instances of the symbol. Every time you place a symbol on the stage, it is an Instance of that symbol. You may have multiple copies of this symbol, but each one is a unique instance. Although each symbol has a Symbol Name, until you name the individual Instance, it remains anonymous. To give a symbol an Instance Name, click on the symbol on the stage. Now in the Properties Panel, instance name is a field you can fill in. It should be noted that Graphics CANNOT be named. You may be wondering why it is important to name instances. It is important because you cannot access something with no name. If I wanted to watch Kickboxer, I would have to watch either Chris’s, Kamel’s copy. If I didn’t designate whose Kickboxer I was going to watch, I couldn’t watch any of them. To be more technical, when using the Actions Panel, you must first target the timeline you wish to access. This is done by typing in the Instance Name.
To put the above example in proper script syntax, it would be:
kamel_kickboxer.play();
We will go over simple script later.