Docstoc

16

Document Sample
16 Powered By Docstoc
					16                  Flash: Website / Portfolio                                                                                Flash
                                                                                                                     CS3 Web Media
                    Airshow: Intro to Movie Clips and Interactivity                                                 Module 16 of 23

T3 curriculum team:
                          Lesson overview:
Writers:                  Welcome to the Air Show! Get a front row seat as
Janet Davis               vintage aircraft perform stunts, loops, Immelman
Abigail Rudner
Steve Tatum               maneuvers, dives, and aerobatics. Pilot airplanes
                          to perform dangerous stunts. Make them loop, fly
Editors:                  in unison, leave smoke trails, and just have fun!
Chris Faust
Laura F. Hilliger         Learn how to create movie clips and set up basic
                          interactivity.
Q/A:
Susi Kohan

                          Tools used:
Kathy Young
Danielle Magee
                            • Drawing and Selection tools


                          Skills covered:
                            •   Create a movie clip with a motion tween on a guide path.
                            •   Write labels in the timeline.
                            •   Write button scripts that move the playback head from label to label.
                            •   Place movie clips in the timeline.
                            •   Duplicate movie clips.


                          What you will do:
                          Create a timeline template for interactive movies. Make live buttons. Build movie clip animations and
                          insert them in the Scene 1 timeline.


                          Prepare Work Area
                          1. Open file.
                                • File>Open>airshow.fla.
                                • Turn off snaps. View>Snapping>Edit Snapping.
                                 Deselect all.

                          2. Prepare the timeline.




                          Layer 5: Rename it Labels.
                                • Insert keyframes in frames 10, 20, 30, and 40.
                                 Insert a frame in Fame 50.
                                • To insert a label, select keyframe in the timeline. Go
                                 to Properties Inspector, label input field and type label
                                 name. Label will appear in timeline.
                                • Type the label stunt1 in Keyframe 1, stunt2 in 10, stunt3 in
                                 20, stunt4 in 30, stunt5 in 40.

                                                                                                                                  1
16   Flash: Website / Portfolio                                                            Flash
                                                                                  CS3 Web Media
     Airshow: Intro to Movie Clips and Interactivity                             Module 16 of 23


           Layer 4: Rename it Actions.
              • Insert keyframes in frames 9, 19, 29, 39, and 50.
              • Place stop actions in each of these keyframes. To insert a stop action, select
                keyframe in the timeline. Open Actions panel and type stop(); in the
                editor. @ will appear in timeline.

           Layer 3: Rename it Navigation.
              • All buttons will go here.
              • Insert a frame in Frame 50, Insert>Timeline>Frame.

           Layer 2: Rename it Movie Clips.
              • All animation or content media goes here.
              • Insert keyframes in frames 10, 20, 30, and
                40. Insert a frame in Frame 50.

           Layer 1: Rename it Background.
              • Place background symbol. Open Library
                Window>Library. Drag background out and
                place it so that the stage is covered.
              • Insert a frame in Frame 50.

           Make Buttons
           3. Make Flag Button
              • Make flag illustration. Choose stroke and fill
                colors. Stroke size: 1pt. Draw rectangle.
                Bring right points of rectangle together to
                make triangle. Curve left side of triangle.
                Draw pole with the line tool.
              • Select entire flag and convert to button
                symbol Modify>Convert to Symbol, choose
                Button. Name it Flag button 1. Click OK.
              • Choose Type tool and type the number 1
                on the flag.
              • Insert keyframes in over, down, and hit
                states.
              • Change flag stroke fill, and text colors in each
                state as desired.




                                                                                               2
16   Flash: Website / Portfolio                                                               Flash
                                                                                     CS3 Web Media
     Airshow: Intro to Movie Clips and Interactivity                                Module 16 of 23


           4. Duplicate buttons.
              • Open Library Window>Library. Select flag
               button.
              • To open Library options menu, click bullet
               list icon in the upper right corner of the
               Library panel.
              • Choose Duplicate.
              • In the Duplicate Symbol Dialogue box, rename it Flag button 2.
              • Double-click Flag button 2 in the Library to open it. Replace the number 1 with
               the number 2 in the up, over, and down states.
              • Repeat these steps to create Flag buttons 3, 4, and 5.

           5. Install Buttons.
              • Drag flag buttons
               from Library onto
               stage in Navigation
               layer. Align buttons.
               Modify>Align>Top, Modify>Align>Distribute Widths.

           6. Script Buttons.
              • Click Flag button 1 on the stage to select it. Open Actions panel
               Window>Actions.
              • Actions panel should be set as Button Actions. Type the following
               script into the editor:

                 on (release) {
                 gotoAndPlay(“stunt1”);
                 }


              • Script Flag button 2 to play stunt 2. Script each button to play each
               corresponding stunt.

           Make Movie Clips (Stunt 1)
           7. Create a movie clip.
              • Go to Insert>New Symbol.
              • Choose Movie Clip. Name:Stunt1MC. Click OK.

           8. Prepare movie clip timeline.
              • Rename layer 1 Motion Tween. Insert a new layer
               and rename layer 2 Path.
                                                                                                  3
16   Flash: Website / Portfolio                                                Flash
                                                                      CS3 Web Media
     Airshow: Intro to Movie Clips and Interactivity                 Module 16 of 23


           9. Draw path.
              • Draw a large loop in the center of the stage.
              • Save, File>Save, and navigate to Scene 1 timeline.

           10. Place stunt1mc in scene 1 timeline.
              • Locate Stunt1MC in the Library.
              • Drag it onto the stage in Frame 1 of the
                Movie Clips layer.

           11. Open clip from stage to continue
           creating movie.
              • Notice that a clip opened from the stage will
                show the background, an important point of
                reference. With the background visible, adjust
                the flight path of the first airplane stunt.
              • Double-click path to open movie clip.

           12. Adjust flight path.
              • Choose Selection tool. Move arrow
                next to the end of the path.
              • Pull left path end out to extend it off
                stage, left side.
              • Pull right path end to extend it off
                stage, right side.
              • Pull with arrow to adjust loop size in
                center stage.
              • Adjust curves if necessary.
              • Insert a frame in Frame 50 of the path layer.

           13. Motion Tween airplane; place plane.
              • Drag airplane symbol from Library and
                place it in Frame 1 of motion tween layer.
                Position it on stage to be off stage, left side,
                facing right.

           14. Insert ending keyframe.
              • Choose Frame 50 in Tween layer.
              • Insert ending keyframe Insert>Timeline>Keyframe.



                                                                                   4
16   Flash: Website / Portfolio                                                                      Flash
                                                                                            CS3 Web Media
     Airshow: Intro to Movie Clips and Interactivity                                       Module 16 of 23


           15. Assign the beginning keyframe the motion tween command.
              • Click the beginning keyframe to activate it
                and orient the Properties Inspector to show frame
                controls.
              • In Properties Inspector, Tween menu choose
                Motion. Set Easing, Rotation, and Orient to Path
                controls if desired. Blue arrow appears in the
                timeline.


           16. Reposition beginning and ending plane symbol instances.
              • Select plane and move it to beginning location.
              • Click ending keyframe to activate it.
              • Select plane and move it to ending location.


           17. Designate guide and guided layers.
              • Go to Path layer. Double-click the small rectangle next to the lock, or go to
                Modify>Timeline>Layer Properties. Layer Properties dialog box opens.
              • Choose the Guide radio button. The Path layer is a
                Guide layer.
              • Go to Motion Tween layer. Double-click the small
                rectangle again to open Layer Properties box.
              • Choose the Guided radio button. The Motion Tween layer is
                the Guided layer.
              • Observe the icons next to layer names that indicate layer types have changed
                to indicate guide and guided layers are designated.

           18. Snap airplane symbol to path.
              • Turn on all snapping View>Snapping>Edit Snapping.
                Check all options.
              • Click Frame 1 keyframe.
              • Select airplane on the stage. Drag it over beginning of path.
              • While dragging, look for small circle that marks the center
                of the airplane. Snap the small circle to end, where path
                begins.
              • Click last motion tween keyframe, Frame 50.
              • Select second airplane instance on the stage. Drag airplane over end of path.
              • Snap small circle to end of path.
              • Save and test movie.
                                                                                                         5
16   Flash: Website / Portfolio                                                                    Flash
                                                                                          CS3 Web Media
     Airshow: Intro to Movie Clips and Interactivity                                     Module 16 of 23


           Stunt 2: Duplicate Symbols
           19. Place movie clips
              • Navigate to Scene 1 timeline.
              • Select Frame 10 of the movie clip
                layer.
              • Open the Library and drag 3 to 6
                instances of the Stunt1MC clip onto
                the stage. Position a few instances to
                enter from the left and the remaining instances to enter from the right. To flip
                them horizontally, go to Modify>Transform>Flip Horizontal.

           20. Apply effects.
              • Apply tint effects to the planes to make them different colors.
              • Use Free Transform tool to rotate the planes and make any further adjustments.
              • Also resize a few to make some appear nearer and others farther away.
                Modify>Arrange brings instances to the front or send them to the back.
              • Test the movie.




           Extended Activity: Try to build stunt, 3, 4, or 5.
           Stunt 3: Immelman maneuver.

           What is an Immelman Turn?

           The Immelman turn is a simple yet very
           effective maneuver under the proper tactical
           circumstances. The name is derived from its
           inventor Max Immelman, a WWI German Ace
           who devised the method. At the top of the
           loop the aircraft is inverted and the pilot rolls
           the aircraft back into the upright position.

           For more information visit this URL:
           http://www.furball.warbirdsiii.com/krod/ACM-immelman.html

           Create this animation using a motion tween and a guide path. Select Orient to Path,
           or insert additional keyframes and use Free Transform tool to reposition the plane
           along its flight path. Another choice might be Modify>Transform>Flip Vertical.



                                                                                                       6
16   Flash: Website / Portfolio                                                              Flash
                                                                                    CS3 Web Media
     Airshow: Intro to Movie Clips and Interactivity                               Module 16 of 23


           Stunt 4: Flying tigers.

           Who were the Flying Tigers?

           During the summer of 1941, 300 young American men and women secretly trained
           in the jungles of Southeast Asia, preparing to face the Japanese Air Force in combat
           over the skies of China and Burma. Within weeks of the Japanese attack on Pearl
           Harbor, the daring exploits of the American Volunteer Group (AVG) captured the
           imagination of the world. The Chinese called them Fei Hu, for the shark’s teeth
           painted on their planes. The world knew them as the Flying Tigers.

           For more about their story visit this URL: http://flyingtigersavg.com/tiger1.htm

           To create this animation, motion tween an airplane across the stage. In a separate
           layer create a shape tween. Paint a few marks with the brush tool to resemble smoke
           in the first keyframe of the shape tween, and draw the phrase “Flying Tigers” in the
           last keyframe of the shape tween.




           Stunt 5: Airforce of aerial acrobats.

           Create an interesting set of maneuvers. Use all the tools and methods learned in this
           module to build an airforce of aerial acrobats.


           Classroom Applications:
              •
              •
              •
              •

                                                                                                  7

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:54
posted:11/25/2011
language:English
pages:7