1 / 24

CIS 205—Web Design & Development

CIS 205—Web Design & Development. Flash Chapter 5 Creating Special Effects. Chapter 5: Creating Special Effects. Introduction So far you have been creating basic animations You can add special effects to add interest For example, you can do Shape tweening (objects change shape)

omar
Download Presentation

CIS 205—Web Design & Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CIS 205—Web Design & Development Flash Chapter 5 Creating Special Effects

  2. Chapter 5: Creating Special Effects • Introduction • So far you have been creating basic animations • You can add special effects to add interest • For example, you can do • Shape tweening (objects change shape) • Morphing (objects morph from one object into another) • Spotlights (revealing only certain areas on the stage) • Sound effects • Animated navigation bars • Combining different scenes can be used to create a more interesting movie (but it’s also more work)

  3. Lesson 1: Create Shape Tween Animations • Shape Tweening • In previous animations, you used motion tweening to change the shape of objects • With shape tweening, you can do more varied changes with multiple objects • Using Shape Tweening to Create a Morphing Effect • Morphing is changing one object into another • Shape tweening only works with editable graphics • Multiple objects can be tweened if they are in the same layer • Rotation is not available with shape tweening • The PI can be used for options like acceleration • Shape hints can be used for more complex changes • Shape Hints • Shape hints allow you to correlate locations on a beginning object with locations on an ending object

  4. Lesson 1: Create Shape Tween Animations (2) • Create a shape tween animation • Start Flash, open the file fl5_1.fla where your Data Files are stored, then save the file as antiqueCar • Verify that the Tools panel and Property inspector are open, change the view to Fit to Window • Click Frame 30 on the shape layer, insert a keyframe • Click the Selection tool, then click a blank area • Point to the right side of the top of the car, use the arc pointer to drag the cartop up as shown on Figure 3 • Click anywhere in the shape layer between Frames 1 and 30

  5. Lesson 1: Create Shape Tween Animations (3) • Create a shape tween animation (continued) • With the PI displayed, click the Tweenlistarrow, click Shape • Click Frame 1 on the shape layer and play the movie • Click Frame 30 on the shape layer • Click the Selectiontool and drag a marquee around the car • Drag the car to the right side of the stage • Play the movie, save and close the file

  6. Lesson 1: Create Shape Tween Animations (4) • Create a morphing effect • Open the file fl5_2.fla where your Data Files are stored, then save the file as morphCar • Click Frame 40 on the morph layer • Click Insert on the menu bar, point to Timeline, click Blank Keyframe • Click the Edit Multiple Frames icon on the Timeline • Open the Library panel • Drag the g_antiqueCarTopDown graphic symbol from the Library panel directly on top of the car on the stage (see Figure 4—use arrow keys to align)

  7. Lesson 1: Create Shape Tween Animations (5) • Create a morphing effect (continued) • Make sure that the g_antiqueCarTopDown object is selected, click Modify on the menu bar, click BreakApart • Click the Edit Multiple Frames icon to turn off the feature • Click anywhere in the shape layer between Frames 1 and 40 on the morph layer, click the Tween list arrow on the PI, click Shape • Click Frame 1 on the Timeline, play the movie • Save the movie

  8. Lesson 1: Create Shape Tween Animations (6) • Adjust the rate of change in a shape tween animation • Click Frame 40 on the morph layer • Click the Selection tool, drag a marquee around the car • Drag the car to the right side of the stage • Click Frame 1 on the morph layer • Click the Ease list arrow on the PI, drag the slider to -100 • Click the stage, play the movie • Repeat steps 4 and 5, change the Ease value to 100 • Click Frame 1, play the movie, save your work, close

  9. Lesson 1: Create Shape Tween Animations (7) • Adjust the rate of change in a shape tween animation • Click Frame 40 on the morph layer • Click the Selection tool, drag a marquee around the car • Drag the car to the right side of the stage • Click Frame 1 on the morph layer • Click the Ease list arrow on the PI, drag the slider to -100 • Click the stage, play the movie • Repeat steps 4 and 5, change the Ease value to 100 • Click Frame 1, play the movie, save your work, close

  10. Lesson 4: Create Animation Effects (8) • Use shape hints • Open the file fl5_3.fla where your Data Files are stored, then save the file as shapeHints • Play the movie • Click Frame 15 on the Timeline, notice the shape • Click Frame 1 • Select the object, click Modify on the menu bar, point to Shape, click Add Shape Hint • Drag the Shape Hint icon to the top of the L • Repeat steps 5 and 6 to add shape hints to the corner of the L and the right end of the L

  11. Lesson 4: Create Animation Effects (9) • Use shape hints (continued) • Click Frame 30 on the hints layer • Drag the Shape Hint icons to match Figure 8 • Click Frame 15 on the hints layer • Click Frame 1 on the Timeline, play the movie • Save your work, close the movie

  12. Lesson 2: Create a Mask Effect • Understanding Mask Layers • A mask layer covers another layer but has an opening (such as a circle) that can move to view objects in the other layer. • The process for using a mask layer: • Select the original layer that will be the masked layer • Insert a new layer that will be the mask layer (the mask layer masks the layer immediately below it) • Draw a filled shape (like a circle) that will become the window (transparent) • Change the Layer Properties for the new layer to make it a mask • Change the Layer Properties for the original layer to be masked • Lock both of these layers • To mask more layers, drag them below the mask layer and change their properties to a masked layer • To unlink a masked layer, drag it above the mask layer, or change its Layer Properties to Normal

  13. Lesson 2: Create a Mask Effect (2) • Create a mask layer • Open the file fl5_4.fla and save it as classicCC • Insert a newlayer, name it mask, click Frame1 on it • Select the Ovaltool, set the Strokecolor to NoStroke • Set the Fillcolor to black • Draw a circle twice as tall as the C, center it to the left of the text, select the circle, click Insert on the menu bar, point to Timeline, click CreateMotionTween • Insert a keyframe in Frame 40 on the mask layer, drag the circle to the right of the text • Select the mask layer, click Modify on the menu bar, point to Timeline, click LayerProperties

  14. Lesson 2: Create a Mask Effect (3) • Create a mask layer (continued) • Verify that the Show check box is selected, click the Lockcheckbox to select it, click the Maskoptionbutton, click OK • Play the movie from Frame 1 and save your work

  15. Lesson 2: Create a Mask Effect (4) • Create a masked layer • Click the heading layer, click Modify on the menu bar, point to Timeline, click LayerProperties • Verify that the Showcheckbox is selected, click the Lockcheckbox to select it, click the Maskedoptionbutton, click OK • Play the movie and notice the masking effect • Click Control in the menu bar, click TestMovie • View the movie and close the window • Save your work

  16. Lesson 3: Add Sound • Incorporating Animation and Sound • Sound can be extremely important in an animation • Sound can include music, narration, and sound effects • The process for adding a sound to a movie: • Import a sound file • Create a new layer • Select a frame and drag the sound symbol to the stage • Each sound should be on its own layer • The timeline for a sound layer will display a wave pattern • The Property Inspector is used to synchronize a sound to an event • You can use the following sound file formats • WAV • AIFF • MP3

  17. Lesson 3: Add Sound (2) • Add sound to a movie • Open the file fl5_5.fla and save it as rallySnd • Play the movie and notice that there is no sound • Click the stopmovie layer, insert a new layer, name it carSnd • Insert a keyframe in Frame 72 on the carSnd layer • Click File on the menu bar, point to Import, click Import to Library • Navigate to the data files, double-click the CarSnd.wav file • Open the Library panel (if necessary)

  18. Lesson 3: Add Sound (3) • Add sound to a movie (continued) • Click Frame 72 of the carSnd layer • Drag the CarSndsoundsymbol to the stage • Click Control on the menu bar, click TestMovie • Click the Click to Continue button to test the sound • Close the movie window

  19. Lesson 3: Add Sound (4) • Add sound to a button • Click Frame 71 on the carSnd layer • Click the Selection tool, drag a marquee around “Click to continue” , then double-click this button to display the button’s Timeline • Insert a new layer above Layer 1 and name it sound

  20. Lesson 4: Add Scenes • Understanding Scenes • Flash movies can get more complex and much larger than just one simple animation • Movies can be organized into scenes, each containing an animation, to reduce complexity • Working with Scenes • Use Insert, Scene from the menu or use the Scenes panel to insert a scene in a movie • You can rename scenes, add scenes, duplicate scenes, delete scenes, and reorder scenes • Scenes are played in the order listed, top to bottom • You can also use goto actions to play stop and start scenes • A single movie can be made by copying animations from several different files into separate scenes of the “big” movie

  21. Lesson 4: Add Scenes (2) • Add and name a scene • Open the file fl5_6.fla and save it as cccHome • Click Window on the menu, point to OtherPanels, click Scene (you can drag the Scene panel to the right) • Double-click Scene 1 in the Scene panel, type Home, press [Enter] • Click the AddSceneicon (+) at the bottom of the Scene panel, double-click Scene 2, type Event, press [Enter] • Click Home in the Scene panel • Click Event in the Scene panel • Click Control on the menu, click TestMovie (notice that the movie goes from the Home scene to the blank Event scene continuously, back and forth

  22. Lesson 4: Add Scenes (3) • Copying frames to add to a scene • Open rallySnd.fla (a previously created animation) • Click Edit on the menu, point to Timeline, click Select All Frames • Click Edit on the menu, point to Timeline, click Copy Frames • Close rallySnd.fla (do not save changes) • Verify that cccHome.fla is open • Click the Event scene in the Scene panel • Click Frame 1 on Layer 1 of the Event scene • Click Edit on the menu, point to Timeline, click Paste Frames • Click Home in the Scene panel • Click Control on the menu, click Test Movie • Click the Click to continue button to compete the Event scene • Close the test movie window

  23. Lesson 4: Add Scenes (4) • Add interactivity to scenes • Verify that the Home scene is displayed • Move the Scene panel (if necessary) to view the stage • Click the Selection tool, then click the Upcoming Event button on the stage • Open the Actions panel • Verify that ActionScript 1.0 & 2.0 is displayed in the upper left • Verify the Script Assist button is selected • Verify b_event is displayed in the lower-left corner of the Actions panel • Click the Add a new item icon (+), point to GlobalFunctions, point to MovieClipControl, click on • Verify on(release){ is selected, click Add a new item, point to GlobalFunctions, point to TimelineControl, click goto • Click the Scene list arrow, click Event to complete the goto

  24. Lesson 4: Add Scenes (5) • Add a stop action to a frame • Click Frame 1 of the stopmovie layer • Verify stopmovie:1 is displayed in the lower-left of the Actions panel • Verify on(release){ is selected, click Add a new item, point to GlobalFunctions, point to TimelineControl, click stop • Verify that stop(); appears in the action script • Click Control on the menu, click TestMovie • Click the Upcoming Event button • Close the test movie window, the Scene panel, and the Actions panel

More Related