Using Images
LiveCode supports a wide variety of image formats, including the popular PNG and JPEG formats. You can display images in your stack, edit images and export images.
Importing Images
You can import images into your stack, the image becomes a LiveCode image object on the card.
To import an image choose File - > Import as Control -> Image file and select the image you want to import. Once the image is imported you can select it, move it and resize it just as you can with any other control.
Referencing Images
You can also reference images by filename.
1. Create a stack
2. Add an image object to the stack
3. Open the Property Inspector of the image object
4. Click the folder icon next to the Source field, this allows you to select an image file stored on the file system
5. The referenced image is displayed in the image object
The advantage of referencing images by filename is that the size of your stack is not increased as the image is not a part of the stack. However if you want your users to be able to see the images you reference you will need to distribute them with your application.
Relative and Absolute Paths
You can also set the filename property of an object in script.
You can use both relative and absolute file paths for desktop applications, relative paths are always resolved in relation to the current folder. For example:
set the filename of image "logo" to "livecodelogo.png"This works as long as the image is in the current folder. You can check what the current folder is by getting the value of the defaultFolder property.
Referencing Images on a Server
You can also set the filename property of an image to an http url. Create a new stack, and drag on an image object and a button. Name the button "Show Image" and the image object "poster". In the script of the button enter:
on mouseUp
set the filename of image "poster" to "http://lainopik.on-rev.com/posterchild.jpg"
end mouseUpApply the script, and switch to run mode. Click the button, and you should see the image displayed, and the Source referenced in the Property Inspector updated to the url.
Using the Paint Tools
In the IDE
You can use the LiveCode paint tools to create images:
1. Add an image area to the stack
2. Select one of the paint tools
3. The paint tool can be used within the image area
In a Standalone
In a standalone app your users will not have access to the Tool Palette but the paint tools can still be used to draw within an image control.
Set the Script of the image control to
on mouseEnter
set the tool to "pencil tool"
end mouseEnter
on mouseLeave
set the tool to "browse tool"
end mouseLeaveThis will allow the user to draw a thin line, you can set the color of the line by setting the penColor property.
You can also use the brush tool, and set the brushColor and brush properties.
Exporting Images
You can export images from your stack using the url keyword.
put image "logo" into url ("binfile:" & specialFolderPath("desktop") & "/logo.png")If you want to export an image in a format other than the format it is currently stored in you can use the export command.
export image "logo" to file "logo.jpg" as JPEGNote: Referenced images cannot be exported to file using the url keyword, you can use the export command in this case.
I am a beginner with LiveCode, creating an interactive map. The user hovers cursor over map elements to display images which appear in a set location in the right margin. So I am setting up transparent buttons, and imagine one image replacing another. I guess I'm not sure how to get the buttons to summon those images. When I import them as controls, the script works with the image on the actual card. As soon as I delete the image from the card and empty the image container, I get the "no such object" message. Thanks for any you can offer.