banner ad
Thursday, June 25, 2009
Towards X : Horizontal filmstrip animation

Influenced by a previous experiment done in ActionScript, I tried to avoid the mootools fx animation,library and created a 2D camera to pan the length of a horizontal rectangle.

Create 10 identical clips and arrange them one after the other horizontally.  Create a camera object and compute its position through the slider. Ultimately this is created to understand the movement of 2D cameras along the X axis.

The following equation moves each element's X position to synch with the camera's x value, this creates the illusion of a traveling camera. The variable "dir" is the direction, you can either go left or right. Interact with slider to see it in action.

	// Find next position according to Camera
x = dir*(oCamera.dx - el.x);
// Position
el.setStyle('left',x);


»comments

Greg said...

These new javascript posts are great.But if these are meant to address the needs of a mobile environment, it would be great if they actually worked in mobile environments. I'd love to see some of your thoughts concerning how one can address multitouch interfaces in this context.


paul ortchanian said...

Good point Greg, I know that the slider is not suited for the mobile touch sensitive interaction. I have a few posts dedicated to touch & drag (multitiuch) and plan to post them in a week or two.


Name
URL
Email
*email address is not published
Remember Me
Comments

CAPTCHA






banner ad