Introduction

The ability to provide interactivity is another major instructional benefit of multimedia. Interactivity can be between two people or between a single person and a machine. However, in multimedia the term Interactive applies to any type of program or training that requires the learner to do more than just sit and watch or listen. Interactivity is often used describe events and actions that are triggered by users as they navigate through a program. When an event occurs, actions are used to react to the events. An event can be the user clicking the mouse, typing a keyboard hotkey, or coming within a certain distance of an object. An action can be making an object glow, the starting of an animation, or the loading of a web page. In any case the learner is required to interact with the content. By having the computer respond to a user's input, a two-way flow of information is created. The theory behind interactivity is that the individual will learn faster and retain more information than is possible through passive or non-participatory education.

Borsook & Higginbotham-Wheat assert that "its potential for interactivity sets the computer apart from all other
instructional devices" (1991). They go on to identify some important components of interactivity, including two-way communication, feedback, immediacy of response, adaptability, and non-sequential access to information.

As an example, consider games and chat rooms. Both are highly interactive. Ever wonder why kids (and adults) can spend hours playing games or taking part in chat room discussions? It may be because these types of activities engage them to a much higher degree than more passive activities.

Even instructional programs can be made interactive by:

  • engaging learners' curiosity
  • appealing to learners' personal interests
  • posing questions that require thinking
  • allowing learner control of the pace and sequence
  • providing choices for the user
  • asking for input from the learner
  • providing feedback
  • including animations

...and by using other methods that encourage learners to take an active role in the learning process. There is an often-used saying that speaks volumes about how people learn:

"Tell me and I will forget,
Show me and I may remember,
Involve me and I will understand."

Interactivity provides a way to involve learners more in the learning process, and by becoming more involved they may have a better chance of understanding what you are presenting to them. Even simple navigation (as used in the last competency) is a form of interactivity. You click a button or link and the computer responds by taking you to another screen.

On another note, it is also important to be aware of ways to restrict interactivity. This is accomplished through the use of restrictive design features. This allows the designer to guide students to attend to important aspects of the instruction as opposed to having them wander around on their own. For example, in PowerPoint a user can progress through the slides in your show by simply clicking the mouse anywhere on the screen. However, you may not want them to do that. Instead, you may want your users to follow the menu structure you set up for them. In this case you would need to restrict the learners' ability to click through your slides. In a multimedia instructional program you are not necessarily trying to create a simple slide show, so at this point it may be best for you to begin thinking of PowerPoint not as a simple slide show program, but as a tool to be used in creating a nonlinear multimedia program.

Flash

A lot of Flash's interactivity comes through the use of its built-in scripting language known as ActionScript. ActionScript is a programming language that allows you to dig below the surface and command a great deal of control over what happens in your movies. You will not be required to do any original scripting for this class, but you may want to play around with ActionScript to see what it can do. It can be very exciting to write even a small script and see the results executed your movie.

What's great, though, is that you can still harness the power of ActionScript without writing any code. This is because Flash comes packaged with components known as Smart Clips. Smart Clips are prewritten ActionScripts that you can apply to your movie to add interactivity or interesting effects. To add a smart clip, you simply drag it from the Library palette and place it on a symbol or instance. Smart Clips allow you to create advanced interactivity without learning the ActionScript code. Most smart clips respond to simple events such as a click on an instance or the entry of the playback head into a frame. When the event occurs, the smart clip performs an action, such as jumping to a different frame or playing a sound. Interactivity in Flash can be expanded through the addition of more Smart Clips.

HTML

If you are using HTML, you can gain a lot of interactivity by using JavaScript. JavaScript is a programming language that allows the creation of more interactive features in web browsers. The Java code is embedded into the HTML code and read by JavaScript-enabled browsers. You can program the Java code yourself, but as with Flash there are pre-done bits of JavaScript code available on the Web for you to use on your pages. For example, the mouseover effect on the following button is accomplished using JavaScript:

If you want to learn a little more about JavaScript, start with this basic tutorial:

http://www.htmlgoodies.com/primers/jsp

You don't need to learn how to program JavaScript in order to add some basic interactivity to your web pages, though. There are many web sites that have JavaScripts available for you to modify and use on your own web pages. In addition, some web editors will generate JavaScript for you to perform various tasks. Here are some sources for ready-made JavaScript code:

Usually you can copy the code and paste it into the HTML code on your own page. Keep in mind that you may have to modify some of the parameters in the code to make it work on your page. For example, to create a mouseover effect on a button you have to point the code to the images you want to use for the button. It may seem a little tricky at first, but it's certainly easier than writing the code yourself from scratch. In addition, some web editors will create mouseover effects for you, and there are also third-party programs that will create mouseovers, such as Adobe ImageReady or Macromedia Fireworks.

PowerPoint

If you are using PowerPoint, interactivity can be achieved by assigning "actions" to the various objects on a slide. Also, many effects can be achieved by creatively swapping slides. In addition, there are add-ins available that will expand PowerPoint's capabilities.

For this competency we'd like for you to play around with your authoring program's various ways of adding interactivity. Depending on the authoring software you are using, here are some LinkedIn Learning tutorials we recommend that you go through. These tutorials probably cover more than just interactivity, so don't worry if you pick up extra skills along the way. In addition, these tutorials don't cover all the methods available for adding interactivity to your multimedia programs. There are many levels of interactivity, covering a whole spectrum of activities, so you will likely need to do some experimenting on your own.

Once again, keep in mind that the names of the tutorials may differ slightly depending on which set of tutorials you are using.

PowerPoint Introduction: Microsoft Graph
Advanced: Working with Presentations
Advanced: Creating Interactive Objects

Below are a couple of examples of interactivity in PowerPoint:
Math Jeopardy Games (http://mathbits.com/MathBits/PPT/powerpoint.htm)
Delivering a presentation
Dreamweaver Creating a Page Layout
Creating Resizable Layouts
Orientation to Rollovers
Using the Insert Navigation Bar Tool
Adding Flash Text and Buttons
Orientation to Layers

If you want to learn more about layers, try these tutorials:
Using the Layers Panel
Using Layers with Behaviors to Create a Rollover
Working with Layers
Flash Basic Playback Control
Creating and Using Remote Rollovers
Creating a Preloader
Buttons
ActionScripting Basics
Other programs Creating interactivity with interactions

Interactivity Activity

When you've explored your authoring program's various ways ofcreating interactivity, we'd like you to demonstrate your ability to create some simple interactive elements. How you accomplish these tasks will differ depending on the program you are using.

Begin by loading your activity from Competency 4. If you recall, you created a main screencontaining a menu of at least three items. Each of these items led to a different page of content. For this competency, we want you to create a mouseover (or rollover) effect for each of the items on your main menu. When a user moves their mouse over each button it should change in some way to indicate that it is something the user can interact with. The image can change to a different color or to an entirely different image altogether. When you are finished you should have at least three separate mouseover effects on your main screen. Also, make sure that each menu item has a text label of some sort (like the example given earlier). As before, each of the options available on the main menu should lead users to a new screen. For this competency it doesn't matter what is on these screens - you can use the same content as before. However, you will need to make one addition: In place of the content you used in the last competency, one of the screens should contain a button that, when clicked on by a user, causes something else to be revealed on the screen. For example, a message or a graphic could appear. Whatever the object is that is revealed, it should simply appear on the screen and not fly or slide in from somewhere else. In other words, the object should not be animated. In addition, if you are using PowerPoint you will need to turn off the feature that causes the show to automatically advance to the next slide when a user clicks the mouse button or hits the space bar. This will prevent users from advancing through slides in the wrong order. They will instead need to use the navigation options you have set up for them. Once again, be sure your name is somewhere on the main screen.
Note: In Flash these effects can be created using Smart Clips. In PowerPoint you will need to set up an action and perhaps swap slides. In HTML you can use JavaScript, DHTML, CSS, or other methods, such as the built-in features of your web editor.

Submitting your Activity

Save this activity in your program's native file format. Name the file " interactivity ". Depending on the program you are using, you will end up with one of the following types of files:

  • Flash - fla (interactivity.fla)
  • PowerPoint - ppt or pptx (interactivity.ppt or interactivity.pptx)
  • Dreamweaver - htm or html (interactivity.htm or interactivity.html)
  • Other programs - swf or other supported export formats (interactivity.swf)

After you have saved the file, go to the student interface and submit your assignment for grading. Click here if you need additional information regarding submission of your assignment.

Assignment: Interactivity Activity
Points:
15

Grading Criteria:

  • Main screen includes a menu containing at least three separate buttons with mouseover effects
  • Each button on the main screen includes a text label.
  • Each button on the main screen leads to a new screen.
  • One of the new screens contains a button that causes something else to be revealed on that screen. There should be no animation effects.
  • If using PowerPoint, the show does not advance except through the use of the buttons.
  • Student's name included somewhere on the main screen.