|
|
Tech Note 04c: Tutorial: How to Create Transparent Icons and BitmapsMay 01, 2008© NSB Corporation. All rights reserved. |
This Tech Note gives detailed instructions for creating and using transparent Icons and bitmaps in an NS Basic project. To use transparent bitmaps in a PRC file, there are 4 steps that are required. Here is the overview:
For demonstration purposes, we will create and install 3 families of transparent images into a PRC file:
Use your favorite image editor and save the images as BMP files. There are some important things to know about them:
I use a beige color (Color Table Index #31, which has the Hex Value of &HCCCC99, R:204, G:204, B:153).
Now, go ahead and create 6 bitmaps, representing 3 families, and save them as 8-bit BMP files into your NS Basic Bitmaps folder:
SmallIcon15x9.bmp & SmallIcon30x18.bmp A family of 8-bit LoRes and HiRes Small Icons LargeIcon22x22.bmp & LargeIcon44x44.bmp A family of 8-bit LoRes and HiRes Large Icons Bitmap30x30.bmp & Bitmap60x60.bmp A family of 8-bit LoRes and HiRes Bitmaps
We will now create an NS Basic project, add the 6 bitmaps as resources, and compile a PRC file. At this point, the BMP files all have an opaque background. Note the ID# of the Bitmap family; you will need that number later. Donít worry about the ID# for the family of Large and Small icons.
SmallIcon15x9.bmp
LargeIcon22x22.bmp
Bitmap30x30.bmp
Now look at the Project Explorer. It should look like this:
Notice that we added the LoRes bitmaps as resources to our project. We will deal with the HiRes versions shortly. Also, pay attention to the ID of Bitmap30x30, which is 1007. We will need to remember that ID a little bit later. Now save your project file.
Notice that NS Basic set Path, 1-bit to point to one of the 2 bitmaps. Go ahead and delete this entry. Now click on 1006/Bitmap 1006 and set Path, 8-bit to LargeIcon22x22.bmp, and set Path, HiRes 8-bit to LargeIcon44x44.bmp. Delete the Path, 1-bit entry. Click on 1007/Bitmap 1007 and set Path, 8-bit to Bitmap30x30.bmp, and Path, HiRes 8-bit to Bitmap60x60.bmp. Again, delete the Path, 1-bit entry. Save your project. Now that we have setup our 3 families of bitmaps, its time to tell NS Basic what to do with them.
Weíve just told NS Basic to use the Bitmap 1006 family (LargeIcon22x22.bmp & LargeIcon22x22.bmp) for our Large Icons, and the Bitmap 1005 family(SmallIcon15x9.bmp & SmallIcon30x18.bmp) for our Small Icons. Now click the Bitmap Object on our form. In its properties window, set Bitmap ID to 1007. The program will now display a member of the Bitmap 1007 family when the application is run. Again, save your project. Now its time to compile and test our PRC file.
The Pilot Resource Compiler (PilRC) is an application that takes a resource script file and generates one or more binary resource files that can be used with NS Basic. For example, PilRC can compile a group of BMP files into a PRC database. It can also compile BMP files into binary (*.BIN) files. These can then can be used to replace the original BMP files that were used in our NS Basic project. PilRC is a command line utility that uses an .rcp file with information about what resources to compile, and what kind of resource file to generate. This .rcp file is created with a text editor, like Notepad. The syntax for the commands within the file are covered in the PilRC manual. Read the manual carefully, and pay special attention to the section on Bitmaps. PilRC is a free utility that was created by Wes Cherry and Aaron Ardiri, and can be found on the internet.
For regular bitmaps:
BITMAP [ìResTypeî] ID Resource Id# BEGIN BITMAP ìFilenameî BPP Depth# [TRANSPARENT R# G# B#] [DENSITY Density#] ... etc END
For Large and Small Icons:
ICON (or SMALLICON) [ID Resource Id#] BEGIN BITMAP ìFilenameî BPP Depth# [TRANSPARENT R# G# B#] [DENSITY Density#] ... etc END
BITMAP [ìRes Typeî]:
This keyword starts a bitmap family. The ìRes Typeî (Resource Type)
is optional, and defaults to ìTbmpî. However, you must specify a resource ID. Make sure the
ID# is the same as your corresponding bitmap or bitmap family in PRJ file.
ICON or SMALLICON:
These keywords start a Large Icon or Small Icon family. Definitions starting with any of the ICON
(Large Icon) or SMALLICON (Small Icon) keywords are always given type 'tAIB', and may include an
optional ResId#. All ICONs have a default ID# of 1000; SMALLICONs default to 1001.
ID Resource ID#:
As noted above, it is the Resource ID#. If you are replacing bitmaps your PRC file, this number must match the
Resource ID# of the corresponding bitmaps. However, in the PRC file, Large Icons (ICON) have an ID=1000, and
Small Icons (SMALLICON) have an ID=1001 regardless of their actual ID # in the project (PRJ) file.
BEGIN...END:
Defines a bitmap family, all with the same resource ID. You must include at least one LoRes bitmap or else
you will get errors in your program.
BPP Depth#:
The depth of the bitmap (Bits Per Pixel). Depth# must equal 1, 2, 4, 8, or 16. Typically,
I deal only with 8-bit (256 colors) icons and bitmaps (BPP 8).
DENSITY Density#: >br> The density of the bitmap or icon file. What PilRC refers to as single density bitmaps, NS Basic calls LoRes. What PilRC refers to as double density bitmaps, NS Basic calls HiRes. Density# = 1 or 72 for LoRes images. Density# = 2 or 144 for HiRes images. Generally a bitmap family must contain at least one single-density member. By default, the sizes of icons are checked: for LoRes, Large Icons should be either 22x22, 32x22, or 32x32 and Small Icons should be 15x9. Double the sizes of the HiRes files in the family (44x44, 64x44, 64x64, and 30x18).
TRANSPARENT R# G# B#:
Ahhh! This is the whole reason for this exercise! This keyword tells PilRC how to treat the bitmap or icon file.
TRANSPARENT 204 204 153 tells the compiler to make every pixel holding Red:204, Green:204, Blue:153 transparent.
Thatís why you need to pick a transparent color and remember its RGB values when you create the image file.
ICON ID 1000 BEGIN BITMAP "LargeIcon22x22.bmp" BPP 8 DENSITY 72 TRANSPARENT 204 204 153 BITMAP "LargeIcon44x44.bmp" BPP 8 DENSITY 144 TRANSPARENT 204 204 153 END ICON ID 1001 BEGIN BITMAP "SmallIcon15x9.bmp" BPP 8 DENSITY 72 TRANSPARENT 204 204 153 BITMAP "SmallIcon30x18.bmp" BPP 8 DENSITY 144 TRANSPARENT 204 204 153 END BITMAP ID 1007 BEGIN BITMAP "Bitmap30x30.bmp" BPP 8 DENSITY 72 TRANSPARENT 204 204 153 BITMAP "Bitmap60x60.bmp" BPP 8 DENSITY 144 TRANSPARENT 204 204 153 END
Comments: The above series of commands tells PilRC to create 3 bitmap resources. The first section creates a resource for a family of LoRes and HiRes 8-bit Large Icons (tAIB03e8.bin). The second section creates a resource for a family of LoRes and HiRes 8-bit Small Icons (tAIB03e9.bin). The final section creates a resource for a family of LoRes and HiRes 8-bit bitmaps (Tbmp03ef.bin). Note: For Small or Large Icons, it doesnít matter what their Res ID is in the PRJ file. Large Icons always default to an ID of 1000, and Small Icons default to 1001. However, we must match the Res ID of bitmaps. In this case, the ID of the bitmap in our project is 1007.
PILRC PilRC-Demo.rcp
To make compiling painless, we will create a BAT file that consists of the one-line command thatís listed above. Create the file with a text editor and name it PilRC-Demo.bat. Now we can compile the bitmaps directly from the Windows Explorer. The final step is simple: make a temp folder and put pilrc.exe, PilRC-Demo.rcp, PilRC-Demo.bat, and all 6 of our BMP files together. Then, from Windows Explorer, double-click on the BAT file. PilRC will open a DOS window and display messages about generating 68k resources from the RCP file and list the binary files that were created.
Each output filename is constructed by appending the hexcode resource ID and ".bin" to the four character resource type. Thus, our family of Large Icons (Resource Type ìtAIBî, ID 1000/Hex 03e8 ) generates a binary file named tAIB03e8.bin. Likewise, the Small Icons (Resource Type ìtAIBî, ID 1001/Hex 03e9 ) results in tAIB03e9.bin. And finally, our family of bitmaps (Resource Type ìTbmpî, ID 1007/Hex 03ef) results in a file named Tbmp03ef.bin. These binary files will be used to replace the corresponding opaque bitmaps in our PRC file. Go ahead and close the DOS window. Now its time to replace our opaque bitmaps with the transparent ones that weíve just created.
PAR is a utility that creates and manipulates (.pdb) and resource (.prc) files. Like PilRC, it is a free utility and can be found on the internet. PAR was written by David Williams.
We will use it to first delete the opaque bitmaps. Then weíll replace them with the corresponding binary files that contain our transparent bitmaps and icons. Again, read the PAR manual carefully to understand the command-line syntax of this DOS utility. Like PilRC, we can make batch files to simplify things. Letís make 3 of them: to List whatís in our PRC file, to Delete the opaque bitmaps, and to Add our newly created binary files. We will name them: ParList.bat, ParDel.bat, & ParAdd.bat. See the next section for instructions on how to create these batch files. After you've written them, copy the batch files, along with the PAR utility (par.exe) to the temp folder containing PilRC and the image files. Then, weíll ready for the final steps.
The first column shows the Resource Type, the 2nd column lists the Hex equivalent of the ID, and the 3rd column lists the size. In among the listing are 3 entries (which I highlighted) representing our families of Large and Small Icons, and the Bitmaps. Notice that the PAR's naming scheme is identical to PilRC's.
tAIB 03e8 (ID 1000, our Large Icon family) tAIB 03e9 (ID 1001, our Small Icon family) Tbmp 03ef (ID 1007, our Bitmap family)
par d TransBit.prc tAIB 1000 par d TransBit.prc tAIB 1001 par d TransBit.prc Tbmp 1007
Just double-click on the batch file, and PAR will delete the opaque bitmaps from the PRC file.
par a TransBit.prc tAIB03e8.bin par a TransBit.prc tAIB03e9.bin par a TransBit.prc Tbmp03ef.bin
Again, just double-click on the batch file, and PAR will add the new resources to the PRC file.
Done! If everything went right, we can now enjoy icons and bitmaps that have transparent backgrounds.
Install the new Transbit on your device. Check out the Large & Small Icons in Icon View and List View. Then run TransBit and check out the bitmap image. The ugly beige background should now be gone, replaced by a transparent background.