Wininstall Macromedia Flash

1
Wininstall Macromedia Flash

• Start -gt Install Software
• Select Macromedia Flash MX 2004
• Installs entire Macromedia suite
• Dreamweaver, Freehand, etc.

2
Introduction to Flash

• Tool for creating animation, interactivity,
  multimedia and web-based tracking
• Deployable via web or CDROM
• Learning interaction templates add abstract
  functionality for building quizzes and other
  complex interactions

3
Macromedia Flash versions

• Flash, Flash MX, Flash MX 2004
• Much better help
• New components
• Better video quality
• ActionScript 2.0
• Flash MX 2004 Professional
• Slides and Forms
• Enhanced video options
• Available on Lehigh LANs, trial version at
  macromedia.com, student versions

4
Wininstall Macromedia Flash

• If you havent started this already
• Start -gt Install Software
• Select Macromedia Flash MX 2004
• Installs entire Macromedia suite
• Dreamweaver, 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 dotsthe 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 Workspace
Stage
Tools
Panels
Timeline
Properties Inspector
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 need
4. Release the mouse

10
Do exercise 2.1 on page 17

• Drawing lines in Flash with Line tool
• Show me your work when done
• No 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
• Select
• Place the insertion point on the Stage
• 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 OK
4. Place the insertion point and drag diagonally

14
Drawing an ovals and circles

• To draw an oval
• Select
• Place the insertion point on the stage
• Drag diagonally
• To draw a circle
• Hold down the Shift key while dragging

15
Using the Pen Tool

• To create a straight line
• Select
• Click where you want the line to start
• Click at a point where you want to place the end
  point
• Drag the direction line
• To create a closed path
• Click the first anchor point
• Drag to adjust the curve

16
Do exercise 2.3 on page 22

• Drawing a leaf with Pen tool
• Show me your work when done
• No need to save it

17
Using the Pencil Tool

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

18
Copying and deleting shapes

• To copy a shape
• Select the shape
• Choose Edit, Copy
• Choose Edit, Paste
• To delete a shape
• Select the shape
• Choose Edit, Clear
• Flash also offers undo and history
• Use undo to experiment!

19
Viewing shapes

• The Zoom tool
• Zoom In to magnify a shape
• Zoom Out to reduce a shape
• The Hand tool
• To move the Stage

20
Brush Tool modifiers
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 modifiers
• Show 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 Colors
• 1st 2 Red Value
• 2nd 2 Green Value
• 3rd 2 Blue Value
• Each Value 00-FF (0-255)

25
Hexadecimal Values

• Color Name Hexadecimal Value
• Black 0000000
• White FFFFFF
• Red FF0000
• Yellow FFFF00
• Green 00FF00
• Blue 0000FF

26
Colors section
27
Using the Paint Bucket Tool

1. Click the Paint Bucket Tool
2. Select an option
3. Click the Fill Color box
4. Select a color
5. Click inside the shape

28
Using the Ink Bottle Tool

1. Click the Ink Bottle Tool
2. Click the Stroke Color box
3. Select a color
4. Click the shape

29
Using the Eyedropper Tool

• To copy the stroke color
• Click the Eyedropper Tool
• Place the pointer on the outline of shape whose
  stroke color you want to copy
• Click the stroke of the shape
• 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
• Click the Eyedropper Tool
• Place the pointer inside the shape whose fill
  color you want to copy
• Click the fill of the shape
• 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 mode
4. Edit values in R, G, B, and Alpha boxes
5. From Options menu, choose Add Swatch

32
Creating a custom gradient

1. From Fill style list, select gradient type
2. Adjust position of the various sliders
3. Display the Options menu and choose Add Swatch

33
Do exercise 2.5 on page 29

• Experiment with brush tool and its modifiers
• Show 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 shapes
4. 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
Selection and Free Transform Tool modifiers

• 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

38
Combining shapes

1. Select a shape
2. 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 shapes

• To 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 drive
• Show me at the beginning of next lab
• I.e., this is homework!

41
3 Types of Text

• Static text
• Can be horizontal or vertical
• Dynamic text
• Can load text from a data file
• Can be scrollable
• Input text
• Can mask text as password text

42
Creating extending text block

1. Select
2. Click where you want to insert text
3. 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 graphics
• Save your work on H drive
• Show me at the beginning of next lab
• I.e., exercises 2.6 and 3.1 are homework

48
Layers list in the Timeline
Layers list
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 layer
Unlocked layer
52
Locking and hiding a layer