adobe flash cs5 chapter 5 creating special effects

ADOBE FLASH CS5

Chapter 5

Creating Special Effects

ADOBE FLASH CS5

• Introduction– Special effects can provide variety and add interest to a movie,

as well as draw the viewer’s attention to a location or event in a movie

– You can use sound effects to enhance a movie by creating moods and dramatizing events

Create Special Effects

ADOBE FLASH CS5Create Special Effects

– You can incorporate video into a Flash movie and effects, such as fading in and out, can be applied to the display of the video

– You can add an animated navigation bar, one that causes a drop-down menu to open when the user rolls over a button

– Additional features you can use are Inverse Kinematics, 3D Effects, and the Deco tool

ADOBE FLASH CS5Create Special Effects

Tools You’ll Use

ADOBE FLASH CS5Create a Mask Effect

• A mask layer allows you to cover up the objects on one or more layers, and at the same time, create a window through which you can view objects on those layer(s).

• If you move the window around the Stage you can create effects such as a spotlight that highlights certain content on the Stage.

• You can use a mask layer to reveal only the area of the Stage and objects you want the viewer to see.

• When you are working with a mask layer, you need at least two layers on the Timeline.– The mask layer– The masked layer

ADOBE FLASH CS5

Mask layer with window (the filled circle, which becomes transparent when viewed over a masked layer)

Mask layer before applying mask

Masked layer after applying mask; you only see what appears through the window

A mask layer with a window

Create a Mask Effect

ADOBE FLASH CS5Create a Mask Effect

• The process for using a mask layer– Select an original layer that will become the masked layer– Insert a new layer above the masked layer that will become a mask layer– Draw a filled shape, such as a circle, or create an instance of a symbol that will

become the window on the mask layer– Select the new layer and open the Layer Properties dialog box, then select Mask

as the layer type– Select the original layer and open the Layer Properties dialog box, then select

Masked as the layer type– Lock both the mask and the masked layers– You can mask additional layers– You can unlink a masked layer

ADOBE FLASH CS5

The completed Layer Properties dialog box

Create a Mask Effect

Your color may vary

Lock selected

ADOBE FLASH CS5Add Sound

• You can incorporate all types of sounds into a Flash movie; for example CD-quality music, narrations to explain what the users are seeing, sound effects, and recordings.

• The process you use for adding sound is:– Import a sound file into a Flash movie– Create a new layer– Select the frame that will play the sound

• You can place more than one sound file on a layer.• You can place sounds on layers that have other objects.• It is recommended that you place each sound on a separate layer so it is easier to

identify and edit.


A wave pattern displayed on a sound layer

A wave pattern gives indications of volume and pitch. High spikes indicate a louder sound. Dense wave patterns indicate lower pitches.

ADOBE FLASH CS5

• It is best if you make changes to a sound file using a sound-editing program.

• You can use options in the Properties panel to specify special effects and synchronize a sound to an event.

Add Sound


Sound Effect options in the Properties panel

Click Sync button to see menu

Effect menu

ADOBE FLASH CS5

• You can import the following sound file formats into Flash:– ASND– WAV– AIFF– MP3

Add Sound

ADOBE FLASH CS5Create Character Animations Using Inverse Kinematics

• Inverse Kinematics (IK) is when you add structure to an image that can be used to animate the various parts of the image.

• This process also involves creating an articulated structure of bones that allows you to link the parts of the image by changing the position of any of its parts.


Drawings showing before and after the bone structure is added


This figure shows how moving the right foot moves the entire leg

Moving the foot moves the other parts of the leg

ADOBE FLASH CS5

Create the Bone Structure

• You can apply the bone structure to a single drawn shape or to an image made up of several drawings.

• Each drawing can be converted to a graphic symbol or movie clip symbol and then can be assembled to make a desired image.

ADOBE FLASH CS5


• You can use the Bone tool to create the bone structure, called the armature.

• You can continue adding bones to the structure until all parts of the image are linked.

• As you create the bone structure, a layer named Armature is added to the Timeline.

ADOBE FLASH CS5

• When you place the image with the bone structure in frame 1, a new layer called a pose layer is created.

• Each pose layer has only one armature and its associated image.

• You can animate the image by inserting a keyframe on the pose layer.

• When you create a pose you change the position of one or more of the bones in the image.

• Once you specify the start and end positions of the image, Flash interpolates the position of the parts of the image for the in-between frames.


ADOBE FLASH CS5

Various positions in a bone structure


ADOBE FLASH CS5

• When you create a movie clip with an IK object you have the ability to change the color effect and you can nest one movie clip within another.

• You can also apply a motion tween to a movie clip.• Flash provides a runtime feature for manipulation of an

IK object which means you can allow the user to click the object and adjust the image.

• The runtime feature only works with IK structures connected to drawn shapes or movie clip symbols.


ADOBE FLASH CS5

Connecting thehead and torso

Connecting the torsoand the upper arm

Connecting theupper and lower arms

The completedbone structure


ADOBE FLASH CS5Create 3D Effects

• You can create 3D objects in Flash by manipulating objects in 3D space on the Stage.

• The default settings for the Stage are 550 pixels wide and 400 pixels high.

• You can specify any position on the Stage by the x and y coordinates.


The x and y coordinates on the Stage

0 5500

400

X axis

Y axis

Center point225,200

550,400


• Flash provides two tools, 3D Translation and 3D Rotation that can be used to move and rotate objects using all three axes.

• The Perspective Angle property controls the angle of the object and can be used to create a zooming in and out effect.

• The Vanishing Point property more precisely controls the direction of an object as it moves away from the viewer.

• You can find both of these point settings in the Properties panel.


When you clickan object with the 3D Translation tool, the three axes red (X), green (Y), and blue (Z) appear on top of the object


• When you activate the 3D Translation tool:– Dragging the X axis arrow moves the object

horizontally– Dragging the Y axis arrow moves the object

vertically– Dragging the Z axis dot, makes the object zoom in

and out


• When you activate the 3D Rotation tool:– Dragging the X axis (red) will flip the object

horizontally– Dragging the Y axis (green) will flip the object

vertically– Dragging the Z axis (blue) will spin the object– A fourth option, the orange circle, rotates the object

around the X and Y axes at the same time


The 3D Rotation tool


• When you create a 3D effect it requires a change in the position of an object.

• You can use a motion tween to specify where on the Timeline the effect will take place.

• If you are animating more than one object, each object should have its own layer.

ADOBE FLASH CS5Use the Deco Tool

• The Deco tool provides a variety of drawing effects that can be used to quickly create environments, such as city landscapes, and to create various animations.

• You can use the Deco tool to create decorative patterns.


There are 13 drawing effects available with the Deco tool

The Deco drawing tools


Drawing effects in the Deco tool are grouped into three basic types

Fills—the Vine Fill, Grid Fill, and Symmetry Brush create patterns that can be used as fill for graphics or a backdrop for a movie


Brushes—several brushes including the buildings, lightning, tree, and flower brushes can be used to create drawings that can be combined to construct an environment


Animations—a fewbrushes, such as theLightning brush, FireAnimation, SmokeAnimation, and ParticleSystem, create animations as they are used

adobe flash cs5 chapter 5 creating special effects

Documents

mask effecta mask layer

windowa mask layer

original layer

maskmasked layer

layer typeselect

separate layer

layer typelock

mask layerselect