You can create a nifty image zoom effect in LiveCode using Malte Brill’s AnimationEngine library. What’s nifty about this is the zoom behavior can include easing effects (subtle acceleration/deceleration) that you don’t get by simply enlarging or reducing an image.

I posted a demo stack that can be viewed in LiveCode by copying the following line and executing it in your LiveCode message box:

The interaction is simple: clicking anywhere on the map will zoom into the clicked region at 16x enlargement with in/out easing; clicking again will zoom out to the starting dimensions.


One thing to keep in mind when resizing images in LiveCode is the resizeQuality property, which has three settings: normal, good, and best. While you may be tempted to display images with a resizeQuality of “best” all the time, this setting will make any resize operation take significantly longer. For this reason, it’s usually best to set the resizeQuality of an image to “normal” during the resize, and then apply “good” or “best” when done. And by the way, setting the property doesn’t actually apply it — the image must by physically resized by at least one pixel to make the new quality setting take effect.


See the card script of the stack to see all the handlers used to create the effect. In the openStack handler, acceleratedRending for the stack is enabled to make performance as snappy as possible, the AnimationEngine library is put into use and set to a high frame rate, and for good measure, the syncRate is set to a low value (it’s difficult to tell if this makes any significant difference; LiveCode’s default syncRate setting is 20).

on openStack
   set acceleratedRendering of this stack to true
   start using stack “animationengine”
   aeSetFrameRate 50
   set syncRate to 8
end openStack


When the map is clicked, a zoomInMap command is issued that calculates x,y offsets from the rectangle of the current map image, and determines the destination rectangle for the full-sized map. This is fed to the aeChangeRect command, which handles the animated changes between rects.

command zoomInMap
   put 16 into theZoomValue
   put mouseH() into X
   put mouseV() into Y
   put X – left of theMap() into Loffset
   put right of theMap() – X into Roffset
   put Y – top of theMap() into Toffset
   put bottom of theMap() – Y into Boffset
   put loc of me into theCenterLoc
   put 0,0,0,0 into theNewRect
   put item 1 of theCenterLoc – (Loffset * theZoomValue) into item 1 of theNewRect
   put item 2 of theCenterLoc – (Toffset * theZoomValue) into item 2 of theNewRect
   put item 1 of theCenterLoc + (Roffset * theZoomValue) into item 3 of theNewRect
   put item 2 of theCenterLoc + (Boffset * theZoomValue) into item 4 of theNewRect
   set resizeQuality of theMap() to “normal”
   aeChangeRect theMap(), theNewRect, 1500, “inout”
end zoomInMap


When clicking on the full-size map to zoom out, the zoomOutMap command is issued and the aeChangeRect command is used in reverse, using a rect value stored as a custom property (startRect) of the map image. This makes certain that the map will always return to consistent starting rectangle.

command zoomOutMap
   set resizeQuality of theMap() to “normal”
   aeChangeRect theMap(), the startRect of theMap(), 1500, “out”
end zoomOutMap


Note in both commands above, the resizeQuality of the map is set to normal — this allows scaling of the image to take place as quickly as possible. And when the resize is done, AnimationEngine’s aeChangeRectDone callback is used to “jiggle” the image by one pixel so a “good” resizeQuality setting is applied.

on aeChangeRectDone
   lock screen
   set resizeQuality of theMap() to “good”
   set width of theMap() to width of theMap() + 1
   set width of theMap() to width of theMap() – 1
   unlock screen
end aeChangeRectDone


Finally, when doing any type of image scaling in LiveCode, avoid enlarging an image beyond its formattedWidth and formattedHeight. Doing so will often produce soft, blurry results, so it’s best to start with an image that is scaled down from its actual size, and scale up from that point.


(Visited 550 times, 1 visits today)