When working with images, Just Basic is restricted to using BMP images. (When you eventually upgrade to Liberty Basic, you will be able to display JPG and GIF images by using API calls.) BMP files are easy to edit and resize using any imaging program (including MS Paint) and save to our program folder where they can easily be LOADED and UNLOADED according to the code we write. The principle drawback is file size. Parameters for a typical BMP image are width, height, color depth.
With a color depth of 16.8 million colors, also called TruColor, the image above is 400 x 200 x 24 bytes, 234 KB total. I produced this image using only two lines of code to "capture" the image from a graphics window while running a JB program. See Screen Capture for JB. If you plan to use an image of this size in four places in your program, you've already added nearly 1 MB to the size of the application! Obviously, this is not a good idea if you are planning to make your completed program available for download over a dialup connection, and you haven't even added the runtime engine, SLL and DLL files yet!
The same image, when color depth is reduced to 256 colors, is only 79 KB; when reduced to just 16 colors, the file size is 39 KB. If your program is going to use just one or two images, perhaps TruColor will be suitable, but unless you're a photography buff, 256 colors or 16 colors will do just as well. Remember, when you are specifying colors in JB code, you will usually use the 16 named colors, unless you choose to specify the RGB values.
This is the identical image which has been saved using 16 colors. Does it appear less informative or useful to you? Yet the file size is only 39 KB, a great savings when packaging your program.
Okay, we've learned that less color depth means smaller file size. How do we achieve this? Most imaging programs have color options to specify the color attributes of the image. Anyone can open the TruColor image with MS Paint. Click on "Save As..." and enter the file name of your choice. Below the file name is the box for "Save as type." Click on the down arrow and choose 256 color bmp, or 16 color bmp, then click "Save."
When you're working with images, it's always a good idea to save your new image with a different file name to prevent losing the qualities of your original. Obviously, a digital image of 234 KB will have more detail and color information than an image of 39 KB. If you find you've made a mistake, or wish to go back and make additional changes, it's best to work with the original, before saving in a reduced format. Once you've changed a TruColor image to a lesser color depth, trying to put the color depth back is like trying to make a pig out of sausage. It just doesn't work.
Another way of reducing the overall size of your program is to change the dimensions of the images displayed. Most, certainly not all, but the majority of computer users have monitors set to a display of 800 by 600. An image which is 400 by 300 will take up 25% of the viewable monitor area. The same image above, if saved as 800 by 600 TruColor BMP is 1.37 MB in file size! Do you truly need full screen images for your program or help file?
Other imaging programs usually have the same capabilities as MS Paint, probably many more! Of course, I can't tell you the specific steps to use for your program, but you'll probably find them by trial and error, or reading the help file for your image editor as a last resort.
The Internet contains a vast collection of clip art and animated images which have been released to the public domain. Do not capture images from the web for your own use, unless you have received permission from the owner, or you will be in violation of copyright law! I try to recommend free tips, but the punishment for copyright infringement may be expensive! The image below is property of Shop Talk Systems, and permission has been given for use in this tutorial.
Converting
GIF Images
GIF images have a relatively small file size, even though they are actually a single file of many individual images. The animated torch above is actually a single file composed of six frames, yet the file size is only 742 bytes! If you write your help file as HTML or CHM, you can use animated GIF images without modification.
However, if you want to convert the same image for use as a graphic within your GUI, then you need to do a little work since JB will only display BMP images. First, you'll have to disassemble the GIF into it's individual frames and save each as a BMP file. I have two programs I use to do this: the first is an application I paid $72 for, but I always try to offer a free solution when I write these tutorials. MS Gif Animator is no longer available for download from Microsoft, so I have posted a copy on my web site. It's only 661 KB.Get it here: GIF Animator!
When I extracted the six frames from the animated torch, and saved each as an individual BMP image, the combined total of image files was 10.18 KB. Not too bad to add to your application, if you really must have an animated image. Often, if the full GIF is composed of 10 to 12 images, you can achieve nearly the same effect by selecting only half that many to be displayed in your graphics.
GIF images have one outstanding characteristic not found in any other image format: One color of the available 256 colors can be designated as transparent, meaning it will not be printed by the web browser. This is a great property. When we display the image over any background, the background will be seen through the transparent color.
When using a BMP image extracted from a GIF, the image no longer has a transparent color, so it will be necessary to change the "fill" color of the image with your image editor, or select a "fill" color for your graphic box which matches your GIF image. Failing to do so will display your image as a square or rectangle in a color which may conflict with the background of your graphic control.
While I used the animated torch GIF without modification for this web page, the code and six BMP images can be found at http://jbusers.com/phpBB/viewtopic.php?t=58
Last, but not least, you have the option of displaying sprite images when adding graphics to your JB programs. See the excellent links to articles and tips by Alyce Watson, the Sprite Bite Series and don't forget to see the Sprite Byte Series in the Liberty Basic Newsletters.