Creating an Animated Image Slider in LiveCode

Table of Contents

Introduction

In this tutorial, we'll create an interactive image slider with smooth animation effects using LiveCode. The slider will feature three image groups that can expand and contract when clicked, with only one expanded at a time.

This tutorial focuses on creating a professional-looking animation effect using LiveCode's built-in animation capabilities. You'll learn how to create smooth transitions, manage object positioning, and handle user interactions.

Project Overview

We'll build a stack with three image groups positioned along the right side of the card. When a user clicks on one of these groups:

The animation will be smooth, and all groups will maintain their relative positioning.

Prerequisites

Step 1: Setting Up the Stack

  1. Create a new stack in LiveCode
  2. Set the stack size to 800x600 pixels

Step 2: Create the Image Groups

  1. Import three images into your stack
  2. For each image:
    • Create a group (Insert → Group)
    • Place the image inside the group
    • Name the groups "SlotImageGroup1", "SlotImageGroup2", and "SlotImageGroup3"
    • Name the images "image1", "image2", and "image3" respectively

Tip: Choose images with similar dimensions for the best visual effect. Landscape-oriented images typically work best for this type of slider.

Step 3: Create the Stack Script

Open the stack script editor and add the following code:

/*****************************************************************
* SlotImageGroups.livecodescript
*
* DESCRIPTION:
* This script manages expanding and contracting image groups in a LiveCode stack.
* It implements an animation effect where clicking on a group will expand
* or contract it, while maintaining proper positioning of all groups relative
* to the right edge of the card with consistent margins.
*
* CREATED BY: Your Name
* CREATION DATE: April 29, 2025
* VERSION: 1.0
*
* LICENSE:
* MIT License
*
* Copyright (c) 2025 Your Name
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*
*****************************************************************/

-- Constants for animation and positioning
constant kSpeed = 1
constant kMargin = 10
constant kRightMargin = 22  -- Margin from right edge of card
local gInitialPositionSet = false

-- Initialize the groups when the stack opens
on preOpenStack
   positionGroupsFromRight
end preOpenStack

-- Position groups from the right edge of the card
on positionGroupsFromRight
   local tGroupOrder, tCurrentGroup, tCurrentRight, tGroupWidth, tImageName
   
   -- Define the order of groups (right to left)
   put "SlotImageGroup3,SlotImageGroup2,SlotImageGroup1" into tGroupOrder
   
   -- Start from the right edge of the card minus margin
   put the width of this card - kRightMargin into tCurrentRight
   
   -- Position each group in order from right to left
   repeat for each item tCurrentGroup in tGroupOrder
      -- Get the corresponding image name
      put "image" & char -1 of tCurrentGroup into tImageName
      
      -- Ensure group width is 1/4 of image width (contracted state)
      set the width of group tCurrentGroup to the width of image tImageName / 4
      
      -- Calculate group position
      put tCurrentRight - the width of group tCurrentGroup into tLeft
      set the left of group tCurrentGroup to tLeft
      set the right of group tCurrentGroup to tCurrentRight
      
      -- Center the image in the group
      set the loc of image tImageName to the loc of group tCurrentGroup
      
      -- Update right position for next group
      put tLeft - kMargin into tCurrentRight
   end repeat
   
   -- Record these as the initial positions
   recordInitialPositions
   put true into gInitialPositionSet
end positionGroupsFromRight

-- Handle mouse clicks on groups or images
on mouseUp
   local tTarget, tGroupName, tImageName
   
   put the short name of the target into tTarget
   
   if tTarget contains "SlotImageGroup" then
      -- It's a group
      put tTarget into tGroupName
      put "image" & char -1 of tGroupName into tImageName
   else if tTarget contains "image" then
      -- It's an image
      put "SlotImageGroup" & char -1 of tTarget into tGroupName
      put tTarget into tImageName
   else
      -- Not a target we're interested in
      exit mouseUp
   end if
   
   -- Ensure initial positions are set
   if not gInitialPositionSet then
      positionGroupsFromRight
   end if
   
   handleImageGroupClick tGroupName, tImageName
end mouseUp

-- Store the initial positions of groups
on recordInitialPositions
   -- Store the original positions of groups
   set the cInitialLeft of group "SlotImageGroup1" to the left of group "SlotImageGroup1"
   set the cInitialLeft of group "SlotImageGroup2" to the left of group "SlotImageGroup2"
   set the cInitialLeft of group "SlotImageGroup3" to the left of group "SlotImageGroup3"
   
   -- Also store information about the card width
   set the cCardWidth of this card to the width of this card
end recordInitialPositions

-- Handle stack resizing
on resizeStack pNewWidth, pNewHeight, pOldWidth, pOldHeight
   -- Reposition groups when stack is resized
   positionGroupsFromRight
end resizeStack

-- Handle clicking on an image group
on handleImageGroupClick pGroupName, pImageName
   if the width of group pGroupName < the width of image pImageName then
      -- First check if any other group is expanded and contract it
      checkAndContractOtherGroups pGroupName
      
      -- Then expand the current group
      expandImageGroup pGroupName, pImageName
   else
      contractImageGroup pGroupName, pImageName
   end if
end handleImageGroupClick

-- Check and contract any expanded groups except the current one
on checkAndContractOtherGroups pCurrentGroup
   local tGroupsList, tLine, tGroup, tImage
   
   -- List of all groups and their corresponding images
   put "SlotImageGroup1,image1" & return & \
        "SlotImageGroup2,image2" & return & \
        "SlotImageGroup3,image3" into tGroupsList
   
   repeat for each line tLine in tGroupsList
      put item 1 of tLine into tGroup
      put item 2 of tLine into tImage
      
      -- Skip the current group
      if tGroup is pCurrentGroup then next repeat
      
      -- If this other group is expanded, contract it
      if the width of group tGroup >= the width of image tImage then
         contractImageGroup tGroup, tImage
      end if
   end repeat
end checkAndContractOtherGroups

-- Expand an image group with animation
on expandImageGroup pImageGroup, pImage
   local tLeft, tTop, tRight, tBottom
   
   put the left of group pImageGroup into tLeft
   put the top of group pImageGroup into tTop
   put the right of group pImageGroup into tRight
   put the bottom of group pImageGroup into tBottom
   
   repeat until the width of group pImageGroup >= the width of image pImage
      -- Lock screen just for this update to reduce flickering
      lock screen
      
      put tLeft - kSpeed into tLeft
      set the rect of group pImageGroup to tLeft, tTop, tRight, tBottom
      
      -- Reposition all groups to maintain order and margins
      repositionAllGroups
      
      set the loc of image pImage to the loc of group pImageGroup
      
      -- Unlock to show the frame, then proceed to next iteration
      unlock screen
      wait 1 milliseconds
   end repeat
end expandImageGroup

-- Contract an image group with animation
on contractImageGroup pImageGroup, pImage
   local tLeft, tTop, tRight, tBottom
   
   put the left of group pImageGroup into tLeft
   put the top of group pImageGroup into tTop
   put the right of group pImageGroup into tRight
   put the bottom of group pImageGroup into tBottom
   
   repeat until the width of group pImageGroup <= (the width of image pImage)/4
      -- Lock screen just for this update to reduce flickering
      lock screen
      
      put tLeft + kSpeed into tLeft
      set the rect of group pImageGroup to tLeft, tTop, tRight, tBottom
      
      -- Reposition all groups to maintain order and margins
      repositionAllGroups
      
      set the loc of image pImage to the loc of group pImageGroup
      
      -- Unlock to show the frame, then proceed to next iteration
      unlock screen
      wait 1 milliseconds
   end repeat
end contractImageGroup

-- Reposition all groups to maintain proper spacing
on repositionAllGroups
   local tGroupOrder, tCurrentGroup, tCurrentRight
   
   -- Define the order of groups (right to left)
   put "SlotImageGroup3,SlotImageGroup2,SlotImageGroup1" into tGroupOrder
   
   -- Start from the right edge of the card minus margin
   put the width of this card - kRightMargin into tCurrentRight
   
   -- Position each group in order from right to left
   repeat for each item tCurrentGroup in tGroupOrder
      -- Position the right edge of the group
      set the right of group tCurrentGroup to tCurrentRight
      
      -- Update right position for next group
      put the left of group tCurrentGroup - kMargin into tCurrentRight
      
      -- Keep the image centered in its group
      local tImageName
      put "image" & char -1 of tCurrentGroup into tImageName
      set the loc of image tImageName to the loc of group tCurrentGroup
   end repeat
end repositionAllGroups

Step 4: Understanding the Key Components

Constants and Variables

Main Handlers

  1. preOpenStack: Initializes the groups when the stack opens
  2. positionGroupsFromRight: Positions groups along the right edge of the card
  3. mouseUp: Handles mouse clicks on groups or images
  4. handleImageGroupClick: Determines whether to expand or contract a group
  5. expandImageGroup/contractImageGroup: Performs the animation
  6. repositionAllGroups: Maintains proper spacing between groups
  7. resizeStack: Handles repositioning when the stack size changes

Step 5: How the Animation Works

The animation is powered by LiveCode's ability to modify object properties in small increments within a loop. Here's how it works:

  1. When a group is clicked, we check if it should expand or contract
  2. If expanding:
    • We first contract any other expanded group
    • We gradually increase the width of the group
    • After each small change, we reposition all groups
    • We update the screen between each change to create the animation effect
  3. If contracting:
    • We gradually decrease the width of the group
    • After each small change, we reposition all groups
    • We update the screen between each change to create the animation effect

The lock screen and unlock screen commands are used to reduce flickering during animation.

Animation Technique: LiveCode's animation system is built around the concept of incremental changes and screen updates. By making small changes and briefly showing each frame, we create the illusion of smooth motion. The wait command controls the animation speed.

Step 6: Testing and Customization

  1. Run the stack and test the animation by clicking on different groups
  2. Try resizing the stack to see how the groups reposition themselves
  3. Customize the behavior by modifying the constants:
    • Increase kSpeed for faster animation
    • Adjust kMargin to change spacing between groups
    • Modify kRightMargin to change distance from right edge

Step 7: Adding an Informational Text Field

Add a text field to the stack with the following content:

Image Slider Animation

This stack demonstrates an interactive sliding image gallery with animated expansion and contraction effects. Click on any of the three image groups to expand it and view the full image. Only one image can be expanded at a time - clicking an expanded image will contract it, while clicking a different image will contract the current one and expand the new selection.

The images are intelligently positioned from the right edge of the card, automatically adjusting when the stack is resized. This provides a seamless user experience as images slide smoothly into view with a pleasing animation effect.

Final Notes

This implementation takes advantage of LiveCode's event-driven programming model and its ability to manipulate objects with simple commands. The animation technique is efficient and creates a professional-looking effect with minimal code.

The script is designed to be easily extendable. If you want to add more image groups, simply follow the same naming convention and update the group list in the checkAndContractOtherGroups handler.

Next Steps

Now that you have a working image slider, you might want to explore these enhancements:

LiveCode Tips: Remember that LiveCode's strength lies in its simplicity and flexibility. You can extend this basic slider in many ways using similar animation techniques. The event-driven nature of LiveCode makes it easy to add interactive elements.

Tutorial created: April 30, 2025 | LiveCode Image Slider Tutorial