chapter 8 interactive multimedia authoring with flash: animation
DESCRIPTION
Chapter 8 Interactive Multimedia Authoring with Flash: Animation. Flash : Shapes and Symbols. In this lecture, you will learn:. shapes vs. symbols in Flash 3 types of symbols in Flash Advantages of using symbols Object Drawing vs. Merge Drawing in Flash. Types of Visual Content. Shapes - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/1.jpg)
Chapter 8Interactive Multimedia Authoring with Flash:
Animation
Flash: Shapes and Symbols
1
![Page 2: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/2.jpg)
In this lecture, you will learn:
2
• shapes vs. symbols in Flash
• 3 types of symbols in Flash
• Advantages of using symbols
• Object Drawing vs. Merge Drawing in Flash
![Page 3: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/3.jpg)
Types of Visual Content
• Shapes• Symbols
3
![Page 4: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/4.jpg)
Shapes
4
![Page 5: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/5.jpg)
Shapes
Made up of• Strokes• Fills
5
![Page 6: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/6.jpg)
Stroke
• Line created with Pencil, Pen, and Ink Bottle tools
• Properties:– line width– color– line style (such as solid, dash)– can be modified in Property Inspector
6
![Page 7: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/7.jpg)
Pencil, Pen, and Ink Bottle tools
7
Pen
Pencil
Ink Bottle
![Page 8: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/8.jpg)
• Pencil and Pen tool let you draw a line or stroke of a shape freehand like this:
Example
8
![Page 9: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/9.jpg)
• Ink Bottle tool lets you create a stroke outlining a fill like this:
Example
9
![Page 10: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/10.jpg)
A screen-capture movie shows how to create a simple shape using Pencil, Pen, Ink, and Paint Bucket tools.
Also check out the screen capture video on:
CREATING SHAPES IN FLASH
10
![Page 11: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/11.jpg)
Fill
• Area of filled content, such as filled solid color
• Tools for creating fills:– Paint Bucket– Brush
• Properties:– color– can be modified in Property Inspector
11
![Page 12: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/12.jpg)
Paint Bucket and Brush tools
12
Brush
Paint Bucket
![Page 13: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/13.jpg)
Example
• Brush tool lets you paint a fill freehand like this:
13
![Page 14: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/14.jpg)
Example
• Paint Bucket tool lets you fill in an enclosed area like this:
14
![Page 15: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/15.jpg)
Coloring Strokes and Fills
15
Color chip for the strokes
Color chip for the fills
![Page 16: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/16.jpg)
A screen-capture movie shows how to modify a shape.
Also check out the screen capture video on:
MODIFYING SHAPES IN FLASH
16
![Page 17: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/17.jpg)
Drawing Models for Drawing Shapes
• Merge drawing– Overlapping shapes are merged.
• Object drawing– Each shape can be a self-contained objects– Overlapping shapes are not merged. They can be
repositioned individually.
17
![Page 18: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/18.jpg)
Drawing Models for Drawing Shapes
Option available when you select these tools:
• Pencil• Brush• Pen• Line• Rectangle tool group
18
Object Drawingbutton
![Page 19: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/19.jpg)
Convert Object Drawing Into Merge Drawing
If you unknowing turn on Object Drawing• For future drawing in Merge Drawing mode, turn off
the Object Drawing:– Select each drawing tool on Tools panel– Toggle the Object Drawing button to off
• For existing drawings drawn in Object Drawing mode– Select the objects– Choose Modify > Break Apart
19
![Page 20: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/20.jpg)
Object Drawing vs. Merge Drawing
20
![Page 21: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/21.jpg)
Object Drawing vs. Merge Drawing
21
Drawn in Object Drawing mode.Each brush drawing is an individual object.When an object is selected, you see a blue box enclosing the object.
![Page 22: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/22.jpg)
Object Drawing vs. Merge Drawing
22
Drawn in Merge Drawing mode.Overlapping brush drawings.are merged into a shape.When a shape is selected, you see it being highlighted.
![Page 23: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/23.jpg)
Object Drawing vs. Merge Drawing
23
Drawn in Object Drawing mode.You double-click on an object to edit its shape.
![Page 24: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/24.jpg)
Object Drawing vs. Merge Drawing
24
Drawn in Merge Drawing mode.You can directly edit the shape.
![Page 25: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/25.jpg)
Object Drawing vs. Merge Drawing
25
Drawn in Object Drawing mode.Each object can be edited independent of others.For example, an object is changed from red to yellow without affecting other overlapping objects.
![Page 26: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/26.jpg)
Object Drawing vs. Merge Drawing
26
Drawn in Merge Drawing mode.When you change the hair color from red to yellow, the whole merged shape changes.
![Page 27: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/27.jpg)
Object Drawing vs. Merge Drawing
27
Drawn in Object Drawing mode.Each object can be repositioned independent of others.For example, if you reposition the eyes, it does not leave holes on the face.
![Page 28: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/28.jpg)
Object Drawing vs. Merge Drawing
28
Drawn in Merge Drawing mode.When you reposition the eyes, it leaves holes on the shape for the face.
![Page 29: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/29.jpg)
Object Drawing vs. Merge Drawing
29
Drawn in Object Drawing mode.A hole formed by the objects is not an enclosed area.For example, you cannot use Paint Bucket tool to fill the empty space (white area) on top of the head.
![Page 30: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/30.jpg)
Object Drawing vs. Merge Drawing
30
Drawn in Merge Drawing mode.You can use Paint Bucket tool to fill the empty space (white area) on top of the head. Here, we fill it with green.
![Page 31: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/31.jpg)
Symbols
31
![Page 32: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/32.jpg)
Symbols
• Stored in the Library panel
• Can be used multiple times in the project without increasing the file size of the project
32
![Page 33: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/33.jpg)
To Create a Symbol
• Method 1: Convert an existing shape into a symbol– Select the shapes– Choose Modify > Convert to Symbol...
Or, right-click (Windows) or Control-click (Mac OS) and choose Convert to Symbol...
33
![Page 34: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/34.jpg)
To Create a Symbol
• Method 2: Create a blank symbol, and add shapes or other symbols– Insert > New Symbol...
34
![Page 35: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/35.jpg)
A screen-capture movie shows show to create (1) a new symbol and (2) a symbol by converting from a shape.
Also check out the screen capture video on:
CREATING SYMBOLS IN FLASH
35
![Page 36: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/36.jpg)
How to Tell Symbols from Shapes on Stage
36
![Page 37: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/37.jpg)
How to Tell Symbols from Shapes on Stage
37
Symbol instance:• When it is selected, a blue box appears
around it.• Property Inspector also shows that it is
a symbol.
![Page 38: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/38.jpg)
How to Tell Symbols from Shapes on Stage
38
Shape:• When it is selected, the shape is
highlighted with patterned dots.• Property Inspector also shows that it is
a shape.
![Page 39: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/39.jpg)
Types of Symbols
• Graphic• Button• Movieclip
39
![Page 40: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/40.jpg)
Graphic Symbol
• Purposes: To be used as static graphics
• Can be used on the main timeline
• Can also be placed in other graphic, button and movieclip symbols
• Interactive controls and sounds won’t work in a graphic symbol’s timeline
40
![Page 41: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/41.jpg)
Button Symbol
• Purposes: To be used as interactive buttons in the movie– mouse clicks– rollovers
• Can be used on the main timeline
• Can also be placed inside a movieclip symbol
• Cannot be placed inside a button symbol
41
![Page 42: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/42.jpg)
Button Symbol
• Has only four special-purpose frames:– button up:
How the button looks at the default state– over:
How the button looks when the mouse is over the button
– button down:How the button looks when the button is pressed down
– hit:To mark the hot spot of the button
42
![Page 43: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/43.jpg)
Movieclip Symbol• Purposes:
– To be used as reusable pieces of animation– To allow programming of the behavior of a symbol
• Can be used on the main timeline
• Can contain copies of other symbols (graphic, buttons, and other movieclips), ActionScript, and sounds
• Can also be placed inside a Movieclip or Button symbol
• Cannot be placed inside a Graphic symbol
43
![Page 44: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/44.jpg)
Movieclip Symbol
• Have its own timeline– plays independently from the main movie’s timeline,
i.e., it can have its own animation sequence– think of movieclips as mini-Flash movies inside a main
movie– its animation sequence plays automatically unless you
use an Actionscript to stop it
• Can be controlled using ActionScript in response to mouse clicks and rollovers.
44
![Page 45: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/45.jpg)
Movieclip Symbol
• If your Flash file uses Movieclip symbols, test play using:– Control > Test Movie
NOT Control > Play
45
![Page 46: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/46.jpg)
Advantages of Using Symbols
• Reuse without increasing file size– But copying and pasting a shape will increase file size
• As a master copy– Changing the symbol updates all the instances of the
symbol used in the file– Great for placeholder
• Use symbols with placeholder content to program or create an animation while waiting for the final art work
• Replace the placeholder content with the final art work without redoing the animation
46
![Page 47: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/47.jpg)
Concept of Master Copy Illustrated
47
The same symbol of a puppy is used 3 times on the stage.
![Page 48: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/48.jpg)
Concept of Master Copy Illustrated
48
When the puppy symbol is modified into a dalmatian puppy, all of its instances on the stage are automatically updated to dalmatians.
![Page 49: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/49.jpg)
What if the puppies are shapes?
• Suppose all three puppies are shapes copied and pasted from the same shape.
• Modifying a shape of the puppy into dalmatian only changes that one shape.
• All other shapes of puppy remain unchanged.
49
![Page 50: Chapter 8 Interactive Multimedia Authoring with Flash: Animation](https://reader035.vdocuments.us/reader035/viewer/2022081505/56816726550346895ddbb9b8/html5/thumbnails/50.jpg)
The Term Instances
• When a symbol is used on the stage, it is its copy on the stage.
• The copies used on the stage are called the instances of that symbol.
50