SM1205 Interactivity Topic 06: Sound Spring 2010SCM-CityU1.

SM1205 Interactivity

Topic 06: Sound

Spring 2010 SCM-CityU 1

Review: Multiple Objects

• How to control multiple objects with similar behaviors?


random particles flying

Particle System

• Create your particle– Open particle.fla– Make symbol circle accessible in

AS– Add code below and test it


stop();

var p:Particle = new Particle();p.x = stage.stageWidth / 2;p.y = stage.stageHeight / 2;addChild(p);

Particle System

• Animate the particle


stop();

var p:Particle = new Particle();p.x = stage.stageWidth / 2;p.y = stage.stageHeight / 2;addChild(p);

var timer:Timer = new Timer(50);timer.addEventListener(TimerEvent.TIMER, onTimer);timer.start();

function onTimer(e:TimerEvent) : void {

p.x += 3;p.y += 3;

} Test it !

Particle System

• How about random movement?


stop();

var speedX = Math.random() * 10 - 5;var speedY = Math.random() * 10 - 5;var p:Particle = new Particle();p.x = stage.stageWidth / 2;p.y = stage.stageHeight / 2;addChild(p);

var timer:Timer = new Timer(50);timer.addEventListener(TimerEvent.TIMER, onTimer);timer.start();


p.x += speedX ;p.y += speedY ;

} Test it !

Particle System

• How about more particles?– We use an array to store all particles

– Two functions for adding and moving particles– Modify the onTimer() function



addParticle();moveParticle();

}

var particleArray:Array = new Array();

Particle System

How about more particles?


function addParticle() {var p:Particle = new Particle();p.x = stage.stageWidth / 2;p.y = stage.stageHeight / 2;p.speedX = Math.random() * 10 - 5;p.speedY = Math.random() * 10 - 5;addChild(p);particleArray.push(p); // add to array

// remove from array if too manyif (particleArray.length > 100) {

var lastParticle = particleArray.shift();removeChild(lastParticle);

}}

Particle System

How about more particles?


function moveParticle(){

for (var i:int=0; i<particleArray.length; i++){

var p = particleArray[i];p.x += p.speedX;p.y += p.speedY;p.alpha -= 0.01;

}}

Particle System

Exercise1. Random size and transparent level

• Using scaleX, scaleY and alpha properties

2. Create the particles at the cursor position

• Using mouseX and mouseY

3. Add gravity to animation• Modify moveParticle function?


Sound

How to play sound using AS3.0?

First of all, we need a sound files• Download “test.mp3” and “test2.mp3”• Open sound.fla


Sound

How to play sound using AS3.0?

We need a sound object to play a sound file

Play the movie and listen!


var mySound:Sound = new Sound(new URLRequest("test.mp3"));mySound.play();

Sound

How to control sound playback?

Play Button

How if you press the play buttons twice?How to fix it? Hint: Use a boolean variable


var sc:SoundChannel = mySound.play();

playButton.addEventListener(MouseEvent.CLICK, onPlayButtonClick);function onPlayButtonClick(e:MouseEvent) : void{

sc = mySound.play();}

Sound Visualization Library

woodpeckerflash.wordpress.com

We will use this library to create visual effect



Step 0. Download and install the library– Decompress and copy the folder “com” to the

folder containing you flash file


Your folder

Decompressedfolder


Step 1. Select or create a symbol as your visualization element


Remember to export for ActionScript


Step 2. Load and play sound file

Step 3. Create visualization object


var mySound:Sound=new Sound(new URLRequest("test.mp3"));var sc:SoundChannel=mySound.play();

var myBars:WoodPecker=new WoodPecker(Dot,[true,true,true],8,100,true,true);

myBars.x=20;myBars.y=200;addChild(myBars);

Test it !


Explanation



Visualization element(Class Dot in this case)

Deformation Flag(scale width, height, alpha based on beat amplitude)

Number of

elements

Size of elements

True for frequency and false for wave

Dragable flag

Change parameters and test!

Sound Visualization LibraryStep 4. Arrange visualization elements

Set draggable flag to trueSet displayOn flag to true

Add key down listener



myBars.displayOn = true;

Dragable flag

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyListener);function keyListener(e:KeyboardEvent) {

if (e.key == ‘ ‘) {myBars.recordBeat();

}}


Step 4. Arrange visualization elements (con’t)Drag elements to places you like


Sound Visualization LibraryStep 4. Arrange visualization elements (con’t)

Press “space” key to print construction code for new placement



Step 4. Arrange visualization elements (con’t)Copy code into your ActionScript


var myBars:WoodPecker=newWoodPecker(Dot,[true,true,true],8,100,true,true);

myBars.x=20;myBars.y=200;addChild(myBars);myBars.setBeatObject({ clip:[Dot,Dot,Dot,Dot,Dot,Dot,Dot,Dot], x:[18,29,49,87,118,208,164,250], y:[-149,-116,-90,-67,-48,-30,-35,-23], alpha:[1,1,1,1,1,1,1,1], color:[,,,,,,,], blendMode:['','','','','','','',''], filters:[,,,,,,,], beatSize:[100,100,100,100,100,100,100,100], startSize:[0,0,0,0,0,0,0,0]});

New added code

Test it !


Step 5. Replace visualization elementsReplace classes passed into the setBeatObject function


var myBars:WoodPecker=newWoodPecker(Dot,[true,true,true],8,100,true,true);

myBars.x=20;myBars.y=200;addChild(myBars);myBars.setBeatObject({ clip:[Dot,Bar,Dot,Bar,Dot,Bar,Dot,Bar], x:[18,29,49,87,118,208,164,250], y:[-149,-116,-90,-67,-48,-30,-35,-23], alpha:[1,1,1,1,1,1,1,1], color:[,,,,,,,], blendMode:['','','','','','','',''], filters:[,,,,,,,], beatSize:[100,100,100,100,100,100,100,100], startSize:[0,0,0,0,0,0,0,0]});

Test it !


Replace steps 4 and 5 to make your own visualization !


SM1205 Interactivity Topic 06: Sound Spring 2010SCM-CityU1.

Documents

Transcript of SM1205 Interactivity Topic 06: Sound Spring 2010SCM-CityU1.