View
75
Download
3
Category
Tags:
Preview:
DESCRIPTION
Wininstall Macromedia Flash. Start -> Install Software Select Macromedia Flash MX 2004 Installs entire Macromedia suite Dreamweaver, Freehand, etc. Introduction to Flash. Tool for creating animation, interactivity, multimedia and web-based tracking Deployable via web or CDROM - PowerPoint PPT Presentation
Citation preview
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 need
4. 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 Stage
3. 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:1. Select
2. 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. Select
2. Click where you want the line to start
3. 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. Select
2. 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 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
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 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:1. Click the Eyedropper Tool
2. Place the pointer on the outline of shape whose stroke color you want to copy
3. Click the stroke of the shape
4. 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 Tool
2. Place the pointer inside the shape whose fill color you want to copy
3. Click the fill of the shape
4. 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 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 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
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 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 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. 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 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 layer
Lock/Unlock All Layers button
Locked layer
Unlocked layer
52
Locking and hiding a layer
Hidden layer
Visible layerShow/Hide All Layers button
Recommended