Bouncing balls… and cubes?

A few weeks ago, I was getting antsy and wanted to redo intuition’s web page with some sleek looking CSS, a web 2.0ey PHP backend and a Flash navigation interface. This might still happen, but not in the near future as we have other priorities… like making games. But around that time, I decided to give actionscript 2.0 the good ol’ college try and with the help of the book I posted about on Friday.

While this isn’t all the functionality I wanted with this little do-dad, I am pretty happy with the results, and with what I’ve learned by doing it.

Firstly, is the problem with rotating movie clips in flash. During the later stages, I wanted to be able to scale the movie clip to any size I want, and then subtract a relative value from the global variable: gBOTTOM in order to adjust the world bounds accordingaly, however the problem I encountered can be seen in the .swf below. Also note the jumpy bug was something I didn’t care to fix since it wasn’t part of the end goal.

While the movie clips in the above .swf are not circles, but cubes, the behavior is the same since the bounding boxes are always rectilinear, no matter what shape lies inside. While it sort of makes for a neat animation of squares, I wanted circles, so the code looked something like this in order to get the radius of each circles.

//ROLLING CUBE BOUNDS

if (this._y >= gBOTTOM - this._height/2) //bouncing upwards bounding relative to size
{
this._y = gBOTTOM - this._height/2;
this.ySpeed = (-this.ySpeed)/2.22;
}

This really didn’t work, since the resting point was so sporadic, the circles didn’t seem to hit the ground most of the time, but rather float. In this case, I conceded what may have been a victory and reverted my code back to using constant bounds for constant sizes of balls.

Next for this would be collision (and reaction) of all and any balls, and Mike, who has been helping me throughout this, mapped out what that would take, and it looks terrifying. While adding collision detection and reaction to this would be stunning, I think I may tackle that once I get at least some OOP experience under my belt.

Meanwhile here is the code for the entire rollingcubes.swf heavily edited from it’s original form as the first lesson in Chapter 10 of the book I’m using from Friends of Ed “Foundation Actionscript for Flash 8.” The code all lies on frame 1 of the .fla and if enough people want the .fla I’d be happy to post it, however I doubt this will arouse much interest.

//BOUNCING BALLS SANS COLLISION

function mover():Void
{
this._x += this.xSpeed;
this._y += this.ySpeed;

if (this._x < wall =" 1.22" _x =" gLEFT;" xspeed =" -this.xSpeed/1.22;"> gRIGHT) //bouncing off right wall = 1.22
{
this._x = gRIGHT;
this.xSpeed = -this.xSpeed/1.22;
}
if (this._y < gravity =" 3">= gBOTTOM - this._height/2) //bouncing upwards
{
this._y = gBOTTOM - this._height/2;
this.ySpeed = (-this.ySpeed)/2.22;
}
if ((this.ySpeed <= 2) && (this.ySpeed >= -2)) //clamping the vertical movement
{
this.ySpeed = 0;
this.stop();
}
if (this.xSpeed < -0.5) //friction on leftward movement
{
this.xSpeed += 0.5;
}
if (this.xSpeed > 0.5) //friction on leftward movement
{
this.xSpeed -= 0.5;
}
if ((this.xSpeed >= -0.5) && (this.xSpeed <= 0.5)) //clamping the horizontal movement
{
this.xSpeed = 0;
}
if (this.pressState == 1) //stop everything while pressing
{
this.ySpeed = 0;
this.XSpeed = 0;
this.lastX = this._x;
this.lastY = this._y;
this.stop();
}
if (this.pressState == 2) //link the rotation with the horizontal speed
{
this._rotation += this.xSpeed;
}
}

function dragster():Void //use on press, drag the balls around
{
this.pressState = 1;
this.startDrag();
}

function dragsterOff():Void //use on release, vectors for launching the balls
{
this.pressState = 2;
this.stopDrag();
this.xSpeed = (this._x - this.lastX)/3;
this.ySpeed = (this._y - this.lastY)/3;
this.play();
}

//WORLD BOUND CONSTANTS & STATES
_global.gLEFT = 83;
_global.gRIGHT = 550;
_global.gTOP = 5;
_global.gBOTTOM = 400;
_global.pressState = 0;

//apply event handlers to movieclip instances on the stage
bigBall.onEnterFrame = mover;
bigBall.onPress = dragster;
bigBall.onRelease = dragsterOff;
bigBall.onReleaseOutside = dragsterOff;
medBall.onEnterFrame = mover;
medBall.onPress = dragster;
medBall.onRelease = dragsterOff;
medBall.onReleaseOutside = dragsterOff;
smallBall.onEnterFrame = mover;
smallBall.onPress = dragster;
smallBall.onRelease = dragsterOff;
smallBall.onReleaseOutside = dragsterOff;

Learning to Flash

Intuition has spent a lot of time working on ideas, writing them into pitches for places like Adult Swim and Kongregate, (my user name is: aeiowu) but we haven’t had a chance to really flex our development muscle as of yet. So while doing all this “scholarly” writing and whatnot, I’ve taken on the task of learning actionscript in hopes of helping out the prototype situation later on.

I normally like to learn things on my own, or through the interpipes somehow, but Josh did some research (he’s learning, or relearning actionscript as well) and found some promising books for designers who want to code, rather than coders who want to learn a new language. Call me fickle, but I need a book from an author who knows how to relate to me, and given I have more of a design background, is working out very well.

I’m through the first ten chapters at the time of this post, and am working on my own programming problems with the help of Mike. I have made a couple “cool” demos from the tutorials in the book and my own marginally customizable “particle system” (just using the x and y scale of a movie clip). The particle system is really just a jiggly sphere, but the lesson I learned here was how to control the parameters of a function outside of the function itself because I built the function so guidelines could be applied when assigning the function to each movieclip.

function bubbler(thing:MovieClip, jitter:Number, size:Number):Void
{
var xVal:Number = 0;
var yVal:Number = 0;
onEnterFrame = function()
{
xVal = (Math.random()*jitter) - size;
yVal = (Math.random()*jitter) - size;

thing._yscale = yVal;
thing._xscale = xVal;
};
}

//Initialize
bubbler(blob_mc, 22, 222);