To begin building the interface, you will need some bitmap images. When you're building your own projects you'll most likely be creating your own images, within an image-editing program such as Macromedia Fireworks or Adobe Photoshop. For this lesson, however, you'll be importing your graphics from the CD.
|1. ||From the top menu choose File > Import.The import file dialog opens. From the media folder, within the Lesson02 folder on the CD, find and import the four background images. The four files you want to import are: bg_lines.png, interface_alpha, slider_left.png and slider_right.png. You can choose individual files by pressing and holding Ctrl/ Command and clicking each file. The import dialog should look similar to the following.Note|
The File List area at the bottom of the dialog lets you add files from different folders and import them all at once. For this, choose your files and click the Add button to add them to the list. Change folders and add more files. When you're ready, click Import and all the files listed will be imported together.
|2. ||With all four files selected, click the Import button.When you press Import another dialog will appear, giving you options specific to each bitmap you're importing.Now, you need to pay special attention here because three of the four bitmaps you're importing contain what's known as an alpha channel. An alpha channel is an 8-bit channel in addition to the standard RGB channels that specifies an image's transparency. An image with alpha therefore contains 32 bits of color information24 bits of RGB info and 8 bits of alpha info. The alpha channel itself is grayscale only, where white is opaque and black is transparent. Shades of gray in between black and white indicate varying levels of transparency.Within the dialog note that the Color Depth setting is defaulted to 32 bits, instead of 24 bits. As we were discussing, 32-bit images are those containing an alpha. Because three of our images contain alpha, we can leave the default as it is. You'll modify the color depth setting of the image that doesn't contain alpha in a moment.|
|3. ||At the bottom of the Image Options dialog, turn on Same Settings for Remaining Images and then click OK.As soon as you click OK, the four bitmaps appear in the internal cast, occupying cast member slots1 one through 4.Choosing Same Settings for Remaining Images imports all the chosen bitmaps at a color depth of 32 bits. If you wanted to, you could have elected not to use Same Settings, and instead imported each image individually. While this would be more time consuming, you'd be able to customize each image as it was imported. Doing it our way, we just need to change the single image without alpha to the appropriate setting. You'll see why in a moment.|
|4. ||Choose cast member 2, interface_alpha, then choose the Bitmap tab in the Property inspector.[View full size image]The bitmap cast member you have chosen contains an alpha channel. You can verify this by looking at the Property inspector: you'll see that Use Alpha is checked. If the image had no alpha channel, this setting would be dimmed, and unavailable.|
|5. ||Choose cast member 1, bg_lines.With the PI's bitmap tab still open, you will see that with the cast member selected, the Use Alpha setting is dimmed. However, just below the image dimensions the Bit Depth is listed as 32! Even though this isn't a 32-bit image, Director added the extra information when you imported it because we used 32 bits and Same Settings for Remaining Images.If you're still wondering why we should change the bit depth of the image, choose the Member tab in the Property inspector and note that the size of the image is 1.9 MB. That single image is taking almost 2 MB of precious RAM.Because the image doesn't actually contain alpha channel information, you can save some memory simply by reducing the image to 24 bits. Better yet, you can use Director's 16-bit color mode to reduce it even further. Even though there aren't as many colors available in 16-bit mode65,000 compared to 16.7 millionthere are generally enough that you can convert any non-alpha images to it.|
|6. ||Double-click the bg_lines cast member you selected in the cast.Double-clicking on an imported cast member opens the member in the Paint window. You did this so you could have a good view of the image for the next step.|
|7. ||With the bg_lines cast member still selected, choose Modify > Transform Bitmap from the top menu.It should be noted that for certain types of imported images, you will receive a warning the first time you modify them. The warning states that you are attempting to change a cast member with original data and that an external editor should be used. Choosing to use the external editor will open the image in Fireworks, or any other application you choose. For this exercise choose Continue if you receive the warning.In the Color Depth drop-down menu, choose 16 Bits and then press the Transform button.NoteAs mentioned previously, the palette settings are only used when authoring movies that use 8-bit color. Because we won't be covering 8-bit color, you can ignore the palette settings within the dialog.After you hit Transform, click OK in the resulting dialog, confirming that you want to perform the transformation.Visually, nothing happens to the bitmapwhich is good.|
|8. ||Close the Paint window, and then have a look at the Member tab in the Property inspector.The bitmap now weighs in at just over 900 K. The image is using half the RAM it needed before being transformed.TIPWhen developing your own projects you should take care to transform any bitmap members to 16 bits if it can be done. This not only saves on memory, it will also help loading times, as the files are smaller. This is especially important when you're authoring for the Web.You now have the all the images you need to build the basics of the interface.|