FlipCard 2.0 With Source Released
- April 8th, 2009
- Posted in Announcements . Flash . Flex . Products
- Write comment
Last year I posted a FlipCard component for Flex that allows you to place UI Controls on the front and back of a 3D “card” that can be flipped by the user. It gives the user the visual effect that there are settings or options on the backside of the page, form, etc.
FlipCard 2 has been rewritten from scratch to include various suggested features:
Download FlipCard from the FlipCard Project Page at Google Code.
The full source code was not included in the initial release due to the fact that it was mixed in with code from another application. I finally set aside some time to re-factor and package it up into it’s own project. I’m releasing the code in hopes that others might contribute and improve the component, so please feel free to submit code patches, documentation, skins, etc.
FlipCard v1 was written in MXML and used various tricks to allow child components to be added. Unfortunately this made it impossible to view the front and back side contents in Design view. The component is rewritten in 100% ActionScript and works in Design view, including the ability to edit the inner contents as well. FlipCard inherits from ViewStack and behaves as such in Design view, allowing you to change the selectedIndex and view the back side. Design view currently has some issues in that you can “flip” the card too many times and the child items go out of view, however toggling out and back in to Design view is a simple workaround.
The control is now much easier to customize and the flip button is no longer hard-coded into the FlipCard. A FlipCardContainer class is include that will automatically generate a button, or you can create your own buttons to toggle the flip card via ActionScript.
The initial version also used code that had some memory leak issues and those have been fixed as well.
Please feel free to comment below, however if you have bug reports or feature requests, I ask that you post them on the google project page and not this blog post.
I would like to know if it’s possible to change the label of “flip” button ?
regards,
Sylvain
Hi Sylvain, the FlipCardContainer has “buttonTextFront” and “buttonTextBack” properties. You can also move the button to the top or bottom using the “buttonPosition” property.
If you want to customize more you can even create your own button as in Example 2 in the source.
Thank you very much for your answer !
Have a nice day.
Sylvain.
Is it possible to listen a toggle finished event or something like that?
Could be a great feature if not.
Hey Paco, I planned on adding an onAnimationCompete event but I probably won’t get to it for a while due to work being crazy/busy right now. If anybody would contribute a patch I’d be happy to put it in there
Hii
You have shared a lib file in the code. Can you share the action script. Then it will be easier to understand and make patches
Hi Sohit, the only compiled code should be the PaperVision3D swc. If you’d like the source for that, you can grab it from http://blog.papervision3d.org/
Hi ,
I have downloaded the code. it works fine for me. But after publishing swf file i tried to load it in another application. then I got this error.
VerifyError: Error #1053: Illegal override of removeChildBridge in mx.managers.SystemManagerProxy.
So can you please help me.
Thanks
Hey Krish, I have read that error occurs when you compile different parts of your flex app with different versions of the Flex compiler. To solve it, you could just use the source code instead of the pre-compiled SWC.
Hi Jason,
Have you tried putting in two components with cornerradius. I did and it does not make the corners transparent you get black corners instead. Is there an easy way to fix this?
Hey Ton,
There’s three levels:
FlipCardContainer
FlipCard
-your component~
depending on what level you style you might get that effect. You could try adding the border styles to other “levels” and get different results.