Inks/Windows

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

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.

local sBlendLevel

on stackBlendLevel pChange

 # pChange is an integer value + or -

 

 # This funtion 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 now 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

 # 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"

 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 paramater 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

Step 3: Changing the transparency with buttons

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.

0 Comments

Add your comment

E-Mail me when someone replies to this comment