UPDATE: There is a more recent post about the FlipCard
FlipCard is a component for Flex 3 that allows you to put content on two sides of a 3D “card” and flip between the front and back. The compiled library as well as full source code can be downloaded from the project page on google.com.
Click on the screenshot below for a demo:
Using the component is simple. Once you add flipcard.swc to your project, you can just drag the component into your Application from Design view, or hand-code the MXML yourself. The example shows how little code is needed to use it. The front and back of the flip card can be whatever UIControl you want them to be. In the example I use a VBox for the front and a Canvas for the back. Additionally the look and feel is all defined with CSS which you can override to match your own application.
The 3D effects were written by tink.ws which utilizes PaperVision3d. At first glance this FlipCard may just seem like a stripped-down of tink’s “flip” example, but I think there’s a few cool differences. Mainly the FlipCard is meant to be a familiar UI component in an application for showing settings, options, etc in a limited space. Your users may have seen similar interfaces in mac and iPhone apps. FlipCard is compiled and packaged into a component so you don’t have to grab PaperVision from SVN and piece all the sample code together. FlipCard also uses some cool tricks to make it work like a native Flex component in that you add your front/back side by simply dragging two sub-components inside it – just as you would add sub-components to a VBox, Panel, etc.
I would be interested to see any application that you build using this component. Please feel free to post a link to your app, suggestions or modifications in the comments section.
I have two suggestions …
(i) instead of flipping after user clicks on upper right corner … Is it possible to flip card after user clicks on any part of the side
(ii) It would be great if we can embed one FlipCard inside other .. at least till one level …
hey lavnish, good ideas. for #1 I personally use this for forms, so clicking it elsewhere doesn’t work for me. But i can see a reason. probably adding “flip” method would be a good solution then you can call it however you like.
for #2 – that is a cool idea so i had to try it myself! i put a flip card inside another, then a 3rd inside that. it actually works – you can put as many levels as you like. the only problem is there seems to be some video artifacts the first time you flip – probably as it renders. maybe that will be fixed when papervision 2.0 is officially released?
Hi, somebody posted a comment about the version of PaperVision. Sorry, I accidentally deleted the comment. The version of PaperVision is the final Alpha Version, however I have a new working demo with the latest Beta which I will try to post soon.
Hi, I have tested this code and I have some problems with it.
When I paste it in a new Flex project (I have added the library genui)and check the design mode I get an error:
“ERROR: You must put exactly 2 child UIControls (Box, Panel, etc) inside this FlipCard”
What does this error mean? I have not changed anything from the code.
Thanks!
Hey Ariane, everything is working fine. You just have to do exactly as the message says. Put exactly two components inside the flipcard (in source view) – these will become the front and the back of the card. I suggest using two VBox controls. See the example code for more info.
Currently in design view the flip panel doesn’t look right – I may try to fix that if flex will make it possible.
Hi Jason
You component is very nice, but I´ve the same problem Ariane has. It is a pity that it cannot be used in the design view. I will be really happy if you can fix it.
Best regards
I’m going to put some effort into making the component work in design mode. I’m not sure how much is possible – I doubt that it’s possible to “flip” it in design mode in order to design the backside of the card. Due to the way the component is designed, I don’t know that it will work at all.
What I do is create modules which then go inside the flip card. If I need to use design mode, I do that on the module files.
Very nice component! Thanks a lot.
But I have a problem with styling the flip button on state change. I don’t know how to reach it
Maybe you can help. This is my best shot so far
Sending the code doesn’t work so good. Here without braces:
mx:SetStyle target=”{com.pcguild.genui.components.Panel.FlipCardButtonContainer}” name=”color” value=”#fffaaa”
Awesome widget! Is it possible to change the speed of the flip?
Hey Matt, there is a speed parameter that you can change. I’m hoping to post an updated version soon which has some improvements, I’m a bit swamped with a deadline for the next month
hi can you tell me how can remove corner button of this component. actually i want to flip this component on event dispatching. so i dont want that corner button should not be display
just a note to let everyone know that the FlipCard has been completely re-written and the full source is now available at http://code.google.com/p/flipcard/ Just about all of the issues mentioned in the comments have been addressed including separating the flip button, making the component usable in design view and many other improvements. The original release also had some memory leaks which have been fixed as well. Please feel free to join the project on google code and contribute. Thanks!
Can we use this is desktop application as i implemented this in my flex desktop app its not working fine first time it works and second if i use the same component and use the button to toggle the controls the effect disappears .contents of both front and back control under flipcard control loads properly but the flip effect disappears
Any comments on previous post of mine…., well its working well for first time but when i load it again the effect does not appear, I am using popupmanager to show the flip effect, once user clicks on a button of popup it is removed and on select of an item from the main screen popup reappears with data loaded in the control.
it flips, only for the first time. any reason for this…..
Hi Anmol, I haven’t seen that before it would be hard for me to say it could be a reaction of other code. We use the FlipCard here on a desktop AIR application so that is not a problem. If you think you found a bug and can reproduce it, please definitely submit a bug w/ steps to reproduce on the google code project page and I’ll work to get it fixed.
Hi Jason:
I have the same problem than Anmol. Any solution for this?
Many thanks in advance.
Hi Jason, thanks for this great component! It’s quite a neat a effect, one issue that has come up though is that it looks like the component puts itself on the highest depth when the flipping occurs. Say for example if I have another component on top of the flipCard component (so for example a pop up window), even though the component covers up the entire flipCard component, when the
flip actually happens, you can see it go through. Is this an easy fix?
Thanks!
@Edgar Miranda
Hey Edgar, I hadn’t seen that before , but probably because I haven’t ever covered over a flipcard, yet still made it accessible underneath the popup. my guess is that the core animation effect in PaperVision or even the Flash Player might be causing that..?
Since I basically just packed together those effects into a usable component, I don’t have the deep understanding of how the actual 3D math works at the low level, so I probably would have a hard time fixing it. I would probably look into a workaround of disabling the flip button when it is not in focus?
Ahh, thanks for the quick response! I was assuming that was the issue (I worked with Papervision3D myself). I’m just a bit surprised that a component actually brings itself up to the highest depth. Isn’t this bad encapsulation on Papervision’s end?
Anyways, thanks for the response and the component, I’ll let you know if I figure anything out.
Hi Jason. Digging the Flipcard! I just have one question. I’m using it on a popup opened via popupManager. When I flip the panel, it appears as though the edge that grows taller during the flip effect gets clipped by the parent container. I don’t, however, have any widths on the parent that might cause this. Is there something I can do or something I’m doing wrong?
Thanks for your help.
@Josh Bell
Hmm, that’s a tough one. It sounds similar to the issue Edgar (above) is having, related to the PaperVision3D library. Unfortunately I don’t know an easy solution. Hopefully some smart person will contribute to the project, though, and submit a patch. If you happen to figure out anything please feel free to post back. Sorry I can’t be of more help to you guys!
I am getting this error when I come to the view which has the flipcard
Error #2025: The supplied DisplayObject must be a child of the caller.
at flash.display::DisplayObjectContainer/swapChildren()
at com.verysimple.flipcard::FlipCardContainer/onCreationComplete()[/Users/jason/Documents/flipcard/flipcard/src/com/verysimple/flipcard/FlipCardContainer.as:52]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:12266]
at mx.core::UIComponent/set initialized()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:1577]
at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:759]
at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:1072]