Mouse Wheel Animation Control with Easing

The previous post gives a simple ActionScript 2 solution for using the mouse wheel to control forward and backward play along the Flash timeline.

This example extends that to introduce an element of easing. When the user stops scrolling the mouse wheel, instead of coming to an immediate halt, the animation gently glides to a stop.

var damping = 0.95;
var accelerator = 0; //equivalent to movieclip frames per framerate frame

//detect mouse scroll
var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function(delta)
{
accelerator += delta/3;
};
Mouse.addListener(mouseListener);

//manage the animation
onEnterFrame = function ()
{
accelerator = accelerator*damping;
framespeed = Math.round(accelerator);
moveframe = clip_mc._currentframe + framespeed;
clip_mc.gotoAndStop(moveframe);
};

And there you have it. Play a MovieClip animation with speed and direction determined by the direction the user scrolls the mouse wheel. And when the mouse wheel is released the animation slowly comes to a halt.

Happy days.

Controlling Flash Animation Frame, Direction and Speed with Mouse Scroll

Most animations just play, you set their frame rate, your press play, and away they go. But I have an interactive item that I want users to be able to play forwards, or backwards, at the speed they scroll their mouse.

I am using ActionScript 2 for this, and the code is blissfully simple:
var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function(delta) {
     frame = (clip_mc._currentframe + delta);
     clip_mc.gotoAndStop(frame);
}
Mouse.addListener(mouseListener);

As you can see you just create a mouseListener object and then build a function that acts on the onMouseWheel event.

When the mouse is rolled the 'delta' (or the value of the mouse scroll, forward or backwards) is used to calculate a new position in a MovieClip's timeline based on the current frame. The function then moves the play head using gotoAndStop to that new position in the timeline.

And you're done... This can be used to control the speed and direction of animation play within a MovieClip. I have a few creative applications of this technique in mind for the future - I hope you find it helpful. Happy scrolling.

3D Game Environment Modeling

Setting the pace for my level 3 students... One of my teaching philosophies is to lead and show, not just explain. Doing this provides ample resource for students to see the entire process, and to aspire. Here's my example.

A job well done!

It is with some emotion that I look back on the last few years spent working as a lecturer and teacher of graphics, interactive media and game design. But today more so as I received visits from two of my old students who have made a fantastic success of their lives since attending my classes.

Both recently graduated with Degrees and have successfully found work in the creative industries they trained for. One as an animator, the other in game design. Thanks for visiting me today you two, I could not be more happy for you. Thank you for bringing me news of your other friends who I also had the pleasure to teach. If you ever read this, I am proud of you, just as I am of all my other students progressing with their education or professional careers, buying their first houses, raising their children...

Right now, though, having visited today, you two represent everyone I have taught over the last 7 years, you are in many ways the symbols of what I hoped my career would be about. I wish you, and all my students every success. The future is bright it really is, it is in your hands, I know you can do it. And what made my day today was seeing that you know you can do it too.