Here are two exercises to help you become familiar with image objects in LiveCode. (These do not need to be turned in.)
I. Importing Images
Make a new mainstack and set it to a background color other than white.
Resize it to give yourself plenty of room. Don't forget to name and save your stack if you want to save it.
Import some images to your stack from an external file using File menu > Import as Control > Image File... (You can find some image files in the Resources folder on the DigHT 210 server.)
Note that each imported image is contained in an image object. Image objects share many of the same properties as other objects. Try turning the image border on and off, for instance.
Resize one of the imported images by dragging one of the "handles" on the edge of the image object.
What happens if you hold down the Shift key while resizing?
What happens if you hold down the Option key while resizing?
What happens if you hold down the Command (Apple) key (Mac) or the Control+ Option keys (Windows) while resizing?
Pay special attention to the Quality property in the image Properties Inspector. Notice the difference in quality when you resize an image at "Normal" quality as opposed to "Best" quality.
Create a new card. Now return to the first card (command (Mac) or control (Win) - 1). What happened to the resized image?
An image object will always revert to its native dimensions when you close the card it is on, unless you lock the image.
Try this:
Resize the image again.
Open its property inspector.
Choose the Size and Position panel.
Click the box labeled "Lock size and position".
Confirm that the image retains the new size when you leave the card and return.
II. Images as Button Icons
Create a transparent button. (Use the Style popup in the Basic panel of the property inspector.) Give the button a name and label.
Choose the Icons & Border panel in the inspector.
Next to the icon field, click the wand tool.
Select an image from those displayed.
How does the button's appearance change?
Click the wand again to change the icon.
Choose This Stack from the popup list at the top. This shows all the images you previously imported. Choose one. Note that any imported image can also be used as a button icon.
Rename your button "Previous".
Be sure you have logged in to the DigHT 210 file server. Choose File menu > Import as Control > All Images in Folder... Navigate to the Resources/images3DarrowIcons folder on the server and select the folder labeled "nextPrev-gray".
Select and hide all of the arrow images you just imported. (Uncheck the "visible" checkbox in the property inspector for all the images.)
Return to the Icons and Border panel for your transparent button.
Assign the various icon types—Normal, Hilite, Disabled, Hover—to the appropriate button states, using the left-facing arrow set.
Test the button to see the various states in action: normal icon, down or hilited icon, disabled icon, hover icon.
Copy your button and name the copied button "Next".
Assign the icons to the Next button, this time using the right-facing arrows.
Office of Digital Humanities