Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. 3D

Render a Funky Sound Visualizer with Away3D

Read Time:5 minsLanguages:

In this tutorial I'll walk you through building a 3D compute spectrum. We'll use Away3D for the 3D Engine and make use of a sample song from the Envato asset library.

Step 1: Let's Begin

Create new ActionScript3 file.


Step 2: Edit Profile

In the Properties panel press the Edit button.


Step 3: Choose Flash Player Version

Choose Flash Player 9 profile and click OK.

away3d flash visualizeraway3d flash visualizeraway3d flash visualizer

Step 4: Get the Away3D Engine!

Save your file as "Compute Spectrum.fla" in the Compute Spectrum folder. Now you'll need to download the Away3D engine from Away3D Downloads. We'll use version 2.3.3 for Flash Player 9. Unpack an archive and copy all folders into the Compute Spectrum folder.

Step 5: Get the Song!

The animation we will prepare moves according to voice. So we need to choose our song correctly. The audience must really feel; "woow this moves within the sound". If you download source file, you'll see song.mp3. Copy it to your Compute Spectrum folder. Your folder should now look like this:

away3d flash visualizeraway3d flash visualizeraway3d flash visualizer

Step 6: Start Coding

OK, we're ready to start coding. We'll fill the first lines by importing our classes:

Step 7: Setup Variables

After importing our classes we define our variables to use during the coming steps.

The first ones are for Away3D. bars_up array holds our main bars. bars_down is for the reflected bars. soundforces and soundbyte are for compute spectrum. Finally, scaleoffsets are for scaling bars.

Step 8:Setup Away3D

Now we need to build Away3D.

The first line in our function creates our 3D scene. We then add 3D objects into it. For the camera we choose HoverCamera3D as I find it's the best way to turn the camera around objects. You actually don't need to use light for this project, but it makes the animation that bit better :) Finally, we create the View and set it in the middle of the scene.

Step 9: Creating Single Bar

As you can see, there are 2 functions to create bars. The first one is for main bars and the second one is for reflected bars. The second one further reduces alpha value of the bars.

First we'll create a Cube. We choose ShadingColorMaterial, because we use light and solid colors. The functions have 2 parameters: the first dictates the color of the bar and the second one is its x position.

We'll also add blendMode to the cubes, just because it makes them look cool. After these we add a cube to its array and to the scene.

Step 10: Creating All Bars

Here we create 3 main bars and 3 reflected bars. As you can see, their colors and positions are the same. We'll set their positions as in the diagram below:

away3d flash visualizeraway3d flash visualizeraway3d flash visualizer

Step 11: Rendering

This is the tricky part. In the render function first we render the 3D. Then we use SoundMixer to get sound values (computeSpectrum is the method for this). We equalize soundforces' first 3 elements to 0, effectively resetting the sound values. After that, a for loop comes.

away3d flash visualizeraway3d flash visualizeraway3d flash visualizer

low values: songforces[0]

middle values: songforces[1]

high values: songforces[2]

After we get the song values we scale our bars. We use 2 functions for this. The first one is for the main bars and the second one is for the reflections. These functions have 2 parameters; the first one is the bar to be scaled and the second one is the target height value of bar.

We then equalize the position of our light to the position of the camera. This makes our light dynamic and our animation more effective. We use true proportion in math to change the camera positions in relation to the mouseX and mouseY.

Step 12: Scaling Bars

We use a simple technique for animation, this diagram shows an example:

away3d flash visualizeraway3d flash visualizeraway3d flash visualizer

OK, we scale our bars. But we need to change the y value of them too. This diagram shows why we need to change them:

In the first function, the y value of the bars is positive and in the second function it's negative. Main bars slide up, reflected bars slide down.

Step 13: Final Steps

In these functions we start to run the render function and load our "song.mp3" file. Then we call all our functions one by one. Now you can test your movie and watch the bars jump :)


In this lesson we learned how to use reflection in Away3D and how to get sound data. The key to these types of effects is the song: you need to choose the best possible song to make the animation really work. Try it with your own mp3 tracks :)

I hope you liked this tutorial, thanks for reading!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.