Creating an Interactive Home Food Preservation Tutorial in Flash

Flash™ is a software program for developing highly visual and interactive applications produced by Macromedia Inc. A tutorial, Food Preservation Basics, was created using Flash™. The tutorial is basically an elaborate, interactive slideshow. Graphics, text, interactivity, and animation were used to communicate science-based principles in an entertaining manner.

Why Use Flash™ for Instructional Content?

A Web-based learning activity is available to learners online 24/7/365. The Flash™ file plays within standard Internet browsers utilizing a small plug-in that is easily downloaded from the manufacturer. Flash™ files play well in high or low bandwidth environments, and the viewer navigates through the file rather than from page to page on the Internet. Audio, video, text, and graphics are all easily used within movies. Many people would agree that they prefer to learn with interactivity, rather than by just reading documents or watching videos.

Learning Macromedia Flash™ MX

Macromedia Flash™ does have a significant learning curve for the more elaborate stuff, but it's not out of reach for instructional designers and developers. The program comes with templates for slide shows, photo presentations, and quizzes. Elements within these templates can be borrowed for use in any Flash™ movie.

Flash™ files are called "movies." Each movie can be divided into scenes. Each scene is divided into frames. Flash™, like other graphics-related programs, works in layers. Each scene has layers that can hold information. Information in a layer placed on top of another layer will show up in the foreground over that layer.

Movie Format

Food Preservation Basics is a Flash™ tutorial that was created to provide foundational knowledge to consumers on science-based processes for safe home food preservation. The tutorial is basically an elaborate slideshow that consumers can view at home from their computers. To get started, a new movie was created in Flash™ MX, and background color was chosen to match the background color of the NCHFP Web site. A standard size of 550 x 400 pixels was the default. The next step was to determine a structure. This tutorial consisted of four sections:

• 1.A. Why does food spoil?
• 1.B. Food Spoilage vs. Foodborne Illness
• 1.C. Principles of Food Preservation Methods
• 1.D. Critical Activities for the activities of microorganisms, enzymes, and chemicals.

"Intro" and "Menu" scenes, followed by a scene for each section above, and finally a scene called "Quit" were created for this movie.

Static Movie Content

Most of the educational content was created with simple graphics and text in slideshow format. Graphics representing the NCHFP logo and others were copied into the program and converted from .jpg format into a vector graphic. Vector graphics can resize without any loss of resolution. The logo was placed on each page throughout the movie for identity. Text was added to the "Intro" and "Quit" scenes to provide information about the presentation and NCHFP, and to include the USDA-CSREES support statement. Text can be made in a multitude of fonts, sizes, and colors. Text and graphics were used in individual frames to provide the bulk of the tutorial.

Interactive Movie Content

Interactivity is accomplished using "actions" or "actionscript." Some actions are simple, such as using "buttons." Mouse click a button, and something happens. Other actions can be very complicated. In the case of the navigation arrows, actions told the program to advance the viewer to the next frame. All of the actions needed were copied along when the buttons were cut-and-pasted from the slideshow template. Borrowing elements from other movies is time-saving, and allows the author to use more complicated actions that would require more knowledge to create from scratch.

Interactive components can also be used directly from the program's library. Items such as buttons, radio buttons, drop down lists, scroll bars, message boxes, and calendars can by used with a simple drag-and-drop.

Another interactive component used in the Food Preservation Basics movie was to change the user's cursor to another graphic. In one frame the user's cursor changes to a microscope. Place the microscope cursor over a graphic of a microscope slide, and another graphic representing a microscopic view of a foodborne illness bacteria appears. In another frame the cursor changes to a handheld pH meter where the viewer places the pH meter over a food graphic and a pH value appears.

Animated Movie Content

Animated sequences were incorporated for visual elaboration. A simple animation to roll out a yellow box that contained the menu of sections was created using a function called "tweening." The software program provides a tutorial on tweening, and its lessons were used to make the various animated sequences in the movie. Complicated animations were obtained from Internet sites that offer public domain downloadable source files and tutorials. Source files that animated water drops and bubbles were used to highlight the topics of water activity and oxygen.

Completing the Movie

Once all of the scenes were completed with static graphics and text, interactive buttons and actions, and animated sequences, the entire movie was debugged. Problems were corrected. The content was proofread and reviewed. Last, the file was uploaded to the NCHFP Web site for access by the public. The completed movie, Food Preservation Basics, can be viewed here: http://www.uga.edu/nchfp/multimedia/tutorials/.

Summary

Macromedia Flash™ is a good authoring option for learning sites, especially where interactivity is desired. Most Extension and adult educators have a toolbox of authoring tools, and Flash™ could easily become one of those tools.

Acknowledgment

This material is based upon work supported by the Cooperative State Research, Education, and Extension Service, U.S. Department of Agriculture, under Agreement No. 00-51110-9762.