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

 

Multimedia

man with microphoneDevelopers can easily incorporate audio, video, and visual elements into their Flash projects. These elements can be imported from a wide range of other software tools. ActionScripts can then be used to control these elements.

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

 

The Power of Multimedia

Flash developers shouldn't view audio, video, and visual elements as "extras" to be added as time permits. Instead, they should be considered essential components of effective informational or instructional experiences. Each user has a different learning style and preferences for particular presentation formats and styles. Rather than focusing projects on one type of end user, provide a variety of resources, tools, and experiences to address the diversity of interests.

   
eye means readRead The Value of Multimedia in Learning by Patti Shank to find out how to combine media effectively to produce effective learning experiences.

Return to the Top

   

Sound in Flash

From music to sound effects, there are many different ways to incorporate audio elements into your Flash projects. You can play individual sounds from the Timeline, synchronize sounds to animation, and loop sounds so they play continuously.

try itTry It!
Explore examples of sound in Flash. Watch and listen to:
Amy's Diary
Beethoven: Meet Mr Big at ArtsEdge from The Kennedy Center
Growth of a Nation
by Peter Mays at Animated Atlas
Community Club
from Scholastic
Mars CloseUp at Mars from PBS's NOVA
Tribute to Mopsey, A by Mike Stanfill at Private Hand
Polygon Dissection Gallery
How do the audio elements contribute to understanding? What unique role do they play? What would happen if audio was not a part of the project? What would be lost?

microphoneThere are two steps to using sounds in your project. First, import the sound. Second, decide where and when it will play in your movie.

Although Flash contains many tools for integrating sound, there’s no way to record audio in Flash. Instead, you’ll need to record your own sounds with other software or locate existing audio files. Sounds can come from many sources. You can use public domain sounds you locate on the web, sounds from clipart CDs, or sounds you record yourself.

If you own other Adobe products, consider using Adobe Soundbooth for editing sound. Read:

Geduld, Marcus (Mar 2009) Taking Music from Adobe Soundbooth to Flash

If you don't have software to record sound, use open source options such as Audacity. This software will generate many sound files that are compatible with Flash.

Developers can import sounds, sync sounds with animated sequences, control volume, loop elements, and provide sound controls. Like graphics, sounds can be imported with the Flash Library and used multiple times in a project. As you explore sounds, you’ll notice that there are three characteristics that will impact quality: sample rate, bit rate, and channels.

Sample Rate. Digital sounds are measured in kilohertz (kHz). Unless you need super high quality, you don’t need more than 22 kHz.

Bit Rate. Sometimes called bit resolution, 8-bit sound is fine for most projects.

Channels. Mono is one channel and stereo is two channels. Mono is fine for most projects.

Sounds are imported into the Flash Library. Developers can import *.wav, *.aiff, and *.mp3 audio file formats into Flash projects. You’ll have the best luck with the *.mp3 format.

eye means readRead the following tutorials at Adobe:
Using Sounds in Flash
Exporting Sounds
Sound and ActionScript

There are other tutorials online such as these two by Kirupa Chinnathambi:
Play Sounds from the Library
Playing Sounds in ActionScript 3

try itTry It!
Go to Teacher Tap: Digital Audio. Download a software package to record your own voice. Using the built-in microphone on your computer or an external microphone, record your voice and save the file for use in Flash.

try itTry It!
Go to Multimedia Seeds: Audio Clips for places on the web to locate audio clips.

There are four sync sounds you can set: event, start, stop, and stream.

An event sound is downloaded before it starts and plays until an event stops it such as a mouse click or Timeline action. It may loop around and play more than once to match the animation. Event sounds are often used for roll-over buttons. It’s a good idea to use event sounds in most situations unless you need to synchronize your animation.

A start sound is the same as event sound except they only play through once.

A stop sound is used to stop a sound from playing. For example, you could turn off the background sound when narration begins.

A stream sound begins playing as soon as it begins downloading. It will sync the sounds with the animations.

For most projects, use the properties panel to control the sound. However for more complex project, you may need to use ActionScripts. In most cases, you’ll use either use attachSound or loadSound.

attachSound(). This method asks you to call an object from your Library and create a internal link to the sound. These sounds are embedded in the *.swf file.

loadSound(). When using this method, you call an external sound file that must be loaded into the movie. Keep in mind that this sound must be available through the URL in order to work. This approach works best when you access a file that you own and control.

Let's explore a few cool techniques for using sounds in Flash. These were suggested by students in the Flash class:

Stopping Sounds. It's useful to be able to stop sounds. Many students have found the following two commands useful: stopAllSounds(); and gotoAndStop(1);

Toggle Mute. You can change the buttons and/or flow of the Timeline so that the Stop button doesn't cause the sound to start again. One way to do it is to change the Mute button to an on/off switch. Then the sound can be turned on or off independent of the state of the animation.

You would need to insert a keyframe before your loop in order to initialize variables and start with the sound on. Also, in order to use an Actionscript to call objects from the Library, you need to set up the linkage for those objects. For example, you would need to right click on the sound file and select Linkage. Then select Export for Actionscript. (Click OK). Also once you've inserted a keyframe before the main loop, you would need to make sure that your buttons are changed accordingly. To do this, you could name a frame "Start". Then the Stop and Start buttons could go to "Start" instead of "1." You could also insert a new layer Actions and put the initialization Actionscript in the first frame. (Put a blank keyframe in the second frame so that the initialization only happens once when the program starts). The Actionscript that is in the soundtoggle file could be used in the first frame of the actions layer and on the Mute button object (which would really become a toggle switch). The only thing that would have to be changed is the name of the sound. Also, see Chun and Garraffo's Adobe Flash Advanced for Windows and Macintosh for more info and examples. - J. Heaphey

Attaching Sound. Avoid putting sounds directly on buttons by using ActionScripts. Once your sounds are imported, right-click on each one and select Linkage. Select Export for ActionScript, click OK. Make sure that you give your buttons instance names in the property panel - like stripes_btn. Once you've provided linkage for all of the sounds and given instance names to all of the buttons, you're ready to write the ActionScript. Create a new layer called actions and put the Actionscript in the first frame such as

laugh_sound=new Sound();
laugh.attachSound("laugh");
stripes_btn.onPress=function(){

//stop this and other sounds
laugh_sound.stop("laugh");
rain_sound.stop("rain02");
//etc.

//play laugh_sound
laugh_sound.start();
}

Stop Sounds & Play Sound. You sometimes want to stop all sounds and start a new sound. Upon reaching a frame you'll need to stop all other sounds and play the audio clip “songfile”. Just make sure that you set the Linkage of the audio file by right-clicking on the audio file and choosing “Linkage”. Select “Export for ActionScript” and click OK.

stop();
stopAllSounds();
song=new Sound();
song.attachSound("songfile");
song.start(0,999);

The parameters for song.start tell the program to play the file with a 0 second offset and to loop it 999 times.

   

 

watchWatch 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; will 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 17 is devoted entirely to Working with Audio; there are 6 video tutorials beginning with "Understanding Audio in Flash."

Also check out Creating a First Web Site with Flash Professional CS5 (Also listed / linked on 2nd page of the index - within the Adobe CS5 section) with Paul Trani. Chapter 8 is titled Adding Audio; there are 2 video tutorials beginning with "Adding Music."

Watch Flash Audio: Part 1 and Part 2 by Tom Green at Adobe's Layers Magazine.

try itTry It!
Helen Triolo's flash-creations website contains the following wonderful short tutorials:
Controlling Sound in a Movie

Return to the Top

   

Video in Flash

Video is an exciting way to add movement and audio to your projects. Flash can use many different video formats. You can use Flash to create or import Flash Video (.flv) files. If you have QuickTime installed on your computer, you can import files in *.avi, *.mpg, *.mov, and *.dv formats. Short videos can easily be added to any Flash project. Try to keep video down to about 10 seconds if you plan to play them off the web.

If you want longer videos, consider streaming video from the web. Unfortunately, the videos will need to be served from a web server that has this option. You can connect to an .flv video from your .swf file to play video from a web server. This is a good idea if you have a long video because it will start playing while it’s still downloading the file. You can also stream video from a specialized Flash video server.

eye means readRead the following tutorials from Adobe:
Create Video for Use in Flash
Add Video to Flash
Working with Video Cue Points
Embed Video within a Flash File

Controlling External Video Playback with ActionScript


Read Adding Video to a Web Page by David Gassner to learn more about using Dreamweaver and Flash together.

Read Getting started with the ActionScript 3.0 FLVPlayback Component from Adobe.

watchWatch 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; will 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 18 is devoted entirely to Working with Video; there are 5 video tutorials beginning with "Understanding Video in Flash."

Also check out Creating a First Web Site with Flash Professional CS5 (Also listed / linked on 2nd page of the index - within the Adobe CS5 section) with Paul Trani. Chapter 7 focuses on Adding Video; there are 4 video tutorials beginning with "Adding Video."

Let's explore a few cool techniques for using Movies in Flash. These were suggested by students in the Flash class:

Adjust Movie Clip Settings. Use the kirupa website for suggestions on simple video editing in Flash. - P. Slater

try itTry It!
Explore how video is integrated into the following projects. Notice the way users access and control the video clips.
Inside 9/11 from National Geographic
Apollo 11 from the Smithsonian Center for Education and Museum Studies
Superbowl Commercials
at FanHouse

try itTry It!
Go to Teacher Tap: Digital Video to learn more about video from the web.
Go to Multimedia Seeds: Video Clips for places on the web to locate video clips.
Go to YouTube or other online video services. Many of these videos can be downloaded using tools such as ZamZar. Check copyright notices before using these videos.

Return to the Top

   

woman with cameraVisual Elements in Flash

Much of the power of Flash comes from its ability to handle graphics. In addition to animation, there are many interesting ways to enhance visual elements. From mask layers to photo buttons, there are many interesting ways to add visual elements into your projects. Like audio and video, you can find many sources for clip art, photographs, and other images on the Internet.

Consider incorporating the following visuals into your projects:

  • Scanned documents
  • Digital camera photographs
  • Clipart resources

try itGo to Teacher Tap: Images. Explore web resources for locating images:

Try a project using photos from nature: Naturescapes and Video & Image Starters Resources.

Let's explore a few cool techniques for using Photos in Flash. These were suggested by students in the Flash class:

Photo Hover. Consider making a photo bigger when you hover over a small photo (thumbnail). Drag a small photo on to the Stage. Convert it to a Button (F8). Double click the button so that you see the button's Timeline. Put Keyframes (F6) at Over and Hit. (You should now see the photo in all four frames of the button.) Next, click on the Over frame, then click on the photo. Go to the Properties panel to increase the size of the photo. (Make sure the little lock icon to the left of the W and H boxes is enabled to preserve the proportion of your photo.) That's it! Now go back to the Stage to test the button using Control > Enable simple buttons (or Ctrl Alt B). You'll probably want to turn off Enable simple buttons once you've tested it. - J. Heaphey, Spring 2006

Fade to Photo. To make a background fade to a photo, use the Alpha property (in the Color panel > Color Mixer) and a Shape Tween. When you make a mask, there are two layers, the mask (text, etc.) and the maskee (?) (the photo or whatever is masked). The color of the mask is determined by whatever is beneath the level of the mask layers. If there aren't any layers beneath the mask layers, the mask will be the color of the document background color. For example, if you set the document background to red (click on the stage, change the color in the properties panel to red), the mask will be red. So what I did was to put two more layers beneath the mask layers. Of these layers, the top layer is a black rectangle that covers the entire stage. At frame 48, I added a keyframe. The Alpha value in the Color panel should be at 100%. Then at frame 151, I added another keyframe and set the Alpho for the rectangle to 0%. Next, I clicked on some frame between those two and chose a Shape Tween in the properties panel. The bottom layer is simple a copy of the photo used in the masked layer. (Just go to the masked layer, right click on the photo, select Copy. Then go to the bottom photo layer and right click on the stage, select Paste in place so that the two photos will match.) - J. Heaphey, Spring 2006

Transparent Images. It's possible to make the background on images transparent. Follow directions at How to Create a Transparent Background in Photoshop. - A. Hurford

   

try itTry It!
Try Helen Triolo's flash-creations website contains the following wonderful short tutorials:
Masks

Return to the Top

   

Adding Multimedia to Flash Projects

The options for multimedia projects are endless. The biggest problem you're likely to face when working with media elements are space and pacing.

Space. When you start integrating sounds and video, your files will become very large. When you delete elements, you may not see a change in your file size. We suggest that you SAVE AS occasionally. You'll want to change the file name. This is also a reminder to keep backup copies of your work. This will organize and compress the data in your file to save space and reduce the file size. If your project becomes very large, consider breaking it up into smaller files that can be connected together.

Pacing. Another common concern is getting your audio and visual elements to work together. You may need to length or shorten audio elements. Also consider ways of changing the speed of your presentation through adjustments in the number of frames or use of stops. Keep your project as short or "tight" as possible, while still conveying your message.

You can sometimes work out a sound problem using the "Sync" option. You'll need to click on the frame that contains the sound file and examine at the Properties panel. Change the Sync from Event to Stream. When sounds are in the Stream mode, they will automatically stop when the next keyframe is reached.

Try techniques such as pausing. The following script is an example that can be used for pausing for a particular length of time (M. Witt, Spring 2006):

pauseDuration = 5*1000;
framesInLoop = 1;
if (startTime == null) {
startTime = getTimer();
gotoAndPlay (_currentframe-framesInLoop);
} else {
lapsedTime = getTimer()-startTime;
if (lapsedTime < pauseDuration) {
gotoAndPlay (_currentframe-framesInLoop);
} else {
startTime = null;
}
}

watchWatch It!

Watch Flash Video the Easy Way by Tom Green from Adobe's Layers Magazine:
Part 1

Part 2

Part 3

These videoclips take you through the process of putting Flash Video on a web page.

Also watch Tom Green's Basic Coding for Flash Video from Adobe's Layers Magazine. It does a nice job explaining how streaming Flash video works and the basics of Action Script.

try itTry It!
After reading and completing Chapter 5: Multimedia (PDF document) from AIM your Flash Project. Add multimedia elements to your own project.

   

Advanced Applications

Once you've worked with graphics, animation, interactivity, and multimedia, you can begin exploring other features of Flash.

readLet's read about some more advanced applications in Flash.

Read Creating Animation in ActionScript 3.0 by Jen deHaan and Dan Carry to learn more about how ActionScript can be used for creating animation.

Read Deco tool and Spray Brush for Creating Complex, Geometric Patterns in Flash by Jonathan Duran. This article explores more advanced graphics.

Read Exploring the new 3D features in Flash CS4 Professional by Mariko Ogawa.

Think about ways that Flash can be combined with related technologies. Read Creating simple interactive content using Fireworks, Flash, and Dreamweaver by Dan Carr.

watchWatch It!

View the following video tutorial clips at YouTube from Lynda.com:
Creating a First Web Site with Flash Professional CS5 - Welcome
(Length 59 seconds)
Creating a First Web Site with Flash Professional CS5 - Formatting Text
(3:58 minutes)
Creating a First Web Stie with Flash Professional CS5 - Custom Looping Animation
(4:22 min)
Creating a First Web Site with Flash Professional CS5 - Button Functionality
(10:23 min)
Creating a First Web Site with Flash Professional CS5 - Syncing Graphics (8:03 min)

Watch Make a Basic Flash Animation and Add it to a Web Page from YouTube.

readGo to Layers Tutorials to explore lots of text and video tutorial to try.

try itTry It!
Explore online tutorial, books and other resources to learn more about some of the advanced features of Flash.

Although the explanations or resources aren't included, the following examples provide ideas for the kinds of challenges students have explored for this assignment. Keep in mind that these example may use earlier version of Flash:
Book Club (swf & fla) - forms and email - M. Gish
Color Wheel
(swf & fla)- Advanced practice with tweening and motion - K. Mosbaugh
Dancers - Take a still graphic from a website and animate it. - N. Cavallaro
Flash Tutorial (.swf) - J. Heaphey
Random Rockets (swf) - Created a movie clip that occurs at random places on the screen.
MicroGame (swf and fla) - M. Burkhart
Morphing Letters (.swf & .fla) - S. Jackson
Ipod (swf and fla) - Explored uses for mouse-over. - A. Hurford
Old MacDonald
(swf) - Explored coordinating bouncing ball, lyrics, photos, and music - L. Colbert
Party Invitation (.swf & .fla) - K. Pizarek

Learn More

Sounds

Return to the Top