animation interaction multimedia

flashlight logo
AIM your flash project
 

Course
Information

Syllabus

Calendar

Requirements

CourseQuest

Workshop

Course
Resources

Exploration

Projects

Applications

Approaches

Evaluation

Basics

Animation

Interaction

Multimedia

Planning

Issues

Packaging

 

Interaction with ActionScript

challengeAlthough 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 itTry It!
Explore examples of interactivity including Anatomy of a Rover, Art Games, Room Planner, and Student Materials. What makes these examples "interactive"? Why are the effective or appealing?

The following links take you to the resources on this page.

   

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 itTry It!
Explore examples of interactivity including Approximating Pi, Destination: Modern Art, Dogs Around the World, WickED Interactives, MyPyramid, Pauly Playhouse, and Nobel Prize. 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

eyeRead Popular Theory Supporting the Use of Computer Simulation for Experiential Learning by David T. Bill.
Learn about why active learning is important.

try itTry It!
Explore the Scholastic Activities website for many examples of interactivity.
Building Language for Literacy
Clifford Make a Word
Flashlight Readers
I Spy Opps Hoops
Monster Bugs
Puzzled States


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

   

motivationActionScript 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 much 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 judgement in 'stretching' your skills and selecting your techniques.

eye means readRead Flash and ActionScript Components Learning Guide from Adobe if you plan to use ActionScript. This article provides a great introduction to ActionScript.
Explore both the ActionScript 2.0 and ActionScript 3.0 components.

Trying to decide between ActionScript 2.0 and 3.0? Read Six Reasons to Use ActionScript 3.0 by Lee Brimelow. Also, skim the Migrating from ActionScript 2.0 to ActionScript 3.0 by Dan Carr to learn about the changes from 2.0 to 3.0.

eye means readActionScript 3.0 Quick Reference Guide 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 itTry It!
Try Helen Triolo's flash-creations website contains the following wonderful short tutorials. Read Intro to ActionScript Syntax and Intro to 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.

eye means readLet's explore some of the Flash components.

Read Getting started with Flash CS4 user interface components from Adobe.
Read Using the Button component from Adobe.
Read Using the Label component from Adobe.

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 itTry It!
Go to Dress Me Up, Faces Tell Stories, Virtual Pumpkin Patch, Make a Tidepool, 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 advanced buttons and adding actions to buttons. - K. Pizarek

Advanced buttons. Use Movie Clip Button from LearnFlash for advanced button ideas. - P. Slater

Forms in Flash. There are lots of interesting things you can do with forms in Flash. Try the following tutorials for ideas: Better Forms, Building Forms, and Sending Email with Flash. - M. Gish

Gaming. Game design is a popular application of Flash. Most of the functionality of games is programmed using ActionScript. Try the following resources: Flash MX ActionScript Bible by Robert Reinhardt and Joey Lott (ebook through IUCAT), Flash MX ActionScript: The Designer's Edge by J. Scott Hamlin and Jennifer S. Hall (ebook through IUCAT) and Flash MX 2004 Games: Art to ActionScript by Nik Lever (ebook through IUCAT). - M. Burkhart

Interesting Uses for Buttons. There are many ways to use the mouse-over button option besides simply changing the state of the button. For example, mouse-over buttons can be used to create a submenu, and to make a new image appear in the mouse-over state. Dynamic text with buttons is another way to change text by using Actionscript instead of extra keyframes. For ideas, go to Drop-down menu tutorial and Creating movie. clip buttons. - A. Hurford
Example 1: to mouse-over a menu item and make submenu appear
Example 2: To mouse-over a menu item and have a new picture appear
Example 3: To mouse-over an item and have dynamic text change as a result

Flash Jigsaw Puzzles. Go to Daily Webshot for Flash jigsaws. There are several step-by-step guides for creating your own Flash jigsaw templates: Puzzle Factory, Flashlabs, and Sitepoint. Go to Jigsaw for a sample project. - A. Goben

readAdobe 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 ActionScript and Object-Oriented Programming.

   

try itTry 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

ActionScript

Components

Return to the Top