INTRODUCTION TO MULTIMEDIA

COMP 108
TOPICS COVERED
• Introduction to Design
• Elements and Principles of Design
• Introduction to Flash Animation
• Flash File Types
• Flash CS3 Professional
• The Flash Desktop
• Creating and Saving a Flash Document
WHAT IS DESIGN?
• Design is a visual language that communicates ideas
and information using typographic and pictographic
imagery. It is built on fundamental principles and
elements.
WHAT IS GRAPHIC DESIGN?
• Graphic design is the art of arranging pictographic and
typographic elements to create effective communication.
• It is a complex discipline that requires skilful and sensitive
use of the eyes for navigating, the hands for crafting, the
left brain for analytic reasoning and logic, and the right
brain for creative, intuitive thinking.
ELEMENTS AND PRINCIPLES OF DESIGN

Principles
Primary principles are those
• The principles are the affecting the design as a
organizational rules whole.
used in conjunction with
the elements to create
order and visual Support principles are those
interest. that affect the internal
relationships of the elements.
ELEMENTS AND PRINCIPLES OF DESIGN

Elements
• the basic components
used as part of any
composition.
• They are the objects to
be arranged, the
constituent parts used to
create the composition
itself.
ELEMENTS AND PRINCIPLES OF DESIGN

Principles Elements
• Primary • Line
• Unity and Variety
• Hierarchy (Dominance) • Shape
• Proportion • Space
• Supporting
• Scale • Size
• Balance • Texture
• Rhythm and Repetition
• Proximity
…AND THE WINNERS ARE
SPECIAL AWARD: +3 ON QUIZ #1

Chiong, Joy Cua, Janine

3RD PLACE Jovellanos, Justin John
2ND PLACE Riesgo, Jennifer
1ST PLACE Saliendra, Nicole
INTRODUCTION TO FLASH ANIMATION

FLASH CONCEPTS
WHAT IS FLASH?
• Flash is a multimedia graphics
program specially for use on the
Web
• Flash enables you to create
interactive "movies" on the Web
• Flash uses vector graphics, which
means that the graphics can be
scaled to any size without losing
clarity/quality
• Flash does not require programming
skills and is easy to learn
FLASH VS. ANIMATED GIF’S

Animated GIFs Flash Animation

• Does not support • Flash movies load
interactivity much faster.
• They simply loop • Flash movies allow
images in a predefined interactivity.
order • Flash movies can use
• are limited to a 256 more than 256 colors.
color palette
FLASH FILE TYPES
• Document Files (.fla)
• Flash Movies (.swf)
• Flash ActionScript (.as)
• Flash Video (.flv)
• Flash Debug (.swd)
• Flash Component (.swc)
• Flash Projects (.flp)
FLASH FILE TYPES
• Document Files
Also called Flash Authoring (.fla), are the working
documents use to design, edit, and store resources
such as graphics, images, sound, and video.
FLASH FILE TYPES
• Flash Movies
Shockwave Flash (.swf) files are completed,
compressed movie files exported from the Flash CS3
Professional application.
FLASH FILE TYPES
• Flash ActionScript (.as)
ActionScript is the programming language used within
Flash CS3 documents to create interactive
functionality within the movie.
FLASH FILE TYPES
• Flash Video
Flash video file format is used for any video content
played within the Flash Player.
.flv files cannot be opened in Flash CS3 authoring tool,
but can import them into a Flash Document file (.fla)
FLASH FILE TYPES
• Flash Debug
A Flash Debug file (.swd) is created whenever you are
using an ActionScript 2.0 Flash Document.
An .swd file cannot be played on its own, rather, the
.swd file augments the functionality of the .swf file
during the debugging process.
FLASH FILE TYPES
• Flash Component (.swc)
The Flash Component file is used for compiled clips
included with Flash CS3 and that you purchase from a
third-party vendors or downloaded from Adobe
Exchange.
The Application

FLASH CS3 PROFESSIONAL

THE FLASH WELCOME SCREEN
• If you tick Don't show again you won't see the welcome
screen anymore, but the same options are available
through the File Menu. If you want it back: Edit-
>Preferences.
• To start learning the Flash desktop, click on Flash File
(ActionScript 3.0) since this the most recent Flash
standard.
The Flash Welcome
Screen
THE FLASH DESKTOP
• Panels are tools and libraries that contain special editing
functionalities.
• Some of these functionalities can't be found through the menus.
• CS3 lets you arrange panels in various ways:
• floating (undocked, usually you would move them outside the
Flash Desktop)
• docked to the panel area to the right, to the bottom or even
to the left.
• docked in groups of panels (each one will show as a tab)
Backstage
In deployed Flash
"movies" this area will
hold motion animation
objects that later will
"walk" into the scene.

Work Area
the area where you
work on

The Stage
 SETTING UP YOUR NEW DOCUMENT
1. On the Welcome Screen,
under CREATE NEW,
choose FLASH FILE
(ACTIONSCRIPT 3.0 )
2. Choose Modify >
Document or use the
keyboard shortcut Ctrl+J
to open the Document
Properties dialog box.
SETTING UP YOUR NEW DOCUMENT
3. In the Title field, enter
My First Flash.
4. Enter a short
description in the
Description field. A
description, like the
title, is optional.
SETTING UP YOUR NEW DOCUMENT
5. In the Width and Height
fields, enter 500 and 300,
respectively, to set the
size of your movie. These
dimensions set the width
and height of the Stage,
measured in pixels.
SETTING UP YOUR NEW DOCUMENT
6. Click on the Background
Color swatch and the
Swatches panel appears.
This lets you choose the
color of your Stage and, in
turn, the background color
for your final movie when it’s
published. Set the
background color to white
(#FFFFFF).
SETTING UP YOUR NEW DOCUMENT
7. Enter 30 in the Frame
rate field to set movie’s
frame rate to 30 fps
(frames per second).
Frame rate determines
the playback speed and
performance of your
movie.
 SETTING UP YOUR NEW DOCUMENT
8. From the Ruler units drop-
down menu, choose
Pixels to define the unit of
measurement used
throughout the Flash
movie, including rulers,
panels, and dialog boxes.
9. Press OK to exit the
Document Properties
dialog box
SAVING FLASH DOCUMENT
1. Choose File > Save.
2. In the Save dialog, type
flash1.fla into the Name
text field. press Save.
3. Choose File > Close to
close the document.
The Tools Panel

• The Flash Tools panel includes

everything needed to create, select,
or edit graphics on the Stage.
• The double arrows at the very top of
the Tools panel toggle it between
displaying single and double
columns, making more room on
screen for other tasks.
The Tools Panel: Selection Tools

Icon Tool Name Use

Selection Moves selections or layers.
Selects and moves points
Subselection
on a path.
Resizes, rotates and skews
Free Transform
objects.
Lasso Makes selections.
The Tools Panel: Drawing and Text Tools

Icon Tool Name Use

Pen Draws a vector path.
Text Creates a text box.
Line Draws straight lines.
Shapes Draws vector shapes.
Pencil Draws freehand paths.
Brush Draws freehand filled areas
The Tools Panel: Color Tools

Icon Tool Name Use

Ink Bottle Applies or modifies strokes.

Paint Bucket Applies or modifies fills.

Eyedropper Sample colors and styles.
Eraser Erases artwork.
 The Tools Panel: Navigation Tools

Icon Tool Name Use

Hand Navigates the page.
Increases or decreases the
Zoom
relative size of the view.
The Tools Panel: Stroke and Fill Color Selections

Icon Tool Name Use

Stroke color Selects Stroke (outline) color
Fill color Selects Fill (inside) color
Sets Stroke and Fill to default
Default Stroke/Fill
colors: black and white
Swap colors Swaps Stroke and Fill colors
No color Sets selected color to none
The Tools Panel: Tools Option

Icon Tool Name Use

Enables snapping between
Snap to Objects
objects on the Stage.
THE PROPERTY INSPECTOR
• The Property inspector appears at the bottom of the
Flash workspace. It displays properties and options for
objects selected on the Stage, and also allows user to
modify them.
• The Property inspector is an essential part of the Flash
workflow; it can display and set an object’s properties,
including width, height, position, and fill color.
THE PROPERTY INSPECTOR

1. Text Type 6. Properties Panel / Window

2. Font Style 7. Text Alignment
3. Font Size 8. Bold
4. Text (Fill) Color 9. Link / URL
5. Italic 10. Character
 WORKING WITH PROPERTY INSPECTOR
1. In the FLASH1.fla , select the
Rectangle tool ( ) from
the Tools panel.
2. At the bottom of the Tools
panel, click the Fill Color
swatch. When the Swatches
panel appears, choose a
yellow shade from the far
right side of the Swatches
panel.
 WORKING WITH PROPERTY INSPECTOR
3. Move your cursor to the
center of the Stage. Click
and hold, then drag to
draw a new rectangle.
Release the mouse button
after you have created a
rectangle at the center of
the Stage.
 WORKING WITH PROPERTY INSPECTOR
4. Choose the Selection tool from the top of the Tools panel,
and double-click the fill of the new shape to select it.
Notice that the Property inspector now displays the
selected shape’s width (W) and height (H) in pixels.
To the right of the width and height, the object’s X and Y
positions on the Stage are also displayed.
WORKING WITH PROPERTY INSPECTOR
5. Double-click inside the width (W) text field to highlight the
current value, then enter 250 to set the rectangle’s width.
Double-click inside the height (H) field and enter 150 to set the
height.
 WORKING WITH PROPERTY INSPECTOR
6. Choose the Text tool ( ) from
the Tools panel. Click above
the new rectangle you created
and enter a word or phrase as
seen in the sample. Notice that
the Property inspector now
displays text options such as
font and size.
WORKING WITH PROPERTY INSPECTOR
7. Click and drag inside the new text box to select all of
the text. In the Property inspector, locate the Font
menu and choose Arial (or, if that’s unavailable,
Verdana). Use the slider to the right of the Font menu
to set the type size to 45 in the text field to the left of
the slider.
 WORKING WITH PROPERTY INSPECTOR
8. In the Property inspector, click
the Color swatch and choose a
blue shade from the pop-up
Swatches panel to change the
color of your type.
9. Choose File > Save to save
your work.
TO BE CONTINUE…