Card Flipping Animation

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

Hutchboy
Posts: 51
Joined: Wed Aug 01, 2018 2:57 pm
Contact:

Card Flipping Animation

Post by Hutchboy » Sat Jun 27, 2020 7:39 pm

Hi, I am trying to recreate an old fashioned "hypercard" flip card animation. There is an old hypercard stack that animates a gasoline engine with its piston cycling in the cylinder. In this hypercard stack there is a background button with a simple script that goes to the next card on mouseStillDown, so the cards flip as long as you press and hold down the button. I imported the stack in an old version ofLiveCode and it ran, but slowly, while the current version doesn't keep the card flipping going. Is there a way to do this in LiveCode? Seems like it should be simple but I'm obviously missing something.

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9580
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: Card Flipping Animation

Post by dunbarx » Sat Jun 27, 2020 8:05 pm

Hi.

There should be little issue with converting a HC stack to an LC one, with the usual caveats about certain structural changes. Perhaps the HC stack used the background object? This, of course, does not exist in LC.

Perhaps either of these, assuming you have 15 cards:

Code: Select all

on mouseStillDown
     repeat with y = 1 to 15
      go cd y
      wait 3
   end repeat
     wait 20
   go cd 1
end mouseStillDown

on mouseDown
   repeat with y = 1 to 15
      if the mouse is down then
      go cd y
      wait 3
      end if
   end repeat
     wait 20
   go cd 1
end mouseDown
I prefer the second. It seems more robust. This requires that you click on a button, ostensibly on cd 1. You may not want to be restricted to that, and place this handler in the stack script, or however you want this to work.

Craig

EDIT: Do you know how to add effects to this sort of thing?

mwieder
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3581
Joined: Mon Jan 22, 2007 7:36 am
Location: Berkeley, CA, US
Contact:

Re: Card Flipping Animation

Post by mwieder » Sat Jun 27, 2020 8:11 pm

HC importing is always a bit weird, as you've discovered by having to resort to an older LC version.

To start with, now that the stack is imported, I'd set the hcAddressing of the stack to false. That will help if you're looking at the stack in the Project Browser.

Then I think I'd move the mouseStillDown handler into the stack script instead of the button. I'm not sure what happens to the message path once you've moved to a new card if you're working with a mouseStillDown handler in a background group.

You'll also no doubt find that the animation is faster on the second time around if the images are cached in memory from the first lap. If that's true then you might want to do a quick invisible trip through all the cards on stack startup, i.e.,

Code: Select all

put the cardids of this stack into tCards
push card
lock screen
repeat for each line tCard in tCards
	go invisible card id tCard
end repeat
unlock screen
pop card
...of course, I think the fastest thing would be to change the stack so that it just changes the displayed image on a single card rather than flipping through multiple cards.

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Card Flipping Animation

Post by bogs » Sat Jun 27, 2020 10:50 pm

The above 2 methods are comprehensive and well demonstrated. i'll add a third way that, to use a modified quote from "The Matrix", will blow your mind when you realize the stack is the button. I actually included some niceties, like a message to tell you when it is animated and when it isn't. I spent a long time on this one, about a minute and a half on the code, and maybe another minute dregging the juggler images out of the Metacard compatible icons :P
cardanimationdemo.livecode.zip
Are you feeling animated yet !?
(1.55 KiB) Downloaded 184 times
Image

mwieder
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3581
Joined: Mon Jan 22, 2007 7:36 am
Location: Berkeley, CA, US
Contact:

Re: Card Flipping Animation

Post by mwieder » Sat Jun 27, 2020 11:53 pm

OTOH, why bother with cards? Just show/hide the images.
Attachments
cardanimationdemo.livecode.zip
(1.57 KiB) Downloaded 182 times

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Card Flipping Animation

Post by bogs » Sun Jun 28, 2020 1:47 pm

mwieder wrote:
Sat Jun 27, 2020 11:53 pm
OTOH, why bother with cards? Just show/hide the images.
*IF* you were asking me, I completely agree that I wouldn't use cards for an animation of almost any kind under normal circumstances, although there are exceptions I can think of to that rule, they would be few and far between.

In this case, I was using cards merely for the purpose of demonstrating (one) way to accomplish doing what the OP was asking, not so much about actually using a stack from HyperCard per se, but this part in bold / underline ....
Hutchboy wrote:
Sat Jun 27, 2020 7:39 pm
Hi, I am trying to recreate an old fashioned "hypercard" flip card animation.
... there is a background button with a simple script that goes to the next card on mouseStillDown, so the cards flip as long as you press and hold down the button.
Seems like it should be simple but I'm obviously missing something.
Frankly, you can see I sure didn't use the button for this, although there might have been a purpose for it in the original stack, I can't imagine why you would want to hold a button down that long (or short).
Image

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9580
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: Card Flipping Animation

Post by dunbarx » Sun Jun 28, 2020 6:07 pm

I'm not sure what happens to the message path once you've moved to a new card if you're working with a mouseStillDown handler in a background group.
@Mark.

I looked askance at that as well, from the very start. A test;

Code: Select all

on mouseStillDown
   go next cd
   wait 12
end mouseStillDown
stops, as we both surmised, at cd 2. There is no target any longer from which that handler can continue. Of course, we do not know what mouseStillDown handler the OP actually wrote, since HC would have acted similarly, and apparently it worked back then.

@Hutchbiy. Surely you get all this. What did you write, that the mouse, after the very first navigation, is no longer under the target button which started the whole thing? Where do any new "mouseStillDown" messages come from?

Craig
Last edited by dunbarx on Mon Jun 29, 2020 2:08 pm, edited 1 time in total.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Card Flipping Animation

Post by richmond62 » Mon Jun 29, 2020 7:45 am

Have a go with this:
-
Screenshot 2020-06-29 at 9.42.44.png
-
https://www.dropbox.com/s/jdwswq4gay7h5 ... e.zip?dl=0
-

Code: Select all

on mouseUp
   put 0 into FRAME
   repeat until FRAME > 9
      put ("robotL" & FRAME & ".png") into CELL
      set the backGroundPattern of grc "rr" to the ID of img CELL
      wait 15 ticks
      add 1 to FRAME
   end repeat
end mouseUp

mwieder
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3581
Joined: Mon Jan 22, 2007 7:36 am
Location: Berkeley, CA, US
Contact:

Re: Card Flipping Animation

Post by mwieder » Mon Jun 29, 2020 5:22 pm

Ha! BackgroundPattern! Brilliant!

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Card Flipping Animation

Post by richmond62 » Mon Jun 29, 2020 5:59 pm

mwieder wrote:
Mon Jun 29, 2020 5:22 pm
Ha! BackgroundPattern! Brilliant!
I've been using that trick to teach Primary school children animation for games for at least 6 years.

Klaus
Posts: 13806
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: Card Flipping Animation

Post by Klaus » Mon Jun 29, 2020 6:52 pm

I always do this by setting the ICON of a button, this way we don't need to take care of TILEing, which happens when you use an image as backgoundpattern.

jiml
Posts: 336
Joined: Sat Dec 09, 2006 1:27 am
Location: Los Angeles

Re: Card Flipping Animation

Post by jiml » Mon Jun 29, 2020 7:22 pm

And here's an old animation technique using a single image containing all the cels of an animation.

Code: Select all

go url "http://netrin.on-rev.com/animateimage/animata.rev"
Jim Lambert

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Card Flipping Animation

Post by richmond62 » Mon Jun 29, 2020 7:37 pm

And here's an old animation technique
Indeed there is, and very clever it is too, and possibly useful with the accursed sprite sheets,

BUT considerably more complicated than flipping backGroundPatterns in a graphic frame.

I got that idea by remembering been shown a film like this when I was 8 or 9 at Primary school.

https://youtu.be/M2ORkIrHUbg

Oddly enough, most of "my" bright ideas seem to come from years 5 to 11 of my life.

richmond62
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 9287
Joined: Fri Feb 19, 2010 10:17 am
Location: Bulgaria

Re: Card Flipping Animation

Post by richmond62 » Mon Jun 29, 2020 8:04 pm

Oh, and by the way, I have nothing but good things to say about these people:

https://craftpix.net/
-
robotR0.png
robotR0.png (15.09 KiB) Viewed 12721 times

Hutchboy
Posts: 51
Joined: Wed Aug 01, 2018 2:57 pm
Contact:

Re: Card Flipping Animation

Post by Hutchboy » Tue Jun 30, 2020 6:45 pm

Hi all and thanks for the suggestions and examples. I am working through all of them but, as a challenge, I am still trying to implement a single control that, when held down, flips through all the cards in a stack. I looked at an old thread on a "show all cards" discussion I was involved in a couple of years ago and have been exploring an animation-across-cards stack that was attached. That example sets and checks for an animation flag (implemented as a custom stack property) and then calls a stack script that goes to the next card and then calls itself with a send-in-time message. Using that scheme, I have created a stack that flips cards on mouseDown using a background behavior-grouped graphic which cycles through all of the cards. In a mouseUp handler within this same control I clear the stack animation flag which stops the card flipping. The whole thing kind of works with a couple of big exceptions: 1. I found that no matter how I set the boundary of the scripted background group the card flipping happened even when I clicked outside the graphic control. I was able to fix this by covering the card with a separate background graphic group layered at the back. 2. Now everything seemed to work and I thought "Success!" but, no such luck, if I held the mouse down the card flipping continued but on mouseUp it was not stopping the animation once it got going. I finally resorted to adding a separate control to stop the animation...although that's not the behavior I want.

For the time being I have given up on trying to use a "mouseStillDown" handler like in the original Hypercard stack...mainly because I never see this message show up in message watcher so don't have a clue as to what that handler might be doing and I think I understand that in LC it loses its target when you change cards.

If I can figure out how to add an attachment I will post the stack I made. I'm still working on the problem (kind of stubborn that way.) Next step is to see if I can find out how LC handles the "Show Cards" command under the skin.

Thanks again for all the great input. Mike

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”