1. Flash II MIS439 Eva Tao evatao@iastate.edu March 19, 2007 Source: http://rex.public.iastate.edu http://Stumble.com http://video.stumbleupon.com/#p=bovga2cf59

2. Review Flash Animation Shape Tween Motion Tween

3. Hands-on Exercise Tweened Animation vs. Movie inside the Movie Masks ActionScript Buttons http://www.public.iastate.edu/~evatao/Flash/ Flash2.html

4. Tweened AnimationTweened Animation vs. Movie inside Movie 1.Start with an opening keyframe. 2.Open the pre-created animation FlappingBird.fla (File> Open> FlappingBird.fla)FlappingBird.fla 3.Click on the keyframe then choose Insert>Timeline>Create Motion Tween. 4.Close the motion tween by inserting a keyframe on the 50 th or any further frame. 5.Create a motion guide layer. 6.Draw a path pass by the main stage from left outside the stage to right outside stage. 7.Snap the symbol to the beginning of the path in the first keyframe. 8.Snap the symbol to the end of the path in the final keyframe. 9.Orient the symbol to the path then hit ‘Enter.’ 10.Hit “control + enter” to see the SWF (SWF will automatically save as a file)

5. Tweened Animation vs. Movie inside Movie (2)Movie inside Movie 1.Start with an opening keyframe. 2.Import the pre-created animation movie (File> Import> Import video) 3.Brownse the.mov location> click open> next> next> next> next> Finish 4.Type a file name for the.fla file 5.Hit control enter to play the movie. 6.Play with the embedded bar inside the movie to start from any point of the movie

6. Create Masks (1) 1.In a new file, import a background image to the stage, and name the layer background. 2.Right click on frame 20 to insert a frame. 3.Add 2 layers, right click on the top layer and click mask and name the layer mask. 4.Change the masked layer name to masked, click on the frame 1 to import a picture. 5.Right click on the frame 1 to create a motion tween, then right click on frame 20 to insert a key frame. Drag the image to different location. 6.Right click on the frame 1 in the mask layer and draw a circle anywhere on the stage, then right click on the frame 1 to create a motion tween. 7.Right click on the frame 20 in the mask layer and insert a key frame, then drag the circle to the image that will be masked. 8.Hit ctrl and enter to test the movie

7. Create Masks (2) Mask revealing image on the stage.

8. Raster images Defined by pixels or small squares Raster refers to a grid of pixels In Photoshop, Image>Mode pull-down menu –Convert first to grayscale –Convert again to bitmap Conversion –50% threshold –Pattern dither –Diffusion dither –Custom pattern –Halftone screen Create a transparent layer in Photoshop. –Save for the web as a png-24 or png-128. –Select the Transparency option Import png image to the stage. Break apart through the Modify pull-down menu. Import a png or jpg image to the stage. Choose Modify>Bitmap>Trace –Define the color threshold. –Set the minimum area. –Determine the curve fit. –Choose the corner threshold.

9. Three Types of Symbols

10. Definitions Symbol: an object that is defined once and can be used in multiple instances Instance: a copy of a symbol on the stage – advantage: keeps file size small Library: stores (and organizes) symbols, bitmaps, sounds, etc. –Library (Window>Libraries) contains all symbols and bitmaps used in a movie. –Common Libraries (Window>Common Libraries) provides pre-defined symbols, buttons, sounds, etc. –Shared Libraries allow use of assets from a source movie in multiple destination movies.

11. ActionScript (1) Punctuation Marks –Dot: the primary link symbol –Semilcolon: indicates the end of a statement –Braces: groups and separates statements –Parentheses: groups statement arguments or operations Syntax –Is the set of rules that ActionScript uses –Uses punctuation marks, spaces, or non- spaces

12. ActionScript (2) Object-based Script –applied to an object –Click on the object. –In the Action panel, apply the script. Frame-based Script –applied to a frame –Create a layer for frame-based actions. –Click in the frame on the actions layer. –Add a keyframe. –In the Action panel, apply the script.

13. Annotated Actions Panel

14. Button Symbols Four-frame timeline –Up state –Over state –Down state –Hit state Button symbol timeline with all four states

15. ActionScript Button Highlight the layer and import a button from the library, then click on the button Open Action> Global functions> movie clip control> Open Action> Global functions> Timeline control> on (release) { stop(); } on (release) { play(); } on (release) { prevFrame(); } on (release) { gotoAndStop("Basics and Animation", "Frame-by-frame"); }

16. Properties Window for Text

17. Create a Active ButtonCreate a Active Button (1) 1.In the new file, go view>rulers to set a 220 pixels vertical guide and 100 pixels horizontal guide 2.Import 1 st photo to the stage by click File>Import> Import to stage 3.Right click on the frame 10 to insert a blank keyframe, then import the 2 nd image 4.Right click on the frame 20 to insert a blank keyframe, then import the 3 rd image 5.Right click on the frame 25 to add a frame 6.Insert a layer name it action and click on the frame 1 then Open Action> Global functions> Timeline control> stop(); same in frame 10 and frame 20 7.Insert a layer and name it text, then type 3 names to indicate each image and adjust them by Modify>Align>Distribute Heights

18. Create a Active Button (2) 8.Insert a layer and name it button and create a rectangle then Modify>Convert to Symbol 9.Double click on the symbol and right click on the hit frame to create a keyframe, then click on Up and hit delete to make the button invisible 10.Click Scene 1 and drag rectangle on the 3 names 11.Click on the 1 st button then Open Action> Global functions> movie clip control> on (release) {gotoAndStop (1);} 12.Click on the 2 nd button then Open Action> Global functions> movie clip control> on (release) {gotoAndStop (10);} 13.Click on the 3 rd button then Open Action> Global functions> movie clip control> on (release) {gotoAndStop (20);} 14.Hit Ctrl and enter to test movie

19. Creative Flash http://www.atomfilms.com/film/animator_vs _animation_2.jsp Nick O'Harahttp://www.atomfilms.com/film/animator_vs _animation_2.jsp http://www.ugoplayer.com/animation/halof unnysituations.html Kyle Schlapkohlhttp://www.ugoplayer.com/animation/halof unnysituations.html http://www.nrg.be/ Hang Truonghttp://www.nrg.be/ http://www.homestarrunner.com/tgs8.html Ilana Mainagahttp://www.homestarrunner.com/tgs8.html http://www.ebaumsworld.com/2006/06/sup ercoolpicillusion.html Charles Bradley Trotthttp://www.ebaumsworld.com/2006/06/sup ercoolpicillusion.html

20. Mission for next class Send me a Flash video which contain the technique you will teach others in the class next week mis439spring2007@yahoo.com by Sunday March 26, 2007mis439spring2007@yahoo.com

21. That’s it for today.