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.
Start by creating a stack and importing your png image
Start by downloading the image for this lesson, which you can do here:
1) Create a new stack by going to 'File' and then 'New Stack - Default size'
2) Again go to 'File'
3) Choose Import As Control
4) Image FIle...
5) choose the file you downloaded.
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
Set the windowShape property
Using the message box, type and execute the following line of code:
set the windowShape of the mousestack to the ID of image 1
Move your mouse over the stack you are working with, and press Enter. "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.
Note: Be careful not to click enter while the mouse is still over the message box. If you do this, your message box will be the mousestack, and the result will be not what you were expecting. Should this happen to you, create a new stack, add a button, and put this code in the button script:
on mouseUp set the windowShape of stack "message box" to empty end mouseUp
If you've now successfully set your windowshape, 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 based 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
Remove the Shadow
You'll notice that your window also still has an outline. To remove that, open the Stack Inspector from the Object menu (1), and uncheck "shadow" (2).
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 bar is gone? Select your window, then click on the Code editor icon in the toolbar.
Copy and paste this script into the code editor:
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
Click Apply. Now switch to run mode, and you should be able to drag your window around the screen using your mouse.