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

2. Review: Multiple Objects How to control multiple objects with similar behaviors? Spring 2010SCM-CityU2 random particles flying

3. Particle System Create your particle – Open particle.fla – Make symbol circle accessible in AS – Add code below and test it Spring 2010SCM-CityU3 stop(); var p:Particle = new Particle(); p.x = stage.stageWidth / 2; p.y = stage.stageHeight / 2; addChild(p);

4. Particle System Animate the particle Spring 2010SCM-CityU4 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 !

5. Particle System How about random movement? Spring 2010SCM-CityU5 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(); function onTimer(e:TimerEvent) : void { p.x += speedX ; p.y += speedY ; } Test it !

6. Particle System How about more particles? – We use an array to store all particles – Two functions for adding and moving particles – Modifythe onTimer() function Spring 2010SCM-CityU6 function onTimer(e:TimerEvent) : void { addParticle(); moveParticle(); } var particleArray:Array = new Array();

7. Particle System How about more particles? Spring 2010SCM-CityU7 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 many if (particleArray.length > 100) { var lastParticle = particleArray.shift(); removeChild(lastParticle); }

8. Particle System How about more particles? Spring 2010SCM-CityU8 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; }

9. Particle System Exercise 1.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? Spring 2010SCM-CityU9

10. 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 Spring 2010SCM-CityU10

11. Sound How to play sound using AS3.0? We need a sound object to play a sound file Play the movie and listen! Spring 2010SCM-CityU11 var mySound:Sound = new Sound(new URLRequest("test.mp3")); mySound.play();

12. 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 Spring 2010SCM-CityU12 var sc:SoundChannel = mySound.play(); playButton.addEventListener(MouseEvent.CLICK, onPlayButtonClick); function onPlayButtonClick(e:MouseEvent) : void { sc = mySound.play(); }

13. Sound Visualization Library woodpeckerflash.wordpress.com We will use this library to create visual effect Spring 2010SCM-CityU13

14. Sound Visualization Library Step 0. Download and install the library – Decompress and copy the folder “com” to the folder containing you flash file Spring 2010SCM-CityU14 Your folder Decompressed folder

15. Sound Visualization Library Step 1. Select or create a symbol as your visualization element Spring 2010SCM-CityU15 Remember to export for ActionScript

16. Sound Visualization Library Step 2. Load and play sound file Step 3. Create visualization object Spring 2010SCM-CityU16 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 !

17. Sound Visualization Library Explanation Spring 2010SCM-CityU17 var myBars:WoodPecker=new WoodPecker(Dot,[true,true,true],8,100,true,true); 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!

18. Sound Visualization Library Step 4. Arrange visualization elements Set draggable flag to true Set displayOn flag to true Add key down listener Spring 2010SCM-CityU18 var myBars:WoodPecker=new WoodPecker(Dot,[true,true,true],8,100,true,true); myBars.displayOn = true; Dragable flag stage.addEventListener(KeyboardEvent.KEY_DOWN, keyListener); function keyListener(e:KeyboardEvent) { if (e.key == ‘ ‘) { myBars.recordBeat(); }

19. Sound Visualization Library Step 4. Arrange visualization elements (con’t) Drag elements to places you like Spring 2010SCM-CityU19

20. Sound Visualization Library Step 4. Arrange visualization elements (con’t) Press “space” key to print construction code for new placement Spring 2010SCM-CityU20

21. Sound Visualization Library Step 4. Arrange visualization elements (con’t) Copy code into your ActionScript Spring 2010SCM-CityU21 var myBars:WoodPecker=new WoodPecker(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 !

22. Sound Visualization Library Step 5. Replace visualization elements Replace classes passed into the setBeatObject function Spring 2010SCM-CityU22 var myBars:WoodPecker=new WoodPecker(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 !

23. Sound Visualization Library Replace steps 4 and 5 to make your own visualization ! Spring 2010SCM-CityU23