Case Study: Ying-Yang PreloaderFiled Under: Uncategorized

I’ve been thinking about posting this one for a long time. It was created when I was working at Publicis Modem, in project for Garnier. Later it was used as a recruitment assignment. As far I as remember only one person dealed with it properly.

Developer was given .fla file with graphics, so at first he needed to prove his knowledge of JSFL to create about 180 movieclips (or he could do this manually - happy clicking :)). Next he had to create multiple instances of ball classes holding reference to it’s movieclip. Balls were randomly sorted and later added to stage with increasing loading progress (0% - 0 balls in stage, 100% - all balls on stage)

Second part of task was to figure out what the hell is going on there. As you can see the balls are moving chaotically at first. The more data is loaded the slower and more smooth becomes the speed vector to stop at last and form a ying-yang symbol.

The trick was to create several points, which were attracting balls. Several months ago I wrote post about mouse avoiding. You can easily achieve attraction effect just by reversing the vector.

Those points where moved by TweenLite, sliding from one position to another within a circle. The more data were loaded, the less was the attraction force.

Final effect:

Force spots are those red, little balls. If you find this description not clear enough please post and I will upload the source.