How to make a stack with a window shape

This lesson will show you how to create a stack with a window shape. All you will need for this is a png image with transparent sections. In this case I am going to use a large application icon to create a great looking little desktop widget.

Attached Files

Start by creating a stack and importing your png image

Start by creating a stack and importing your png image

1) Create a new stack by going to 'File' and then 'New Mainstack'

2) Again go to 'File'

3) Choose Import As Control

4) Image FIle...

This will bring up an image chooser dialog allowing you to browse to your file. 'Import As Control' does exactly what it says, it create a new control on your stack with the data of your image in it.

You should have something like this

You should have something like this

Set the windowShape property

Set the windowShape property

Using the message box, type and execute the following like of code:

set the windowShape of the mousestack to the ID of image 1

The mousestack returns the stack that your mouse is currently hovering over and is a great command to use when working with the message box.

You will notice that the result doesn't quite look right. That is because the window shape is applied from the top left of the stack. The image the window shape is base on needs to be moved to line up with the new window shape. Run these two lines of code in your message box:

set the left of image 1 of this stack to 0

set the top of image 1 of this stack to 0

1) Click on the 'message box' icon on the menu bar to launch the message box

2) Enter your code into the input box on the message box and hit return to execute

Add script to move your new stack

Add script to move your new stack

A window shape removes all window controls from your stack. You are presented with a key problem: How do I move my stack now that the title back is gone? Place the following script on the image:

local sgDragging, sgLeftOffset, sgTopOffset

on mouseDown

put item 1 of the mouseLoc into sgLeftOffset

put item 2 of the mouseLoc into sgTopOffset

put true into sgDragging

end mouseDown

on mouseMove

lock screen

if sgDragging is true then

set the left of this stack to item 1 of globalloc(the mouseLoc) - sgLeftOffset

set the top of this stack to item 2 of globalloc(the mouseLoc) - sgTopOffset

end if

unlock screen

end mouseMove

on mouseRelease

put false into sgDragging

end mouseRelease

on mouseUp

put false into sgDragging

end mouseUp

1) Select the image

2) Click on the script icon

3) Paste the script above into the script window

4) Click the compile button

5) You have created your first stack with a window shape

The final result

The final result

7 Comments

Bill C

I don't seem to have an image file that contains the image shown in this demo. I have looked in the Rev file and can not locate any such file. Can you please advise where I might look.

Elanor Buchanan

Hi Bill

I have attached an example image file to the lesson.

I hope that helps.

Elanor

Kevin

Yeah.... you might warn the newbie to not have his mouse cursor over the message box when you press Enter on that first command string: set the windowShape of the mousestack to the ID of image 1

It's a little disconcerting.

However, one then discovers the windowShape property explained in the dictionary. :)

I had to close LiveCode and restart it. No worries.

Hanson Schmidt-Cornelius

Hi Kevin,

yes you can get unexpected result if the mouse cursor is not exactly over the stack you are trying to change.

Thanks for posting this.

Kind Regards,

Hanson

John

Thanks for this. This is great stuff!

jasper500

when I run the move script my window shoots off somewhere and I can't get it back. Any ideas why this is happening?

Hanson Schmidt-Cornelius

Hi Jasper,

that is an interesting one. I can only assume there is a bug in your code.
I would suggest putting some logging information into your mouseMove handler, rather than letting it move your application. Maybe you can make some sense of the information that is coming in there first. The application should follow the move of the mouse and not have a mind of its own.

Kind Regards,

Hanson

Add your comment

E-Mail me when someone replies to this comment