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

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 Contol -> 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

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 "enterprise.gif"

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

Referencing Images on a Server

You can also set the filename property of an image to an http url.

For example:

set the filename of image "logo" to "http://elanorb.on-rev.com/lessons/lc-icon.png"

Using the Paint Tools

Using the Paint Tools

You can use the LiveCode paint tools to create images:

1. Add an image area to the stack

2. Ensure the paint tools are shown in the Tools Palette by clicking the fold out triangle

3. Select one of the paint tools

4. The paint tool can be used within the image area

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 JPEG

Note: Referenced images cannot be exported to file using the url keyword, you can use the export command in this case.

15 Comments

bbecker

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.

Hanson Schmidt-Cornelius

Hi Bbecker,

instead of deleting an image, you should try setting the icon of a button. The following lesson shows you how to create an animation by presenting a sequence of images on a button:

http://lessons.runrev.com/s/lessons/m/4071/l/44418-how-do-i-create-animated-overlays

Sections: "Animating the Space Ship" and "Animating the Rocket" have the code you are looking for.

You may also find the following lesson quite useful. It shows you how to create thumbnails:

http://lessons.runrev.com/s/lessons/m/4071/l/7084-how-to-create-a-thumbnail-image

Kind Regards,

Hanson

mahesh kumar

I am a beginner with LiveCode, want to crop an image placed in the image area. Please help me out

Hanson Schmidt-Cornelius

Hi Mahesh,

you can find a number of image processing lessons under the heading "Using Images" under the following link: http://lessons.runrev.com/m/4071
This should give you an initial overview over how to load and process images.

You can crop an image on a LiveCode stack by using the "crop" command. You can find more information about this command in the LiveCode Dictionary.

Kind Regards,

Hanson

Pierre

Hi,

I've looked through most of the stuff on images but couldn't find what I was looking for: I'm working on a card game and I need to work with about 60 images (hide, show, move, bring to front, send to back...).

Is there a way to way to load several images on startup as hidden? Also, if there are some examples of setting the image positions/states from code, that would be great.

Thanks,
Pierre

Hanson Schmidt-Cornelius

Hi Pierre,

If you want to do something on start up then you should put the relevant code in the 'preOpenStack' or 'preOpenCard' handlers. This ensures everything is ready when your app starts to run.

You can load several images and hide them or place them on a region of a card that is outside of the visible area. You could also have one image on each card and then navigate to each card, depending on what image you want to show. It really depends on what works best for your application.

Have a look at our lessons section on 'Working with files' for how to load the images. You will find a number of lessons there. The comments of the following lesson provide you with some information on loading text files. There is also a bit on loading images: http://lessons.runrev.com/s/lessons/m/4071/l/9600

The following lesson gives you some information on showing and hiding buttons. The syntax for showing and hiding images is very similar: http://lessons.runrev.com/s/lessons/m/4071/l/15454

Have a look at the following lesson on navigating between cards: http://lessons.runrev.com/s/lessons/m/4071/l/27527

I hope this covers all the information you need for your app.

Kind Regards,

Hanson

Pierre

That helps, thanks Hanson!

Best,
Pierre

esnir

Hi,

i want to make a option in which you are able to place pins on a map

so i want something like this

when you click on a button you will be able to place pins

and if you click then a place (doesnt matter where) you will place a pin(button)

can you help me?

thanks
Esnir

Hanson Schmidt-Cornelius

Hi Esnir,

on the first button you would use the "mouseUp" handler to indicate that pins are to be placed.

You may then want to have a background image on which users are to place pins. This could again have a "mouseUp" handler. This would then use the "clickLoc" function to return the X/Y coordinates of the location where the pin is to be placed.

Code may look something like this:

set the location of button "pin" to the clickLock

You may want to add a step that process or test the X/Y values first before passing them directly as coordinates for the "pin" button.

Kind Regards,

Hanson

Nick

Is there a way to export images to an animated gif file?

Hanson Schmidt-Cornelius

Hi Nick,

I am not aware of a built in means by which you can create animated gif files from LiveCode. I would suggest using image processing applications that are available on the desktop platform you are using.

I use the following tool for tasks like the one you are describing: http://www.imagemagick.org/

Kind Regards,

Hanson

Michel Bujardet

There is an error in the "Exporting images" section at the bottom of the tutorial. Took me some patience to understand why the example did not work.

As it stands, it saves a picture called "desktoplogo.png" inside the user folder. To save to the desktop, a slash should be added :

put image "logo" into url ("binfile:" & specialFolderPath("desktop") & "/logo.png")

Kosta

Hi there,

I have a problem with images in variables.

What I want to do is a card trick. 5 playing cards are displayed. I want to change the visible and the loacation of them.

So far
on mouseUp
set the visible of image "xx.png" to true

aeMoveTo the long ID of image "xx.png" to 120,140, "inOut"
end mouseUp
works fine.

Because I easy want to exchange the images I tried:

local tCard1

on mouseUp
put image "xx.png" into tCard1

set the visible of tCard1 to true
end mouseUp

does not work. Isn't it possible to put images into variables? If not, how can I put the name of an Image into a variable and use this?

I also tried:

local tCard1
on mouseUp
put "xx.png" into tCard1 (with " and without ")

set the visible of image "tCard1" to true (with and without ")

end mouseUp

nothing works. Any idea how to solve the problem?

Thanks an greeting

Kosta

Elanor Buchanan

Hi Kosta

I think you are almost there, what you want to do it to put the name of the image into a variable and then use that. Assuming xx is a variable and contains the changing name of the image

local tCard1

on mouseUp
put xx & ".png" into tCard1
set the visible of image tCard1 to true
end mouseUp

You can put a breakpoint in your code and use the variable watcher to check the contents of the variable tCard1, it should be 1.png or 2.png etc

I hope that helps.

Kind regards

Elanor

Kosta

Hi Elanor!

Awsome! This works perfectly! Thanks a lot!

Greetings

Kosta

Add your comment

E-Mail me when someone replies to this comment