2D ANIMATION AND GAME DEVELOPMENT

Using Adobe Flash CS3

INTRODUCTION TO FLASH What is Flash?

Adobe Flash is an authoring program that allows you to make movies. Flash movies are composed of pictures, text, sounds, and videos.

INTRODUCTION TO FLASH What is Flash?

The movies are used in creating animation cartoons, games, interactive web sites, presentations and multimedia intensive applications

INTRODUCTION TO FLASH How does Flash work?

Flash animation movies work on the same principle as other movie and animation projects in that several images with are shown in rapid succession to present the illusion of movement.

INTRODUCTION TO FLASH How does Flash work?

Flash animation movies are composed of frames. Frames can contain images, text, sounds, video and various animation effects. Images and text are drawn onto frames and arranged to present visually interesting scenes.

INTRODUCTION TO FLASH How does Flash work?

Modifying the images or text in each frame will create a continuous set of images or text, that when viewed at speed will show an animation sequence.

INTRODUCTION TO FLASH What types of files are made with Flash?

1. FLA Files
Flash is an authoring program and as such it uses a specific file format to store all information about the animation that you create.

INTRODUCTION TO FLASH What types of files are made with Flash?

1. FLA Files
This file format uses the extension .fla This is a source file that you can open and edit using Flash program.

INTRODUCTION TO FLASH What types of files are made with Flash?

2. SWF Files
Once you create your movie in Flash, you can export it for the Web. Export will generate the .swf file format.

INTRODUCTION TO FLASH What types of files are made with Flash?

2. SWF Files
This is a Flash Player file that you can view (but not edit) using any Internet browser with Player Plug-in installed.

INTRODUCTION TO FLASH What types of files are made with Flash?

2. SWF Files
When you have installed Flash on your machine, another component of Flash called Flash Player was installed as well.

INTRODUCTION TO FLASH What types of files are made with Flash?

2. SWF Files
If you want to view the movie outside of the Internet browser, you can simply double-click on swf file, and the file will be played in the Flash Player.

INTRODUCTION TO FLASH What types of files are made with Flash?

3. HTML Files
If you want publish your Flash movie over the Internet, you will need to create an HTML file that will host your exported SWF file.

INTRODUCTION TO FLASH What types of files are made with Flash?

3. HTML Files
This file format uses the extension .htm or .html. This type of file can be created using any text processor, or one of many Internet authoring programs.

INTRODUCTION TO FLASH What types of files are made with Flash?

3. HTML Files
You can also use the Flash feature called Publish. This feature generates both .swf and .html files.

INTRODUCTION TO FLASH
What are the different parts of the Flash Workspace?
1. 2. 3. 4. 5. 6. 7. The Stage Tools Panel Panel Sets Timeline Menu Properties Panel Actions Panel

Timeline

Panels Stage Toolbox

Properties Inspector

FLASH WORKSPACE The Stage

FLASH WORKSPACE The Stage

The Stage is the area where you place content like graphics, text and animation. The white area surrounding the Stage is called the Work Area, where you can also place content and animate it. However, users viewing your site only see the Stage.

FLASH WORKSPACE The Stage

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

FLASH WORKSPACE The Tools Panel

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

Subselection lasso Text rectangle Brush Paint bucket Eraser Zoom

Arrow tool Free transform Pen Line Pencil Ink bottle Eyedropper Hand

Stroke tool
Fill color Tool modifiers

FLASH WORKSPACE Panel Sets

Panels contain controls for the most commonly used functions in Flash. As you learn Flash, youll find that you can manipulate the content you create in many ways. Panels make the properties for modifying content quickly available, so that you can make changes rapidly.

FLASH WORKSPACE Panel Sets

If the Panels are not displayed on the workspace the Panels can be accessed by locating the Menu Bar and clicking Window followed by the name of the Panel you would like to use.

FLASH WORKSPACE Panel Sets

Info Panel enables you to view and change properties of objects: width, height, horizontal and vertical position.

FLASH WORKSPACE Panel Sets

Align Panel enables you to change position, distribution, size and spacing of the objects in relation to each other and the Stage.

FLASH WORKSPACE Panel Sets

The Transform Panel enables you to view and change the object properties: constrain, rotation and skew.

FLASH WORKSPACE Panel Sets

The Mixer Panel enables you to define custom colors by providing color values or by clicking on the color palette

FLASH WORKSPACE Panel Sets

The Swatches Panel enables you to select a color from the existing range of colors and gradients

FLASH WORKSPACE Timeline

The Timeline is the area you use to assemble your Flash movie. Think of the Timeline as a filmstrip and the Stage as a screen that displays each frame of the filmstrip in sequence, much like a projector.

FLASH WORKSPACE Timeline

You will stage a sequence of events over time, just as a director stages a sequence of events over time in a movie.

FLASH WORKSPACE Timeline

Layer Playback head Frames

FLASH WORKSPACE Timeline

Furthermore, you use the Timeline to refine your Flash movie, much like the editing process in traditional film where the editor assembles various pieces of the movie together, using time code to bring the pieces together at the right point in time.

FLASH WORKSPACE Timeline

Furthermore, you use the Timeline to refine your Flash movie, much like the editing process in traditional film where the editor assembles various pieces of the movie together, using time code to bring the pieces together at the right point in time.

FLASH WORKSPACE Timeline

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.
The eye button can be clicked to make the contents of layers invisible while you work The lock button can be clicked on make layers appear in outline view.

FLASH WORKSPACE Timeline

Frame numbers
These represent the number of each frame on the timeline

FLASH WORKSPACE Timeline

Playback Head Indicates the current Frame displayed on. the stage.

FLASH WORKSPACE Timeline

Playback Head
As a Flash project plays, the playhead moves from left to right through the Timeline. The speed of the playheads movement is based on the frame rate setting. However, the published SWF file may perform more slowly due to the users computer processing limitations and the speed of their Internet connection.

FLASH WORKSPACE Menubar

The Menu contains commands for common functions such as opening and saving files, copying and pasting, calling up specific windows or panels, and controlling the Flash environment.

FLASH WORKSPACE The Properties Panel

The Properties inspector simplifies document creation by making it easy to access the most commonly used attributes of the current selection, either on the Stage or in the Timeline.

FLASH WORKSPACE The Properties Panel

You can make changes to the object or document attributes in the Properties inspector without accessing the menus or panels that contain these features.

FLASH WORKSPACE The Properties Panel

Depending on what is currently selected, the Properties inspector displays information and settings for the current document, text, symbol, shape, picture, group, frame, or tool.

FLASH WORKSPACE The Properties Panel

When two or more different types of objects are selected, the Properties inspector displays the total number of objects selected.

FLASH WORKSPACE Actions Panel

The Actions Panel can be expand to allow you to create actionscript. Bu using actionscript, you can create interactivity with your Flash movie.

FLASH WORKSPACE Actions Panel

CREATING GRAPHICS Graphics or images form an essential part of how Flash animation is made. Flash can use two types of images, vector and raster.

CREATING GRAPHICS
Vector Graphics
A Vector graphic file stores image data in the form of mathematical expressions. Vector graphics can scale to any size without loosing the image quality but are not good for representing a detailed graphic. All graphics created in Flash are vector based.

CREATING GRAPHICS Vector Graphics

Vector File Formats
Windows Metafile (WMF) FreeHand (FH) Illustrator (AI) Flash Player (SWF)

CREATING GRAPHICS Vector Graphics

CREATING GRAPHICS Vector Graphics

CREATING GRAPHICS Vector Graphics

Advantages
Vector graphics files are very small and result in faster download time Vector graphics can scale to any size without loosing the image quality

CREATING GRAPHICS
Vector Graphics
Disadvantages
Vector graphics require computer to work harder to display the image It may take longer to view the image on the screen. Vector graphics are not good for representing a detailed graphic They cannot be used to display photographs or similar complicated images

CREATING GRAPHICS Raster Graphics

A Raster graphic file stores image data for each individual pixel. Raster graphics can become very pixelated when scaled up from their original size. Raster graphics appear onscreen very quickly and are also known as bitmaps.

CREATING GRAPHICS Raster Graphics

Raster File Formats
JPEBitmap (BMP) GIF Image (GIF) TIFF Image (TIF) PNG Image (PNG) G Image (JPG)

CREATING GRAPHICS Raster Graphics

CREATING GRAPHICS Raster Graphics

Advantages
Raster graphics appear onscreen very quickly Raster graphics are great for representing very complicated images, such as photographs

CREATING GRAPHICS Raster Graphics

Disadvantages
Raster graphics can be relatively large files. The higher the quality of the image the larger the file size. The size of the file will increase the download time.

CREATING GRAPHICS Raster Graphics

Disadvantages
Raster graphics cannot be scaled effectively. They can become very pixelated when scaled up from their original size (like an enlarged photograph).