Mac OSX “Genie Effect” AS3 Class

October 1st, 2009
by admin

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:

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.

Tags: , , ,
Posted in flash experiments | Comments (9)

9 Responses to “Mac OSX “Genie Effect” AS3 Class”

  1. pascal Says:

    i am newbie to flash so Can you please provide me fla file of that b’z i am facing problem to implement in my buttons

  2. admin Says:

    Nah, I uninstalled flash long time ago. The demo can either open run in flex builder, but if you want to run it in Flash CS3+, then you should do something like that –
    click file->new, in stage properties there’s some place to enter text, called “main project class” ( or sth like that ). So write “GenieDemo”, click publish and it should work. If you want to use the GenieFx class, you shold instantiate it as in

  3. pascal Says:

    sorry i am not able to run this file b’z i dont have flex builder i have only flash Cs3 can you please let me know easiy updateble how use of your file.

    thanks in advance.

  4. admin Says:

    You don’t need 2 have flex builder to run simple .as file. You just need to replace the main document class to GenieDemo, and everything will work fine. It’s described on hundereds of sites how to do it step by step ( however, it’s one step procedure :) )

  5. Frimann Says:

    And very easy to use. Great You want to share your work.
    However, I find it a bit hard to figure out the “set factor” function where it seems the magic is created.
    I would like to configure it so the genie effect springs from a point on the y-axis instead of the x-axis.
    If you could give me some code that will point me in the right direction, I would be very greatfull.


  6. admin Says:

    The simplest way, is to rotate your image 90 deg clockwise in some image editing soft, then read it into BitmapData and create the GenieFx object. Then you rotate GenieFx object counter-clockwise, by changing “rotation” property to -90. And voila. All images are unfolding from right to left, and hiding from left to right, instead of up’n down.
    The second method is to change all y’s to x’s , and all widths to heights and so on … in the setFactor method. Here’s the modified GenieFx class – ( compiled demo: )

  7. Frimann Says:

    Great! Thanks a lot. That was exactly what I was looking for.
    I had tried to do something like you suggested like swapping x’s & y’s and widths & heights, but it didn’t work for me. I can see now what I did wrong though.
    Thanks again for sharing your brilliant work.


  8. Teleranek » GenieFx genie OS-X effect update Says:

    […] 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 […]

  9. Dinç Erem Tapa Says:

    Dude, you rule..

Leave a Reply