Using Flash to Enhance Instruction

1. Using Flash to Enhance Instruction What is Flash? How Can Flash be used for Education? Flash Tutorial Credits: Group Five (Paul Alley, Melissa Couitt, William Jones) ETC 667, Northern Arizona University Spring, 2007

2. What is Flash?

3. Wikipedia Definition: “Adobe Flash, or simply Flash, refers to both the Adobe Flash Player, and to the Adobe Flash Professional multimedia authoring program. Adobe Flash Professional is used to create content for the Adobe Engagement Platform (such as web applications, games and movies, and content for mobile phones and other embedded devices). The Flash Player, developed and distributed by Adobe Systems (which acquired Macromedia in 2005 in a merger that was finalized in December 2006), is a client application available in most common web browsers. It features support for vector and raster graphics, a scripting language called ActionScript and bi-directional streaming of audio and video. There are also versions of the Flash Player for mobile phones and other non-PC devices.” (http://en.wikipedia.org/wiki/Adobe_Flash)

4. “Since its introduction in 1996, Flash technology has become a popular method for adding animation and interactivity to web pages; several software products, systems, and devices are able to create or display Flash. Flash is commonly used to create animation, advertisements, various web-page components, to integrate video into web pages, and more recently, to develop rich Internet applications.” (http://en.wikipedia.org/wiki/Adobe_Flash)

5. Generic Definitions: • Flash is a vector animation (read about vector animation software) software, originally designed to create animations for display on web pages. Vector graphics are ideal for the web because they are so lightweight. (http://www.killersites.com/articles/articles_FlashUse.htm)

6. Flash player is a plug-in that allows your browser to play Flash movies. • Web designers love Flash movies because they can have moving pictures, games, and interactivity on pages that download in a reasonable amount of time. • A web page built using Flash might have cool buttons, or menu bars that change as you make choices. It could let you play a game, or do a drawing. (http://www.bbc.co.uk/webwise/askbruce/articles/video/flash_1.shtml)

7. History of Flash(http://en.wikipedia.org/wiki/Adobe_Flash) • FutureSplash Animator (Spring 10 April1996) - initial version of Flash with basic editing tools and a timeline • Flash 1 (November 1996) - a Macromedia re-branded version of the FutureSplash Animator • Flash 2 (June 1997) - Released with Flash Player 2, new features included: the object library • Flash 3 (31 May1998) - Released with Flash Player 3, new features included: the movieclip element, JavaScript plug-in integration, transparency and an external stand alone player • Flash 4 (15 June1999) - Released with Flash Player 4, new features included: internal variables, an input field, advanced Actionscript, and streamingMP3 • Flash 5 (24 August2000) - Released with Flash Player 5, new features included: ActionScript 1.0 (based on ECMAScript, making it very similar to JavaScript in syntax), XML support, Smartclips (the precursor to components in Flash), HTML text formatting added for dynamic text • Flash MX (ver 6) (15 March2002) - Released with Flash Player 6, new features included: a video codec (Sorenson Spark), Unicode, v1 UI Components, compression, ActionScript vector drawing API • Flash MX 2004 (ver 7) (9 September2003) - Released with Flash Player 7, new features included: Actionscript 2.0 (which enabled an object-oriented programming model for Flash), behaviors, extensibility layer (JSAPI), alias text support, timeline effects • Flash MX Professional 2004 (ver 7) (9 September2003) - Released with Flash Player 7, new features included all Flash MX 2004 features plus: Screens (forms for non-linear state-based development and slides for organizing content in a linear slide format like PowerPoint), web services integration, video import wizard, Media Playback components (which encapsulate a complete MP3 and/or FLV player in a component that may be placed in a SWF), Data components (DataSet, XMLConnector, WebServicesConnector, XUpdateResolver, etc) and data binding APIs, the Project Panel, v2 UI components, and Transition class libraries. • Flash Basic 8 (released on 13 September2005) - A less feature-rich version of the Flash authoring tool targeted at new users who only want to do basic drawing, animation and interactivity. Released with Flash Player 8, this version of the product has limited support for video and advanced graphical and animation effects. • Flash Professional 8 (released on 13 September2005) - Released with the Flash Player 8, Flash Professional 8 added features focused on expressiveness, quality, video, and mobile authoring. New features included Filters and blend modes, easing control for animation, enhanced stroke properties (caps and joins), object-based drawing mode, run-time bitmap caching, FlashType advanced anti-aliasing for text, On2VP6 advanced video codec, support for alpha transparency in video, a stand-alone encoder and advanced video importer, cue point support in FLV files, an advanced video playback component, and an interactive mobile device emulator. • Flash CS3 Professional (Now Released)

8. How can Flash be used for education?

9. How is Flash important as multimedia learning technology? Real life images • Allows for multimedia rich presentations. • These Flash movies can incorporate music, video, animation all at the same time. Incorporating Audio and video is easy.

10. Why use Flash? Here is a good example. This flash is talking about how X rays interact with matter. You can not see this interaction occurring because it is too small. As you can see, it is showing a demonstration of complex ideas. • Allows for demonstrations of difficult/tedious concepts • Interactivity • Open ended problem centered assignments

11. Extra benefits of using Flash • Strong visual cues/ visual representations of abstract concepts • Allows for modifying the channel of information delivered. (ie. some all audio, some all visual) • Student programming in flash shows problem solving, logical thinking, creativity • It can be used in Professional development to help train teachers and run simulations

12. Some good examples of Flash • This is a good elementary education Flash website on tangrams. It provides some good examples of what you can have your students do in Flash. • http://www.tygh.co.uk/tan/tan.htm • http://www.tygh.co.uk/students/index.html

13. Examples • Explore an ancient dynasty house in china. • http://www.pem.org/yinyutang

14. Example • Examine Frank Lloyd Wright’s falling water • http://www.mcah.columbia.edu/fallingwater/flash/index2.htm

15. Example • How can we forget one of the best examples. Virtual dissection of animals for biology • http://www.froguts.com/flash_content/index.html

16. Last example • Often times flash animation is used to demonstrate concepts that are either too big to grasp, or too small to see. This is a perfect example • It is called Universcale • http://www.nikon.co.jp/main/eng/feelnikon/discovery/universcale/index_f.htm This is obviously too large to handle, and difficult to see Or this is so small you cannot see it without an electron microscope

17. How does Flash enhance learning? • Great visual strength • Students to see the concepts not have to imagine them. • A Flash animation allows for dissection of animals, mixing of chemicals, seeing nuclear reactions, or a field trip to Mars, or back in time.

18. Interactivity • It offers the ability and power of choice to the students. The students who are using flash animations have the power and ability to choose what happens. • It can be a safe way to experiment with new and interesting subjects. Ie. mixing phosphorous and water in chemistry lab is not a good idea, but do it in flash and see what happens. • For students creating projects in flash, it allows them the opportunity to have self directed learning on assignments, to show their creativity, and demonstrate their knowledge of the topic.

19. Flash for individuals with disabilities • Flash can do this for accessibility • Hearing disabilities • Provide synchronized captions for any audio that conveys content • Photo epilepsy • Remove strobing content that flashes between 2 and 55 times per second • Motor disabilities • Ensure the Flash content is keyboard accessible • Do not require fine motor skills • Cognitive disabilities • Give users control over time sensitive content • Provide easy to use controls and navigation schemes • Be consistent • Use the clearest, simplest language appropriate to the content • Low vision • Provide plenty of contrast • Allow the Flash content to scale to a larger size • Blindness • Ensure screen reader accessibility or provide an accessible alternative • Ensure keyboard accessibility • Do not interfere with screen reader audio or keyboard commands

20. Flash Tutorial Introduction Topics: Flash Environment / Screen Layout Setting up Flash Projects Exporting Flash Movies Additional Resources Conclusion

21. Flash Tutorial – Introduction Welcome to Group Five’s Flash Tutorial! This tutorial is intended to be a “getting started” guide for people interested in learning how to use Flash, or people who are learning for the first time that “Flash” is not a bright burst of light used by photographers. Because using Flash is a complex skill (some would say art) learned over time, with much practice, you will probably not be a Flash expert after going through this tutorial. But, hopefully you’ll be a little more familiar with how Flash works, and understand how you can get started on your journey to becoming a Flash guru!

22. Flash Tutorial: Screen Layout Click on a an area of the Flash screen for details… Main Menu Bar Timeline Area Side Panels Main Tool Bar Scene Workspace Properties Panel

23. Flash Tutorial >> Screen Layout >> Main Menu Bar Next Topic File: Basic application commands (open, save, print, import, export, etc.) Edit: Basic editing commands (select, copy, paste, etc.) View: Zoom controls and other visual workspace options such as snapping and guides Insert: Options for placing items in the workspace from the project library, or other sources Modify: Controls for changing the document, image objects, timelines, etc. Text: Formatting and property options for text created in the Flash workspace Commands: Controls for running automated commands and scripts (similar to macros) Control: Movie playback controls and preview options Window: Components in the Flash screen layout which can be turned on or off Help: Tutorials, guides, and sample Flash sites to help get started or troubleshoot Flash projects

24. Flash Tutorial >> Screen Layout >> Main Toolbar Previous Topic Next Topic The ‘Tools’ section of Flash’s main toolbar contains several powerful tools for use in Flash’s workspace. The tools which appear to be arrows are for selecting, scaling, and moving items within the Flash workspace. There are also vector pen tools, text tools, shape tools, paint tools, gradient selectors, an eraser, and a color “eyedropper”. The ‘View’ section of Flash’s main toolbar provides a way of modifying the user’s perspective on the workspace without actually altering the movie. The “View” section contains a ‘hand’ tool which is an alternate method of scrolling in the workspace, and zoom tool which allows the users to zoom in or out on the workspace. The ‘Colors’ section of Flash’s main toolbar provides access to the fill and stroke color palettes, and also allows the user to switch between foreground and background colors. The ‘Options’ section of Flash’s main toolbar has shortcuts for workspace ‘snapping’ and vector pen point/curve options.

25. Flash Tutorial >> Screen Layout >> Timeline/Scene Selector Previous Topic Next Topic Click on any area highlighted in red to see details below…

26. Flash Tutorial >> Screen Layout >> Timeline/Scene Selector Previous Topic Next Topic Click on any area highlighted in red to see details below… • Project and Scene Selector • Flash can have multiple projects open at one time, just like MS Word can have multiple Word documents open concurrently. The tabs labeled “untitled” are the two projects currently open. • Flash projects typically consist of multiple scenes which can be selected here. It is not uncommon for a single Flash project to have dozens of scenes.

27. Flash Tutorial >> Screen Layout >> Timeline/Scene Selector Previous Topic Next Topic Click on any area highlighted in red to see details below… • Edit Scene Shortcut • Provides a shortcut to the “Edit” mode for the selected scene.

28. Flash Tutorial >> Screen Layout >> Timeline/Scene Selector Previous Topic Next Topic Click on any area highlighted in red to see details below… • Edit Symbols Shortcut • Provides a shortcut to the “Edit” mode for the selected symbol.

29. Flash Tutorial >> Screen Layout >> Timeline/Scene Selector Previous Topic Next Topic Click on any area highlighted in red to see details below… • Zoom View Control • Provides dropdown menu access to the workspace zoom controls.

30. Flash Tutorial >> Screen Layout >> Timeline/Scene Selector Previous Topic Next Topic Click on any area highlighted in red to see details below… • Layer Palette • Provides a list of layers in the current scene. Scenes are typically separated into individual layers, each with their own attributes and timeline controls.

31. Flash Tutorial >> Screen Layout >> Timeline/Scene Selector Previous Topic Next Topic Click on any area highlighted in red to see details below… • Timeline Palette • Displays timelines for each layer in the current scene. This scene only has one layer, so there is only one timeline visible. The interactivity and animation in Flash is embedded in logic (Flash Action Script to be precise) which corresponds to these timelines.

32. Flash Tutorial >> Screen Layout >> Timeline/Scene Selector Previous Topic Next Topic Click on any area highlighted in red to see details below… • Onion Skin Controls • The term ‘onion skin’ refers to the process of scrolling and searching through the Flash project (or any other timeline-based project), to preview and locate specific points in the Flash movie.

33. Flash Tutorial >> Screen Layout >> Timeline/Scene Selector Previous Topic Next Topic Click on any area highlighted in red to see details below… • Frame Rate Information • Frame-rate refers to the number of frames displayed per unit of time (usually frames per second, or fps). Different media have different frame-rate requirements. While 12fps may be just fine for most Flash animations (.swf), it may not be adequate for Flash video (.flv). Television typically requires 30fps, and film requires 24fps. However, the greater the frame-rate, the larger the file-size will be.

34. Flash Tutorial >> Screen Layout >> Timeline/Scene Selector Previous Topic Next Topic Click on any area highlighted in red to see details below… • Timeline Scrollbar • The timeline can become quite long, requiring the developer to zoom out on the timeline so more frames can be viewed at once. A Flash movie which lasts several minutes can become quite cumbersome to scroll through unless the user is skilled in the use of onion-skinning and timeline viewing.

35. Flash Tutorial >> Screen Layout >> Scene Workspace Previous Topic Next Topic The scene workspace is the area of the flash screen in which the developer views and edits the actual movie or scene. As you can see here, with all of Flash’s tools and palettes, screen space is a premium. Many Flash developers have two or monitors so they can dedicate one monitor to the scene workspace.

36. Flash Tutorial >> Screen Layout >> Properties Panel Previous Topic Next Topic The Properties Panel provides information on various attributes of the selected object in Flash. In this case, nothing in the Scene Workspace is selected so the properties of the entire Flash movie are displayed. The Properties panel is common to many Macromedia (now Adobe) applications such as Dreamweaver, Fireworks, and Freehand.

37. Flash Tutorial >> Screen Layout >> Side Panels Previous Topic Next Topic • The ‘Side Panels’ area of Flash contains several individual panels which provide additional features and functionality beyond what is available in the main menu or main toolbar. Commonly used side panels include: • Color Mixer: Fine-tuned color selection and control • Components: Commonly used Flash components • Behaviors: Scripting and other logic • Library: Multimedia items available for use in the current project

38. Flash Tutorial >> Setting up Flash Projects Previous Topic Next Topic A Flash project, or document, is saved as an .fla file, and contains all of the media and structure for the Flash movie. To create a Flash document, select “New” from the File menu of Flash. The “New Document” dialogue will open where you can either create a blank project from scratch, or select from a template. Before development starts for a movie or application, the frame rate and movie size must be configured through the document properties panel. Failing to do this up-front will have dire and time consuming consequences for your development

39. Flash Tutorial >> Exporting Flash Movies Previous Topic Next Topic • Flash, like many other graphics applications, deals with two fundamental types of files: • Source design files which can only be recognized with the full version of Flash (.fla)The source files which save entire Flash projects, and all individual components, are called .fla files. In order to modify the original movie, the developer must open the source .fla file in Flash. The source ‘.fla’ file in Flash is analogous to the ‘.psd’ file in Photoshop, which contains multiple editable layers, but is not ideal for mass consumption. • Exported files which can be played through a browser (.swf and .flv)The exported files which are made available for viewing on the web are called .swf files (pronounced “swif”). Recently, Flash also gained the ability to export video in the form of .flv files. In order to view the exported .swf or .flv file, the end user needs to have the free Flash-player plugin installed in their browser. These files are “flattened”, meaning they are no longer separated into their component parts (scenes, layers, objects, etc.). These exported .flv and .swf files are also much smaller than the original source .fla file, which makes them ideal for downloading over the World Wide Web.

40. Flash Tutorial >> Additional Resources Previous Topic Conclusion Adobe Macromedia Flash Support Center: http://www.adobe.com/support/flash/tutorial_index.html Kirupa Flash Tutorials:http://www.kirupa.com/developer/flash/index.htm W3C Flash Tutorial:http://www.w3schools.com/flash/default.asp Flash Kit Tutorials:http://www.flashkit.com/tutorials/ Tutorialized.com Flast Tutorialshttp://www.tutorialized.com/tutorials/Flash/1

41. Flash Tutorial >> Conclusion Previous Topic This concludes the “Tutorial” portion of Group Five’s Flash Animation presentation. We hope you’ve come away from this tutorial with a basic understanding of Flash software, and how Flash can be used to develop interactive, animated applications. While you’re probably not a Flash expert after having gone through this tutorial, you should now have a good idea of whether or not Flash is an appropriate application for your learning goals, and if Flash is something that you would like to learn more about.