Introduction to Flash
This week, you will be introduced to FLASH animation 101. Along with simple animation we will be learning how to create buttons.
Readings
Flash Wiki
Macromedia Flash 8 @work: projects and techniques to get the job done / Phillip Kerman (CH 2)
Foundation Flash 8 / Sham Bhangal and Kristian Besley (CH 6 7 8)
Flash Interface
Welcome to Flash. Flash is an incredibly powerful program that has seemingly endless potential. Flash can be used for creating games, making presentations, animations, visualizations, webpage components (although CSS is able to perform similar tasks), and many other interactive applications.
Some of the Flash interface components will look familiar to you, as they have the same functionality as Photoshop and Illustrator. However, Flash requires a certain mindset to work in it properly, especially when animating with vector graphics and coding with actionscript 3.0.
Here is an overview of the Flash interface.
Property Inspector: Here you can set the size of your flash file, background color, frame rate and exporting settings. Usually, the frame rate should be set as high as possible so the animation will play smoothly. However, with higher frame rates, it requires more ram to render the animation. For a typical web application, 30 frames per second should give your animation a smooth playback without taking too much computing power.
Timeline: The numbers across the top correspond to the frames and you can navigate to any frame of your animation to perform editing. Also, Flash has layers just like many other adobe application such as Photoshop or After Effects.
Stage: All your compositional elements (movie clips, buttons, graphics, and etc.) will be arranged here. You can show and hide the things that exceed the size of your stage by turning off/on Pasteboard (View>>Pasteboard)
Side Panels: Color, Aligning, Text... most of panels pop up here, and it can be opened, hidden, removed, docked and re-arranged.
Library: The library panel will be your best friend in Flash. It holds all the elements of each Flash file. You can organize your file like you did in your windows/mac directory. (i.e. created new folders for different types of elements, or nest one graphics symbol in another)
Tool Bar
Symbols: Movie Clips V.S. Graphic
The concept of symbols is very critical in Flash. It could be very hard to understand at first. Basically, symbols are like container for your visual/auditory elements. Instead of having hundreds of graphics, text, and other elements laying on the stage, they can be placed in a Movie Clip or a Graphic symbol.
These symbols can then have actions applied to them to dynamically load, disappear, trigger other events, and many other things (in action script 2.0).
The fundamental distinction between Movie Clips and Graphic are that the former has it own independent timeline whereas the latter shares the same timeline with the stage’s timeline.
Library Structure
Once you start to work on a flash project, most likely you will have a lots different types of files(text, graphics, video, imported stock images), you want to have your library organized in a way that files of the same type should be placed together and give your folder recognizable names so when you need to find some elements you know where to look for it. It will save your time and hassle, also it will make your work flow better. This is very critical if you are working in a team, because when you pass the file you have worked on to other people; if the library is not well-structuralized; your co-workers will have hard time to simply start it.
Layout Tools
Flash layout tools help align, place, resize and manipulate the objects that are created. Flash essentially allows you to create hyper mediated graphic design (i.e. graphic design that can incorporate sound, interactivity, motion, video and logic) made up of symbols (we'll get to these in a little bit). In order to work effectively in Flash you need to be able to perform some very basic actions like align, resize, snap, inspect properties, and use panels.
Here is a short tutorial, LAYOUT TOOLS, taken from the program's documentation that will fully orient you with the basic layout tools that you need to understand.
