1. Flash JLMC315 Eva Tao evatao@iastate.edu October 22, 2007 Source: http://rex.public.iastate.edu http://Stumble.com http://youtube.com http://www.xdude.com/thedough// http://css.ait.iastate.edu/ Joe Struss

2. About Flash Multimedia Web authoring application –Authoring file format:.fla Playback Requirements –Playable file format:.swf –Viewable inside of Flash, with Flash player, or in Browser with Flash plugin –Flash player or plugin is installed on more than 97% of Internet-enabled desktops worldwide—as well as on mobile phones and PDAs. 2

3. Important Flash Features Streaming capability –Flash movie starts playing before it is downloaded entirely Interactivity –Action (s) occurs at the press of a button or key, or when certain criteria are met. –Flash uses ActionScript (Flash programming language). Multimedia –Multiple forms of media (animation, sounds, video) in an integrated system 3

4. Starting Flash On a Macintosh, click on the Finder on the left bottom of the screen. Click on Applications then click on Adobe Flash CS3. On a Windows system, click under the Start icon then Select Programs, Adobe Applications, then Adobe Flash CS3. From the Flash starting screen— press Flash File (Actionscript 2.0) under Type of New Document. Pull down menu bar under Window to Workplace layout then over to Default. 4

5. Flash Interface 5

6. Toolbar Four distinct areas (Similar to the Photoshop): –Tools sections –View sections –Color sections –Options sections White Arrow/ Sub-selection: a unique tool for Flash to view and modify anchor points. 6

7. Menubar Modify option: –Modify Document/Movie to have a particular frame rate, size or background color. Control option: –Test a particular Flash movie or scene 7

8. Timeline - Layers (1) 8

9. Timeline - Layers (2) Use layers to organize everything on the stage. Keep frame scripts on one layer. When layer on the top of layer list, layer content will be in the front on the stage. Layer order can be changed by dragging layer up or down in the list. 9

10. Timeline – Definitions Frame (a unit/column on the Timeline) Keyframe –a point on the Timeline where the contents of a layer change –indicated by a black dot in the cell Blank Keyframe –indicates the beginning point for which there is no content on the layer End of Content Sequence –indicates the end point for which there is the same (or no) content on the layer Animation –illusion of motion by creating a change over time (changing the contents of successive frames) Frame Rate (in Property Inspector— frames per second 10

11. Stage This white area is the On- Stage area that people can see Background of the stage is gray. It is the Off-Stage area where items waiting to move or spin onto the Stage. Off-Stage items are not seen until they move onto the Stage. 11

12. Panels Movable Panels. Most often used are –Properties (object/tool information), –Color (color mixer), –Behaviors (Simple Scripts) and –Components (specialized tools). 12

13. Hands-on Exercise Tweened Animation Shape Tween Motion Tween Movie inside the Movie ActionScript Button Sound Effects Upload Flash to the Web Site 13

14. Tweened Animation 1.File> New> Flash File Actionscript 2.0> click OK to create a new file 2.File> Save> click desktop> name the file tweenedanimation.fla 3.Click on frame 1 4.Practice using drawing tools to draw a face - Use the pointer to select and move the shapes, and see how they clip each other. - Change to the arrow tool ( ) to change the color. 5.Intert> Keyframe to make next frame a keyframe 6.Add in a new item from previous draw 7.Hit ‘Enter’ to see the animation after create 10- 20 keyframes 14

15. Shape Tweening Only shapes (& their colors) can be shape tweened. Groups, symbols, or editable text, CANNOT be shape tweened. Can tween multiple shapes on a layer. Put each shape on its own layer for organization. Tweening is the act of filling in between Keyframes to create a morphing type of effect. 15

16. Shape Tweening (1) 1.Adding a 2 nd Layer by right click on the Layer 1 then click on Insert layer Click on frame one. 2.Choose the Brush icon from the Toolbar, 3.Select an brush size/shape and make a cloud on the the stage. 4.Right click on the 5 th frame on the Timeline then click on Insert a Blank Keyframe. 5.Make another bigger cloud with your brush in different spot from your previous one. 6.Right click on the 10 th frame and repeat step 4 until you reach Frame 25 to make total 5 clouds with different shape and color. 16

17. Shape Tweening (2) Right click on Frame 1 and click on Create Shape Tween option. Do this for all your keyframes. Hit Enter to run the movie. Hit Ctrl+Enter to Test Movie or by scrubbing the Timeline with the Playhead. Easing in and out in the Properties window. Hit Ctrl+z to undo, or Shift+F5 to delete a frame. 17

18. Shape Tweening (3) Overlapping Layer –On Layers that overlap items, the topmost Layer will be seen. –Drag ‘Layer 2’ down below Layer 1 so Layer 1 should overlap Layer 2 Invisible Layers –Hiding one or more Layers temporarily by clicking under the Eyeball icon next to the layer name. This will hide that Layer on the Stage. Click it again to reveal the Layer. 18

19. Shape Tweening (4) Adding a Name for the layer –Right click on Layer 2 to Insert Layer –Change the name of the new layer by double clicking on the Layer 3 name, then typing in duck and pressing Enter. 19

20. Publishing and Uploading (1) Save your Movie by pulling down under File on the menubar to Save as a.fla file. A.swf file is automatically created when you hit Ctrl+Enter after save. To Publish your Flash Movie for use on the Web, pull down under File to Publish Settings. By default, you will create a Flash file (.swf) and an HTML file (.html) when you publish. You will need to upload both of these files and use the.html file to view the.swf file. 20

21. Publishing and Uploading (2) Click the Flash tab and click the Protect from Import checkbox. This will protect your Flash file from being borrowed by other people on the Web. JPEG quality setting is also available here. Click the Publish button and click OK to create your.swf and.html files. Go to your desktop and Double-click the tweenedanimation.html file to view your work. 21

22. Motion Tweening Only symbols can be motion tweened. –Tweened element must be the only element on its layer. –Multiple parameters of the element can be motion tweened at the same time, e.g. size, location, rotation, skew, brightness, alpha, tint. 22

23. Motion Tweening (1) 1.File> Open> FlappingBird.fla to open the pre-created animation.FlappingBird.fla 2.Right click on the duck, then paste on the stage of duck layer of the tweenedanimation.fla file. 3.Right click on the frame1 of the duck layer, then click Create Motion Tween 4.Close the motion tween by right clicking on the 25 th frame to Inserting Keyframe 23

24. Motion Tweening (2) Ease in and out Motion Guide 24

25. 1.Right click on the duck layer then click Add Motion Guide 2.Click on guide layer, use Pencil tool to draw the path pass by the main stage 3.Click frame 1 on duck layer and snap the bird to the beginning of the path 4.Click frame 25 on duck layer and snap the bird to the end of the path 5.Orient the symbol to the path then hit ‘Enter.’. 6.Hit “Ctrl + Enter” to see the SWF 7.This is the Tweened Animation + Movie inside Movie 25 Motion Tweening (3)

26. Movie inside Movie (1) 1.File> New> Flash File Actionscript 2.0> click OK to create a new file 2.Import the pre-created animation movie (File> Import> Import Video) 3.Browse the mu.mov click choose button then continue button> click continue button to resize the video screen and play length> click continue button to change the skin> click Finish> type movie.fla to save the video as a flv filemu.mov 4.Save the fla file then hit “Ctrl + Enter” to play the movie. 5.Play with the embedded bar inside the movie to start from any point of the movie 26

27. Movie inside Movie (2) 1.To add a skin to a flv or change to a swf file 2. File> New> Flash File Actionscript 2.0> click OK to create a new file 3.Import the pre-created animation movie (File> Import> Import Video) 4.Browse the cat.flv click choose button then continue button> click continue button 2 times then change the skin> click Finish> type cat.fla to save the video as a fla file 5.Save the fla file then hit “Ctrl + Enter” to publish the swf file and play the movie.

28. Three Types of Symbols 28

29. 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. 29

30. Right click on the movie layer then click on Insert layer and name it button. Import play ( ) and stop ( )buttons from the library Click on the play button. Go to the Behaviors Panel under Window menubar and click on the Plus sign then drag down to Movieclip and over to Goto and Play at the frame or lable. Take the default options and click on OK. 30 ActionScript Button (1)

31. ActionScript Button (2) Click on the stop button. Go to the Behaviors Panel under Window menubar and click on the Plus sign then drag down to Movieclip and over to Goto and Stop at the frame or lable. Take the default options and click on OK. 31

32. ActionScript Button (3) Select the Right Arrow then click on the Edit Actions button in the Properties Panel. Click on the stop button. In the Action Script, change “1” in parentheses to nextFrame() 32

33. Click on the play button. In the Action Script, click on Global functions then Timeline control then Play on the left panel to change //Movieclip GotoAndStop Behavior this.gotoAndStop("1"); //End Behavior to play(); Hit “Ctrl + Enter” to play the movie. 33 ActionScript Button (4)

34. Sound Effects (1) Import formats –MP3; WAV (Windows); AIFF (Mac); and more (if QuickTime 4 installed). Streaming sounds –Begins to play as soon as beginning of sound file has downloaded –Use for continuous background sounds Event sounds –Must download completely and load into RAM before playing –Use for buttons Compression –Can be controlled at movie level (in publish settings), or as individual sound property 34

35. Sound Effects (2) 1.Import sound file wicky.wav to the library (file> Import> import to the library) 2.Right click on the button layer to create a New Layer and name it sounds 3.Click on the 1st frame of sounds layer 4.Click on the drop down menu of the “sound” in the properties in the bottom of the page and click on wicky.wav 5.Save and test movie. 35

36. Free Download Sound Web Sites http://www.flashkit.com/soundfx/ http://freeaudioclips.com/ http://www.fws.gov/video/sound.htm http://sounddogs.com/ 36

37. Upload Flash to the Web SiteWeb Site 1.Insert Flash files in the location you would like to load the movie in Dream Weaver (Insert> Media> Flash > Insert Swf, or Insert> Media> Flash Video> Insert Flv ). In Front Page (Insert> File> Insert HTML file) 2.Save in Dreamweaver or Frontpage 3.Go to your Web site and Refresh 37

38. Creative Flash 2advanced Red box Safety at Work Stickman Halo Illusion Red The chosen One 38

39. Happy Flash!! 39