I had a few minutes to play with my old genie effect, so I’ve added two little features.
First one – the bounce effect. The genie seems to go too far, and then it comes back. It can be see when you open program windows ( not folder, but programs ) in OSX.
Second one – motion blur.
So there are two more parameters in the constructor, which tells GenieFx class , how far to bounce and how strong the motion blur will be:
new GenieFx( ( new demoBmp() ).bitmapData , /* object to animate - DisplayObject or BitmapData */
150 , /* x position of genie's "tail" */
0 , /* start from hidden image */ 0.3 , /* bounce. 1.0 = bounce as high as the image height, 0.0 = nobounce */
8.0 /* vertical blur to simulate motion blur */
);
That’s the little AS3 Class I’ve written. Nowadays there’s some strange trend in ripping off OSX GUI, so I’ve decided to make your life a little easier.
I’ve been googlin for this effect, but I haven’t seen anything event close, to what you can see on OSX.
So here comes this little class – GenieFX:
Click grey button-like object to see the animation.
This is the fragment pulled from demo’s source:
addChild( gfx = new GenieFx(
( new demoBmp() ).bitmapData , /* object to animate - DisplayObject or BitmapData */
150 , /* x position of genie's "tail" */
0 /* start from hidden image */
) );
You can pass a vector shape or whatever else to animate. The “x position of genie’s tail” is randomly generated after every button click,that’s why the image comes to and from different places.
Source for this demo is available for download here: http://exp.teleranek.org/proj/genie/demo.zip
The demo uses almost all functions of this effect, so you will figure out how to use it : ) It’s ultra-simple.
The class uses a bit buggy ( but free to use on commercial projects : P ) tweening lib called “Twease”, feel free to change it to TweenLite or whatever else.