The look and feel of a program can have a high impact on the end user, and depending on what your application is, can be an extremely important aspect of your piece of software. Livecode provides support for Inks, which provide a huge amount of flexibility when skinning applications. You can blend any object in Livecode, including the entire window, allowing the desktop of the host computer to show through. The results can be stunning when all these features are used together in the right measure.
Blending the entire window can however create unwanted effects including loss of clarity, especially where you are displaying text. This lesson will show you how you can use window shapes and inks to control the transparency of a particular area of your stack.
Our example is very simple. The stack is made up of a background image, our logo in a nice beveled frame, a close button and the controls to alter the transparency of our window. Clicking on the '+' and '-'buttons alters the blend level of the background image without affecting the transparency of the controls or our logo.
Step 1: Setting up your stack
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. Remeber this in order 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 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.
Step 2: Writing code to control the User Interface
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.
on stackBlendLevel pChange
# pChange is an integer value + or -
# This funtion takes pChange and modifies the blendLevel of the background image
# in the windowShapeGroup
if sBlendLevel is empty then
put the blendlevel of this stack into sBlendLevel
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
# Recreate the window shape based on the now blendlevel of the background image
# Update the User Interface so that the correct number of pips go red
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
# contols 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"
# 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"
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 paramater pBlendLevel
if sBlendLevel < 10 then
set the icon of button "pip1" to 5007
set the icon of button "pip1" to 5006
if sBlendLevel < 20 then
set the icon of button "pip2" to 5007
set the icon of button "pip2" to 5006
if sBlendLevel < 30 then
set the icon of button "pip3" to 5007
set the icon of button "pip3" to 5006
if sBlendLevel < 40 then
set the icon of button "pip4" to 5007
set the icon of button "pip4" to 5006
if sBlendLevel < 50 then
set the icon of button "pip5" to 5007
set the icon of button "pip5" to 5006
if sBlendLevel < 60 then
set the icon of button "pip6" to 5007
set the icon of button "pip6" to 5006
Step 3: Changing the transparency with buttons
In order to utilize 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.