LeichtgewichtLeichtgewicht

2009/02/27 – 01:48

Synchronized cross-runtime animations

In my previous post about the rainbow colors I mentioned that the change in color is synchronous. About that I want to go a little into detail.

First of all: Synchronized means: The Animation is roughly on the same position. Within all runtimes! May it be Internet Explorer, Firefox, Opera, Flash or Java.

For example: You can open this homepage in Internet Explorer and Firefox beside each other and they will show the same color.
You can even see that the flash on the AS3 Rainbow example has the same color. The trick is actually quite simple nevertheless it can be a nice suprise (for some use-cases its actually important to do it that way).

For the synchronization of the animation you just have to use the computers time in milliseconds(new Date().getTime()) and use it as a start point. Since its rather unimportant where it starts (the different runtimes can and most likely will be started at different times) the easiest way to find out where to start is by using a modulo operation on the timestamp: animationTimeOffsetInMs = computerTimeInMs % animationLengthInMs. You can practically translate almost any animation, just bear in mind that with this simple solution the animation will run in a loop.

I made the following example with gTweener in ActionScript 3 and jQuery to show what else might be possible with that.

Download the Source

Tags: , , ,

Comments

  1. Dmitry Fedorov

    That’s awesome. I’ll borrow this code/idea, if you don’t mind. =)

  2. Martin Heidegger

    Not at all, please post a comment if you put something on this basis online.

Leave a Reply

Twitter Users!
Enter your personal information in the form or sign in with your Twitter account by clicking the button below.

Site informations

Martin Heidegger – Web Developerskype:mastakanedaxing:martin.heideggertwitter:leichtgewicht