Sound Toy allows users to create simple abstract animations with sound effects by moving the mouse around the screen. The animations and sounds are created by a combination of timeline animation and ActionScript.
- ActionScript Coding
- Flash Version 5 or higher
- soundtoy.fla
This software is licensed to the public under the CC-GNU GPL.
- Movie Clips —
onClipEvent, duplicateMovieClip, removeMovieClip, _xscale, _rotation, playhead - Mouse —
_xmouse - Timeline Commands —
gotoAndPlay, stop - Color Object —
new, setTransform - Sound Object —
new, attachSound, setVolume, start, setPan - Frame-based ActionScripting
- Other —
eval
Sound Toy is an interactive art piece that generates abstract animations and sounds based on user's mouse movements. It dynamically creates vertical lines depending on how fast the mouse is moving horizontally(left to right, right to left). There are three 'master' movie clips that are duplicated to create the lines. Also there are several short sound clips that are played by each "line" movie clip depending on how long it's been in existence. "Line" movie clips eventually are deleted to make room for more.
Sound Toy was written with Flash 5 and most of the code is placed in frames on the main timeline or within one of the three 'master' movie clips. This is different from Object Oriented Programming(OOP), where code is organized into Classes. In ActionScript 2.0 and above classes are stored in separate files called with the extension .as. ActionScript 2.0 was not introduced until Flash version 6 so is not used with Sound Toy.
Sound Toy is driven by a master frame script in the top timeline which tracks mouse movements and creates copies of the "line" movie clips. For information on copying movie clips see the duplicateMovieClip documentation or a tutorial.
Each "line" movie clip has it's own frame scripts to control it's color, size and which sounds it plays. Each "line" movie clip is a variation on the same design so we will look at pieces of a couple movie clips to
These tutorials will show how to experiment with and customize Sound Toy. Consult the code for details on what is happening with each ActionScript line.
Sound Toy uses both timeline sound and sound generated with ActionScript. For this tutorial please become familiar with the Sound object.
- Open soundtoy.fla
- Move the playhead to frame 4
- On the far right, off of the background you'll see three lines of different lengths. These are the parent movie clips for the lines that are generated.
- Click on the first "line" movie clip on the left. It should be called lineShortMC and is an instance of LineShort.
- You should now see the timeline for the LineShort movie clip.
- Notice the layer called Sound. This is a timeline sound. Notice that it starts before the frame label "loop". This sound will only play once when the movie clip is first created. To have it play repeatedly, move it the first frame of the sounds past "loop". The playhead of this movie clip is continually set back to the "loop" frame to continue playing.
- Click the Scene 1 button to leave this movie clip.
- Click on the tallest "line" movie clip the far right. It's called lineTallMC and is an instance of LineTall.
- Click on the ActionScript in frame 1.
- croll down to where it says
//attach a sound - Experiment with different sounds by changing the name in attachSound. Remember: the name in quotes of an attachSound is the linkage name(or idName) from the library, not the file name or title of the library entry.
tubeSound.attachSound("ilike"); - Two lines below shows
that the sound is started in a random location based on the length of the sound
file. Sound duration
is in milliseconds, but start
requires a time in seconds so you have to divide by a 1000.
tubeSound.start(Math.random() * tubeSound.duration / 1000); -
The
setPanmethod sets the balance between the two stereo speakers. —100 is all the way left, so in this command we start there and add the position of the movie clip so it's sound 'position' will match the graphic's position on the screen. We need to add an approximate conversion factor between the width of the screen and the ranges setPan uses, so multiply by .4. -
In the last line of this the script on frame 1 we store the current time using
getTimerso we can control how long this introductory sound plays.startTime = getTimer(); -
Click on the ActionScript at frame 4. Here we use startTime from the previous ActionScript. This test also prevents the rest of the timeline from playing. Change the 500 to longer or shorter to see how it effects this movie. Remember, getTimer() works in 1/1000 sec, so you need pretty big numbers.
if (startTime + 500 > getTimer()) { -
Click on the ActionScript on frame 11, under "loop". Here we start a new sound. This sound will play each time the playhead returns to "loop".
tubeSound.attachSound("tone1"); -
When we set the volume in the next line we use the _
xscaleof the movie clip. The _xscale is decreased every loop so the sound will get quieter the longer the movie plays. This will create a slow 'fade' effect.tubeSound.setVolume(_xscale); - The next two ActionScript frames in this movie clip perform other changes to the movie clip graphics and sounds and check to see how small the movie clip is getting. As the movie clip continues to shrink(_xscale gets smaller) more of the timeline gets played, to add additional variation to the movie clip during it's lifetime. Change sounds in attachSound commands and change values or add new lines of code using the Sound object commands.
Get Creative
These are some examples of how you can play with sound using ActionScript and the timeline. Think of other ways to add sounds and import your own into the library. Don't forget to set a linkage name.
Here's some ideas to change the animation in Sound Toy or to create something new.
- Add new layers in any of the "line" movie clips and then add new graphics using the painting and shape tools.
- Add new keyframes to existing shapes in the Graphics layer. Change sizes and/or fills.
- Change the background bitmap fill or use a gradient in the background movie clip. Add new layers and graphics here also.
