Ken Burn's Effect Library for Livecode

Scott Rossi scott at tactilemedia.com
Sun Jan 31 18:09:14 EST 2016


There was a thread a while back about motion and parallax, and Colin Holgate
shared a stack or two with a demonstration of that effect.  On my blog, I
posted an example of Malte Brill's technique of using a scroller to move
large images along a single axis, which could likely be expanded to move in
two axes.  But I imagine that adding the additional "half D" of scaling an
image at the same time will depend significantly on how large your displayed
images will be.

LiveCode has never been that great at moving full-screen images around, and
keep in mind that if you plan to scale an image at all, you must set the
resizeQuality of the image to "good" to keep any quality in the image, which
will slow things down more (the "best" setting will be unusable).
AcceleratedRendering helps here, but I think the speed enhancements provided
by this property are achieved by a kind of buffering or caching of the
region that is "in motion" so trying to scale things while that is happening
will likely slow things down.

With the above said, if your effect is going to take place in a region of a
card, instead of full screen, you might get decent performance.

My *untested* opinion is that getting an actual Ken Burns effect natively in
LC is going to be difficult, if not impossible.  It would be great to see
someone pull this off.  But to accomplish the actual slow/smooth 60fps
motion of the effect, I think you'd be better off using a browser object
along with a jquery/Javascript slider to move your images around -- there
are dozens of libraries/plugins out there.  Even with these, the effect can
be very processor intensive.  I recently rebuilt my own web site that has a
Ken Burns style image viewer for the opening, and if this stays on the
screen long enough, the fan on my system kicks in.

Some options:
http://slippry.com/examples/pictures/
http://www.jqueryscript.net/slideshow/Simple-jQuery-Image-Slideshow-with-Ken
-Burns-Effect.html
https://github.com/toymakerlabs/kenburns
http://www.hislider.com/showcase.html


Regards,

Scott Rossi
Creative Director
Tactile Media, UX/UI Design

On 1/31/16, 7:02 AM, "use-livecode on behalf of Todd Fabacher"
<use-livecode-bounces at lists.runrev.com on behalf of tfabacher at gmail.com>
wrote:

> Hello BR,
> 
> Any luck with the KenBurn's effects? We are looking into that and what is
> being called 2.5D effects in a LiveCode. Not sure Scott Rossi or any of the
> other great visual designers have looked into it yes. In effect is mixes
> Ken Burn's with parallax and can also gif animation to get fancy.
> 
> http://blog.visual.ly/the-2-5d-effect-how-to-animate-photos-and-create-a-paral
> lax-shift/
> 
> Most examples can be found on the internet using Photoshop, but there is a
> GIMP example also:
> 
http://www.gimpology.com/submission/view/2_5d_parallax_animated_photo_tutorial>
/
> 
> I think with a little extra efforts, this could add a real professional
>  visual experience with little size or overhead expense to a LiveCode App.
> If we added swiping an/or the phone's accelerometer. We are looking into it
> and will put some resources on this for one of our Apps in a few weeks if
> there is anyone who wants to work together on it.
> 
> --Todd
> 





More information about the Use-livecode mailing list