Accordion Image Effect

[Hutchboy]

Hi,

I created a simple accordion image effect stack that should be easily modifiable to suit your needs. The code is contained completely within the stack script and there is detailed explanation in the script header. Since I am using images the file size is too large to post here, but I have included a link to my GitHub repository.

I want to be able to load images externally, but don't have it working yet ( troubleshooting resizing large images to fit in a card when loaded into the stack.)

[Update 4/30/25] I attached a tutorial for this animated effect.

Mike

GitHub link: https://github.com/mdroberts2017/Accordion-Image-Effect

[bn]

Thank you Mike for this very nice animated accordion.


I changed handler "handleImageGroupClick" and added a handler "ExpandAndContract" to avoid closing all groups before expanding another group.

Code: Select all

on handleImageGroupClick pGroupName, pImageName
   
   local tGroups, tOtherExpandedGroupName, tExpandedGroup
   
   put "SlotImageGroup3,SlotImageGroup2,SlotImageGroup1" into tGroups
   
   repeat for each item aGroup in tGroups
      if the width of group aGroup >= the width of image pImageName then
         put aGroup into tExpandedGroup
      end if
   end repeat
   
   if tExpandedGroup is not empty then
      if tExpandedGroup is not pGroupName then
         ## another group is expanded, clicked group is not expanded
         put tExpandedGroup into tOtherExpandedGroupName
      else
         ## clicked on expanded group -> contract
         contractImageGroup pGroupName, pImageName
      end if
   else
      -- nothing is expanded: expand the clickedGroup
      expandImageGroup pGroupName, pImageName
   end if
   
   if tOtherExpandedGroupName is not empty then
      ExpandAndContract pGroupName, tOtherExpandedGroupName
   end if
   
   --   exit handleImageGroupClick
   --   breakpoint
   
   --   -- original code
   --   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

on ExpandAndContract pExpandGroup, pContractGroup
   local tExpandRect, tContractRect, tExpandImg, tContractImg
   
   put the rect of group pExpandGroup into tExpandRect
   put the rect of group pContractGroup into tContractRect
   
   put the childControlNames of group pExpandGroup into tExpandImg
   put the childControlNames of group pContractGroup into tContractImg
   --lock screen
   
   repeat until the width of group pExpandGroup >= the width of image tExpandImg
      lock screen
      put item 1 of tExpandRect - kSpeed into item 1 of tExpandRect
      set the rect of group pExpandGroup to tExpandRect
      set the loc of image tExpandImg to the loc of group pExpandGroup
      
      put item 1 of tContractRect + kSpeed into item 1 of tContractRect
      set the rect of group pContractGroup to tContractRect
      set the loc of image tContractImg to the loc of group pContractGroup
      repositionAllGroups
      unlock screen
      wait 1 milliseconds
   end repeat
end ExpandAndContract

Kind regards
Bernd

[stam]

Thanks Mike, pretty sweet - and with Bernd's modification it really is quite mesmerising

[Hutchboy]

Hi,

Thanks for the appreciation and for the modification, this is closer to what I wanted to achieve.

- Mike

P.S. There are a ton of short HTML/JS/CSS web effects online, many open source. For those of you who are using Claude 3.7, it is pretty straightforward to create a project and drag the HTML/JS/CSS source code files into the project knowledge area and then, in your chat for the project, place a prompt similar to the following:

" Analyze the HTML/JS/CSS files in the project knowledge area which create a special web effect and create a LiveCode implementation of this effect in a stack size of 1024 x 768 pixels. Declare all variables according to their scope. Double-check all generated code to ensure it is valid LiveCode syntax. Avoid creating groups where possible. Also, use a "target/mouseUp/switch statement" strategy to avoid setting object scripts and to limit script control to the stack script or card script. When creating the UI for this stack maintain the same style and color scheme as the original. Finally, generate a comprehensive script header contained within block comments ("/*" and "*/") that includes a place for author, today's date and reference the MIT license."

This approach works well, but don't expect a ready to run output. I usually correct compilation errors and then move on to execution errors. I often block out and test UI creation code separately. Another strategy I use is to copy my updated stack and/or card scripts into the project knowledge area and then ask Claude to review the changes. On more complicated issues I ask Claude to add minimal debug code to address the problem at hand.

One more Claude tip: so the engine doesn't bog down with excessively long scripts I often ask it to create multi-part artifacts that I can assemble into a complete stack script.