Animating images at different speeds

Visuals, audio, animation. Blended, not stirred. If LiveCode is part of your rich media production toolbox, this is the forum for you.

Moderators: Klaus, FourthWorld, heatherlaine, kevinmiller, robinmiller

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

Animating images at different speeds

Post by richmond62 » Wed Dec 16, 2015 1:16 pm

Pretty primitive, but as I knocked the whole thing together in 15 minutes
you shouldn't expect more.
Garuda Window.jpg
https://www.dropbox.com/s/p986vkztrx1g5 ... a.zip?dl=0

mess around with the right and left arrow keys.

netdzynr
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 61
Joined: Sat Apr 08, 2006 6:04 am
Contact:

Re: Animating images at different speeds

Post by netdzynr » Wed Dec 16, 2015 7:17 pm

A nice start. If you were looking to produce an actual parallax effect, this is usually achieved by objects closest to the viewer moving faster than objects farther from the viewer. So consider switching the rates you're using on the cloud and figure images.

I uploaded a modified version of your stack that does the above, along with some other improvements, such as smoother motion by using "send in..." instead of the repeating arrowkey message, using a single foreground image instead of 2, and others that can be seen in the sample. There's some math that could be done to calculate real parallax but a simple percentage is used here to make the clouds move slower than the figure.

In your message box: go url "http://tactilemedia.com/download/Garuda2.livecode"

(Click the stack after it downloads to switch focus to the stack so you can use your arrowkeys.)

Hope this is useful.

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

Re: Animating images at different speeds

Post by richmond62 » Sun Dec 20, 2015 9:32 am

This is used to good effect in the "0 ad" game:

http://play0ad.com/

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

Re: Animating images at different speeds

Post by richmond62 » Mon Jan 04, 2016 9:36 pm

Here's an animated GIF being made to move around a card.
tiger.jpg
Attachments
AnimatedGIFtest.zip
(70.54 KiB) Downloaded 221 times

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

Re: Animating images at different speeds

Post by richmond62 » Tue Jan 05, 2016 9:21 pm

Thanks to the good offices of Brahmanathaswami and GIMP I have removed the annoying surrounding round one
of the frames in the Tiger animated GIF.

So, here is a modified version of the previous stack featuring 2 animated tigers.

My "problem" is how to get them to animate at the same time.
tiger2.jpg
Attachments
AnimatedGIFtest.zip
New version
(90.61 KiB) Downloaded 208 times

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3506
Joined: Sun Jan 07, 2007 9:12 pm
Location: Bochum, Germany

Re: Animating images at different speeds

Post by bn » Tue Jan 05, 2016 9:58 pm

put this into button "animate"

Code: Select all

on mouseUp
   set the vis of img "Tiger" to true
   set the repeatCount of img "Tiger" to -1 -- start GIF animation in endless repeat loop
   set the vis of img "TigerBack" to true
   set the repeatCount of img "TigerBack" to -1
   set the moveSpeed to 50
   move img "Tiger" from -59, 240 to 698, 240 without waiting
   move img "TigerBack" from 698, 160 to -59, 160 without waiting
end mouseUp
set the script of img "Tiger" to

Code: Select all

on moveStopped
   set the repeatCount of me to 0 -- stops GIF-animation
   set the left of me to the left of this card
end moveStopped
set the script of img "TigerBack" to

Code: Select all

on moveStopped
   set the repeatCount of me to 0
   set the right of me to the right of this card
end moveStopped
Kind regards
Bernd

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

Re: Animating images at different speeds

Post by richmond62 » Wed Jan 06, 2016 9:47 am

More "silly" stuff.

Here's a stack containing an extremely crude animated GIF I made in about 10 minutes using GIMP:
wave.png
wave.png (6.42 KiB) Viewed 7568 times
and I am attaching both the stack and the individual frames, so that anyone who wants can download
GIMP: https://www.gimp.org/downloads/

and try their hand at assembling the frames into an animated GIF.
Attachments
wavingManFrames.zip
The individual frames from the animated GIF
(9.74 KiB) Downloaded 202 times
tenMinutesWork.livecode.zip
Stack
(4.36 KiB) Downloaded 207 times

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

Re: Animating images at different speeds

Post by richmond62 » Wed Jan 06, 2016 11:40 am

Here's my, extremely simple, way of animating 2 GIF images simultaneously:
simultaneous.png
Attachments
AnimatedGIFtest2.zip
Stack with simultaneous animation.
(90.7 KiB) Downloaded 204 times

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

Re: Animating images at different speeds

Post by richmond62 » Wed Jan 06, 2016 12:12 pm

Someone wrote an animated GIF generator in SuperCard:

http://forums.supercard.us/viewtopic.ph ... 1353#p6607

I wonder if one could "steal" and/or adapt it for LiveCode?

I'm going to download the SuperCard time-limited Demo onto my G5 Mac and see what I can see.

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 8807
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Animating images at different speeds

Post by FourthWorld » Wed Jan 06, 2016 5:09 pm

richmond62 wrote:Someone wrote an animated GIF generator in SuperCard:

http://forums.supercard.us/viewtopic.ph ... 1353#p6607

I wonder if one could "steal" and/or adapt it for LiveCode?
The post suggests it uses SC only as a wrapper to a command-line tool, Gifsicle, available here:
http://www.lcdf.org/gifsicle/index.html

I would imagine it should be quite easy to call Gifsicle from LC.

FWIW, while this code isn't open source, Ken Ray wrote routines to create animated GIFs directly in LiveCode, taking advantage of LC's many useful binary operations:
http://www.stykz.net/
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn

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

Re: Animating images at different speeds

Post by richmond62 » Wed Jan 06, 2016 6:06 pm

The snags about Stykz are two-fold:

1. It only generates very primitive animated GIFs (mainly stick figure ones).

2. There is no Linux version.

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 8807
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Animating images at different speeds

Post by FourthWorld » Wed Jan 06, 2016 6:24 pm

Yes, stick figure animation is exactly what Stykz does.

If one were inclined to make a general-purpose animation toolkit in LiveCode, Ken's work shows that the foundational elements for such a (rather large) task are indeed possible.

He made Stykz in his spare time for his son, and gives the software away at no cost. I can hardly blame him if he hasn't had the time to finish the Linux port.
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn

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

Re: Animating images at different speeds

Post by richmond62 » Wed Jan 06, 2016 7:21 pm

I think Stykz is very good at what it does.

The reason I mentioned Gifsicle was because I think that
a LiveCode-based tool that would allow one to assemble
all types of animated GIFs would be a great plus.

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

Re: Animating images at different speeds

Post by richmond62 » Wed Jan 06, 2016 7:23 pm

Here's an animated GIF travelling along a path:
animateOnPath.jpg
The path is on a lower layer than the grass image
so it is hidden.
Attachments
Path.zip
(84.32 KiB) Downloaded 211 times

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 8807
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Animating images at different speeds

Post by FourthWorld » Wed Jan 06, 2016 9:05 pm

richmond62 wrote:I think Stykz is very good at what it does.

The reason I mentioned Gifsicle was because I think that
a LiveCode-based tool that would allow one to assemble
all types of animated GIFs would be a great plus.
With LC's shell function it should be pretty straightforward to build a GUI for Gifsicle.
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn

Post Reply

Return to “Multimedia”