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.
For this tutorial please become familiar with the color object and the setTransform 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.
- In the ActionScript for LineShort frame 1, change the values of the lineColorTransform assignments and play the movie to see how the color changes.
lineColorTransform = new Object;
lineColorTransform.ra = 50 + random(50);
lineColorTransform.rb = 128;
lineColorTransform.ga = 100;
lineColorTransform.gb = 0;
lineColorTransform.ba = 50;
lineColorTransform.bb = 128;
lineColorTransform.aa = 50;
lineColorTransform.ab = 255;
lineColor.setTransform(lineColorTransform);This frame is only played once when the movie clip is created.
Tip: The Color Transform object is the ActionScript equivalent to the Advanced Color settings you can find in the Properties window of any movie clip. You can use the Property settings to experiment with colors before coding them in ActionScript. For example, the 100% next to red corresponds to ra in the Color Transform object, the 0 to the right of that corresponds to the rb.

- Now click on the ActionScript in frame 17. This ActionScript is run repeatedly throughout the lifetime of the movie clip.
- The Color Transform object is updated with color changes each cycle of the loop. Change these values or add other Color Transform changes here to see how the color changes during the movie clip lifetime.
lineColorTransform.ra -= 10;
lineColorTransform.ba += 5;
lineColor.setTransform(lineColorTransform); - Other things are going on in frame 17's ActionScript. The _xscale of the movie clip is getting smaller and when it gets down to a particular size it continues on in the timeline instead of returning to the beginning of the loop. This adds variation to the movie clip behavior through it's lifetime.
- Click on the ActionScript in frame 27. This behaves similiarly to frame 17, but isn't reached until frame 17 lets the playhead pass.
- Adjust the color changes here as well to see what will happen as the movie clip gets older.
lineColorTransform.ra -= 10;
lineColorTransform.ba += 5;
lineColorTransform.ga += 2;
lineColor.setTransform(lineColorTransform);Get Creative
These are some examples of how you can play with color using ActionScript. Think of otherways to adjust the color or alpha value of the movie clip as it plays to create your own personalized interactive art.
