multiple cubes that rotate to make room for each other

[zoltan]

Hi,
I realize that title probably isnt very clear. What I am trying to do is:

Imagine three squares, with edges flush, sitting in a row next to each other. Now imagine that the center square starts to rotate. As it rotates, the space that it occupies would obviously expand, and the cubes on either side should shift away from it to accomodate the center cube, and then as it completes its rotation, move back in so they're always flush. And obviously, if the cubes on the ends rotated, the other cubes would adjust in the same way.

Can anyone recommend a good way to handle this? what makes it tricky is that I would want it to work so that if multiple cubes were rotating at the same time they would all be shifting around and bumping back and forth to make room for one another.

thanks,

-z

[Noct]

This is a real quick attempt, but it is pretty much what you're asking for.
It's only set up for two boxes, and a bit jumpier then you probably want, but a little tweeking should smooth it out.
Some code to only let it push other boxes if they are under or over a certain distance away would probably fix the jumpyness.

var box1Width:Number = box1._width;
var box2Xhold:Number = box2._x;
onEnterFrame = function (){
//This is just rotation to show the effect
box1._rotation+=5
//If box 1 touches box 2
if (this.box1.hitTest(this.box2)){
//Get the current width of box 1
box1WidthTEMP = box1._width
//If the current width of box 1 is smaller then it's original width
if (box1Width>box1WidthTEMP){
//Get the difference and subtract that number from the X of box 2
myDiff = Math.round(box1Width-box1WidthTEMP);
this.box2._x-=myDiff;
}
//If the current width of box 1 is larger then it's original width
else if (box1Width<box1WidthTEMP){
//Get the difference and ADD that number to the X of box 2
myDiff = Math.round(box1WidthTEMP-box1Width);
this.box2._x+=myDiff;
}
//Return box2 to its original position
}else{box2._x=box2Xhold}
}

[devonair]

something to play with.. just copy, paste, click...

import mx.transitions.Tween;
import mx.transitions.easing.Strong;

var leftBox:MovieClip = makeSquare();
leftBox._x = 100;
leftBox._y = 100;

var centerBox:MovieClip = makeSquare();
centerBox._x = 200;
centerBox._y = 100;

var rightBox:MovieClip = makeSquare();
rightBox._x = 300;
rightBox._y = 100;

centerBox.onMouseDown = function() {
var numRotations:Number = Math.floor(Math.random() * 2) + 1;
var degs:Number = numRotations * 360;
var rotTween:Tween = new Tween(this, "_rotation", Strong.easeOut, this._rotation, this._rotation + degs, 5, true);
rotTween.onMotionChanged = function() {
leftBox._x = this.obj._x - this.obj._width / 2 - leftBox._width / 2;
rightBox._x = this.obj._x + this.obj._width / 2 + rightBox._width / 2;
}
}

function makeSquare():MovieClip {
var s:MovieClip = this.createEmptyMovieClip("s"+this.getNextHighestDepth(), this.getNextHighestDepth());
with (s){
lineStyle(3);
beginFill(Math.floor(Math.random()*0xFFFFFF));
moveTo(-50, -50);
lineTo(50, -50);
lineTo(50, 50);
lineTo(-50, 50);
endFill();
}
return s;
}