1. SM1205 Interactivity Topic 08: Interaction with Multiple Objects Spring 2010SCM-CityU1

2. Interaction with Objects We learned how to create and process multiple objects How to interact with multiple objects? Spring 2010SCM-CityU2

3. Bounding Balls Extend from simple particle system – Open particle.fla – We will add more control to the particles Bounding tests Hitting tests Spring 2010SCM-CityU3

4. Bounding Balls Add bounding test – Update location and speed when particle hit the bottom boundary – How about the left and right boundaries? Add new tests to handles them! Spring 2010SCM-CityU4 if (p.y > stage.stageHeight) { p.y = stage.stageHeight; p.speedY = -p.speedY * 0.9; } Test it !

5. Hit Test All particles are moving without hitting others – We can check for intersection between objects using function hitTestObject Spring 2010SCM-CityU5 object1.hitTestObject(object2); object1 object2 object1.hitTestObject(object2) = true Test it !

6. Hit Test How to check hitting among all object? We can use a nested for loop Spring 2010SCM-CityU6 for (i=0; i<particleArray.length; i++) { var p1:Particle = particleArray[i]; for (j=i+1; j<particleArray.length; j++) { var p2:Particle = particleArray[j]; if (p1.hitTestObject(p2)) { trace(“Hit”); }

7. Bounding Balls We add collision effect by swapping speeds of two hitting objects Spring 2010SCM-CityU7 for (i=0; i<particleArray.length; i++) { var hitOther:Boolean = false; var p1:Particle = particleArray[i]; for (j=i+1; j<particleArray.length; j++) { var p2:Particle = particleArray[j]; if (p1.hitTestObject(p2)) { var tmp:Number = p1.speedX; p1.speedX = p2.speedX; p2.speedX = tmp; tmp = p1.speedY; p1.speedY = p2.speedY; p2.speedY = tmp; } Test it !

8. Bounding Balls – Exercise Use mouse click to shoot a ball (e.g. from left to right) Spring 2010SCM-CityU8 Chick!

9. Easing How to move object dynamically and smoothing? Easing is a simple technique to change values smoothly and naturally Open and test easing02_final.fla Spring 2010SCM-CityU9

10. Easing Rather than updating value directly (e.g. lication) we set a target value and approach it smoothing Open easing_final.fla Spring 2010SCM-CityU10 var targetX:Number = stage.stageWidth / 2; var targetY:Number = stage.stageHeight / 2; var dx:Number = targetX - myCircle.x; var dy:Number = targetY - myCircle.y; myCircle.x += dx * 0.1; myCircle.y += dy * 0.1;

11. Following Objects can follow other object using easing Open easing02.fla Add follow code to create all balls Spring 2010SCM-CityU11 var circleArray :Array = new Array(); for (var i:int = 0; i<10; i++) { var c:Circle = new Circle(); c.targetX = stage.stageWidth / 2; c.targetY = stage.stageHeight / 2; c.scaleX = c.scaleY = 1.0 - (i / 10.0); circleArray.push(c); addChild(c); }

12. Following Add the mouse event listener to set the target object of first ball Note that now no ball is moving Spring 2010SCM-CityU12 stage.addEventListener(MouseEvent.MOUSE_MOVE, onStageMouseMove); function onStageMouseMove(e:MouseEvent) : void { circleArray[0].targetX = e.stageX; circleArray[0].targetY = e.stageY; }

13. Following Add the time event listener to move all balls Note how the balls follow the previous one Spring 2010SCM-CityU13 var timer:Timer = new Timer(10); timer.addEventListener(TimerEvent.TIMER, onTimer); timer.start(); function onTimer(e:TimerEvent) : void { for (var i:int = 0; i<10; i++) { var c:Circle = circleArray[i]; var dx:Number = c.targetX - c.x; var dy:Number = c.targetY - c.y; c.x += dx * 0.1; c.y += dy * 0.1; // follow the previous ball if (i >= 1) { c.targetX = circleArray[i-1].x; c.targetY = circleArray[i-1].y; }

14. Image Scroller Now we make a real application – Image Scroller – Load image dynamically – Scroll when mouse over the images – Scrolling speed is controlled by mouse location – Click to open images Spring 2010SCM-CityU14

15. Image Scroller Load an external image Make sure the image file is in the same folder Spring 2010SCM-CityU15 var ldr:Loader = new Loader(); var url:String = “1.jpg" var urlReq:URLRequest=new URLRequest(url); ldr.load(urlReq); var thisOne:MovieClip = new MovieClip(); thisOne.addChild(ldr); addChild(thisOne);

16. Image Scroller Load multiple images Spring 2010SCM-CityU16 var imageArray:Array = new Array(); for (var i:int=0; i<10; i++) { var ldr:Loader = new Loader(); var url:String = (i+1).toString() + ".jpg" var urlReq:URLRequest=new URLRequest(url); ldr.load(urlReq); var thisOne:MovieClip = new MovieClip(); thisOne.addChild(ldr); thisOne.x = 200 * i; thisOne.scaleX = ldr.scaleY=0.5; thisOne.alpha = 0.5; thisOne.link = url; imageArray.push(thisOne); addChild(thisOne); }

17. Image Scroller Move the images with mouse location Spring 2010SCM-CityU17 var timer:Timer = new Timer(20); timer.addEventListener(TimerEvent.TIMER, onTimer); timer.start(); function onTimer(e:TimerEvent) : void { var speed:Number; var offset:Number = mouseX - stage.stageWidth / 2; if (-100 < offset && offset < 100) { speed = 0; } else if (mouseX > stage.stageWidth / 2) { speed = -5; } else { speed = 5; }

18. Image Scroller Move the images with mouse location Spring 2010SCM-CityU18 var timer:Timer = new Timer(20); timer.addEventListener(TimerEvent.TIMER, onTimer); timer.start(); function onTimer(e:TimerEvent) : void { var speed:Number; if (mouseX > stage.stageWidth / 2) { speed = -5; } else { speed = 5; } for (var i:int=0; i<10; i++) { imageArray[i].x += speed; }

19. Image Scroller Exercise – Limit the scrolling (stop moving when leftmost / rightmost image is shown) – Improve scrolling speed (no scrolling when mouse is around the middle) – Add events on clicking and move over Update the alpha value when mouse over Open image in browser when mouse click Spring 2010SCM-CityU19

20. Image Scroller Limit the scrolling – Set speed to zero when leftmost or rightmost image is shown Spring 2010SCM-CityU20 if (imageArray[0].x > 0 && speed > 0) { speed = 0; } if (imageArray[9].x < stage.stageWidth-200 && speed < 0) { speed = 0; }

21. Image Scroller Improve scrolling speed – Set speed to zero when mouse is at the middle part – The speed is according the distance from mouse to middle line Spring 2010SCM-CityU21 var offset:Number = mouseX - stage.stageWidth / 2; if (-100 < offset && offset < 100) { speed = 0; } else if (mouseX > stage.stageWidth / 2) { speed = -(offset - 100) / 10.0; } else { speed = -(offset + 100) / 10.0; }

22. Image Scroller Add events on clicking Spring 2010SCM-CityU22 thisOne.addEventListener(MouseEvent.CLICK, onClickImage); /////// function onClickImage(e:MouseEvent) : void { var urlRequest:URLRequest = new URLRequest(e.currentTarget.link); navigateToURL(urlRequest); }

23. Image Scroller Add events on mouse over Spring 2010SCM-CityU23 thisOne.addEventListener(MouseEvent.MOUSE_OVER, onMouseOverImage); thisOne.addEventListener(MouseEvent.MOUSE_OUT, onMouseOutImage); function onMouseOverImage(e:MouseEvent) : void { e.currentTarget.alpha = 1.0; } function onMouseOutImage(e:MouseEvent) : void { e.currentTarget.alpha = 0.5; }