Advanced: Inks/Windows

I love beautiful software! A fully skinned application with perfect rollover buttons, background images and a distinctive window shape is music to my ears (or maybe eyes)! Inks were added in Revolution 2.7 providing a huge amount of flexibility when skinning applications. You can now blend any object in Revolution, 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 tutorial shows 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.

You can try out this effect using normal revolution object or you can download the sample stack here and follow along with the actual images.

STAGE 1

Create the basic Revolution 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.

STAGE 2

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.

STAGE 3

We need to write two handlers both of which should be placed in the group script of our background and object. The first will set the transparency or blend level of the background image. 'StackBlendLevel' has a single parameter 'pChange' which is an integer. If pChange is positive, the background transparency will increase, if negative it will decrease.

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
   
   # Set the blendlevel of the background image
   set the blendLevel of image "background" to pBlendLevel
   
   # 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
   
   unlock messages
   unlock screen
end stackBlendLevel

STAGE 4

Notice that once the blend level of the background image has been changed we immediately call 'recreateWindowShape'. This function 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. It
   # then sets the window
   # shape of the stack to the resultant image 
   # Delete the window shape image if there is one
   if there is an image "WindowShape" then
      delete image "WindowShape"
   end if
   
   # 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

STAGE 5

Now all we have to do is call 'stackBlendLevel' from our + and – buttons. The sample stack uses:

stackBlendLevel 10

and

stackBlendLevel -10

Alternatively, use a slider instead of the two buttons to make the effect even more dynamic.

STAGE 6

The window shape is applied from the top left corner of your stack. To ensure that the windows shape lines up correctly with your controls and background image, ensure your group is in the very top left corner of the stack 0,0.

STAGE 7

Switch to browse/run mode and click one of the plus or minus buttons to see the effect! Why not try experimenting with your own images and stacks!