Requirements

Adobe Flash CS3

Try / Buy

Source Files

Download

Getting Started

For this demo application, we’ve used the latest version of papervision3d with the code name GreatWhite.
First of all, we need to include the papervision3d stuff.

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.utils.MaterialsList;

These are all the classes we need for our application. The Camera3D class enables you to focus on a 3d object and zoom to it. Scene3D is a container that holds all 3d objects. The Viewport will be added to the main stage and is like a video screen that shows the result. Another important class is the BasicRenderEngine which renders all the objects from the scene with the current camera settings and outputs the result to the viewport. Papervision comes with different types of objects, but for our example we’ll only need the cube. And finally there are the materials which can be set to the objects. This is how papervision basically works.

Then we to set some constants for the sound channel

const CHANNELS_PER_DIRECTION:int= 256;
const CUBES_PER_CHANNEL:int		= 8;
const CHANNEL_STEPS:int			= Math.floor(CHANNELS_PER_DIRECTION / CUBES_PER_CHANNEL);

Next thing to do is to set the papervision variables

var viewport:Viewport3D;
var scene:Scene3D;
var camera:Camera3D;
var cube:Cube;
var renderer:BasicRenderEngine;

To keep a reference of each cube, we need to create 2 arrays. For each sound channel (left, right)

var cubesLeftChannel:Array		= new Array();
var cubesRightChannel:Array		= new Array();

At the end, we want to swing our camera from left to right and vice versa. To know in which direction we’re currently moving, we need to set a flag:

var bolAnimationForward:Boolean 	= true;

The next part is the same as in the previous tutorial. We create a new sound object and a url request for requesting the mp3 file. SndBytes will hold the current spectrum data.

var sndObject:Sound			= new Sound();
var reqObject:URLRequest 		= new URLRequest("so-deep.ram2000.mp3");
var sndBytes:ByteArray			= new ByteArray();

So, the next step will be the initializing of our 3d stuff, then loading the soundfile and finally creating the render loop.
First of all, we create a new viewport and add it to the stage. The third parameter tells the viewport to use the whole width and height of the swf file for displaying the 3d objects.

viewport = new Viewport3D(0, 0, true);
addChild(viewport);

Then we create a new basic render engine and a scene which holds the 3d objects

renderer = new BasicRenderEngine();
scene = new Scene3D();

Our cubes will need a material. We create a blue one for cubes that are displaying the left channel and a green material for the other ones. You can easily change the colors for each side using hex values.

var blueMaterial:MaterialsList = new MaterialsList(
	{
		front:  new ColorMaterial(0x0066FF),
		back:   new ColorMaterial(0x0066FF),
		right:  new ColorMaterial(0x0046B0),
		left:   new ColorMaterial(0x0046B0),
		top:    new ColorMaterial(0x1171FF),
		bottom: new ColorMaterial(0x1171FF)
	}
);

var greenMaterial:MaterialsList = new MaterialsList(
	{
		front:  new ColorMaterial(0x00CC00),
		back:   new ColorMaterial(0x00CC00),
		right:  new ColorMaterial(0x009F00),
		left:   new ColorMaterial(0x009F00),
		top:    new ColorMaterial(0x00CC00),
		bottom: new ColorMaterial(0x00CC00)
	}
);

Now we need to create the cubes for the left channel, position them correctly on the x-axis, keep a reference in the array and add them to the scene

for(var i = 0; i < CUBES_PER_CHANNEL; i++) {
	cube = new Cube(blueMaterial, 12, 50, 400);
	cube.x = i * 50;
	cubesLeftChannel.push(cube);
	scene.addChild(cube);
}

The same procedure for the cubes standing for the right channel but with the green material and we place them between the green ones.

for(i = 0; i < CUBES_PER_CHANNEL; i++) {
	cube = new Cube(greenMaterial, 12, 50);
	cube.x = (i * 50) + 25;
	cubesRightChannel.push(cube);
	scene.addChild(cube);
}

Finally we create a new camera, set the target to the cube in the middle, adjust the zoom and move the start position a bit to the upper left

camera = new Camera3D();
camera.zoom = 11;
camera.target = cubesRightChannel[CUBES_PER_CHANNEL / 2 - 1] as Cube;
camera.x -= 400;
camera.y += 300;

Now we’re finished with creating all the necessary 3d stuff. Next thing to do is loading a sample mp3 file which is quite easy. We just load the url request we’ve created bevore and play the file.

sndObject.load(reqObject);
sndObject.play();

The only thing left to do is the render loop. This loop will be executed on enter frame, in our case 60 times per second. First, we compute the spectrum and put the result in the defined byte array.

SoundMixer.computeSpectrum(sndBytes);

Then we set the right position for the byte array pointer, read the float value and assign it to the current cube scaleY value. Like this, the cubes will be resized according to the spectrum. After the end of the first loop, we repeat the procedure for the right channel cubes

for(var i = 0; i < CUBES_PER_CHANNEL; i++) {
	var myCube:Cube = cubesLeftChannel[i] as Cube;
	sndBytes.position = CHANNEL_STEPS * 4 * i;
	myCube.scaleY =  sndBytes.readFloat();
}
for(i = 0; i < CUBES_PER_CHANNEL; i++) {
	myCube = cubesRightChannel[i] as Cube;
	sndBytes.position = 1024 + (CHANNEL_STEPS * 4 * i);
	myCube.scaleY = sndBytes.readFloat();
}

To swing our camera a bit, we increase and decrease it’s x value

if(bolAnimationForward) {
	camera.x += 4;
	if(camera.x > 800)
		bolAnimationForward = false;
} else {
	camera.x -= 4;
	if(camera.x < -400)
		bolAnimationForward = true;
}

And now we need to tell the render engine to render the current scene, camera and viewport

renderer.renderScene(scene, camera, viewport);

That was already the whole trick. You can also try rendering other materials and different objects. These were just the basics about papervision3d. We hope you enjoyed reading this tutorial. Any feedbacks and questions are welcome.

In the final you will get this:

Full code with comments

// Import Papervision3D
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.utils.MaterialsList;

// constants
const CHANNELS_PER_DIRECTION:int= 256;
const CUBES_PER_CHANNEL:int		= 8;
const CHANNEL_STEPS:int			= Math.floor(CHANNELS_PER_DIRECTION / CUBES_PER_CHANNEL);

// papervision vars
var viewport:Viewport3D;
var scene:Scene3D;
var camera:Camera3D;
var cube:Cube;
var renderer:BasicRenderEngine;

// arrays holding references to cubes for each channel
var cubesLeftChannel:Array		= new Array();
var cubesRightChannel:Array		= new Array();
// animation flag
var bolAnimationForward:Boolean = true;

// sound vars
var sndObject:Sound				= new Sound();
var reqObject:URLRequest 		= new URLRequest("so-deep.ram2000.mp3");
var sndBytes:ByteArray			= new ByteArray();

// INIT
function init():void {
	init3D();
	initSound();
	// add event listener for render loop
	addEventListener(Event.ENTER_FRAME, renderLoop);
}

// init3d
function init3D():void {
	// Create viewport
	viewport = new Viewport3D(0, 0, true);
	// add viewport to stage
	addChild(viewport);

	// create basic render engine
	renderer = new BasicRenderEngine();

	// Create scene
	scene = new Scene3D();

	// blue cube material
	var blueMaterial:MaterialsList = new MaterialsList(
		{
			front:  new ColorMaterial(0x0066FF),
			back:   new ColorMaterial(0x0066FF),
			right:  new ColorMaterial(0x0046B0),
			left:   new ColorMaterial(0x0046B0),
			top:    new ColorMaterial(0x1171FF),
			bottom: new ColorMaterial(0x1171FF)
		}
	);

	// green cube material
	var greenMaterial:MaterialsList = new MaterialsList(
		{
			front:  new ColorMaterial(0x00CC00),
			back:   new ColorMaterial(0x00CC00),
			right:  new ColorMaterial(0x009F00),
			left:   new ColorMaterial(0x009F00),
			top:    new ColorMaterial(0x00CC00),
			bottom: new ColorMaterial(0x00CC00)
		}
	);

	// create cubes for left channel
	for(var i = 0; i < CUBES_PER_CHANNEL; i++) {
		cube = new Cube(blueMaterial, 12, 50, 400);
		cube.x = i * 50;
		cubesLeftChannel.push(cube);
		scene.addChild(cube);
	}
	//create cubes for the right channel
	for(i = 0; i < CUBES_PER_CHANNEL; i++) {
		cube = new Cube(greenMaterial, 12, 50);
		cube.x = (i * 50) + 25;
		cubesRightChannel.push(cube);
		scene.addChild(cube);
	}

	// create camera
	camera = new Camera3D();
	// set camera zoom
	camera.zoom = 11;
	// set cube in the center as camera target
	camera.target = cubesRightChannel[CUBES_PER_CHANNEL / 2 - 1] as Cube;
	// camera start position
	camera.x -= 400;
	camera.y += 300;
}

function initSound():void {
	// load mp3 file and play it
	sndObject.load(reqObject);
	sndObject.play();
}

// render loop function
function renderLoop(e:Event):void
{
	// compute spectrum and put result in byte array
	SoundMixer.computeSpectrum(sndBytes);

	//
	// LEFT CHANNEL CUBES
	for(var i = 0; i < CUBES_PER_CHANNEL; i++) {
		var myCube:Cube = cubesLeftChannel[i] as Cube;
		// get the right positions for the byte array
		sndBytes.position = CHANNEL_STEPS * 4 * i;
		// resize current cube
		myCube.scaleY =  sndBytes.readFloat();
	}
	//
	// RIGHT CHANNEL CUBES
	for(i = 0; i < CUBES_PER_CHANNEL; i++) {
		myCube = cubesRightChannel[i] as Cube;
		// get the right positions for the byte array
		sndBytes.position = 1024 + (CHANNEL_STEPS * 4 * i);
		// resize current cube
		myCube.scaleY = sndBytes.readFloat();
	}

	// swing camera
	if(bolAnimationForward) {
		camera.x += 4;
		if(camera.x > 800)
			bolAnimationForward = false;
	} else {
		camera.x -= 4;
		if(camera.x < -400)
			bolAnimationForward = true;
	}

	// render current scene
	renderer.renderScene(scene, camera, viewport);
}

init();

We’ll focus on the spectrum analyzer and build just the basic functionality for the player itself.

Actionscript 3 has a new class called SoundMixer which gives you global sound control in the SWF file. It comes with the computeSpectrum method that takes a snapshot of the current sound wave and places it into the specified ByteArray object. The values are formatted as floating-point values, in the range -1.0 to 1.0. There are in total 512 values. Half of them for the right and left channel.

With these values you can easily create a visual spectrum. Let’s take a closer look at our renderSpectrum function, which is automatically called, when Flash enters a new frame.

First of all, we set a reference to the spectrum graphics:

function renderSpectrum(e:Event):void
{
var g:Graphics = this.mcMp3Player.spectrum.graphics;

Next, we compute the spectrum in the byte array “sndBytes”:

SoundMixer.computeSpectrum(sndBytes);

And then comes the most important part, visualizing the spectrum that is. We clear all the graphics and set a new line style and fill and move our drawing pointer to the middle left position.

Next, we create a number “n” which will contain the multiplied number from the maximum height of the spectrum and the current float number.

To create the curves, we iterate 256 times (which represents the left channel values) and read the current  float numbers from the byte array. Note that reading a value from a byte array will automatically set the pointer position to the next value.

As mentioned before, we multiply the float number with the maximum height and set it to “n”. In our case the value will be between 75 and -75 depending on what values we get from the byte array. To draw the line we use “i * 2″ for the x-coordinate and “SPECTRUM_HEIGHT - n” for the y-coordinate. This will result in a nice wave shape. We only need to set the end point for the line and end the fill instruction.

For the right channel it’s the same procedure, except that we take the last 256 values from the byte array.

g.clear();
g.lineStyle(0, SPECTRUM_LEFT_LINE_COLOR);
g.beginFill(SPECTRUM_LEFT_FILL_COLOR, SPECTRUM_LEFT_FILL_ALPHA);
g.moveTo(0, SPECTRUM_HEIGHT);
var n:Number = 0;
for (var i:int = 0; i < CHANNEL_LENGTH; i++) {
n = (sndBytes.readFloat() * SPECTRUM_HEIGHT);
g.lineTo(i * 2, SPECTRUM_HEIGHT - n);
}
g.lineTo(CHANNEL_LENGTH * 2, SPECTRUM_HEIGHT);
g.endFill();

As you can see, it’s very easy to create a nice little spectrum. There are many other amazing spectrum analyzer out there which you should check out.

Here is the full code of this mp3 player, with the constants and vars, where you set the animation parameters:

// spectrum constants
const SPECTRUM_HEIGHT:int                 = 75;
const CHANNEL_LENGTH:int                 = 256;
const SPECTRUM_LEFT_FILL_COLOR:uint        = 0x5FDEFE;
const SPECTRUM_LEFT_FILL_ALPHA:Number    = 0.5;
const SPECTRUM_LEFT_LINE_COLOR:uint        = 0x013643;
const SPECTRUM_RIGHT_FILL_COLOR:uint    = 0xBFF075;
const SPECTRUM_RIGHT_FILL_ALPHA:Number    = 0.5;
const SPECTRUM_RIGHT_LINE_COLOR:uint    = 0x4A730D;
// vars
var sndObject:Sound                = new Sound();
var chaObject:SoundChannel        = new SoundChannel() ;
var sndTransform:SoundTransform    = new SoundTransform();
var reqObject:URLRequest         = new URLRequest("so-deep.ram2000.mp3");
var sndBytes:ByteArray            = new ByteArray();
var intPosition:int             = 0;
var bolStop:Boolean                = true;
function initMP3Player():void {
// set event listeners
addEventListener(Event.ENTER_FRAME, renderSpectrum);
addEventListener(Event.ENTER_FRAME, calcProgress);
this.mcMp3Player.btnStop.addEventListener(MouseEvent.CLICK, stopPlayback);
this.mcMp3Player.btnPause.addEventListener(MouseEvent.CLICK, pausePlayback);
this.mcMp3Player.btnPlay.addEventListener(MouseEvent.CLICK, startPlayback);
this.mcMp3Player.btnMute.addEventListener(MouseEvent.CLICK, mutePlayback);
this.mcMp3Player.btnUnmute.addEventListener(MouseEvent.CLICK, unmutePlayback);
this.mcMp3Player.progress.addEventListener(MouseEvent.CLICK, setNewProgress);
// use hand cursor for progress bar
this.mcMp3Player.progress.buttonMode = true;
this.mcMp3Player.btnPause.visible    = false;
this.mcMp3Player.btnUnmute.visible    = false;
}
function stopPlayback(e:MouseEvent):void {
chaObject.stop();
sndObject = new Sound();
bolStop = true;
intPosition = 0;
this.mcMp3Player.btnPlay.visible    = true;
this.mcMp3Player.btnPause.visible    = false;
}
function pausePlayback(e:MouseEvent):void {
this.mcMp3Player.btnPlay.visible    = true;
this.mcMp3Player.btnPause.visible    = false;
playSound(false);
}
function startPlayback(e:MouseEvent):void {
this.mcMp3Player.btnPlay.visible    = false;
this.mcMp3Player.btnPause.visible    = true;
playSound();
}
function mutePlayback(e:MouseEvent):void {
this.mcMp3Player.btnMute.visible    = false;
this.mcMp3Player.btnUnmute.visible    = true;
setVolume(0);
}
function unmutePlayback(e:MouseEvent):void {
this.mcMp3Player.btnMute.visible    = true;
this.mcMp3Player.btnUnmute.visible    = false;
setVolume(1);
}
function setNewProgress(e:MouseEvent):void {
var p:int = sndObject.length * e.currentTarget.mouseX / 220;
chaObject.stop();
chaObject = sndObject.play(p);
this.mcMp3Player.btnPlay.visible    = false;
this.mcMp3Player.btnPause.visible    = true;
}
function playSound(bolPlay:Boolean = true):void {
if(bolPlay) {
if(bolStop) {
// load mp3 file if playback has been stopped
sndObject.load(reqObject);
bolStop = false;
} else {
intPosition = chaObject.position;
}
chaObject = sndObject.play(intPosition);
} else {
chaObject.stop();
}
}
function setVolume(intVolume:int = 1):void {
sndTransform.volume = intVolume;
chaObject.soundTransform = sndTransform;
}
function calcProgress(e:Event):void {
var p:MovieClip = this.mcMp3Player.progress.mcProgressFill;
var w:int        = Math.round( 220 * chaObject.position / sndObject.length);
p.width         = w;
}
function renderSpectrum(e:Event):void
{
// set a reference to the spectrum graphics
var g:Graphics = this.mcMp3Player.spectrum.graphics;
// compute spectrum in byte array sndBytes
SoundMixer.computeSpectrum(sndBytes);
/*
*    LEFT CHANNEL
*/
g.clear();
g.lineStyle(0, SPECTRUM_LEFT_LINE_COLOR);
g.beginFill(SPECTRUM_LEFT_FILL_COLOR, SPECTRUM_LEFT_FILL_ALPHA);
g.moveTo(0, SPECTRUM_HEIGHT);
var n:Number = 0;
for (var i:int = 0; i < CHANNEL_LENGTH; i++) {
n = (sndBytes.readFloat() * SPECTRUM_HEIGHT);
g.lineTo(i * 2, SPECTRUM_HEIGHT - n);
}
g.lineTo(CHANNEL_LENGTH * 2, SPECTRUM_HEIGHT);

g.endFill();
/*
*    RIGHT CHANNEL
*/
g.lineStyle(0, SPECTRUM_RIGHT_LINE_COLOR);
g.beginFill(SPECTRUM_RIGHT_FILL_COLOR, SPECTRUM_RIGHT_FILL_ALPHA);
g.moveTo(CHANNEL_LENGTH * 2, SPECTRUM_HEIGHT);
for (i = CHANNEL_LENGTH; i > 0; i--) {
n = (sndBytes.readFloat() * SPECTRUM_HEIGHT);
g.lineTo(i * 2, SPECTRUM_HEIGHT - n);
}
g.lineTo(0, SPECTRUM_HEIGHT);
g.endFill();
}
initMP3Player();

So, we’ve already reached the end of our lesson and we hope, that you enjoyed it!

Be sure to check back soon as we’ll take the spectrum analyzer to 3d!

Download Support files