make and drag custom windows
1 Going further
We have the basic functionality, but it’s a fairly boring Fuzzy-Felt game that has nothing but grey shapes. The next steps will add different colour blocks and some instructions that change a graphic’s colour.
2
Colour blocks
Draw a rectangle graphic on the card and use the Inspector palette to do the next steps: name it ‘red’, make it 256 pixels wide by about 50 tall, make it opaque, and use the Colors & Patterns pane to set the background colour to a bright red. Put it in the top-left corner, then copy this three times and place the copies along the top of the card. Name and fill one of these with green, one blue and one yellow.
3
Colouring code
The code that’s placed in each new graphic needs to be expanded with the instructions that deal with changing colours. This is stored in the invisible ‘script store’ graphic. With the Edit tool selected, choose View > Show Invisible Objects. Now you should be able to select this item and click the Code button to see the instructions it contains. Create an on mouse Still Down handler and add this line:
if intersect (me, graphic "red", "opaque pixels") then set the backgroundColor of me to "red"
The mouse Still Down handler is triggered over and over while the mouse button is held down, so it’s a useful one to use while using the ‘grab me’ instruction to drag the clicked item around; the mouse remains down so the mouse Still Down event keeps happening, many times a second.
As the Live Code Dictionary tells you, the ‘intersect’ function will check to see if two specific objects overlap, and the ‘opaque pixels’ addition tells it to pay attention to visible shapes rather than just the bounding rectangles of the objects. This script will be inside the object that’s being dragged, so ‘me’ is shorthand for the object itself. Copy and paste this line and amend it to check for intersecting with the graphic called ‘blue’, changing the 'backgroundColor' instruction to "blue" – repeat for green and for yellow.
4
Trash icon
All that’s left is to make a better-looking ‘trash’ object. You can use your own image or download the trash.png graphic from thehelpful.com/livecode/fuzzyfelts/trash.png. Once you have a suitable image in PNG, GIF or JPEG format, click the Message Box icon in the Toolbar below the menu bar. Choose the second icon from the left, the Multi-Line version, and add the following two lines:
answer file "pick an image"
import paint from file it
Press the Enter key (by the numberpad) to run the instruction (not the Return key by the puncutation keys, which is actually functionally different). If you’re using a keyboard with no separate Enter key, hold down the ƒ key to make Return act as Enter. Find and select the image you want; it will be imported as fully-embedded pixels shown within a new image object. This method is better than using the Inspector palette to select an ‘image source’, because it doesn’t need to keep track of the original image file. Delete the original ‘trash’ image object and rename this new one ‘trash’ so that the ‘on mouseUp’ handler in the card code that looks for an intersection with an image called ‘trash’ will still work.
5
Backdrop
Add this to the card’s mouse Up handler to toggle a solid black backdrop behind the card when you å- click:
if the optionKey is down then
if the backdrop is "black" then
set the backdrop to "none"
else
set the backdrop to "black"
end if
end if
This keeps younger users – the target audience of this software toy – from clicking out to the Finder by mistake.