Chapter 5 Creating Special Effects 2011 Delmar, Cengage Learning
Chapter 5 Lessons 1. Create a mask effect 2. Add sound 3. Add video 4. Create an animated navigation bar 5. Create character animations using inverse kinematics 6. Create 3D effects 7. Use the Deco tool
Create Special Effects 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 You can add sound to a button to provide feedback to the viewer when the button is clicked
Create 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
Create Special Effects Tools You ll Use
Create 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.
Create a Mask Effect 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
Create a Mask Effect 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 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
Create a Mask Effect 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
Create a Mask Effect Your color may vary Lock selected The completed Layer Properties dialog box
Add 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
Add 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.
Add Sound A wave pattern gives indications of volume and pitch. High spikes indicate a louder sound. Dense wave patterns indicate lower pitches. A wave pattern displayed on a sound layer
Add Sound 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 Click Sync button to see menu Effect menu Sound Effect options in the Properties panel
Add Sound You can import the following sound file formats into Flash: ASND WAV AIFF MP3
Add Sound If you have QuickTime 4 or later installed you can import these additional file formats: AIFF Sound designer II Sound Only QuickTime Movies Sun AU System 7 Sounds WAV
Add Video Adobe Flash allows you to import FLV (Flash Video) files that can be used in a Flash document. You can embed video content directly into a Flash document. If you embed video it becomes a part of the SWF file similar to sound and graphic objects.
Add Video Play button Pause button Video placeholder An embedded video
Add Video Progressive downloading allows you to use ActionScript to load an external FLV file into a SWF file. With progressive downloading, the FLV file resides outside the SWF file. The SWF file size can be kept smaller than when the video is embedded.
Add Video If you stream video it provides a constant connection between the user and the video delivery. Streaming has several advantages over the other methods of delivering video, including starting the video more quickly and allowing for live video delivery.
Add Video When you use the Import Video Wizard, it imports FLV files into Flash documents. The wizard walks you through a step-bystep process that allows you to select the files to be imported and the deployment method (embedded, progressive, and streaming).
Add Video The Import Video Wizard
Add Video The Adobe Media Encoder is an application used by Flash to convert various video file formats, such as.mov,.avi, and.mpeg. The Encoder allows you to choose the size of the placeholder the video will play in, edit the video, and insert cue points.
Add Video The Adobe Media Encoder
Create an Animated Navigation Bar A common navigation scheme for a website is a navigation bar with drop-down menus Navigation bar with drop-down menus
Create an Animated Navigation Bar When you use the navigation bar it provides several advantages: It provides several menu options to the user without cluttering the screen It allows the user to go quickly to a location on the site without having to navigate several screens to find desired content It provides consistency in function and appearance
Create an Animated Navigation Bar When you create a drop-down menu the process includes: Creating a navigation bar Positioning the drop-down buttons Creating an animated mask Assigning actions to the drop-down buttons Assigning a roll over action to the navigation bar menu item buttons Creating an invisible button
Create an Animated Navigation Bar When the user rolls over any part of the blue button with the pointer, A script is executed that causes the drop-down menu to disappear A button that will be assigned a rollover action
Create an Animated Navigation Bar You can use frame labels when creating ActionScript code. You can assign a label to a frame as an identifier. If you insert frames on a Timeline, the label adjusts for the added frames.
Create an Animated Navigation Bar Descriptive labels help you identify parts of the movie as you work with the Timeline. You can assign a frame label by selecting the desired frame and typing in the Frame text box in the Properties panel.
Create an Animated Navigation Bar You can organize a long movie by adding scenes. If you create a movie for a website, you could divide it into several scenes; an introduction, a home page, and content pages and each scene would have its own Timeline.
Create 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.
Create Character Animations Using Inverse Kinematics Drawings showing before and after the bone structure is added
Create Character Animations Using Inverse Kinematics This figure shows how moving the right foot moves the entire leg Moving the foot moves the other parts of the leg
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.
Create the Bone Structure 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.
Create the Bone Structure 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.
Create the Bone Structure 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.
Create the Bone Structure Various positions in a bone structure
Create the Bone Structure 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.
Create the Bone Structure 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.
Create the Bone Structure Connecting the head and torso Connecting the torso and the upper arm Connecting the upper and lower arms The completed bone structure
Create 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.
Create 3D Effects 0 X axis 0 550 Y axis Center point 225,200 400 550,400 The x and y coordinates on the Stage
Create 3D Effects 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.
Create 3D Effects 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.
Create 3D Effects When you click an object with the 3D Translation tool, the three axes red (X), green (Y), and blue (Z) appear on top of the object
Create 3D Effects 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
Create 3D Effects 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
Create 3D Effects The 3D Rotation tool
Create 3D Effects 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.
Use 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.
Use the Deco Tool There are 13 drawing effects available with the Deco tool The Deco drawing tools
Use the Deco Tool 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
Use the Deco Tool 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
Use the Deco Tool Animations a few brushes, such as the Lightning brush, Fire Animation, Smoke Animation, and Particle System, create animations as they are used