Start by downloading the image for this lesson, which you can do here:

https://tinyurl.com/ycxlf3lv

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.

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

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).

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.