This flip effect class works dynamically and is created through pure coding. There is NO library assets or symbols or what soever. you can simply initialize the class and set which corner of your project you want to have the flip effect and it will just work like charm!
CHECK OUT THE DEMO HERE
You can add this paper flip effect to any display object, any MovieClip, stage or anywhere. below is a sample code showing the different settings that you can have for your CornerFlip class:
UPDATE – September 09, 2010
- Now also supports DisplayObjects / MovieClips and Sprites.
SAMPLE CODE
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import com.doitflash.utils.flip.CornerFlip; import com.doitflash.utils.flip.FlipType; import com.doitflash.utils.flip.FlipPosition; import com.doitflash.events.ButtonEvent; var myFlip:CornerFlip = new CornerFlip(); myFlip.addEventListener(ButtonEvent.CLICK, onClick); myFlip.position = FlipPosition.TOP_RIGHT; myFlip.setThumbType = FlipType.DISPLAY_OBJECT; myFlip.setLargeType = FlipType.IMAGE; myFlip.papers(_thumb_mc, "img/large.jpg"); myFlip.handCursor = true; myFlip.shiverSize = 5; myFlip.speedThumb = 1; myFlip.speedLarge = 2; myFlip.flipColor = 0xAAAAAA; myFlip.shadowFilter(0x000000, 0.5, 135, 5); this.stage.addChild(myFlip); |
Note that you do not have to necessarily set all above settings each time you are initializing the class! try below and it will be good enough to get the class to work with default values!
1 2 3 4 | import com.doitflash.utils.flip.CornerFlip; var myFlip:CornerFlip = new CornerFlip(); myFlip.papers("thumb.jpg", "large.jpg"); this.stage.addChild(myFlip); |
DOCUMENTATION
Read the CornerFlip Documentation here. or download them for your offline review here.
BUY NOW
currently being sold on Activeden
Regards
Hadi
May 6th, 2010 12:28 am
I purchased this product through Active Den. I’m trying to do a before and after effect. We are launching a new website and we’d like the old site image to appear first…then at the top right when the mouse is hovered over the page peel, we’d like for it to unveil the new site design.
I’m unable to figure out how to get my first image to appear where you currently have the black/green placeholder data.
Would you be able to supply some code or feedback on how to accomplish this?
Thank you in advance.
May 6th, 2010 12:59 am
The page flip class uses two external images one. the first one is the smaller image which attracts users to the flip and when mouseOver the other bigger image will fade in… all you have to do is to simply replace the two external images with your own images. and when clicked, there’s a listener so that you can listen to the click and do anything else after that. I hope this helps.
May 6th, 2010 1:52 am
Thank you for the info. How do I remove the first image…? The image I am referencing is the black and green image that has the header banner in green that says ” Your flash site “….I don’t know how to get rid of it…or at least replace it with a different image.
May 6th, 2010 4:12 pm
let me explain this, that black and green screen is not an image at all, that can be anything, anything in your project, maybe it’s your actual site… you see, the flip will overlap anything else in your project and by adding a listener to the CLICK event of the flip class, you can decide what you want to do in your project. that is totally up to you on how you want to treat with it. am I making sense?
May 11th, 2010 2:57 am
Your last instructions worked!! Thanks. One last question. I’d like to link this file out to a url…how would I do that? Would I use this code? : myFlip.addEventListener(ButtonEvent.CLICK, onClick);
If so, where to I reference the pointing url…. myFlip.addEventListener(ButtonEvent.CLICK, (URL HERE??)onClick);
Thanks!
May 15th, 2010 5:33 pm
first you add the listener:
then you will have the “onClick” function to do anything in there:
{
// here you may do anything like adding a url link like below
navigateToURL(new URLRequest("http://www.myflashlab.com"));
}