AIM (Animation, Interaction, Multimedia) Your Projects with Flash: Interaction

Course Information Syllabus Calendar Requirements CourseQuest Workshop Course Resources Exploration Projects Applications Approaches Evaluation Basics Animation Interaction Multimedia Planning Issues Packaging		Interaction with ActionScript Although Flash creates excellent animations, it’s also possible to make your project interactive. In other words, the project can change its behavior or appearance in response to user actions. For example, pressing a button may trigger music to play or an animation to start. A blank map or timeline becomes interactive when "hot spots" are added to particular areas. A list of questions and answers become engaging when each answer provides different feedback. A bunch of graphics become a tool when users can drag elements around the screen to create their own project. Try It! Explore examples of interactivity including Anatomy of a Rover from PBS NOVA, Art Games from the Albright-Knox Art Gallery (NY), Icovia Room Planner, and Student Interactives from Readwritethink. What makes these examples "interactive"? Why are the effective or appealing? The following links take you to the resources on this page. Types of Interactivity Active Learning ActionScript in Flash Components in Flash Adding Interactivity to Flash Projects Learn More
		Return to the Top
		Types of Interactivity Developing quality interaction takes careful planning. Match the needs of your audience with engaging, interactive elements. Question and Answers To check understanding To prompt attention To expand thinking Non-Linear Access For alternatives For depth For remediation Tools Creativity Tools - write, draw, paint Utilities - mail, print, notes, forms, surveys Reference Tools - glossary, definitions, examples Try It! Explore examples of interactivity including Approximating Pi at PBS NOVA, Destination: Modern Art from the Museum of Modern Art (NY), Dogs Around the World at PBS NOVA, WickED Interactives, Student Interactives at Readwritethink, and Pauly Playhouse. What different types of interactivity can you identify? Return to the Top
		Active Learning Interactivity is an important element of an effective learning environment because it gets students actively involved with the instructional materials. Rather than passively viewing the screen, users are asked to point, click, and drag which requires students to make choices, solve problems, and draw conclusions. As you build your interactive elements, consider each of these areas of active learning: Motivation Attention Engagement Challenge Critical Thinking Creative Thinking Read Bill, David T. (2003). Popular Theory Supporting the Use of Computer Simulation for Experiential Learning (PDF document) from Liquid Knowledge Group. Learn about why active learning is important. Try It! Explore the Online Activities and Interactive Learning at the Scholastic website for many examples of interactivity. Building Language for Literacy at Scholastic Make a Word Activity from Clifford Interactive Storybooks at Scholastic Flashlight Readers at Scholastic I Spy Online Games at Scholastic Monster Bugs from Magic School Bus at Scholastic Puzzled States from Magic School Bus at Scholastic Identify the interactive element. Are you pointing, clicking, or dragging? How do these activities active involve students in learning? Which are most and least effective? Return to the Top
		ActionScript in Flash You’ll be using an authoring language called ActionScript to write simple programs to control interactions in your project. ActionScript is an object-oriented programming language. All interactions have two elements: events and actions. Events are triggers. They are things that happen while the movie is playing such as clicking a button or rolling over an image. An event also occurs when things happen on the Timeline such as when the Playhead reaches a particular keyframe. In Actionscript, you’ll be using words such as on release and on mouseOver to describe these events. Actions are short instructions that tell Flash what things should happen as a result of events. For example, when a mouse is clicked a sound might play, elements might appear or disappear, a series of frames might be skipped, or data might be sent to a database for analysis. Regardless of the type of interactivity, ActionScript is an authoring language that is used to specific what should happen when an event is triggered. You need to learn enough about ActionScript to be able to build in the specific commands needed to accomplish your goals. Keep in mind that coding is an exact science. A misplaced space or incorrect character will lead to an error. Buttons are a common source of interactivity. Flash buttons are designed to automatically detect events such as mouse roll overs and clicks. You can write simple ActionScripts to control the action. ActionScript 2.0 vs ActionScript 3.0 Two versions of ActionScript are currently being used to create interactivity on Flash projects. Both ActionScript 2.0 and ActionScript 3.0 are available in the new versions of Flash. As a result, you can choose which version best meets your needs. ActionScript 2.0 is continuing to be supported because it's sometimes easier to use than the newer ActionScript 3.0. When you create a NEW flash project, you can choose between ActionScript 2 or 3. The options are Flash File (ActionScript 3.0) or Flash File (ActionScript 2.0). If you're not sure which you are using, choose File>Publish Settings>Flash and it will provide the ActionScript Version. Although it's possible to convert a project from 2.0 to 3.0, it messes up coding and is not recommended. If you are a beginning user, consider using ActionScript 2.0. If you are an advanced developer, you may choose to use ActionScript 3.0. Consider your experience with computer programming. Getting into extensive online quizzes and the automatic checking of answers may be too big a leap for beginners. Getting things to drag is easy, but detection and checking answers is much more complicated. Use your best judgment in 'stretching' your skills and selecting your techniques. Read Interaction Design Primer from Adobe for ideas about designing interactivity on screen as compare to designing for print products. Read Getting Started with ActionScript For more tutorial instruction, help, and ideas for ActionScript; Adobe provisions include the following: ActionScript 3 Guides, Tutorials, Samples Flash Professional ActionScript 2.0 Introduction to ActionScript 3.0 Trying to decide between ActionScript 2.0 and 3.0? Read Six Reasons to Use ActionScript 3.0 (Aug 2008) by Lee Brimelow. Also, skim the Migrating from ActionScript 2.0 to ActionScript 3.0: Key Concepts and Changes (June 2010) by Dan Carr to learn more. Watch It! If video tutorials are a preferred way of learning how to add interactivity using ActionScript with Adobe Flash CS5, go first to IT Training's Lynda page. Proceed to the lynda.com tutorials (link near top of entry page; redirect to login page). Look within Flash Professional CS5 Essential Training with Todd Perkins (Listed / linked on 2nd page of the index - within the Adobe CS5 section). Chapter 9 is devoted entirely to Adding Interactivity with ActionScript; there are 10 video tutorials beginning with "Understanding ActionScript 3.0." Note that the two video clips on controlling video and audio (sounds) will be helpful in the next segment on incorporating multimedia elements in Flash products. Additional instruction can be found in another video tutorials series by Todd Perkins: ActionScript 3.0 in Flash Professional CS5 Essential Training. (Listed / linked to on the first page of the index; first item under the Adobe CS5 heading). ActionScript 3.0 Quick Reference Guide (2008) by David Stiller, Rich Shupe, Jen deHaan, Darren Richardson is a great book. If you'd like to read sample chapters go to Adobe's website to read about copy motion, display list, events, and migration.
		Try It! Try Helen Triolo's flash-creations website contains the following wonderful short tutorials. Read ActionScript: Flash's Programming Language and Some Notes about ActionScript Classes by Helen Triolo at Flash Creations. These pages provide a great overview to ActionScript. They also have many examples to extend your skills as far as you'd like to go. You just need to read the basics on this page, but if you really want to extend your skills beyond this class, consider paying for access to her examples. In this course, you won't have time to master all of the following areas, but you should be able to add some basic interactive elements into your projects. Declare/Assign Comments, Trace Simple Data Types Arrays & Objects Code Structures Operators Beyond Buttons Toggle Controls Drag and Hit Bee Game Dart Shooter Sound Control Easing Slider Components Intro Stop/Replay Movieclips Intro Movieclip Reference Site Structure 1 Slideshow Movieclip Contact Form Scroll Resume Preloader Site Structure 2 Return to the Top
		Components in Flash Components are pre-built pieces that make Flash easier, faster, and more effective. They include User Interface, media, and data components. Keep in mind that many of these component require knowledge of ActionScript to implement, so they may be overwhelming for beginners. Don't worry, keep it simple. Try following an example and using a sample rather than starting from scratch. Let's explore some learning guides about components from the Adobe Flash Developer Center: Examining ActionScript 3 Components Examining ActionScript 2.0 Components Read Using the Button Component (June 2010) by Peter deHaan Read Using the Label component (July 2010) by Peter deHaan Return to the Top
		Adding Interactivity to Flash Projects Once you understand the basics of ActionScript, the options are endless. It's not necessary to memorize code. Instead, use the help options in Flash and the ActionScript objects that are already precoded. Simply modify them to fit your needs. Many websites contain ActionScripts you can copy and use. Let's explore some common interactive applications. Drag and Drop. From puzzles to building snowpeople, there are lots of applications of draggable symbols. Here are some ideas: Drag healthy food into a bag, mouth, table. Drag words into an order, categories, matching picture Drag puzzle pieces Drag tools to perform operation, solve problem, etc. Drag to reveal answers underneath visual Drag letters for a scrabble game, hangman Drag words for magnet poetry, fill-in-blank Drag objects to create a snowperson, dressed person, Christmas tree, Gingerbread house, decorated cookie, pizza There are many library applications of Flash interactivity. Think about a book shelving game or an exploration the Dewey Decimal System. Introduce young people to books and authors or review the layout of your library. Try It! Go to Dress Me Up at PBS's Colonial House, Nobody's Perfect at ArtsEdge, Make a Tidepool at the Monterey Bay Aquarium, Virtual Jack-O-Lantern from The Worlds, and Virtual Snowman to see examples. Notice what happens when the items are dropped. What other applications of this technique can you envision? Let's explore a few cool techniques for creating interactive elements in Flash. These were suggested by students in the Flash class and were written in ActionScript 2.0: Button action. The following tutorials help with Simple Buttons from EchoEcho and Advanced Flash Buttons at SmartWebby. Forms in Flash. There are lots of interesting things you can do with forms in Flash. Try the following tutorials for ideas: Building Web Forms in Flash at Dev Shed and Flash Email Form at Tizag Tutorials. Flash Jigsaw Puzzles. There are several step-by-step guides for creating your own Flash jigsaw templates: Build a Video Jigsaw in Flash by Mike Kantor at SitePoint and Jigsaw Puzzle by Supuneet Bismal at ActionScript. Adobe provides lots of support for ActionScript 3.0. Explore some of Adobe's Flash ActionScript 3.0 samples for ideas. Adobe also provides lots of articles on Migrating to ActionScript3 and ActionScript 3 Guides, Tutorials, Samples.
		Try It! After reading and completing Chapter 4: Interaction (PDF document) from AIM your Flash Project. Add some interaction to your own project. Return to the Top
		Learn More Buttons & Symbols Flash Buttons at EchoEcho Flash Button at Tizag ActionScript Programming in ActionScript 3.0 from Adobe Overview of the Flash CS4 Professional ActionScript 3.0 Language and Components Reference from Adobe Using Adobe Flash Professional CS5 (PDF document, 15 chapters, 465 p) from Adobe ActionScript Technology Center at Adobe Components Components from Flash Developer Center at Adobe Flash Flash (Online tutorials) at ActionScript Return to the Top