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.
I have a problem with the FlipCard component, which is, I need to flip an Image control with a transparent background PNG to another Image with another transparent PNG.
The FlipCard component is inside a Canvas with a backgroundImage.
The problem is while the flip is animating, the Image controls keep the image but get a BLACK background. I can change the color of the background, but it can never be transparent. I tried with a transparent png as backgorundImage and backgroundAlpha:0, but I can still see the black backgorund.
Any idea how I can hide it please?
hi francisc, that is an issue that’s really similar to other’s that have been reported and I’m afraid I don’t have an easy solution. I am actively asking for help if anyone would be willing to contribute to the code – please let me know.
the problem is that the graphics behavior goes down to the the PaperVision3d API which the FlipCard is built upon. I am not familiar with the guts of that API well enough to understand how to fix this issue without doing a lot of research. Any help would be appreciated.
Alright, Jason!
Thanks, I apreciate the very quick response.
I’ll see if I can get an answer for this and let you know.
Francisc, Jason,
You can fix the black background issue by adding the line:
flipInstance.transparent = true;
In the initInstance method of ws.tink.flex.pv3dEffects.Flip
Hope that helps!
Paul
Excellent, thanks Paul!
Hi Jason.
I’m creating a flipcard list and the list have a dynamic lenght. For example, sometimes i can have only one flip card, but another time the list can have 20 flip card. I want do call the event toggle by a double click. Is it possible to do this?
Any ideia how can i do this??
Thank you, from Brasil!!
I found a way to do the dynamic flip card list whit double click to call the function toggle. But now i have to make drag drop for each card and put all the infos in a datagrid.
Thanks!