Create the basic Livecode stack, add your blank controls and import your images. All components that make up the structure of your stack should be placed along with your background image into a single group. Once you have created your group, be sure to set the topleft of your group to 0,0 - the very top left corner of the stack. This is required as the window shape is applied from the top left corner of the stack. Remember this to prevent misalignment of objects to the window shape.

The effect is generated using the import snapshot function with the resultant image being set as the new window shape. We are going to set the blend level of the background image and then take a snapshot of the entire group. The image produced will contain alpha blended regions as well as solid areas where our controls have been placed.

In this stack, we want to be able to change the transparency of the background by pressing the + and - buttons seen in the image above. In order to do this, we will need to write three separate handlers to carry out the required tasks, each of which will be placed in the script of the background group. The first, 'stackBlendLevel', will set the transparency (or blendLevel) of the background image. 'stackBlendLevel' has a single parameter, 'pChange', which is an integer corresponding to the amount that the blendLevel of the background image should be changed.

local sBlendLevel
on stackBlendLevel pChange
  # pChange is an integer value + or -
  
  # This function takes pChange and modifies the blendLevel of the background image
  # in the windowShapeGroup
  lock screen
  
  lock messages
  
  if sBlendLevel is empty then
    put the blendlevel of this stack into sBlendLevel
  end if
  
  add pChange to sBlendLevel
  
  # Ensure that the new blendlevel is valid
  if sBlendLevel > 60 then
    put 60 into sBlendLevel
  else if sBlendLevel < 0 then
    put 0 into sBlendLevel
  end if
  
  # Recreate the window shape based on the new blendlevel of the background image
  recreateWindowShape sBlendLevel
  
  # Update the User Interface so that the correct number of pips go red
  updateUI sBlendLevel
  
  lock messages
  
  unlock screen
end stackBlendLevel

Notice that once the blend level of the background image has been changed we immediately call 'recreateWindowShape'. This handler takes a snapshot of our group and sets the windows shape of the stack to the image created.

on recreateWindowShape pBlendLevel
  # This handler takes a snapshot of group "windowShape", which contains all our
  # controls and most importantly the background image
  
  # Delete the window shape image if there is one
  if there is an image "WindowShape" then
    delete image "WindowShape"
  end if
  
  # Set the blendlevel of the background image
  set the blendLevel of image "background" to pBlendLevel
  
  # Set the properties of the template image which will apply to our new window shape
  # image when we use the command 'snapshot'
  set the visible of the templateImage to false
  set the alwaysBuffer of the templateImage to true
  
  # Take a snapshot of the whole group, including all the controls
  import snapshot from group 1
  set the name of the last image to "WindowShape"
  
  # Finally, set the window shape of the stack to the new image
  set the windowShape of this stack to the id of image "WindowShape"
end recreateWindowShape

The last handler we need to put in the script is 'updateUI'. This is a simple handler that highlights the correct number of pips on our example stack.

on updateUI pBlendLevel
   ## This handler updates the UI accordingly
   ## Changes the number of pips highlighted based on parameter pBlendLevel
   
   lock screen
   if sBlendLevel < 10 then
      set the icon of button "pip1" to 5007
   else 
      set the icon of button "pip1" to 5006
   end if
   
   if sBlendLevel < 20 then
      set the icon of button "pip2" to 5007
   else 
      set the icon of button "pip2" to 5006
   end if
   
   if sBlendLevel < 30 then
      set the icon of button "pip3" to 5007
   else 
      set the icon of button "pip3" to 5006
   end if
   
   if sBlendLevel < 40 then
      set the icon of button "pip4" to 5007
   else 
      set the icon of button "pip4" to 5006
   end if
   
   if sBlendLevel < 50 then
      set the icon of button "pip5" to 5007
   else 
      set the icon of button "pip5" to 5006
   end if
   
   if sBlendLevel < 60 then
      set the icon of button "pip6" to 5007
   else 
      set the icon of button "pip6" to 5006
   end if
   lock messages
end updateUI

In order to use the above code to change the transparency of our background image, we need to call the 'stackBlendLevel' handler from the + and - buttons on our stack. The + button has 'stackBlendLevel 10', while the - button has 'stackBlendLevel -10'.

So now, when we press the buttons, the transparency of the background will change, along with the number of highlighted pips. We don't have to use buttons - for a more dramatic effect, something like a scrollbar could be used. With the concepts detailed above, you can create a wide range of effects.