Here’s a graphic of a circle of men. You may recognize the outline from any public restroom. They’re standing in a corny circle holding hands, like an all over the world theme., let’s just hope they all washed their hands…
I made the graphic a while ago, and have been wanting to interactive-ize it. I’ve really been wanting to play with elasticity, throwing things and snapping to a point… Although I’m still thinking about a version where I’d spin the objects rather than just throw them, I figured I’d put it up for any feedback that comes.
[kml_flashembed publishmethod=”dynamic” fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/02/MenCircle.swf” width=”550″ height=”550″ targetclass=”flashmovie”]
[/kml_flashembed]
The different pieces all rotate differently and it changes if you are dragging or ‘holding’ them. Then you can press the anchor (gray) button to toggle the snap. The objects will all center around the anchor and spring into place (elasticity applied to position and rotation). And then the interactivity changes and rather than dragging and dropping them, you push and bump or throw them. It almost turns into a game…
Here’s some of the actionscript
[cc lang=”actionscript” tab_size=”2″ lines=”40″]
_root.tr = 0;
_root.k = 0.2;
_root.damp = .9;
_root.margin = 150;
_root.heads.ax = 0;
_root.heads.vx = 0;
_root.heads.ay = 0;
_root.heads.vy = 0;
_root.heads.ar = 0;
_root.heads.vr = 0;
_root.heads._x = (Math.random() * (Stage.width + _root.heads._width)) – _root.margin;
_root.heads._y = (Math.random() * (Stage.height + _root.heads._height)) – _root.margin;
//Heads
_root.heads.dragging = false;
_root.heads.onEnterFrame = function() {
if (!_root.center.dragging){
if (_root.heads.dragging){
this._rotation += 1.2;
}
else {
rot = this._rotation + Math.random();
xmouse = _root._xmouse/Stage.width;
this._rotation += rot + xmouse;
}
this._x+=Math.random()*2 – 1;
this._y+=Math.random()*2 – 1;
}
else {
//_root.heads._x = _root.center._x;
//_root.heads._y = _root.center._y;
_root.heads.ax = (_root.center._x – _root.heads._x) * _root.k;
_root.heads.vx += _root.heads.ax;
_root.heads.vx *= _root.damp;
_root.heads._x += _root.heads.vx;
_root.heads.ay = (_root.center._y – _root.heads._y) * _root.k;
_root.heads.vy += _root.heads.ay;
_root.heads.vy *= _root.damp;
_root.heads._y += _root.heads.vy;
_root.heads.ar = (_root.tr – _root.heads._rotation) * _root.k;
_root.heads.vr += _root.heads.ar;
_root.heads.vr *= _root.damp;
_root.heads._rotation+=_root.heads.vr;
}
this.onPress = function() {
startDrag(this, false);
_root.heads.dragging = true;
}
this.onRelease = this.onReleaseOutside = function() {
stopDrag();
_root.heads.dragging = false;
}
this.onRollOver = function() {
if(_root.center.dragging){
startDrag(this, false);
_root.heads.dragging = true;
}
}
this.onRollOut = function() {
if(_root.center.dragging) {
stopDrag();
_root.heads.dragging = false;
}
}
}
//Button
_root.center.dragging = false;
_root.center.onEnterFrame = function() {
this.onPress = function() {
startDrag(_root.center, false);
_root.center.dragging = !_root.center.dragging;
if (_root.center.dragging) {
this.gotoAndStop(“on”);
}
else {
this.gotoAndStop(“off”);
}
//var vr:Number = 0;
}
this.onRelease = this.onReleaseOutside = function () {
stopDrag();
//_root.center.dragging = false;
}
}
[/cc]