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.

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:

Step 6: Start Coding

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

import away3d.cameras.*;
import away3d.containers.*;
import away3d.materials.*;
import away3d.primitives.*
import away3d.lights.DirectionalLight3D

Step 7: Setup Variables

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

var scene:Scene3D;
var camera:HoverCamera3D;
var view:View3D;
var light:DirectionalLight3D;

var bars_up:Array = new Array();
var bars_down:Array = new Array()
var soundbyte:ByteArray = new ByteArray();
var soundforces:Array = new Array()
var scaleoffset_low:Number = 15;
var scaleoffset_mid:Number = 150;
var scaleoffset_hig:Number = 150;
var i:int;
var t:Number;

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.

function initAway3D():void {
   scene = new Scene3D();

   camera = new HoverCamera3D();
   camera.distance = 300

   light = new DirectionalLight3D({color:0xFFFFFF, ambient:0.25, diffuse:0.75, specular:0.9})
   scene.addChild(light)

   view=new View3D({scene:scene,camera:camera});
   view.x=stage.stageWidth/2;
   view.y=stage.stageHeight/2;
   addChild(view);
}

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

function createBarUp(color:Number,x:Number):void {
	var bar:Cube = new Cube({width:30,height:50,depth:30})
	bar.material = new ShadingColorMaterial (color,{alpha:0.5})
	bar.x = x
	//
	bar.blendMode = BlendMode.ADD
	bars_up.push(bar)
	scene.addChild(bar)
}
function createBarDown(color:Number,x:Number):void {
	var bar:Cube = new Cube({width:30,height:50,depth:30})
	bar.material = new ShadingColorMaterial (color,{alpha:0.1})
	bar.x = x
	//
	bar.blendMode = BlendMode.ADD
	bars_down.push(bar)
	scene.addChild(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

function createBars():void {
	createBarUp(0x00CCFF,0)
	createBarUp(0xFF3300,-45)
	createBarUp(0xF9C806,+45)

	createBarDown(0x00CCFF,0)
	createBarDown(0xFF3300,-45)
	createBarDown(0xF9C806,+45)
}

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:

Step 11: Rendering

function render( e:Event ):void {
   view.render();

	SoundMixer.computeSpectrum(soundbyte, true);
   soundforces[0] = 0
   soundforces[1] = 0
   soundforces[2] = 0

	for (i = 0; i<300; i+=2) {
		t=soundbyte.readFloat();
		if (i>=0&&i<100) {
			soundforces[0]+=t*scaleoffset_low;
		}
		if (i>=100&&i<200) {
			soundforces[1]+=t*scaleoffset_mid;
		}
		if (i>=200&&i<300) {
			soundforces[2]+=t*scaleoffset_hig;
		}
	}

   scaleBarUp(bars_up[0],soundforces[0])
   scaleBarUp(bars_up[1],soundforces[1])
   scaleBarUp(bars_up[2],soundforces[2])

   scaleBarDown(bars_down[0],soundforces[0])
   scaleBarDown(bars_down[1],soundforces[1])
   scaleBarDown(bars_down[2],soundforces[2])

   light.x = camera.x
   light.y = camera.y
   light.z = camera.z

   camera.targetpanangle = stage.mouseX/stage.stageWidth*360
   camera.targettiltangle = stage.mouseY/stage.stageHeight*30
   camera.hover();
}

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.

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

function scaleBarUp(bar:Cube,height:Number):void {
	bar.height += ( height - bar.height) * 0.3
	bar.y += ( height*0.5 - bar.y) * 0.3
}
function scaleBarDown(bar:Cube,height:Number):void {
	bar.height += ( height - bar.height) * 0.3
	bar.y += ( -height*0.5 - bar.y) * 0.3
}

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

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

function startToRender():void {
   addEventListener(Event.ENTER_FRAME, render);
 }

function startToPlay():void {
   var sound:Sound = new Sound();
   sound.load(new URLRequest("song.mp3"));
   sound.play();
}
initAway3D();
createBars();
startToRender();
startToPlay();

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

Conclusion

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!