1

Wininstall Macromedia FlashStart -> Install SoftwareSelect Macromedia Flash MX 2004

Installs entire Macromedia suiteDreamweaver, Freehand, etc.

2

Introduction to Flash

Tool for creating animation, interactivity, multimedia and web-based tracking

Deployable via web or CDROMLearning interaction templates

add abstract functionality for building quizzes and other complex interactions

3

Macromedia Flash versionsFlash, Flash MX, Flash MX 2004

Much better helpNew componentsBetter video qualityActionScript 2.0

Flash MX 2004 ProfessionalSlides and FormsEnhanced video options

Available on Lehigh LANs, trial version at macromedia.com, student versions

4

Wininstall Macromedia FlashIf you haven’t started this already…Start -> Install SoftwareSelect Macromedia Flash MX 2004

Installs entire Macromedia suiteDreamweaver, Freehand, etc.

5

Flash textbook and lab (see syllabus):David Unruh, e-learning with Macromedia Flash MX 2004, 1st edition

Getting Started: drawing, text, layers Animation Symbols and buttons Flash Learning Interactions (templates) Multimedia (graphics, audio, video) ActionScript (programming language) Interactive content (e.g., drag-and-drop) Drills Simulations Games

6

Graphical images

Bit-mapped (or raster-based) image: Matrix describing individual dots—the smallest elements

(pixels) of resolution on computer screen or printer Bit-map tools ‘paint’ pixels of images Paint, Adobe Photoshop, Paintshop Pro, etc.

Vector-based image: Formulas representing geometric shapes Vector-based tools ‘draw’ shapes of images Corel Draw, Adobe Illustrator, Macromedia Freehand… Macromedia Flash supports vector-based animation

Pros and cons of bit-mapped vs. vector-based? Bit-mapped better for detailed images, photos Vector-based more efficient for less detailed drawings Vector-based scale to different resolutions more easily

7

The Flash MX 2004 WorkspaceTools Timeline Stage Properties

InspectorPanels

Four parts

Tools

View

Colors

Options

8

Do exercise 1.1 on pages 8-9

This exercise wilil get you familiar with the Flash MX 2004 workspace…

Creating a Flash document (movie) Drawing a simple shape Testing (compiling) a movie Properties inspector for a movie Color selector and background colors Save your work in H: drive (and show me)

9

Drawing lines

1. Select 2. Place the pointer on the Stage 3. Drag the pointer to draw a line

of the length you need4. Release the mouse

10

Do exercise 2.1 on page 17

Drawing lines in Flash with Line toolShow me your work when doneNo need to save it

11

Drawing shapes Create shapes by using the Line,

Rectangle, Oval, Pen, or Pencil Tools Select shapes by using the Selection

Tool and the Lasso Tool Edit shapes by using Selection Tool

and the Eraser Tool View, move, copy, and delete shapes

12

Drawing rectangles and squares

To draw a rectangle:1. Select 2. Place the insertion point on the Stage3. Drag diagonally

To draw a square:– Hold down the Shift key while dragging

13

Creating rounded rectangles

1. Click 2. Click the Round Rectangle Radius

modifier 3. Specify the Corner Radius and click OK4. Place the insertion point

and drag diagonally

14

Drawing an ovals and circles

To draw an oval:1. Select2. Place the insertion point on the stage 3. Drag diagonally

To draw a circle:– Hold down the Shift key while dragging

15

Using the Pen Tool

To create a straight line:1. Select2. Click where you want the line to start3. Click at a point where you want to place

the end point 4. Drag the direction line

To create a closed path:1. Click the first anchor point 2. Drag to adjust the curve

16

Do exercise 2.3 on page 22

Drawing a leaf with Pen toolShow me your work when doneNo need to save it

17

Using the Pencil Tool

1. Select2. Select an option from Pencil Mode list 3. Place the pointer and drag

18

Copying and deleting shapes

To copy a shape:1. Select the shape2. Choose Edit, Copy3. Choose Edit, Paste

To delete a shape:1. Select the shape 2. Choose Edit, Clear

Flash also offers undo and history Use undo to experiment!

19

The Zoom tool – Zoom In to magnify a shape – Zoom Out to reduce a shape

The Hand tool – To move the Stage

Viewing shapes

20

Brush Tool modifiers

Brush Mode

Brush Size

Brush Shape

Lock Fill

21

Brush and Eraser Tool modifiers

The Faucet modifier The Eraser Shape modifier The Eraser Mode modifier

– Erase Normal– Erase Fills– Erase Lines– Erase Selected Fills– Erase Inside

22

Do exercise 2.4 on page 25

Experiment with brush tool and its modifiersShow me your work when done

Also experiment with erase tool and modifiers

23

Working with colors

Apply stroke and fill colors to a shape by using the Paint Bucket, Ink Bottle, and Eyedropper tools

Create custom colors, swatches, and line styles

24

Hexadecimal Values

RGB Colors1st 2 – Red Value2nd 2 – Green Value3rd 2 – Blue Value

Each Value 00-FF (0-255)

25

Hexadecimal Values

Color Name Hexadecimal ValueBlack #0000000White #FFFFFFRed #FF0000Yellow #FFFF00Green #00FF00Blue #0000FF

26

Colors section

Fill Color

Swap Colors

No Color

Black and White

Stroke Color

27

Using the Paint Bucket Tool

1. Click the Paint Bucket Tool 2. Select an option3. Click the Fill Color box 4. Select a color5. Click inside the shape

28

Using the Ink Bottle Tool

1. Click the Ink Bottle Tool2. Click the Stroke Color box 3. Select a color4. Click the shape

29

Using the Eyedropper Tool

To copy the stroke color:1. Click the Eyedropper Tool2. Place the pointer on the outline of

shape whose stroke color you want to copy3. Click the stroke of the shape4. Click the outline of the shape to which you

want to apply the copied stroke color

continued

30

Using the Eyedropper Tool

To copy the fill color: 1. Click the Eyedropper Tool2. Place the pointer inside the shape whose

fill color you want to copy3. Click the fill of the shape4. Click inside the shape to which you want

to apply the fill color

31

Creating a custom color

1. Select a color from Fill Color palette in the Color Mixer panel

2. Click the triangle on the upper-right corner of the Color Mixer panel

3. From the menu, choose a color mode4. Edit values in R, G, B, and Alpha boxes5. From Options menu, choose Add

Swatch

32

Creating a custom gradient

1. From Fill style list, select gradient type2. Adjust position of the various sliders3. Display the Options menu and choose

Add Swatch

33

Do exercise 2.5 on page 29

Experiment with brush tool and its modifiersShow me your work when done

Also experiment with erase tool and modifiers

34

Shape selection tools

Selection tool Select an object by clicking on it with mouse Or select a group of objects by click-dragging to

surround them with a selection box Lasso tool

Select a group of objects by drawing a freehand or polygonal box around them

Or click, then click to draw polygonal shapes Subselection tool

Lets you manipulate control points in a vector drawing

35

Making marquee selections

1. Select the Selection Tool or the Subselection Tool

2. Place the pointer at a position where you want the selection to start

3. Drag the pointer to cover all the shapes4. Release the mouse

36

Making freeform marquee selections

1. Select the Lasso Tool 2. Place the pointer at a position where

you want the selection to start 3. Drag the pointer to draw a line around

the shapes you want to select 4. Connect the starting and ending points

of the line

37

Smoothes out any sharp areas Straightens out any curves

Helps rotate a shape Helps resize a shape Helps distort a shape

Helps warp and distort objects

Selection and Free Transform Tool modifiers

38

Combining shapes

1. Select a shape2. Move the selected shape over the other

shape to place it in such a way that it represents the shape that you need

3. Deselect the shape

39

Grouping shapesTo create a group:

Select the shapes Choose Modify, Group

To ungroup shapes:Select the group Choose Modify, Ungroup

To modify the group:Double-click the group Make modifications

To deselect the group:Double-click anywhere on the Stage

40

Do exercise 2.6 on page 36

Try using as many of the tools as possible for this exercise

Save your work on H: driveShow me at the beginning of next labI.e., this is homework!

41

3 Types of Text

Static textCan be horizontal or vertical

Dynamic textCan load text from a data fileCan be scrollable

Input textCan mask text as password text

42

Creating extending text block

1. Select2. Click where you want to insert text3. Type the text

43

Changing font and font size

To change the font: In the Properties Inspector, from the Font list, select

a font -or- Choose Text, Font, and then choose an option

To change the font size: In the Properties Inspector, drag the font size slider -or- Choose Text, Size, and then choose an option

44

Changing font style

In the Properties Inspector, click the Bold or the Italic button

-or-Choose Text, Style and then choose an

option

45

Aligning text

Choose Text, Align, and choose an alignment option

-or-Select the text block and click an

alignment button (Properties Inspector)

46

Aligning text

Choose Text, Align, and choose an alignment option

-or-Select the text block and click an

alignment button (Properties Inspector)

47

Do exercise 3.1 on pages 46-47

An exercise with text and graphicsSave your work on H: driveShow me at the beginning of next labI.e., exercises 2.6 and 3.1 are homework

48

Layers list in the Timeline

Layers list

Layer name

Insert Layer button

Selected layer

Delete Layer button

49

Deleting layers

Click -or- Drag the layer to the Delete Layer

button -or Right-click the layer and choose Delete

Layer

50

Renaming a layer

Choose Modify, Layer and specify the name

-or- Right-click a layer, choose Properties,

and specify the name-or- Double-click the layer, type the new

name for the layer, and press Enter

51

Locking and unlocking layerLock/Unlock All Layers button

Locked layer

Unlocked layer

52

Locking and hiding a layer

Hidden layer

Visible layerShow/Hide All Layers button