In the last circular collision tutorial we could find when the circle hits the other one, but nothing more.
So this tutorial will contain how to make the circles un-overlappable.
To read the first tutorial in these series isn’t compulsory, but you could do that if you want.
I’ll start all over, with a new .fla file, mostly because thats simpler.
So. Create an ActionScript 3.0 .fla file. Good good. As far everything is just good.
Lets create 2 circle MovieClips by opening up the ActionScript panel (F9) and typing in this there:
var c1:MovieClip=new MovieClip();//Circle 1 var c1r:uint=new uint(30);//Circle 1 Radius c1.graphics.beginFill(0xCCCCCC);//Fill color c1.graphics.drawEllipse(-c1r,-c1r,c1r*2,c1r*2);//Draws the circle c1.x=275; c1.y=200; addChild(c1); var c2:MovieClip=new MovieClip();//Circle 2 var c2r:uint=new uint(100);//Circle 2 Radius c2.graphics.beginFill(0xCCFFCC);//Fillcolor c2.graphics.drawEllipse(-c1r,-c1r,c1r*2,c1r*2);//Draws circle c2.x=100; c2.y=100; addChild(c2); |
Now this creates the circles, and places them on the stage.

Then we need the code for moving the other circle.
And its here:
var dx:int=new int();//Distance x var dy:int=new int();//Distanve y var len:Number=new Number();//Length var df:Number=new Number();//Force off stage.addEventListener(MouseEvent.MOUSE_MOVE,mouse_move); function mouse_move(event:MouseEvent):void { dx=c1.x-mouseX;//Distance x dy=c1.y-mouseY;//Dist. y len=Math.sqrt(dx*dx+dy*dy);//Length if (len<=(c1r+c2r)) {//if the length is shorter than the 2 added radiuses df=len-(c1r+c2r);//set the force to dist minus the 2 radiuses dx=dx/len*df;//Divide distance x with the length, this makes the dx a value of "1", and then multiplies with df, which makes it as long as its overlapping. dy=dy/len*df;//Same here. } else {//Else dx and dy is nothing dx=0; dy=0; } c2.x=mouseX+dx;//Sets the x pos of the circle to mouseX+ the x-distance thats left. c2.y=mouseY+dy;//Same with y-position } |
This code is almost the same, but with small differences. It doesn’t set the moving circles x, and y directly.
First it calculates the offset for it.
The code describes how it works, but not so fantastically. If you experiment with it a little and think a bit I think you could understand what happens with the code.
It should be like this anyways:
If you couldn’t get this to work click here for the source.
A follow up will be written, probably.
Hopefully you liked this tutorial. And if you did, I’m happy
Bye bye.














December 7th, 2008 at 17:59:26
Brilliant!
January 14th, 2009 at 17:24:01
If you put your cursor right in the middle it will go in middle