5

scris de:
Peter

New Flash Tutorial: Music trail follows mouse

17.03.10

In this tutorial I will try to give an idea on how to achieve an effect similar to the one on this site . There is a mouse trail that reacts to the music playing , of course the original app is more complex and instead of loading an mp3 file it loads multiple mp3 files for the custom animation sequences, the pace control of the animation and so on. In this example I will try to give you an idea of how this effect could be achieved, it doesn’t mean that this is how they did it or that this is the best way to create something like this.

First let’s create a new flash document, and create a play button , add it in the middle of the stage and give it an instance name of “gos”, or download the starter files here. Now that we have our document ready let’s create our variables:

var music=new Sound(new URLRequest("song.mp3"));//the variable in which we load our song
var ba:ByteArray= new ByteArray();//the needed byte array so we can analyze the sound
var spr:Sprite=new Sprite();//a new sprite in which to draw
var arr:Array=[];//and an array to keep the line data

addChild(spr);//add the sprite to the display list

Let’s create the function that plays the music and starts the animation:
gos.addEventListener(MouseEvent.CLICK,doCli);

function doCli(e:MouseEvent){
gos.visible=false;
stage.addEventListener(Event.ENTER_FRAME, loop);
music.play();
}

And now the function that does all the drawing and sound analyzing :
function loop(e:Event):void {
spr.graphics.clear();//clear everything drawn
spr.graphics.moveTo(-90,stage.stageHeight/2);//move the graphics outside the visible area

SoundMixer.computeSpectrum(ba,true);//use the SoundMixer to analyze the sound

//create a for loop to set the properties of the line

for (var i:uint=0; i<256; i=i+4) {

var num:Number= ba.readFloat()*10;

var obj:Object=new Object();
obj.x=mouseX;
obj.y=mouseY;
obj.thick=num+3;
arr.push(obj);
}

//use another for loop to draw
for(var i2:uint=0;i2;i2<arr.length;i2++){

//decrees the x position on every point to achieve the moving canvas effect
arr[i2].x-=5;
spr.graphics.lineStyle(arr[i2].thick);
spr.graphics.lineTo(arr[i2].x,arr[i2].y);

//remove any point that goes beyond -100 on the x axis so that the app doesn't run slow
if(arr[i2].x<-100){
arr.splice(i2,1);
}
}
}

Now let’s test the movie and you should have something similar to this:

Get Adobe Flash player

You can download the finished files here.

On the labuant website, your every movement is recorded so that you can play your custom “video” after you have finished “playing” with the site. In order to do this you could save all the data in a new array, and create a custom “for” loop to draw your movements automatic. Remember this is not the best way to do something like this, it is just an idea on how to do something like this.

1 comentariu        legatura permanenta, flux RSS comentarii
  1. ced says:

    Hello, would I like to know how to put instead of lines a clip?

    Thank you and good site.

Comentarii

Email-ul tau nu va fi publicat. Numele si email-ul sunt obligatorii.