Introduction to Macromedia Flash

1. Introduction toMacromedia Flash Adobe Kevin McManus the University of Greenwich

2. We are going to look at • What is Flash • an IDE to create shockwave media • Animation • timelines, symbols, tweening • Programming with ActionScript • Sound • Publishing on the Web • Morphing • Fonts • Forms the University of Greenwich

3. Shockwave • Binary file format for Flash web pages • small download sizes • open standard • requires a browser to have a shockwave plug-in • only from macromedia • currently at version 8 in Adobe Flash CS3 • Supports all features found in DHTML • plus so much more • extensive animation support • vector and bitmap graphics • guaranteed pixel perfect on all browsers • providing they have a shockwave plug-in • no more browser compatibility issues the University of Greenwich

4. Shockwave • Created using the Flash environment • sophisticated IDE • work with .fla files and compile to .swf files to publish • graphics + animation toolkit • part of Adobe Creative Suite 3 • Dreamweaver, Contribute, Fireworks, Illustrator, PhotoShop • not ColdFusion • Other shockwave tools • Swish and many others • Sophisticated applications • ActionScript programming in the client • Flash remoting to access server side scripts • XML and web service interfaces the University of Greenwich

5. Animation • Cell based (frame) animation • key frames • motion tweening • shape tweening - morphing • Path based (vector) animation • follows an object’s transition over a vector • Combination of cell and path based animation • Computational animation • object moves by calculating its x and y coordinates • Program or script based animation • ActionScript - Flash’s scripting language • ECMA script • flexible, powerful, interactive • not as powerful as Lingo - Director’s scripting language the University of Greenwich

6. Flash Animation IDE with the ability to support • Scripted behaviors • ActionScript • User interaction • events • forms • Key Frames • timeline • Tweening • motion • shape • Layers • Symbols, buttons and movie clips the University of Greenwich

7. Flash • IDE with lots of training support in built • A set of lessons implemented as interactive Flash movies complete with template files • Getting started with Flash • Illustrating in Flash • Adding and editing text • Creating and editing symbols • Understanding layers • Creating tweened animation • Creating buttons • Comprehensive set of HTML tutorials • Conventional HTML help system • It is a good idea to complete the lessons before attempting to do anything with Flash the University of Greenwich

8. Symbols • Each symbol has a unique timeline and stage, complete with layers • When you create a symbol you choose the symbol type, depending on how you want to use the symbol in the movie • graphic symbols • button symbols • movie clip symbols • Use graphic symbols for static images • to create reusable pieces of animation that are tied to the timeline of the main movie • graphic symbols operate in sync with the movie's timeline • Interactive controls and sounds won't work in a graphic symbol's animation sequence the University of Greenwich

9. Symbols • Use button symbols to create interactive buttons in the movie that respond to events • onRollOver, onPress, onRelease, etc • Define the graphics associated with various button states • assign actions to a button instance. • Use movie clips symbols to create reusable pieces of animation. • Movie clips have their own multi-frame timeline that plays independent of the main movie's timeline • movies inside movies • can contain interactive controls, sounds • even other movie clip instances. • Place movie clip instances inside the timeline of a button symbol to create animated buttons. the University of Greenwich

10. Bouncing Ball • Exercise to animate a bouncing ball • Make the ball • Turn it into a symbol • Create a motion tween • Modifying the tween • Guide lines • Easing • Buttons the University of Greenwich

11. Make the Ball • Draw with the oval tool • Fill with a texture to give a “3D” effect • Save it as a symbol in the library • why? • can’t use it until it is in the library • motion tweens work with symbols • Before a shape is a symbol in the library it is a graphic on the stage consisting of strokes and fills the University of Greenwich

12. Keyframes • The symbol exists in a keyframe (1) in a layer on the timeline • insert another keyframe in the layer • right click in a blank frame (30) • set a motion tween between them • right click between the two key frames • In the new key frame move the symbol to a different position • Flash interpolates • move the play head to see the effect the University of Greenwich

13. Motion Tween • You can animate by creating intermediate keyframes that modify the ball’s path the University of Greenwich

14. Motion Tween • But this is clumsy • the interpolation is not effective • Add guide lines using a guide layer to effectively control motion • force the symbol to follow a path the University of Greenwich

15. Guide Layer • They’re still jagged -let’s smooth them and curve them the University of Greenwich

16. Guide Layer the University of Greenwich

17. Easing • Easing is a way of controlling the frame rate to… • accelerate into a scene • decelerate out of a scene note orient to path the University of Greenwich

18. Buttons • There is an internal timeline (state-line) associated with each button • When the user interacts with the button (a mouse event) the button references its internal timeline and performs the action set for it • There are four button states: • Up (first frame) dormant no interaction with mouse • Over (second frame) rollover by mouse • Down (third frame) mouse button down and over button • Hit (fourth frame) not seen by user, defines the area that responds to the mouse the University of Greenwich

19. Buttons • Insert another layer and create a button symbol • Double click the symbol to see it’s timeline • Up must have some content • visual element for user interaction the University of Greenwich

20. Buttons • Over and Down • a keyframe must be inserted (or copied from the Up state) • behaviours can then be associated using ActionScript • appearance of the button should be modified to show the state change • test the movie to see the button behaviour

21. Buttons • Hit • inserting a blank keyframe here stops the button working • defining the hit area is then necessary, this supercedes previous hit area definitions • why do this? • If you are using text as a button only the stroke of each character is considered a hit area. A hit area allows all of the box space of the text to respond to the mouse. the University of Greenwich

22. ActionScript • ActionScript provides elements, such as actions, operators, and objects, that you combine with scripts that tell your movie what to do • events, such as mouse overs, button clicks and key presses trigger these scripts. • e.g. use ActionScript to create navigation buttons for your movie • You can write simple scripts without a full understanding of ActionScript. • to begin working with ActionScript use the built-in tutorial resource Help > Tutorials > Introduction to ActionScript. the University of Greenwich

23. ActionScript • In Flash, you use the Actions panel to write ActionScript. • Attach scripts to buttons, movie clips or frames to create the required interactivity • In normal editing mode the Actions panel helps you to build scripts by choosing options from menus and lists. • In expert editing mode you enter text directly into the Script pane. • In both modes code hints help you complete actions and insert properties and events. the University of Greenwich

24. ActionScript • Add ActionScript to stop the movie in the last frame select the last frame expert view add script

25. ActionScript • Add ActionScript to handle events for buttons or find the button in this menu select the button add script to replay the movie

26. Sound • Flash offers a number of ways to handle sounds. • Make sounds that play continuously independent of the timeline • (sound has it’s own timeline) • Synchronize animation to a sound track • Add sounds to buttons to make them more interactive • make sounds fade in and out for a more polished sound track. the University of Greenwich

27. Sound • There are two types of sounds in Flash: • event sounds • an event sound must download completely before it begins playing, and it continues playing until explicitly stopped. • stream sounds. • stream sounds begin playing as soon as enough data for the first few frames has been downloaded • stream sounds can be synchronized to the timeline for playing on a web site. the University of Greenwich

28. Sound • Use Adobe Soundbooth to create audio files • or a wave editor such as GoldWave or CoolEdit • Import the sound into a movie File > Import to Library… • Select compression options for individual sounds • using the Sound Properties dialog box • define settings for all sounds in the movie in the Publish Settings dialog box. • Use sounds in shared libraries, to link a sound from one library to multiple movies. • Use the ActionScript onSoundComplete event to trigger an event based on the completion of a sound. the University of Greenwich

29. Sound • Create a layer to carry the sound • insert keyframes into the sound layer • drag sounds from the library onto the stage the University of Greenwich

30. Publishing • Movies are usually published as shockwave files • embedded into HTML pages File > Publish Settings… • Can also publish in other formats - GIF, QuickTime, etc. the University of Greenwich

31. HTML Embedding <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Arrow</title> </head> <body bgcolor="#ffffff"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="550" height="400" id="Arrow" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="Arrow.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <embed src="Arrow.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="Arrow" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </body> </html> Flash creates an HTML template using <embed> nested inside <object> for browser compatibility the University of Greenwich

32. XHTML Strict • Strictly speaking there is no <embed> element in XHTML • Could simply not include the <embed> element in the web page containing the shockwave • but then some browsers may not work • A workaround is to nest two <object> elements • use CSS to hide one of the objects • exploit some IE CSS quirks • see the XHTML 1.1 example in the teaching material the University of Greenwich

33. Shape Tweening • Flash can transform one shape into another over a sequence of frames • shape tweening (morphing) • Insert two keyframes into the timeline • Insert graphics into the keyframes • Click on the timeline between the two keyframes and select Shape from the Tweening menu in the properties panel • the frames are coloured pale green with an arrow between them • Use the onion skin control to see the intermediate stages • Add shape hints to control the tweening Modify > Shape > Add Shape Hints the University of Greenwich

34. Shape Tweening onion skin control shape hints

35. Fonts • Flash provides an extensive font library • Insert some text onto the stage using the Text tool from the toolbox • Modify it’s properties • size, colour, font, style, justification, kerning • Text is created in symbolic form • Break the text apart (Modify) to • decompose strings into characters • decompose characters into stroke and fill graphics • allow shape tweening the University of Greenwich

36. Fonts

37. Forms • Use text fields as input devices • select type Input Text from the properties • give the text fields a name • Other input devices can be found in the Components window • checkboxes, menus, etc • set their Properties • Create Button symbols • Add ActionScript to submit the form the University of Greenwich

38. Forms more GUI components add code to the button the University of Greenwich

39. Forms on (release) { // Prepare the data transfer object. var sender = new LoadVars(); // Custom form-submission function. function submitForm () { if (validateForm()) { // Assemble text field values into our LoadVars object. sender.user = name_txt.text; sender.pass = passwd_txt.text; // Hidden field sender.foo = "bar"; // Transfer the data to the server-side script. sender.send("http://staffweb.cms.gre.ac.uk/~mk05/cgi-bin/form.pl", this, "GET"); } else { //respond to user } } function validateForm() { // test input data return true; } submitForm(); } get the text from the text boxes send data to a URL the University of Greenwich

40. We have not looked at... • Sophisticated ActionScript • Remoting • AJAX like applications • see teaching material for example • XML and web services • Video • Flex the University of Greenwich

41. Why not to Flash • Flash is evil • Clearly there are accessibility issues associated with Flash but does that make Flash intrinsically evil? Macromedia says Flash is "the solution for producing and delivering high-impact web sites." It's also a solution for making your site highly annoying and downright unusable. dack.com the University of Greenwich

42. Conclusions • Pixel perfect applications • no browser compatibility problems • An IDE that really helps • no more mucking around with markup • Fast downloads • compressed binary instead of flatulent markup • Fast response • easy partial page updates • Not cheap • but hardly expensive the University of Greenwich