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

   

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

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

   

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

eye means readRead 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.

eyeWatch 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).

eye means readActionScript 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 itTry 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.

eye means readLet'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 itTry 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.

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 Migrating to ActionScript3 and ActionScript 3 Guides, Tutorials, Samples.

   

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

Flash

  • Flash (Online tutorials) at ActionScript

Return to the Top