Flipping over a Card

By DutchNeb58 Posted February 16, 2008 13:53:51External Link

I'm trying to build a widget that looks like a playing card. When clicked I'd like it to change to look like the other side of the playing card. So far I have the back of the card, the cursor changes when I mouse over the card to the hand, but how do I then get the card to show the face image? Once flipped over how can I get it to flip back?

0 Karma 20 Replies 5 Referrals

Oooo, I did one of these a long time ago when I first started with DX. Will have a look through my archives.

Are you using two images or an animated png flip?

Two different images. I'm not certian how to do an animated .png flip yet. But I'd like to learn how.

RomanDA did a really cool flashcard thing a while back. Probably no help here though.

Sign Up or Login and this ad disappears!
There are many great features available to you once you register. Sign Up for a free account and browse the forums without ads.

Any ideas where I can find that?

http://romanda.wincustomize.com/skins.aspx?skinid=1074&libid=34

Text only, sorry.

That really works well. Now if I can just figure out how to do that for myself. I appreciate the pointer, Thanks.

Okay. My animation was old and needs some work.

The simplest method is to create two states. Name the first state back and the second state front.
Then use this code to change them.

Code: vbscript
'Called when L-click is released
Function Object_OnLButtonUp(x, y, dragged)
If Not dragged Then
If Object.State= "back" Then
Object.State="front"
ElseIf Object.State="front" Then
Object.State="back"
End If
End If
End Function

OK, I understand the Front/Back portion, but where in the object do I specify what images are Front and Back?

In the states section. Instead of selecting a pre-existing state. Type your own.

Like this:

Hmmm, does it matter that I'm working as a shortcut? Do I need to be as a different object type? I cut and pasted your code into the script column and defined the "Front" and "Back" as directed. The front looks right but I'm unable to get it to look like the back. It does, however, execute the directed .exe command. On a different note...your Desktop X properties tool looks a lot different than mine.

Never mind, it helps when you spell things exactly as specified. Works like a charm, Thanks.

The above will give you an instant 'flip'. You could use an animated state to display a 'flipping' card image, but for a quick result which might work try this:

Sub animStateFlip(objName,newStateName)
If DesktopX.IsObject(objName) = False then Exit Sub

Set obj = DesktopX.Object(objName)
frames = 5
objLeftOriginal = obj.Left
objWidthOriginal = obj.Width
widthStep = objWidthOriginal/frames
For a = 1 to frames
newWidth = obj.Width - widthStep
obj.Width = newWidth
newLeft = obj.Left + widthStep/2
obj.Left = newLeft
Next
obj.Width = 0
obj.State = newStateName
For a = 1 to frames
newWidth = obj.Width + widthStep
obj.Width = newWidth
newLeft = obj.Left - widthStep/2
obj.Left = newLeft
Next
obj.Width = objWidthOriginal
obj.State = objLeftOriginal
End Sub

Call the function with the name of an object, and give it the state you want to change it to.
Increase the value of frames to make it slower and more smooth.

Could be adjusted in lots of ways.
Regards, Skarn

Nice one Skarn!

Here's the code to use what I posted above with Skarn's flip script.

Code: vbscript
Function Object_OnLButtonUp(x, y, dragged)
	If Not dragged Then
			If Object.State= "back" Then
				Call animStateFlip(Object.Name,"front")
				'Object.State="front"
			ElseIf Object.State="front" Then
				Call animStateFlip(Object.Name,"back")
				'Object.State="back"
			End If
	End If
End Function

Zubaz loves collaboration!

i was going to do a animated flip over on the Flash Card, but i wanted it faster than that.

Good suggestions all.

Nice script you guys!

i was going to do a animated flip over on the Flash Card, but i wanted it faster than that.Good suggestions all.

Maybe tray a Step Function with Object.Sleep. Messy but, it might be faster.

Here's one adapted for Top Flipping. You get another animation if you set your object width/height to "maintain aspect ratio".

Code: vbscript
Function Object_OnLButtonUp(x, y, dragged)
	If Not dragged Then
			If Object.State= "back" Then
			Call animStateFlipH(Object.Name,"front")
			ElseIf Object.State="front" Then
			Call animStateFlipH(Object.Name,"back")				
			End If
	End If
End Function
Sub animStateFlipH(objName,newStateName)
If DesktopX.IsObject(objName) = False Then Exit Sub
Set obj = DesktopX.Object(objName)
frames = 5
objTopOriginal = obj.Top
objHeightOriginal = obj.Height
heightStep = objHeightOriginal/frames
For a = 1 To frames
newHeight = obj.Height - heightStep
obj.Height = newHeight
newTop = obj.Top + heightStep/2
obj.Top = newTop
Next
obj.Height = 0
obj.State = newStateName
For a = 1 To frames
newHeight = obj.Height + heightStep
obj.Height = newHeight
newTop = obj.Top - heightStep/2
obj.Top = newTop
Next
obj.Height = objHeightOriginal
obj.State = objTopOriginal
End Sub

need to add these to the snippets on the new site..

http://testsite.desktopx.info

reduce the number of frames to make it faster.

I don't think you could make it faster through any other code method, the way it's written it should do each change in width as fast as the computer possibly can.

You will note I don't have any obj.Width = obj.Width - widthAmount type commands, I found the double reference to an object in this way tended to be slower.

I am 'fairly' confident using a 'get property value to variable, adjust value of variable, reassign value to object property' was the fastest method.

SirSmiley, what is a step function?

Oops, not a function but, a step counter of sorts. Can't remember where I put it but, it actually would be slower in this situation.

Used it for animation control. If memory serves correctly the meat of it was this:

Code: vbscript
Step 1
Object.SetPicture="1.png"
Object.Sleep 1000
Step 2
Object.SetPicture="2.png"
Object.Sleep 5000

I think I opted to not use this but, replaced with a couple of timers and array's. One array for images and the second for the timer.