Can you post the source of your demo?

hmmm I got the impression that the effect is sometimes created using the BitmapData class.

Nice work though!

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!

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...

Great effect! I think I might give this a try on a project I'm working on now. Regards, -Step

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

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

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.

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

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!!!

Amazing work you realy helped me big time here.

We were building the same thing and it worked, this script just made it look better and more modular. Thank you very much!

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!

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

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.

The source is available here: http://www.pixelfumes.com/blog/jul06/cardflip.zip

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.

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!

Worked like a charm. Thanks!

Quick response, too. Nice...

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?

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.

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");

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.

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);

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

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

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.

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.

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.

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

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.

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!

Erik - shoot me your email address at sgtpritchard at gmail dot com and I will send you the necessary files. Thanks.

Thanks a million. I was using a tweening flip that looked pretty lame. I appreciate you sharing your code with all of us!

Thanks Sarge!! Works great. can I make a paypal donation?
Richard

heh. Thanks Richard. If you are serious and REALLY want to you can email me at sgtpritchard at gmail.com

I guess that this might be a bit dated now, but is there a way to have a three sided card? When it loads you see side one, clicking button A flips to side two then clicking button B would flip to side three. Each button always shows the same side whatever sequence they are clicked. I have tried a few things and I can't get it to work.

Keiron,
Try out the sequential card flip version available here:
http://www.pixelfumes.com/blog/apr08/seq card flip.zip

It might give you some clues on modding the class. This is a different version than the one available here on the blog.

This card is great and works perfectly if you disregard the button and use the card itself as the button!

Apart from being able to flip it on a simple rollover, is it possible to make it drag and drop?

Im using on a contact page and it would be nice to maove it around like a real card?

Many thanks, Lee.

info@craniumfruit.com

Hi Sarge, I have been meaning to reply for a while. Thanks for the reply the other week, it was perfect. I have a test page online, but as it's for a client and it isn't signed off I can't publish the url, but if you have a private email address I can send you the link (if you want to see it).

Thanks keiron - you can email me at sgtpritchard at gmail.com

Greetings!
First of all, i'd like to congratulate u for this effect! it's really great! :)

I have a question though: i'm trying to apply this effect but the card moves to the left the first time u click the flip button and then flips normally but out of the original place.
I believe it has something to do with the stage width but still couldn't figure it out.. (yes, i'm still kinda flash-noob lol)
Is there anything u need to change in the AS file when altering the stage width?

thnx in advance! ;)

tuga

(u can contact me at lost dot pixxel at gmail dot com)

try using your_mc_name._x when creating the object. i think the default is 50 that's why its goes to the left (assuming you have positioned it at x>50)

Good info for the Business Card Flip Effect. This way you can progress through numerous slides by continually flipping them. This should do the trick.

Brain
xocai

This works great, thanks.

My problem is that I'm using Flash CS3 and every time I save the file as CS3 and not Flash 8, it stops working. How do I fix this problem?

Danielle, that sounds strange. Are you ensuring that you are publishing it out as AS2 when saving it in Flash CS3?

hi Sarge, im trying to load in your .swf file into a website which has seven sections.

when you press button 7, it will not flip, unless you press button 2.

then they will all work.

how can i set up the code to run multiple sections..

Sweet code, thanks for the help!

I've been working on modifying this script to have a set of six cards set to flip when clicked on. I've gotten it to work for the first card, but I can't seem to get the subsequent cards to flip when clicked (they keep flipping the first card) even though I've changed the target names. Any ideas?
dreamsinrainbow AT gmail DOT com

Is there any chance you can make this draggable with elasticity and place a button on the reverse? Been trying myself, wondered if this is possible?

Paul, sure that is possible to do. I myself, don't currently have the time to implement features on this code base. You might be able to make it work by searching online for examples of each feature you are looking to implement and implementing them one by one.