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.
November 16th, 2009 at 12:35 pm
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
November 16th, 2009 at 8:01 pm
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 GenieDemo.as
November 20th, 2009 at 11:25 am
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.
December 10th, 2009 at 8:54 pm
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 :) )
March 15th, 2010 at 3:52 pm
Fantastic!
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.
thanks
//Frimann
March 15th, 2010 at 5:08 pm
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 – http://dl.dropbox.com/u/1268089/GenieFx.as ( compiled demo: http://dl.dropbox.com/u/1268089/demo.swf )
March 16th, 2010 at 10:58 am
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.
//Frimann
March 16th, 2010 at 11:22 pm
[…] 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 […]
January 25th, 2013 at 5:10 pm
Dude, you rule..