Remember the Butterfly? Click “Flutter” below.

EDIT: I just tried clicking multiple times. That’s even more fun.

Ah, it’s a new month! Time for a new Smyles & Fish Derby.
For those who haven’t entered the Derby, I highly recommend it. I had fallen out of the habit, but I intend to start again. If you don’t want to enter, have fun voting!

This is my first submission for the month.

This is supposed to be a photo of me after having grown a mustache. I suspect foul play.

You’ll perhaps remember the box kicking script from a few days ago. That kick was the result of a series of finite steps. As I chained them together they looked like a relatively smooth move (for an ex-lax). Let’s say I have another action I want boxy to perform. I’d be stuck scripting it up mostly from scratch. Sure, I’d be able to cut and paste, but all of the heavy lifting I did before would be tossed away. So why not make my own life easier?

Which parts of the kick are reusable and which are not? In order to figure this out I break out the work into pieces. In this case there’s all the chaining and the moving boxy around nonsense, and then there’s the description of how it moves. If I’m lucky, next time I want to move boxy I only need tell it where to move, and not how it should go about moving. Enter my base animation class:

Animate = new Class({
    options: {
            defDur: 200
    },
    initialize: function(el){
            this.target = el;
            this.d = [];
            this.t = [];
    },
    run: function(d, t){
         var tfx = new Fx.Styles(this.target, {
                 wait: false,
                 transition: Fx.Transitions.Quad.easeOut
         });
         var n = 0;
         var dly = 0;
         this.t.each(function(tarr) {
                 if(this.d[n] != null) { dur = this.d[n]; }
                 else { dur = this.options.defDur }
                 tfx.options.duration = dur;
                 tfx.start.delay(dly, tfx, tarr);
                 dly += dur;
                 n++;
         }.bind(this));
     }
});
Animate.implement(new Options, new Events);

I will spare you the details of the Mootools syntax here. This class allows me to specify a list of instructions for boxy. I can then extend the base behavior with different instruction sets, making further actions a snap! The boxes blow are all scripted into subclasses of my Animate class. (Again, sparing details…) The first is the good ol’ kick. The second is a scripted random series of steps. It will always be the same. The third is an unspecified set of 40 randomly generated movements. Go ahead, give em a shot!

For those brave and/or interested souls, here’s the third random extension of the base Animation class, which I’ve called Butterfly. Butterfly took me about a sixth of the time to script that the original Kick did.

Butterfly = Animate.extend({
        options:{
                min: 20,
                max: 300
        },
        initialize: function(el, steps){
                this.parent(el);
                for(i = 0; i < steps; i++){
                        this.t.push({
                            'top': this.next(),
                            'left': this.next()
                        });
                }
        },
        next: function() {
                return Math.floor((
                         this.options.max
                         -(this.options.min-1))
                         *Math.random())
                         + this.options.min;
        }
});

You can, in fact, teach a new box old tricks.

I’m working on abstracting this stuff into a DHTML animation class. Stay tuned for some code!

Here’s a box you can toss into the air with a click. I wonder what else it can do.