Office of Digital Humanities
Back     BYU LiveCode Lessons Gateway

Computers & the Humanities 210

Images vs. Graphics


By the end of this reading you should be able to answer the following questions:

  1. How is an image object different from a graphic object?
  2. Know two different ways to display an image in LiveCode.
  3. Understand the basic legal issues surrounding the use of someone else's images in your stack.

In common usage we often use the terms image and graphic interchangeably. In the LiveCode environment, however, these are two completely different types of objects. Each has its own strengths and weaknesses, and each has a different role to play in your LiveCode stacks.

A bitmap image is a a collection of colored pixels.
If you enlarge the image the quality may be degraded.
(Click to enlarge)

What are Image Objects?

LiveCode image objects are used to display what is called bitmapped image data. A bitmap is simply a collection of dots, or pixels, on the computer screen, each of which has a different color. An image has a fixed native size, so if you resize it you may see degradation in the quality of the image. Because of this, you should try to use images that are just about the size you want to display them.

Digital photographs and high-resolution scans are always displayed in an image object.

An image can be referred to as an image or img:

hide image "Splash"
put myPictureData into img "showIt"

An image can display either its own data, contained internally in the image object itself, or data contained in an external picture file. Images can display data in several common formats, including GIF, JPEG, PNG, BMP. A few other formats are supported, but these are the ones you’ll use for virtually all images.

To place data in an image, either paint in the image uaing a tool on the Paint palette, or import a picture file (by either using the import command or choosing Image File from the Import as Control submenu of the File menu). To display an external picture file in an image, either set the image’s fileName property to the file path of the file, or choose Image File from the Import Referenced Control submenu of the File menu.

LiveCode graphic objects (top) vs.
a Livecode image object (bottom).
(Click to enlarge)

What are Graphic Objects?

Whereas images are fixed bitmaps, a graphic object is what is known as a vector shape. Vector shapes are defined by a mathematical formula, so are not limited to an ideal size or shape like images are. You can enlarge a graphic to as big as you want without losing any quality. In contrast to image objects you can easily change the colors and line thickness of graphics. Because they are defined mathematically, graphic objects are normally relatively simple shapes and lines, rather than complex photographic images. You can even change a graphic from one shape to another. Depending on the setting of their style property, graphics can be rectangles (or squares), ovals (or circles), straight lines, regular polygons, irregular polygons, or freehand lines.

A graphic can be referred to as graphic or grc:

show graphic "Divider Line"
hide grc "myOval"

Displaying Images

As discussed in a previous lecture, an image is one of the objects that you can place within a stack. Images contain bitmapped data and appear on a card. Since images do not contain any other objects, they are at the bottom of the object hierarchy. As a control object they are contained in a group or card.

An image can display either its own data, contained in the image object itself, or data contained in an external picture file. Images can display data in GIF, JPEG, PNG or BMP formats. On MacOS systems, PICT files can also be displayed (but they cannot be displayed on Unix or Windows systems). LiveCode also recognizes several other, less common, image formats. (For more information on these common image formats, see the top part of this chart.) This great versatility allows the developer to greatly augment the visual presentation of the stack.

The process of displaying an image in a LiveCode stack is relatively simple and painless. There are two ways to approach it: You may either import the image itself and have its data part of the stack, or you may simply reference an image file that resides outside the stack.

Importing an Image

As stated before, importing an image will make the image data part of your stack. The more pictures you import, the larger your stack will become. This is particularly important when size is an issue. Since most of you will be using jpegs, and since your stacks are relatively small, this will not be a problem. Therefore, for the first few assignments in this course, this is the recommended method of displaying images in your stacks. The process is simple:

  1. Move to the card where you wish to place the image.

  2. Select Image File... from Import As Control under the File menu.

  3. Locate your image in the resulting dialog box and click "OK".

With the image now on your card, you can move it around and resize it as necessary.

If you have several images that you wish to import, it can become tedious repeating the above process several times. LiveCode has the means whereby you can import all at once all image files contained within a folder:

  1. Place within one folder all the images you wish to display in your stack.
  2. Follow the same process outlined above to import the images, except select All Images In Folder...instead of Image File....
  3. This time the dialog box will ask you to choose a folder. Locate your folder with the image files, select it, then click "Choose". This will place all the images from the folder you chose onto the current card.
  4. Cut and paste the image objects as needed to place them in their correct locations throughout your stack.

LiveCode's painting toolsWith the image now within your stack, you do have the ability to edit that image to some extent. With the image selected, choose Paint Tools under the Tools menu. This will reveal a palette with access to a number of useful image editing tools that may be familiar to you. While these may be convenient for small touch-ups, they are no substitute for a powerful graphics editing program. For major editing of graphic images, use software designed for that specific purpose.

Referencing an Image On the Hard Drive

If you choose not to have the image exist as part of your stack's data, you may reference it instead, particularly useful if you do not want to inflate the size of your stack:

  1. Move to the card where you wish to place the image.

  2. Select Image File... from New Referenced Control... under the File menu. (See the illustration above.)

  3. Locate your image in the resulting dialog box and click "OK". An image object with an external file reference will automatically be created.

However, this process creates an absolute path to that image based upon the environment in which you create the link. The implications of this are that as soon as you move the image or move your stack file to a new location, the link is no longer valid and the image will not be displayed. There are ways around this, but it is a little more complicated. Consequently, for the purposes of your first major assignment, this is not the best way to display images in your stacks. Please import the image rather than make a reference to it. We will discuss the process of referencing external data later in the course.

Referencing an Image On the Web

LiveCode also makes it very easy for you to display images from the Web in your stack:

  1. Create an empty image object by dragging the image icon from the Tools palette to the card.

  2. Open the image object's property inspector.

  3. In the Source field, type any valid URL (Web address;) e.g., When you exit the Source field, the image should appear in the image object.
    selecting a web image in LiveCode

While this is a very powerful feature, you must take into consideration the size of the referenced image (large images may take a long time to download,) the reliability of the web site, and whether or not you can count on having an internet connection when you use the stack. Still, in a stable networked environment, this is a great way to quickly access many images.

Acquiring Images

Of course, before you can display an image, you must acquire it. There are several resources available for acquiring, creating, and/or editing images to use in LiveCode stacks.

LiveCode's Own Tools

You may do it yourself, using the paint and vector graphics capabilities built into LiveCode. This is easy enough for simple things, but not for complex, detailed drawings. It does, however, solve all sorts of copyright issues.

Here is a comprehensive chart describing all of LiveCode's paint tools.

Other Graphics Programs

The Macintosh computer lab has Photoshop and GraphicConverter. The Windows lab has access to Photoshop and Paint Shop Pro. These are the recommended applications. However, you may use any software to which you have access as long as it:

Use these software tools to create, edit, or otherwise prepare images to import into a LiveCode stack.

Clip Art

It is also possible to utilize the work of others. There is a veritable treasure trove of these types of images available, many of which may be used at no cost. For instance, there are a number of internet sites that offer free clip art, including some that provide free clip art for educational use. Here are a few examples:

There are also many sources of commercially-available clip art.

Note: You should be aware of some problems that may arise when using clip art.

Using Images from the Web

Whenever you want to use an image you find on a web site you need to be aware of copyright issues. All images are the rightful property of the owner (sometimes, but not always, the author/publisher of the website) who must be credited, whether or not there is a copyright notice posted. This includes images that are merely referenced rather than downloaded and imported. Current interpretations of present copyright law, specifically the “fair use” clause, indicate that materials taken from the Web may be used freely as long as it is not for commercial use and if proper credit is given. In this course, since we are using images for educational purposes (i.e., you will probably not make any money commercializing anything you create for this course), images taken or displayed from the Web may be used for assignments, provided you always cite the source of the image.

Another limitation with images taken from the web is that they are generally are not consistent in format, resolution, and size.

Scanned/Digitized Images

There is plethora of different scanners and scanning software available.

If you are taking this course as a DigHT course at BYU, both the Macintosh Lab (1133 JFSB) and the PC Lab (1131 JFSB) have scanners and scanner software available for your use. Either should work for your purposes, and with each there are steps you can follow to ensure scanning ease. The lab assistants, should be well-trained and well-versed in the use of the scanner and its accompanying software and can help you with specifics. If you are taking the course elsewhere, these general directions work for virtually all scanner hardware and software.

  1. Open up the scanner software you will be using.
  2. Preview scan - the scanner will prescan your image to show you what the scanned image will look like.
  3. Select the area on the preview picture that you want scanned.
  4. Set the document type (Color picture, line image, B&W photo, etc.).
  5. Set the output type including the size and resolution (changing these after scanning may greatly reduce the quality of your image).
  6. Scan.
  7. Save to desired file type (JPEG, GIF, PNG, TIFF, BMP).
    • JPEG = best for photos
    • PNG, GIF = best for line art, graphics. The PNG format is rapidly replacing the older, but still widely used, GIF format.
    • TIFF = no compression. It is a good first choice, if you plan on adjusting it in a graphics program and then using it. LiveCode cannot directly import or display TIFF files, so before you import them you must convert them to one of the formats LiveCode supports, primarily PNG, GIF or JPEG.

Note: If you do your editing on the scanning station, you may be denying someone the opportunity to use the scanner. Please be considerate of others and use a graphics program on a different computer to do your editing.

Legal Issues

Any photograph or image is the legal intellectual property of the artist. Legally, written permission to use that drawing must be granted by the artist. The same holds for photographs, particularly those taken by a professional photographer or studio. In addition, virtually all published material is also copyrighted as a whole, whether published through conventional means or digitally. As hinted earlier, our class use is probably covered by the “fair use” clause of copyright law, but it is always a good idea to acknowledge sources (you really don’t want to be the test court case to define “fair use”).

For anything used in a commercial application (i.e., something for which you expect to receive remuneration):

If you decide to ignore these issues and live dangerously, be prepared to suffer the consequences. Consider yourself informed.

Back     BYU LiveCode Lessons Gateway
Maintained by Devin Asay.
Copyright © 2005 Brigham Young University