DutchNeb58

Join Date 02/2008

Flipping over a Card

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?

desktopx

Locked Post

Advanced Search

Watch this post

Do not email me updates for this post Email me updates for this post

Successfully updated karma reason!

SirSmiley

Join Date 06/2005

+38

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?

Successfully updated karma reason!

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

Successfully updated karma reason!

ZubaZ

Join Date 11/2001

+917

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

Successfully updated karma reason!

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?

Successfully updated karma reason!

ZubaZ

Join Date 11/2001

+917

Any ideas where I can find that?

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

Text only, sorry.

Successfully updated karma reason!

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

Successfully updated karma reason!

SirSmiley

Join Date 06/2005

+38

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

Successfully updated karma reason!

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

Successfully updated karma reason!

SirSmiley

Join Date 06/2005

+38

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

Like this:

Successfully updated karma reason!

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.

Successfully updated karma reason!

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

Successfully updated karma reason!

Skarny

Join Date 10/2002

+45

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

Successfully updated karma reason!

SirSmiley

Join Date 06/2005

+38

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

Successfully updated karma reason!

ZubaZ

Join Date 11/2001

+917

ZubaZ loves collaboration!

Successfully updated karma reason!

RomanDA

Join Date 12/2003

+147

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

Good suggestions all.

Successfully updated karma reason!

sViz

Join Date 04/2006

+508

Nice script you guys!

Successfully updated karma reason!

SirSmiley

Join Date 06/2005

+38

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

Successfully updated karma reason!

RomanDA

Join Date 12/2003

+147

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

http://testsite.desktopx.info

Successfully updated karma reason!

Skarny

Join Date 10/2002

+45

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?

Successfully updated karma reason!

SirSmiley

Join Date 06/2005

+38

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.

Successfully updated karma reason!

Hi I am new at all this but learning. I want to try to do a flipping image. I understand I must create two objects, call one front and the other back. Questions: in which object do i add karn's flip script? And could someone tell me exactly where to put the name front and back in the script? Last, after this is done, do I group both objects (normal, optimized or combined)?

thanks for your help

Successfully updated karma reason!

SirSmiley

Join Date 06/2005

+38

You create one object with two states. See the picture in post nine.

You can rename states or enter a new state name when you click the add button.

Successfully updated karma reason!

WeatherBound

Join Date 10/2005

+71

WeatherBound is watching and Learning.

Thanks all

Successfully updated karma reason!

SirSmiley, thank you, I tried it and it works.

I would like to now try to make an image (object) that slides open and shows something like digital time. Would someone know where I might find a tutorial or help doing this?

thanks for your time and help.

Successfully updated karma reason!

RomanDA

Join Date 12/2003

+147

I would like to now try to make an image (object) that slides open and shows something like digital time. Would someone know where I might find a tutorial or help doing this?

There are PLENTY of tutorials out there on all things DX

Startdock DesktopX Documentation

Click on Tutorials

another thing, try google'ing things like DesktopX Sliding, or DesktopX Tutorials you might be amazed all the things you find.

Successfully updated karma reason!