Embed Size (px)
Citation preview
SM1205 Interactivity
Topic 08: Interaction with Multiple Objects
Spring 2010 SCM-CityU 1
Interaction with Objects
• We learned how to create and process multiple objects
• How to interact with multiple objects?
Spring 2010 SCM-CityU 2
Bounding Balls
• Extend from simple particle system– Open particle.fla– We will add more control to the particles• Bounding tests• Hitting tests
Spring 2010 SCM-CityU 3
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 2010 SCM-CityU 4
if (p.y > stage.stageHeight){
p.y = stage.stageHeight;p.speedY = -p.speedY * 0.9;
}Test it !
Hit Test
• All particles are moving without hitting others– We can check for intersection between objects
using function hitTestObject
Spring 2010 SCM-CityU 5
object1.hitTestObject(object2);
object1
object2
object1.hitTestObject(object2) = true
Test it !
Hit Test
• How to check hitting among all object?• We can use a nested for loop
Spring 2010 SCM-CityU 6
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”);}
}}
Bounding Balls
• We add collision effect by swapping speeds of two hitting objects
Spring 2010 SCM-CityU 7
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 !
Bounding Balls
– Exercise• Use mouse click to shoot a ball (e.g. from left to right)
Spring 2010 SCM-CityU 8
Chick!
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 2010 SCM-CityU 9
Easing
• Rather than updating value directly (e.g. lication) we set a target value and approach it smoothing
• Open easing_final.fla
Spring 2010 SCM-CityU 10
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;
Following
• Objects can follow other object using easing• Open easing02.fla• Add follow code to create all balls
Spring 2010 SCM-CityU 11
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);
}
Following
• Add the mouse event listener to set the target object of first ball
• Note that now no ball is moving
Spring 2010 SCM-CityU 12
stage.addEventListener(MouseEvent.MOUSE_MOVE, onStageMouseMove);function onStageMouseMove(e:MouseEvent) : void {
circleArray[0].targetX = e.stageX;circleArray[0].targetY = e.stageY;
}
Following
• Add the time event listener to move all balls
• Note how the balls follow the previous oneSpring 2010 SCM-CityU 13
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 ballif (i >= 1){
c.targetX = circleArray[i-1].x;c.targetY = circleArray[i-1].y;
}}
}
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 2010 SCM-CityU 14
Image Scroller
• Load an external image
• Make sure the image file is in the same folder
Spring 2010 SCM-CityU 15
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);
Image Scroller
• Load multiple images
Spring 2010 SCM-CityU 16
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);
}
Image Scroller
• Move the images with mouse location
Spring 2010 SCM-CityU 17
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;
}}
Image Scroller
• Move the images with mouse location
Spring 2010 SCM-CityU 18
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;}
}
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 2010 SCM-CityU 19
Image Scroller
• Limit the scrolling – Set speed to zero when leftmost or rightmost
image is shown
Spring 2010 SCM-CityU 20
if (imageArray[0].x > 0 && speed > 0) {speed = 0;
}if (imageArray[9].x < stage.stageWidth-200 && speed < 0) {
speed = 0;}
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 2010 SCM-CityU 21
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;}
Image Scroller
• Add events on clicking
Spring 2010 SCM-CityU 22
thisOne.addEventListener(MouseEvent.CLICK, onClickImage);
///////
function onClickImage(e:MouseEvent) : void{ var urlRequest:URLRequest = new URLRequest(e.currentTarget.link); navigateToURL(urlRequest); }
Image Scroller
• Add events on mouse over
Spring 2010 SCM-CityU 23
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;}
