Business Card Flip Effect (Class With Source)
**UPDATE: Many of you have asked for the source FLA and/or help in getting the class to work. I have posted a demo FLA to help you out a bit. You can get it here: http://www.pixelfumes.com/blog/jul06/cardflip.zip If you are interested in how to target the movie clip on the back of the card you can view another example FLA here.
Many of you have seen the nice effect of a card flipping over in some Flash sites. A pal pointed me to a site today that had the effect and it got me to thinking that although many of these appear to be 3D/AfterEffects/PNG Sequences – close to the same could be done with just a simple class. This is a stab at doing the effect using a class that I created. The quality of the effect depends a lot on the parameters that you pass to the class. The example below allows you to modify all of the parameters minus the drop shadow. The drop shadow is a argument that you can pass into the class. FLASH 8 Required
The class looks like this:
The class is used like this:
cf = new CardFlip(card_mc,”cardBack_mc”,50,ds);Where the arguments are (MC to flip,Linkage to the “back” of the card movieclip in your library, the X-Axis to flip at, and the optional DropShadow Filter).
July 11th, 2006 at 8:09 am
Can you post the source of your demo?
July 11th, 2006 at 9:45 am
hmmm I got the impression that the effect is sometimes created using the BitmapData class.
Nice work though!
July 11th, 2006 at 12:22 pm
I can’t post the actual FLA since there are components from the old DRKs you had to pay for…BUT all you need is the class above to duplicate the effect!
July 11th, 2006 at 12:24 pm
You could use the BitmapData Class but I am not sure what that would gain you in this case. You could displace the image maybe. I am almost 100% positive that the effects I have seen are done using images and not using BitmapData. Just my 2 cents though…
July 11th, 2006 at 6:24 pm
Great effect! I think I might give this a try on a project I’m working on now. Regards, -Step
August 5th, 2006 at 7:36 am
I try but it doesn’t work with this line ;
import CardFlip.as;
CardFlip = new CardFlip(coco1, “coco2″, 50, ds);
Just tell me please if there’s an synthax error.
Sorry for my english and my AS ; am student and i’d just like understant.
Congratulation for this blog
u can mail me to bebemouchacho@yahoo.fr
August 6th, 2006 at 1:49 am
Well, are you using Flash 8? Is the .as File located in the same directory as the .fla file or pathed correctly? If so then the problem could be in .fla itself. You need to be sure that you have a movieclip on the stage with an instance name of coco1 and have a movieclip in the library with a linkage id of coco2. This should do the trick. If not you can email me the .fla and I will take a look. sgtpritchard at gmail.com
September 7th, 2006 at 1:18 pm
Hello! I am a student too. Do you think it would be possible to put an explicit source online so we can understand how the class work, because I have tried to follow your explanations, but it didn’t work. Thank you very much in advance and for your nice blog.
September 7th, 2006 at 1:35 pm
Hello – not sure exactly what you need. Can you be more specific? In a hope to help you out I have posted an FLA of the source in zip format here:
http://www.pixelfumes.com/blog/jul06/cardflip.zip
Hope that helps.
-Sarge
December 8th, 2006 at 9:57 pm
I was wondering if it was possible to modify this script in order to accommodate Multiple cardBacks within one cardWrapper.
Example:
cardWrapper –-
cardSide1 -
Link 1 =flip= cardBack1
Link 2 =flip= cardBack2
Link 3 =flip= cardBack3
Currently it is scripted to allow
One cardBack per cardWrapper
This is the best script I’ve seen in a long time…
Keep up the great work!!!
December 30th, 2006 at 3:22 am
Amazing work you realy helped me big time here.
January 4th, 2007 at 6:09 pm
We were building the same thing and it worked, this script just made it look better and more modular. Thank you very much!
February 6th, 2007 at 7:52 pm
Hey, awesome work. Very useful. I’m wondering if there’s a way to modify the script so that one doesn’t have to adhere to the cardback_mc naming convention for the symbols of the backs of the cards? Would make it a lot easier to work with with multiple symbols and cards, etc. I’m just getting my feet wet with actionscript – thanks!
February 26th, 2007 at 8:25 pm
Just a suggestion here:
In the class where the _xscale property is tweened, it should state
var cfTween = new Tween(cardWrapper, “_xscale”, Strong.easeIn, cardWrapper._xscale, 0, time, true);
instead of:
var cfTween = new Tween(cardWrapper, “_xscale”, Strong.easeIn, 100, 0, time, true);
Or it will cause deformation if you have to scale the movieclip you pass as cardWrapper
June 13th, 2007 at 6:43 pm
First of all, thanks! Great stuff.
Also, I’m trying to simplify this a bit so that you just click on the image and it flips over…no separate button required. I think that’ll look a lot cleaner. However, I’m not able to make the “flip” button invisible or reassign the action to a hotspot on the picture since it’s a compiled clip button.
Any suggestions for either making the button invisible and the same shape/orientation as the images or can you provide the button script uncompiled so it can be assigned to a custom, invisible, button? Thx.
June 13th, 2007 at 6:45 pm
The source is available here: http://www.pixelfumes.com/blog/jul06/cardflip.zip
June 13th, 2007 at 7:31 pm
New to Flash, so sorry if I’m missing something obvious. Downloaded the .zip file, but the button (and its associated behavior) is a “Compiled Clip” object in Flash. Per Adobe’s definition: “Compiled clips can’t be edited.” and “…the compiled clip is a black box—no one can edit it.”
Went into Actions and checked logic for the scene. I tried reassigning the logic (that seemed to be assigned to the Flip button) to a different button:
flip_btn.onRelease = function(){
trace(time + ” . ” + blur + ” . ” + ffRot + ” . ” + rfRot);
cf.flip(time,blur,ffRot,rfRot);
cf2.flip(time,blur,ffRot,rfRot)
But swapping out a new button for flip_btn it didn’t seem to work. I’m guessing that there was some other script or necessary function embedded in the compiled clip button…but maybe I’m wrong.
Thanks.
June 13th, 2007 at 7:41 pm
No problem! It really has nothing to do with the button clip. If you look at the code that the button triggers you should see this:
flip_btn.onRelease = function(){
trace(time + ” . ” + blur + ” . ” + ffRot + ” . ” + rfRot);
cf.flip(time,blur,ffRot,rfRot);
cf2.flip(time,blur,ffRot,rfRot);
}
If you simply want to click on the top card in the provided FLA you would use this instead of the above code:
card2_mc.onRelease = function(){
cf2.flip(time,blur,ffRot,rfRot);
}
card2_mc is the actual business card – now, when we click on it it fires the cf2.flip() method. Hope that helps!
June 13th, 2007 at 7:43 pm
Worked like a charm. Thanks!
Quick response, too. Nice…
July 14th, 2007 at 4:44 am
Great code…I have a problem though…I have a large movie clip that contains children movieclips that utilize this class. It seems that CardFlip eats up process time…
My program involves tweening to pan and zoom into the various cards. Declaring new CardFlip instances really slows things down (I know this because I’ve isolated it to that line)…is there a way to delete from memory (I’ve tried “delete cf”…doesn’t work) the CardFlip instance when I don’t need it for a particular card, while my program is in execution?
August 6th, 2007 at 8:48 pm
Anyone know of a way to use this class to dynamically change what the back of the card is each time you click a button? It seems that the card can only have two faces, you can’t change the hidden face at will.
August 7th, 2007 at 1:27 am
Esteban,
I didn’t upload the class on the blog posting but I did create a method you can add to the class. Paste this into the .as file as a new method:
public function setCardBack(cLi:String):Void{
cardBackLinkageID = cLi
cardBack.attachMovie(cardBackLinkageID,”mc”,1);
}
To use simply pass in a linkage ID you wish to use as the updated back of the card e.g.:
cf = new CardFlip(card_mc,”cardBack_mc”,50,ds);
cf.setCardBack(“myCardLinkage”);
August 7th, 2007 at 1:17 pm
Hi Sarge, that’s almost perfect and thank you so much. However, I was hoping to be able to make a perpetually changing rotation so each time I flip the card new content is loaded on the reverse. This way you can progress through numerous slides by continually flipping them. I think I might be able to modify the method you posted, if I am successful I will post it. Thanks again.
September 27th, 2007 at 2:15 am
Hi,
I have a movieclip with multiple frames in the back. Is there a way to target that movieclip from the root level? The movieclip in the card has an instance name of “cont” – this is what I am trying and it does not work.
card_mc.cardBack_mc.cont.gotoAndStop(2);
September 27th, 2007 at 1:13 pm
I made an example FLA to show you how to target the back of the card. YOu can get it here: http://www.pixelfumes.com/blog/jul06/CardFlipDemoTargeting.zip
October 5th, 2007 at 12:23 am
David McLeod,
You posted to pixelfumes.com. I would love to help but you didn’t provide a valid email and the link to your source did not work. Hit me up at sgtpritchard at gmail.com
November 3rd, 2007 at 9:22 pm
Thank you for this excellent example. However I am trying to trigger the card to flip on mouse over. I have done this using
card_mc.onRollOver = function(){
cf.flip(time,blur,ffRot,rfRot)
}
This just results in the card flip looping over and over once the mouse is on positioned on the card.
I am wondering if there is maybe a method to make the card flip just once when you hover over it or some method of maybe pausing the flip function as to give time to read the back of the card.
Thanks in advance for any help.
November 4th, 2007 at 1:17 am
Probably the easiest method would be tracking a variable in the event such as:
var frontFlipped:Boolean;
card_mc.onRollOver = function(){
if(frontFlipped != true){
frontFlipped = true;
cf.flip(time,blur,ffRot,rfRot)
}
}
The on the event you use to flip the card from the back to the front (maybe a RollOut) you could set frontFlipped = false so that the card can be flipped again.
November 4th, 2007 at 6:58 pm
Thanks very much for your reply, so basically I have settled for the card flipping on the first mouse over and then making the user click on the card for subsequent flips because I cant for the life of me get the bloody thing working the way I initially would have liked. The code I have is:
var frontFlipped:Boolean;
card_mc.onRollOver = function(){
if(frontFlipped != true){
frontFlipped = true;
cf.flip(time,blur,ffRot,rfRot)
}
}
card_mc.onPress = function(){
if(frontFlipped = true){
frontFlipped != true;
cf.flip(time,blur,ffRot,rfRot)
}
}
This code works perfectly but whenever I change the card_mc.onPress to on.RollOver the flip just keeps looping over. While I am happy with the way it is working now I am very curious as to why the function will work for every other parameter (onDragOver, Out etc) but not RollOut. Strange. Thanks very much for the help again.
December 20th, 2007 at 3:20 pm
Hey Sarge,
Amazing amazing work, You did a really great job. I was just wondering if you have made an AS3 version by any chance. I’m trying to convert it but am having much trouble in doing so. If you could clarify some things (mainly surrounding the “.cRef” side of things)or you have an AS3 version lying around, I would greatly appreciate it.
Thanks in advance and again, great job.
Adrian
December 20th, 2007 at 4:49 pm
Adrian,
I have not had the chance to update this to AS3.. Sorry! The cRef is used within the class to store a reference to the class scope from a nested function. As3 doesn’t have this problem so you wouldn’t need that. All functions are scoped to the class since you would be using eventListeners.
January 14th, 2008 at 10:00 am
Hi! This code is great! Thank you so much for sharing it.
I have one problem, though. I have a sort of game with 4 cards that you can flip by clicking on the cards. On the fourth card, however, I want the user to be able to flip it back by a “close” button, instead of by clicking the actual card. When I use this method:
delete card4.onRelease;
i loose the state the card is in, so when I’m trying to flip it back via the close-button, the card starts a new flip from its backside state. My source file is available here: http://www.eriklindahl.se/archives/lektion2_ny.fla
Thanks in advance for any help!
January 14th, 2008 at 5:01 pm
Erik – shoot me your email address at sgtpritchard at gmail dot com and I will send you the necessary files. Thanks.
February 9th, 2008 at 2:47 pm
Thanks a million. I was using a tweening flip that looked pretty lame. I appreciate you sharing your code with all of us!
February 12th, 2008 at 11:35 pm
Thanks Sarge!! Works great. can I make a paypal donation?
Richard
February 13th, 2008 at 1:20 am
heh. Thanks Richard. If you are serious and REALLY want to you can email me at sgtpritchard at gmail.com
April 2nd, 2008 at 8:38 pm
Hi
I’m haveing a problem with back of the cards. I have 12 cards and when they rotate they allway show the same immage, that is the firs cmoponent (back of the card) in lybrary by alphabetic order. Can someone help?
October 21st, 2008 at 11:37 am
Hi,
Im making a mini website loading postcards, with 7 sections. If you load item 1 they will all work.
But it you don’t click on item 1 first they will not flip?
How do you make it work so that all will flip?