1-1 OBJ Copyright 2003, Paradigm Publishing Inc. Drawing Fundamentals Macromedia Flash Design &...

1-1-11OBJOBJ

Copyright 2003, Paradigm Publishing Inc.

Drawing Fundamentals

Macromedia FlashMacromedia FlashDesign & ApplicationDesign & Application

1-1-22OBJOBJ


Describe applications for Flash for Web sites and other multimedia projects.

List advantages of using Flash for creating graphics and animation.

Define streaming, bitmap graphics, and vector graphics. Start Flash MX and identify components in the working

environment. Expand and collapse panels. Open and close panels. Draw basic shapes. Choose stroke colors, fill colors, line thickness, and line

styles for shapes. Save a Flash project.

Performance ObjectivesPerformance Objectives

1-1-33OBJOBJ


Explain the difference between fla and swf files. Start a new Flash document. Draw lines, freehand, and brush strokes. Turn on rulers, grids, and guides to assist with drawing

shapes. Choose appropriate modifiers in the Options section of

the toolbox for a tool. Create a custom fill color. Move, copy, and delete drawn objects. Close a Flash document. Create a basic animation by inserting keyframes. Describe the difference between ordinary frames and

keyframes. Use Flash help. COMMANDS REVIEW

Performance Objectives…/2Performance Objectives…/2

1-1-44OBJOBJ


What is Macromedia Flash MX?What is Macromedia Flash MX?What is Macromedia Flash MX?What is Macromedia Flash MX?

a software application that creates rich content

Web sitesWeb sitesmultimedia

devices- CDROMs

multimediadevices

- CDROMs

1-1-55OBJOBJ


createeye-catching

graphics

createbuttons for auser interface

Graphics or other elements can beanimated to produce stimulating

effects and interactivity.

Graphics or other elements can beanimated to produce stimulating

effects and interactivity.

1-1-66OBJOBJ


A developer creates the sequence of images or imports images and

adds special effects.

animation

sound video

This process is referred to as authoring.

1-1-77OBJOBJ


The content has to be converted to a format that

can be viewed by others.

Flash PlayerFlash Player

included in most Web browsers

1-1-88OBJOBJ


Flash Content on the WebFlash Content on the WebFlash Content on the WebFlash Content on the Web

background color behind the word changes as the mouse rolls over it and a new menu

appears

images move across the page in a

sequence

1-1-99OBJOBJ


Graphic ImagesGraphic ImagesGraphic ImagesGraphic Images

- describes images using mathematical

equations- small file sizes

- fast download time- resized without

becoming distorted

vector

- represented by pixels

- large file sizes- slower download

time- degrade in quality as they are resized

bitmapped

1-1-1010OBJOBJ


Advantages of Using FlashAdvantages of Using FlashAdvantages of Using FlashAdvantages of Using Flash

Vector Graphics graphics created in Flash are stored as

vectors by default Streaming Technology

multimedia files begin playing instantaneously as data is being transferred

Ease of Use easy to learn

Compatibility movie will display consistently in any

operating environment

1-1-1111OBJOBJ


Starting FlashStarting FlashStarting FlashStarting Flash

Click StartPoint to All ProgramsPoint to MacromediaClick Macromedia Flash MX

click the icon on the Desktopclick the icon on the Desktop

OROR

1-1-1212OBJOBJ


The Flash ScreenThe Flash ScreenThe Flash ScreenThe Flash Screen

Title bar

Menu bar

Toolbox

Timeline

Stage

Property Inspector

Workspace

Panels

Information bar

1-1-1313OBJOBJ


Screen ComponentsScreen ComponentsScreen ComponentsScreen Components

Stage where you draw objects and/or place

itemsWorkspace

where you practice drawing techniques or place objects that will be animated on or off the stage

Toolbox contains the tools needed to draw

and modify objects

1-1-1414OBJOBJ


Screen Components…/2Screen Components…/2Screen Components…/2Screen Components…/2

Timeline where layers and frames are

controlledPanels

contain options for controlling or manipulating the objects on the stage

Property Inspector displays information and options for

the active object

1-1-1515OBJOBJ


Working with PanelsWorking with PanelsWorking with PanelsWorking with Panels

panels that are checked are

currently open- clicking a checked

panel removes itfrom the screenor collapses it

open a panel byclicking Window,

and click thepanel name

1-1-1616OBJOBJ


Working with Panels…/2Working with Panels…/2Working with Panels…/2Working with Panels…/2

Move handle- hold down left mouse

button and drag

Collapse arrow- only title bar is visible- click again to expand

Options menu- click Close Panel- choices change

1-1-1717OBJOBJ


Drawing Basic ShapesDrawing Basic ShapesDrawing Basic ShapesDrawing Basic Shapes

Click the tool in the Toolbox for the shape that you want to draw

Choose the attributes line colors, fill colors, line thickness,

line styles, and so on

Draw the shape position crosshair pointer drag to ending point release mouse button

1-1-1818OBJOBJ


ToolboxToolboxToolboxToolbox

Arrow Tool (V)Line Tool (N)Pen Tool (P)

Oval Tool (O)Pencil Tool (Y)

Free Transform Tool (Q)Ink Bottle Tool (S)

Eyedropper Tool (I)

Hand Tool (H)

Black and White

No Color

Subselection Tool (A)Lasso Tool (L)Text Tool (T)Rectangle Tool (R)Brush Tool (B)Fill Transform Tool (F)Paint Bucket Tool (K)Eraser Tool (E)

Zoom Tool (M, Z)

Stroke ColorFill ColorSwap Colors

Options vary dependingon active tool

1-1-1919OBJOBJ


Changing the MagnificationChanging the MagnificationChanging the MagnificationChanging the Magnification

click click VView, iew, MMagnificationagnification OROR

drag over current settingdrag over current settingand type in new settingand type in new setting

1-1-2020OBJOBJ


Selecting Shape AttributesSelecting Shape AttributesSelecting Shape AttributesSelecting Shape Attributes

click the Oval toolto draw an oval or a circle

click the Stroke color button- the line that outlines a shape

is called the stroke line

select a color in the palette

1-1-2121OBJOBJ


Selecting Shape Attributes…/2Selecting Shape Attributes…/2Selecting Shape Attributes…/2Selecting Shape Attributes…/2

click the Fill color button- the color that shadesthe inside of an object

is called the fill

select a color in the palette

1-1-2222OBJOBJ



hold down the leftmouse button and

drag to create an oval

hold down theShift key while dragging

to create a circle

1-1-2323OBJOBJ



click the Rectangle toolto draw a rectangle or a square

change the line thickness bydouble-clicking over the current

value in the Stroke height text boxand then keying a new value

- can also use sliderchange the line style byclicking the down arrow

next to the Stroke style list boxand then clicking the desired line

stroke colors and fill colorsmay also be selected in

the Properties panel

1-1-2424OBJOBJ



hold down the leftmouse button and drag

to create a rectangle

hold down theShift key while dragging

to create a square

1-1-2525OBJOBJ


Saving in FlashSaving in FlashSaving in FlashSaving in Flash

File, Save or Ctrl + S- to save a Flash document using the existing file name

File, Save As or Ctrl + Shift + S- to save a Flash document for the first time

or to change the existing file name

select drive and folder

key file name click SaveFFile, Reverile, Revertt- restores- restores

document todocument toits lastits last

saved statesaved state

1-1-2626OBJOBJ


Flash File TypesFlash File TypesFlash File TypesFlash File Types

- automaticallyassigned to the end

of the file name- can only be

opened in Flash

fla

- assigned to movies converted to the

Flash Player format- can be viewed inany Web browser

swf

1-1-2727OBJOBJ


Starting a New DocumentStarting a New DocumentStarting a New DocumentStarting a New Document

File, New or Ctrl + N- a new document is created

- document on the screen is moved to the background- bottom of Window menu lists open documents

File, New from Template- templates included with Flash

1-1-2828OBJOBJ


Drawing LinesDrawing LinesDrawing LinesDrawing Lines

Line ToolLine Tool

draws horizontal, vertical,or diagonal lines

1-1-2929OBJOBJ


Drawing Freehand and Brush StrokesDrawing Freehand and Brush StrokesDrawing Freehand and Brush StrokesDrawing Freehand and Brush Strokes

Pencil ToolPencil Tool

draw freehand by draggingmouse on the stage

Brush ToolBrush Tool

draw freehand by draggingmouse on the stage

- effect similar to painting

1-1-3030OBJOBJ


Pencil ModesPencil ModesPencil ModesPencil Modes

creates straightconnected lines from

the lines that you draw

converts the linesthat you draw

into smoother curves

the shape is asclose to your actual

dragging actionsas possible

1-1-3131OBJOBJ


Brush ModesBrush ModesBrush ModesBrush Modes

brush strokes paintover any area

brush strokes do notcover the stroke lines

brush strokes appear inbackground

brush strokes appear onlyinside selected objects

brush strokes drawn insideone filled object only

1-1-3232OBJOBJ


Other Brush ModifiersOther Brush ModifiersOther Brush ModifiersOther Brush Modifiers

Brush Sizes Brush Shapes

1-1-3333OBJOBJ


Pen ToolPen ToolPen ToolPen Tool

Pen ToolPen Tool

draw straight-edged shapes byclicking anchor points

-lines connect the points as you go-used to draw Bézier curves

1-1-3434OBJOBJ


RulersRulersRulersRulers

View, Rulers or Ctrl + Alt + Shift + R

Pixels = default unitof measurement

Modify, Documentto change

1-1-3535OBJOBJ


GuidesGuidesGuidesGuides

drag horizontal or vertical guidesfrom the ruler to the stage

- helps you place objects on the stage

View, Guides, Show Guides or Ctrl + ;to turn off the display of the guidelines

1-1-3636OBJOBJ


GridGridGridGrid

View, Grid, Show Grid or Ctrl + '

View, Grid, Edit Grid or Ctrl + Alt + G

to adjust color,width, or height

- another method that helpsyou place objects on the stage

1-1-3737OBJOBJ


SnappingSnappingSnappingSnapping

Flash will pull a line or object to anotherobject, a grid point, or guidelines as you draw.

To turn on or off the snap feature for guides:View, Guides, Snap to Guides or Ctrl + Shift + ;

To turn on or off the snap feature for the grid:View, Grid, Snap to Grid or Ctrl + Shift + '

To turn on or off the snap to objects feature:View, Snap to Objects or Ctrl + Shift + /

1-1-3838OBJOBJ


Creating a Custom Fill ColorCreating a Custom Fill ColorCreating a Custom Fill ColorCreating a Custom Fill Color

clickcolor wheel

button

select a color swatch,drag pointer to desired color,

and drag brightness sliderclick to Add toCustom colors

1-1-3939OBJOBJ


Selecting ObjectsSelecting ObjectsSelecting ObjectsSelecting Objects

Arrow ToolArrow Toolmethods:

- click object- double-click object

- Shift + click- draw a selection box

Lasso ToolLasso Tool

Subselection ToolSubselection Tool

draw a lasso around anirregular group of objects

click outline todisplay the points

that define the object

1-1-4040OBJOBJ


Deleting ObjectsDeleting ObjectsDeleting ObjectsDeleting Objects

select object ormultiple objects

click Edit, Clear

OROR Backspace

Delete

click Edit, Undo or Ctrl + Zto Undo an action

1-1-4141OBJOBJ


Copying ObjectsCopying ObjectsCopying ObjectsCopying Objects

select object(s)

click Edit, Copy or Ctrl + C

click Edit, Paste or Ctrl + V

A duplicate copy of the oval is dropped on thestage and is automatically selected

with the original oval now deselected.

1-1-4242OBJOBJ


Moving ObjectsMoving ObjectsMoving ObjectsMoving Objects

drag the selected objectto desired position

As you drag, the outline of the objectmoves with the pointer.

1-1-4343OBJOBJ


Closing a DocumentClosing a DocumentClosing a DocumentClosing a Document

FFile, ile, CCloseloseoror

Ctrl + WCtrl + W

1-1-4444OBJOBJ


Creating a Basic AnimationCreating a Basic AnimationCreating a Basic AnimationCreating a Basic Animation

Animation simulation of movement created by playing

a series of slightly different graphics over a period of time at a fast rate

Sequence of images stored in frames default frame rate is 12 fps (frames per

second) Images created in keyframes

automatically generates copies in the frames between the keyframes

Animate by changing contents at various keyframes

1-1-4545OBJOBJ


TimelineTimelineTimelineTimeline

Frames

CurrentFrame

FrameRate

ElapsedTime

FrameNumbers

Playhead

1-1-4646OBJOBJ


FramesFramesFramesFrames

Ordinary Frames the frames that

Flash generates the frames

between the keyframes

Keyframes the frames that

you create• where you modify

the images identified by a dot

inside the frame• solid dot indicates

content• empty dot

indicates blank

frame 1 is automatically considered a keyframeframe 1 is automatically considered a keyframe

1-1-4747OBJOBJ


Creating the AnimationCreating the AnimationCreating the AnimationCreating the Animation

create the content

select the framein the Timeline

Insert, Keyframe

1-1-4848OBJOBJ


Creating the Animation…/2Creating the Animation…/2Creating the Animation…/2Creating the Animation…/2

modify the contentfor the next portion

of the movie

repeat insertingkeyframes and

modifying contentas desired

1-1-4949OBJOBJ


Viewing the MovieViewing the MovieViewing the MovieViewing the Movie

Pressing Enter allows you to view the movie's animation

The playhead moves along the Timeline as the movie is being played

1-1-5050OBJOBJ


Blank KeyframesBlank KeyframesBlank KeyframesBlank Keyframes

Insert, Blank Keyframe

blank keyframeis inserted

blank stage appears

images stored inprevious frames

1-1-5151OBJOBJ


Using HelpUsing HelpUsing HelpUsing Help

Web-based context-sensitive help is available.

Help, Using Flash or F1

CONTENTSselected

1-1-5252OBJOBJ


Using Help…/2Using Help…/2Using Help…/2Using Help…/2

INDEXselected

SEARCHselected

1-1-5353OBJOBJ


Using Help…/3Using Help…/3Using Help…/3Using Help…/3

Macromedia Flash Support Center includessearchable TechNotes and online tutorials.

Help, Flash Support Center

1-1-5454OBJOBJ


Exiting FlashExiting FlashExiting FlashExiting Flash

File, Exitor

Ctrl + Q

1-1-5555OBJOBJ


Commands ReviewCommands Review

How do you change the magnification setting?

click click VView, iew, MMagnificationagnification

OROR

drag over current settingdrag over current settingand type in new settingand type in new setting

1-1-5656OBJOBJ



How do you close a document?

FFile, ile, CCloseloseoror

Ctrl + WCtrl + W

1-1-5757OBJOBJ



How do you copy selected objects?

click Edit, Copy or Ctrl + C

1-1-5858OBJOBJ



How do you delete selected objects?

click Edit, Clear

OROR Backspace

Delete

1-1-5959OBJOBJ



How do you display the grid?

View, Grid, Show Grid or Ctrl + '

1-1-6060OBJOBJ



How do you display the rulers?

View, Rulers or Ctrl + Alt + Shift + R

1-1-6161OBJOBJ



How do you display a panel?

open a panel byclicking Window,

and click thepanel name

1-1-6262OBJOBJ



How do you edit grid settings?

View, Grid, Edit Grid or Ctrl + Alt + G

1-1-6363OBJOBJ



How do you Exit Flash?

File, Exitor

Ctrl + Q

1-1-6464OBJOBJ



How do you access the Help feature?

Help, Using Flash or F1

1-1-6565OBJOBJ



How do you insert a blank keyframe?

Insert, Blank Keyframe

blank keyframeis inserted

1-1-6666OBJOBJ



How do you insert a keyframe?

Insert, Keyframe

1-1-6767OBJOBJ



How do you start a new Flash document?

File, New or Ctrl + N- a new document is created

- document on the screen is moved to the background- bottom of Window menu lists open documents

1-1-6868OBJOBJ



How do you paste copied or cut objects?

click Edit, Paste or Ctrl + V

1-1-6969OBJOBJ



How do you save a Flash document using the existing file name?

File, Save or Ctrl + S- to save a Flash document using the existing file name

1-1-7070OBJOBJ



How do you save a Flash document for the first time or when you are changing the existing file name?

File, Save As or Ctrl + Shift + S- to save a Flash document for the first time

or to change the existing file name

1-1-7171OBJOBJ



How do you access the Snap to Objects feature?

To turn on or off the snap to objects feature:View, Snap to Objects or Ctrl + Shift + /

1-1-7272OBJOBJ



How do you access the Snap to Grid feature?

To turn on or off the snap feature for the grid:View, Grid, Snap to Grid or Ctrl + Shift + '

1-1-7373OBJOBJ



How do you access the Snap to Guides feature?

To turn on or off the snap feature for guides:View, Guides, Snap to Guides or Ctrl + Shift + ;

1-1-7474OBJOBJ



How do you Undo an action?

click Edit, Undo or Ctrl + Zto Undo an action

1-1-7575OBJOBJ


Working with Text and Editing Drawn Objects

Coming NextComing Next

1-1 OBJ Copyright 2003, Paradigm Publishing Inc. Drawing Fundamentals Macromedia Flash Design &...

Documents

Transcript of 1-1 OBJ Copyright 2003, Paradigm Publishing Inc. Drawing Fundamentals Macromedia Flash Design &...