|
Chapter 6
Spicing Up Your Interface
with Images and Multimedia
An effective user interface for your web site can mean the difference between
a highly used web page and one that is banished to a desert to die a slow and painful
death. Images and multimedia are important aspects of your web pages. ToChapter's lesson
concentrates on three specific tools that help you create and manage images and multimedia
files. These products are included with Visual InterDev as separate applications.
The images and multimedia files that you create can be integrated into your Visual
InterDev projects.
A majority of toChapter's lesson focuses on composing images. You will gain an understanding
of Image Composer and learn how it uses sprites to enable you to interact with objects
and images. You will then discover all of Image Composer's features. During this
part of the Chapter, you will discover how to use Image Composer to create professional
and visually appealing images. You also will learn how to vitalize your images and
make them come alive on your web pages.
Later in the Chapter, the lesson teaches you how to compose music and sounds using
Music Producer. In this section, you will receive a definition of Music Producer,
an overview of its features, and a tour of how to use Music Producer to create sounds
and musical compositions.
Once you have created multimedia and images, you need a way to manage these files.
The Media Manager provides support for managing a range of multimedia files. Toward
the end of the Chapter, the lesson focuses on the Media Manager and how you can use this
tool to properly organize your files.
The last section of the Chapter is crucial, because it shows you how to integrate
your results into your Visual InterDev applications.
What Is Image Composer?
Images are an extremely important part of your web page. Images help invigorate
the web page and enhance the user experience. Image Composer provides the tool you
need to create exciting and graphical images that enrich the look of your web pages.
Image Composer, first included as a part of the bonus pack with FrontPage 97,
enables you to create and compose images as well as customize existing images for
your web pages. You also can use your images for other uses like presentations. Image
Composer provides a comprehensive environment in which to construct your images into
compositions.
New Term: A composition is comprised
of an image or a group of images. When you work with images within the Image Composer
environment, you save your workspace as a composition.
Image Composer is a separate application included with Visual InterDev. You can
easily integrate the images that you create with Image Composer into your Visual
InterDev project. Image Composer supports many of the industry file formats for images,
including GIF, JPEG, TIFF, BMP, and Adobe Photoshop files. The major design aspects
of Image Composer combine powerful features with ease of use.
You don't have to be a professional graphic artist to use the features of Image
Composer. If you have used other graphics packages, you will be able to transfer
that knowledge to the Image Composer environment. Many tool palettes are provided
to help you during the creation of your images. Image Composer supplies many images
and enables you to create your own. You can even use the Impressionist plug-in to
apply special effects to your images. Image Composer also supports the use of Kai's
Power Tools and Adobe Photoshop plug-ins.
Image Composer combines a non-intimidating, user-friendly editor with very robust
features for composing images. Before you discover more about these powerful features,
you need to understand the concept of sprites.
What Are Sprites?
Every image that you insert or create using Image Composer is considered a sprite.
New Term: A sprite is an image that
has a defined shape. In other words, the shape of the object is the image. Sprites
have a transparent background; therefore, the shape of the sprite is defined by the
part of the sprite that isn't transparent.
Image Composer differs from other graphical software tools by enabling you to
interact with the actual shape of the object. With other tools, you work with the
image and its standard rectangular background. Figure 6.1 depicts the shape of an
image using a tool that doesn't support sprites.
Figure 6.1.
A standard image object.
In contrast, a sprite has a transparent background. A sprite is represented by
four channels: red, green, blue, and alpha.
New Term: A channel provides the method
for color to be transferred to a computer monitor display. Each pixel in an image
is defined by a channel.
These four channels are sometimes called RGBA channels. The first three channels
determine the mix of colors for your sprite. You can use the basic colors of red,
green, and blue to adjust the color of your sprite, or combine these colors to produce
a variety of others. The alpha channel defines the transparency of the sprite. You
can adjust the alpha channel for a sprite on a scale of zero to 100 percent. A lower
alpha channel percentage causes the sprite to become more transparent. An alpha channel
of 100% makes the sprite completely opaque, or non-transparent.
Figure 6.2.
A sprite.
In Figure 6.2, notice that the sprite is selected and is surrounded by a box with
many arrows. This box is called a bounding box.
New Term: A bounding box defines and
outlines the shape of the sprite.
The bounding box in Figure 6.2 contains handles indicated by arrows. Each of the
arrows on the bounding box represent handles that you can use to manipulate the size
and shape of the sprite. Based upon what you are doing, the bounding box may contain
different types of handle indicators. For example, if you're painting the object,
each handle is denoted by a paintbrush.
The stack determines the order in which the sprites appear in your composition.
New Term: The stack, or z-order, refers
to the numerical order of each sprite in a composition. The stack reflects the property
of depth for a composition. Each sprite is designated by a stack number that determines
where it displays in relation to other sprites within a composition. When you add
or create a sprite to your composition, Image Composer places this object on the
top of the stack. The stack is numbered from front to back, so the object assigned
the number 1 is on top of the stack of objects. The sprite with the number 2 is displayed
next, and so on. You can change the stack order of the sprites in your composition.
The stack makes the process of moving images a lot more intuitive. Figure 6.3 illustrates
the concept of the stack for a group of sprites.
Figure 6.3.
Visualizing the stack.
Sprites are a new and powerful concept. This new and intuitive approach to working
with objects should make your life easier when you create images for your web pages.
Image Composer Features
Image Composer contains many robust and powerful features that enable you to manipulate
your sprites and compositions. This section gives you an overview of those features
and explains their potential.
Understanding the Workspace
Image Composer provides a new and flexible workspace in which you can interact
with your images. Figure 6.4 displays the main workspace to construct your images.
Figure 6.4.
Image Composer's environment.
There are two distinct areas of the Image Composer environment: the Composition
Guide and the Extended Workspace. The Composition Guide is the main working area
of Image Composer workspace. The size of this working area can be easily adjusted.
The images that are placed within the Composition Guide area are included in your
composition when you save the file. The Extended Workspace serves as a scratch pad
area. You can move different sprites to this area until you're ready to include them
in your composition. Sprites that are in this area aren't included in the composition
but are saved in the file.
You can use the Composition Guide and the Extended Workspace to develop your composition
in stages and preview the results in your web page. For example, you could insert
three images, placing two of the sprites in the Composition Guide and the other sprite
in the Extended Workspace. All three files are included in the file when it is saved.
When you integrate this composition in your web page, the only sprites that are displayed
on the web page are the two sprites that were included in the Composition Guide.
Later, when you're ready to include the third sprite in your composition, you can
easily access it from the Extended Workspace and move it to the exact position within
the Composition Guide. This process can help you rapidly develop your compositions
and test them through an iterative process.
Another area on the workspace is the Toolbox, which is located to the left of
the main workspace. You use these tools to change specific attributes related to
a particular sprite.
The toolbar area at the top of the workspace displays standard tools that are
available to interact with files. The toolbar also includes some options that relate
to changing the properties of the objects and the workspace.
The status bar area at the bottom of the workspace indicates information about
the workspace as well as the sprites that are located within the workspace. The left
part of the status bar displays help information, including the names of tools as
the mouse passes over them. The middle part of the window shows information about
a selected sprite, including x and y coordinates, height, and width. The far right
area of the status bar displays the x and y coordinates of the cursor.
Exploring the Toolbox
The Toolbox includes many tools for you to alter the different characteristics
of sprites with, including the arrangement, shapes, colors, patterns, and effects.
The Toolbox is displayed to the left of Image Composer's workspace. Figure 6.5 depicts
the options that are available from Image Composer's Toolbox.
Figure 6.5.
Using the Toolbox.
The first eight tools on the Toolbox focus on changing specific characteristics
of a sprite. The next two, Zoom and Pan, enable you to change aspects of the workspace.
The last option can be used with the other tools to pick various colors for your
sprites. When you select most of the tools, a palette is displayed on the workspace.
This palette represents features specific to the tool, which you can configure. The
following section presents each of the available tools and their purpose.
Arrange
The Arrange tool enables you to arrange and resize the shape of a sprite. You
also can rotate and flip the sprite. The Apply push button enables you to instantly
view the desired effect. The Arrange Palette offers a feature to crop or extend the
bounding box for the image. You can use buttons that enable you to establish a home
position for the object, and once this position is established, you can move the
sprites around and then return the sprite back to this default position. You also
can lock the position of the sprite. An object that's locked can't be moved until
it's unlocked.
Paint
The Paint option enables you to paint a particular color on the sprite using various
tools including a paintbrush, an airbrush, a pencil, and other types of applicators.
You can precisely paint the pixels as well as smear and spray the color onto the
sprite.
Text
Using the Text option, you can create text sprites for your compositions. Image
Composer provides many different fonts to choose from to format your text.
Shapes
The Shapes tool enables you to create both structured and free-form shapes. You
also can extract the color and texture of a sprite and apply that to another sprite
object.
Patterns and Fills
Using Patterns and Fills, you can add various patterns and fill colors to your
sprites and can transfer colors from one sprite to the other. You also can use the
Gradient Ramp to design a blended color to apply to your sprites. With this feature,
you can choose a combination of up to four colors.
Warps and Filters
Warps and Filters enables you to add unique effects to your sprite. You can choose
from different warping effects and outlines, including shadows and edges. Filters
enable you to change the display of the sprite. For example, you can change the sprite
to appear blurry. Color enhancements manipulate the color of the sprite. For instance,
you can select Wash to cause the sprite to appear more transparent.
Art Effects
Art Effects provides very robust features to transform you into a graphic artist.
You can apply these effects to your images to create professional-looking images.
The artistic styles include three specific mediums to apply to your sprite:
- 1. The Paint option causes the sprite to make it look as though you painted
it using a certain style.
2 The Sketch option applies to drawings and makes the sprite assume a specific
drawing style like charcoal, pastel, or ink.
3 The Graphics option causes the sprite to look as though it was created from
objects such as a piece of cloth or an ink stamp.
Color Tuning
You can use the Color Tuning option to alter the color attributes of the sprite
like contrast, hue, and brightness. You also can adjust the four channels of the
color of the sprite.
Zoom and Pan
The Zoom option pertains to the view of your composition in the workspace. You
can place your cursor on a certain area of the Composition Guide to magnify, or zoom
in on, the selected area. This feature can be very helpful when you want to view
or change very fine details of a sprite. The Pan tool is in the shape of a hand and
enables you to drag a sprite to different areas of the workspace.
Color Picker
The Color Picker displays a selected color for a sprite. You can choose from many
different colors. You can drag the current color that is displayed on the Color Picker
to the color swatches that are displayed on some of the tool palette options. For
example, if you use the Warps and Filters tool and choose the shadow option from
the tool palette, you can drag the color from the Color Picker to the Color box on
the palette. Conversely, you can drag the color from the Color box on the palette
to the Color Picker, thereby changing the color of this tool.
Exploring the Toolbar
The toolbar provides standard options for working and interacting with individual
sprites and Image Composer workspace. Figure 6.6 displays a close-up of the available
toolbar options.
Figure 6.6.
Image Composer toolbar.
The first four toolbar options concern file operations. These items enable you
to create a new composition as well as open, save, and print the current composition.
The next four toolbar items provide standard editing features including Cut, Copy,
Paste, and Undo.
The last five tools on the toolbar focus specifically on manipulating sprites
in the workspace. The first icon enables you to insert an image file into the current
composition. When you press this button, the Insert Image File dialog window display
enables you to choose an image file to insert into the composition. The next icon
deletes a selected sprite within the workspace. You can use the Duplicate tool to
duplicate a sprite and its properties and copy it to the workspace.
TIP: You also can duplicate a sprite by
pressing the Ctrl (Control) key and then clicking on the sprite to drag a duplicate
of it to another area of the workspace.
This option saves a step from the traditional two-step process of copying an object
to the clipboard and pasting it to the workspace. You can select all of the sprites
in Image Composer workspace by pressing the Select All option. The next icon clears
the current selection.
The Color Format combo box displays the available color palettes for the composition.
Color palettes are covered in the section "Creating a Composition." The
Actual Size button restores the size of the composition to its full size. You can
use the combo box to the right of this button to increase or reduce the size of the
current composition.
NOTE: The current composition refers to
all of the sprites that are located within the Composition Guide area.
Working with Image Composer
As you can see, Image Composer provides a very robust set of features. This part
of the lesson focuses on how to use some of the more relevant features to create
your images. While this won't be an exhaustive tour of all of Image Composer's functions,
the basics are covered to get you started. You can then venture out on your own and
explore other Image Composer features based upon this foundation.
Working with Compositions
The first building block you need to learn involves working with compositions.
Remember, the composition includes those sprites that are located within the Composition
Guide. When you open Image Composer, a new workspace is displayed. This workspace
consists of the Composition Guide and the Extended Workspace, which you learned about
earlier.
The basic component of a composition is a sprite. You can insert an existing image
into the composition or use Image Composer to create a new sprite. Existing images
can be included in your composition in one of two ways. The first method involves
using the Open menu item from the File menu. The second way to insert a sprite into
your composition is to use the Insert menu. The following sections explore both of
these alternatives.
Opening and Saving Images
Table 6.2 denotes the file formats that Image Composer enables you to open and
save.
Table 6.2. Supported file types.
| File Type |
Description |
| .ACC |
Altamira Composer |
| .BMP |
Windows Bitmap |
| .GIF |
CompuServe Graphics Interchange |
| .JPG |
Joint Photographic Experts Group |
| .MIC |
Microsoft Image Composer |
| .PSD |
Adobe Photoshop |
| .TGA |
Targa |
| .TIF |
Tagged-Image Format File |
You can open an image by selecting Open from the File menu. This action displays
the Open dialog window. From this window, you can open any of the image file types
specified in Table 6.2. Figure 6.7 demonstrates the capability of the Open dialog
window.
Figure 6.7.
Opening an image.
Once you have selected a file, Image Composer creates a new workspace for this
image. To save a composition, you can choose Save from the File menu, which saves
the file to the default format of the image. You also can save images to one of the
other supported formats by using the Save As menu item.
NOTE: When you save a file to a format
other than the Microsoft Image Composer format, you lose any image that isn't contained
within your Composition Guide. Image Composer flattens all Composition Guide sprites
into one image and crops the rest of the images residing in the Extended Workspace.
In other words, you lose the power of Image Composer to provide a flexible workspace
for your images.
The Save Selection As menu option enables you to save the currently selected object.
This object can reside anywhere within the Image Composer workspace, including the
Composition Guide and the Extended Workspace. Figure 6.8 depicts the available options
on the Save Selection As dialog window.
TIP: You can use this option to save individual
sprites as specific file types. This option can alleviate some of the problems mentioned
in the preceding Note. For example, you can save all of your sprites as a Microsoft
Image Composer file. Then, if you want to manipulate a certain sprite on your workspace
and save it as GIF, you can use the Save Selection As option to accomplish this task.
Also, you can use the Save Copy As menu item to save a copy of the current composition
to a specific file format. This action doesn't affect the original file format.
Figure 6.8.
Saving a selected sprite.
Figure 6.8 shows the many options available for saving a selected sprite. These
options are enabled or disabled based on the file type that you select in the Save
as type combo box. The top section of this dialog window is pretty self-explanatory.
I will briefly describe the options in the bottom section, starting with the Color
format combo box. This option indicates the color palette for the image file. The
default is TrueColor, which represents a 24-bit color palette. Other choices for
the color palette include Balanced Ramp, Gray Ramp, and Black and White. You also
can create your own custom 8-bit color formats. Once you select a color palette,
a description of this palette is displayed to the right of the Color format combo
box.
NOTE: The difference between 24-bit true
color and other 8-bit custom color palettes involves the number of available colors.
When you use 24-bit color, you have all 16 million colors at your disposal. For monitors
that can't display all of these colors, you may want to design an image using your
own 8-bit custom color palette. 8-bit color limits your choices to 256 colors. Image
Composer supports both 8-bit and 24-bit color for your images.
The Write Alpha checkbox preserves the alpha channel along with the other three
channels in your image. Remember, the alpha channel depicts the amount of transparency
that an object contains. When you select this option, the Write Premultiplied Alpha
becomes enabled. Image Composer calculates a pre-multiplied alpha along with the
other red, green, and blue channels. The Alpha as color checkbox enables you to assign
a color for the transparency characteristics of the object. By default, an image
that is transparent assumes the color of the background object. This object could
be another sprite or the Composition Guide. If you select the Alpha as color option,
you can establish a color for the image's transparency attributes. The color swatch
to the left of this option enables you to choose a color.
The Compression checkbox enables you to reduce the size of the image file. You
can use the Amount slider and edit box to the right of this option to adjust the
compression ratio. A high number reduces the size of the file, but also lowers the
quality of the image. The Amount slider and edit box are enabled for JPEG file formats.
The Threshold slider and edit box relate to the Alpha as color option. If you
select a color for a sprite's alpha channel, you can specify the transparency threshold
for all pixels on the image. The threshold determines what pixels will display the
transparency color. A pixel that has a transparency level below the threshold amount
displays the transparent color, and a pixel that has a transparency level above the
threshold level appears opaque and doesn't display the transparency color.
Inserting Images into an Existing
Composition
Another way to include sprites in your compositions involves the Insert menu.
You have two options for inserting images using Image Composer. First, you can insert
an image from a file. Choose the Insert menu and select the From File option. The
Insert From File dialog window is displayed, enabling you to choose the desired image
file. When you press the OK button, the image is inserted as a sprite into your composition.
TIP: You can specify All Supported Formats
from the Files of type combo box to look for all the file formats that Image Composer
supports. This feature can save you time when you're looking for more than one image
type.
The other option is to insert the image from a PhotoCD. This option is specifically
designed for photographs that have been created using the Kodak PhotoCD discs. Other
PhotoCD formats can be used by choosing the From File option.
Changing the Composition Properties
You can choose the Composition Properties menu item from the File menu to change
the properties related to a composition. The Composition Properties dialog window
enables you to view the properties for the composition as well as change the size
and color of the composition. Figure 6.9 displays the properties for a sample composition.
Figure 6.9.
The Composition Properties dialog window.
TIP: You also can access this window by
right-clicking the mouse on the Composition Guide area and selecting Properties from
the shortcut menu.
The Composition Properties dialog window has two tabs: Composition and Annotations.
Composition is the default display tab. The first two fields in this view enable
you to see and change the height and width of the composition. The picture to the
right of these fields provides a thumbnail version of the composition. The next section
on this tab displays the color properties of the composition. You can't alter these
fields. The Color space field indicates the method for representing the colors of
the sprite.
In Figure 6.9, the method for representing the colors is RGB, which means that
a combination of red, green, and blue were used to achieve the desired color for
the sprite. Other available methods include HWB and HSV. HWB uses a mix of hue, whiteness,
and blackness to achieve a color, while HSV uses hue, saturation, and value to produce
the desired color.
New Term: Hue defines the frequency
of light waves that pass through an object. The hue distinguishes one color from
another. You can adjust the hue using the Color Tuning Palette.
New Term: Saturation refers to the
amount of gray that is reflected in the color.
The Has alpha field indicates whether the sprite includes a transparency channel.
The Num. channels field denotes the number of channels that are being used by the
composition. The maximum value for this field is 4. The Bits per channel field shows
the number of bits that are used per pixel to display the color of the composition.
The Composition Guide Color section enables you to view and alter the colors for
the composition's background. The default is white, represented by the values of
255 in the Red, Green, and Blue fields. To change the background color of the composition,
click on the color swatch to the right of these fields. The Color Picker dialog window
is displayed, enabling you to choose the desired color. You also change the individual
numbers of the Red, Green, and Blue fields for those of you who like to paint by
numbers. The color swatch change is based on the combination of red, green, and blue
that you choose.
The Sprites list enables you to see the individual sprites that make up the composition.
You can view an individual sprite's properties by double-clicking on an item in the
list. You also can select the item and choose the Properties item from the shortcut
menu. Figure 6.10 shows the properties for an individual sprite within a composition.
From the Sprite Properties dialog window, you can view the properties for the
selected sprite, including height, width, x and y coordinates, and color properties.
You can change the name of the sprite from this window.
You can press the Apply push button at the bottom of the Composition Properties
dialog window to see the effects of your changes. If you like the changes, press
the OK button to confirm the modifications. Press the Cancel button to negate the
proposed changes.
The Annotations tab enables you to view and document changes to the composition.
You can record specific types of updates and changes including the person responsible
and the date of the change. The Annotations database can help you organize your workgroup
by documenting the composition process.
Figure 6.10.
The Sprite Properties dialog window.
Scanning Images
Image Composer supports the use of scanning device and digital cameras that are
based on the industry-standard TWAIN interface to insert sprites into a composition.
To scan an image into a composition, select Scan from the File menu. A sub-menu is
displayed, revealing two options. Choose the Select Scan Source menu item and pick
the scanner that you're going to use. After confirming this choice, select the Acquire
Scan item from the Scan sub-menu. Image Composer begins importing your image.
WARNING: You must attach and configure
a scanner for your computer to execute these commands.
Creating a Composition
So far, you have been introduced to the many features of Image Composer. You have
learned about the different techniques to work with sprites to create a composition.
In this section, you get a chance to create your own composition. Not every option
and feature are covered, but you will discover how to use sprites and various colors
and effects within Image Composer to construct dynamic compositions.
Creating a Sprite
The first step in building a composition is creating a sprite. The following instructions
guide you through this process. Make sure that you set the Zoom Percent to 50%.
- 1. Click on the Color Picker icon on the Image Composer toolbar to change
the color of your sprite. Select the True Color tab and enter 102, 102, 102 for the
Red, Green, and Blue values, respectively. Press OK. The Color Picker should now
reflect a dark gray color.
2 Click the Shapes icon on the Image Composer Toolbox. The Shapes Palette is
displayed in the workspace.
3.Choose the Rectangle object.
4 Move your cursor to the Composition Guide. Notice that the mouse pointer has
changed to a rectangle to indicate the type of shape that you have chosen. Click
the mouse in the upper left-hand corner of the Composition Guide and drag the mouse
to the lower right-hand corner to draw a rectangle the size of the Composition Guide.
When you have properly sized the rectangle, release the mouse button, and the shape
is drawn.
5.Click the Render push button to change the color of the rectangle to gray.
You also can right-click the mouse on the rectangle and choose the Render Solid menu
item to change the color.
6 Click the Rectangle object again and draw another rectangle that covers about
3/4 of the inside of the existing rectangle.
7.When you have drawn the inner rectangle, click the Erase option to erase the
specified area of the rectangle.
Analyzing the Results
You have just created your first sprite. First, you selected a color for the sprite
by using the Color Picker. You can use either the True Color tab or the Custom Palette
for choosing colors. In the example, you entered values directly into the Red, Green,
and Blue fields. The Custom Palette tab enables you to select from a choice of 256
colors. Figure 6.11 shows the Color Picker dialog window using the True Color display
tab.
The Color Ramp shows the true color options and is located on the left-hand side
of the dialog window. There are two handles that surround the Color Ramp. The top
handle changes the hue, and the left handle adjusts the amount of blackness that
is mixed with the hue.
The Whiteness Ramp is to the right of the Color Ramp. The right handle to the
side manipulates the amount of whiteness that displays in the color.
Figure 6.11.
Choosing the true colors.
The New Color to use box appears in the upper right-hand corner of the dialog
window, and depicts the original color of the swatch in the left half of the box,
along with the new color that you create in the right half.
The sections below the New Color box enable you to choose and manipulate the Color
Space model. You can choose either the RGB (Red, Green, and Blue) or the HSV (Hue,
Saturation, and Value) model. The slider bars and edit boxes change, based on the
model that you choose.
The eyedropper located below the Color Space sections enables you to pick a color
from your desktop. In other words, you can choose colors outside of the Image Composer
environment. To use this feature, click on the eyedropper button, choose a color
on the desktop that you want, and click the mouse again. The selected color displays
in the New Color to use box as you move the cursor over different colors on your
desktop. As you move the cursor, the box to the right of the eyedropper shows the
x and y coordinates of the eyedropper. You also can select an average of several
colors by clicking the eyedropper and then drawing a rectangle around an area that
contains the desired colors.
TIP: You can select the True Color tab
and use the small circle that is displayed in the Color Ramp to adjust the color
of the object. The selected color displays in the top right-hand corner of the Color
Picker dialog window.
After designing the right color, you use the Shapes Palette to construct a rectangle,
and you change the color of the rectangle to gray. You then cut out a portion of
the rectangle by drawing a rectangle shape inside the existing rectangle and pressing
the Erase button. Figure 6.12 depicts the Shapes Palette.
Figure 6.12.
Drawing a shape.
The Features of the Shapes Palette
The Shapes Palette contains several shapes located on the left-hand side of the
window that you can construct. The first shape is the rectangle shape, which you
used in the example. The other shapes include the oval, spline, and polygon.
New Term: The spline tool enables you to create a shape that consists
of curved lines. With each of the shapes, you can accomplish the following tasks:
The Color Lift button is located below the polygon on the Shapes Palette. This
button enables you to lift, or duplicate, the color of an existing sprite. You can
use this feature by selecting a sprite and pressing the Color Lift button. The mouse
cursor changes to a thin paintbrush. Position the cursor over the desired area and
color within the currently selected sprite and click the paintbrush. Press the Render
button on the Shapes Palette to create the duplicate sprite.
The next two sections on the Shapes Palette are used in conjunction with the shapes
to the left and the three push buttons to the right of these sections. The first
section enables you to set the opacity for rendering, extracting, and erasing sections
of existing sprites. Remember, opacity refers to the amount of transparency the object
contains. A value of 100 percent means that the sprite is completely opaque, or non-transparent.
You can use the slider bar or edit box to change the opacity value. A good example
of how to use this value involves duplicating an existing section of a sprite. You
can create a copy of a section of an existing sprite by selecting a shape and drawing
that shape over an area of the desired sprite. By adjusting the opacity value, you
can adjust the amount of transparency that the new sprite picks up from the existing
sprite.
The Spline and Polygon Defaults section contains options specifically for the
spline and polygon tools.
The Close checkbox indicates whether spline curves will be opened or closed.
The Fill checkbox enables you to fill the spline or polygon with the current color
in the Color Picker and the opacity value specified on the Shapes Palette. This option
can only be checked when the Close checkbox is selected.
The next part of the Spline and Polygon Defaults section enables you to designate
the width of a spline. You can use the Edit Points button to edit the points of a
polygon or spline. The Recall Spline button recalls and enables the last spline that
was drawn.
The Render button confirms an action for the Shapes Palette. The Extract button
enables you to extract the shape and color of an existing sprite. The Erase button
enables you to erase a designated section of an existing sprite based on the shape
that you select. For example, during the previous exercise, you could have chosen
a circle to erase part of the existing rectangle. This action would have formed the
shape of a circle instead of a rectangle to display within the existing sprite. The
Sticky checkbox preserves all of the custom settings for the shape tools.
Inserting Images
Earlier toChapter, you learned how to insert an image into an existing composition.
The next part of the lesson focuses on inserting several sprites from the Visual
InterDev samples.
NOTE: The Help menu can assist you in
locating all of the many sprites that are included with Image Composer. To find out
about the sample sprites, choose the Help Menu and select Sample Sprites Catalog.
Select the Sample Sprites option from the Help Topics dialog window to display the
categories of sprites that are available. You can either choose digital stock photographs
or Web art. After you choose a category, you can then navigate to a specific folder
of interest within the Help file and view the sprite. You also can find out the location
of the sprite. If you installed the samples, the directory structure pertains to
your file system. If you didn't install the sample sprites, the directory structure
will relate to the Visual InterDev CD-ROM.
You need the CD-ROM during this portion of the lesson if you didn't install the sample
sprites onto your file system.
- 1. Choose the From File option on the Insert menu.
2 Select the pltfrkkn.mic file from the \Client\Imgcomp\Mmfiles\Photos\Househld\
PhotoDsc folder and press OK. A plate with a fork and knife will be inserted into
your existing composition.
3.Repeat step 1 to insert the following sprites:
\Client\Imgcomp\Mmfiles\Photos\Plants\PhotoDsc\Brocoli.mic
\Client\Imgcomp\Mmfiles\Photos\Plants\PhotoDsc\Pickles.mic
\Client\Imgcomp\Mmfiles\Photos\Plants\Potato.mic
TIP: You can insert multiple files from
the Insert From File dialog window. To select multiple, non-contiguous files, use
the right mouse button and the Ctrl (Control) key. To select files that are contiguous,
use the Shift key with the right mouse button.
For example, in step 3 above, Brocoli.mic and Pickles.mic are non-contiguous files
that are located in the same directory. After selecting the Brocoli.mic file, hold
down the Ctrl key and move your mouse to select the Pickles.mic file. You should
notice that both files appear selected and display in the File name field. When you
press OK, both files are inserted into your composition.
- 4. Move the potato to the Extended Workspace.
5. Select the broccoli sprite.
6. Click on the Arrange button on the Toolbox. The Arrange Palette is displayed.
7. Change the Width and Height to 300 and 294, respectively, and press the
Apply push button. This action changes the broccoli to a smaller size.
8. Move the broccoli to 222 and 26 on the x and y coordinates, respectively.
You can use the status bar to help you verify the position of the sprite.
TIP: When an object is selected, you can
move the object with the arrow keys to precisely position the sprite within your
composition.
- 9. Select and move the plate sprite to the x and y coordinates of 126
and 28, respectively.
10. Select the pickle sprite and change the Width and Height to 200 and 205,
respectively.
11. Move the pickle sprite to the x and y coordinates of 412 and 262, respectively.
12. Click on the Warps and Filters tool to display the Warps and Filters Palette.
13. Select Color Enhancement from the Wash and Filters group list combo box and
choose Wash from the list of color enhancements.
14. Change the opacity value to 50 using either the Warp Opacity slider bar or
edit box and press the Apply push button. This action causes the pickle to become
transparent.
NOTE: You also can create a transparent
sprite by choosing the Sprite to Sprite option in the listbox and selecting Transparency
Map as the Sprite Texture Type. You should experiment with both types to determine
which effect works for you.
Analyzing the Results
You have now learned how to insert and interact with multiple sprites. In this
part of the lesson, you have discovered how to use the Shapes Palette to move and
size your sprites as well as how to use the Patterns and Fills tool to create a transparent
sprite. Your Image Composer workspace should look like the workspace pictured in
Figure 6.13.
Producing the Desired Effect
In this section, you discover how to paint sprites and use art effects to enhance
the look of your composition. The following instructions direct you through this
process:
- 1. Use the Insert From File dialog window to insert the following sprites
into your composition:
\Client\Imgcomp\Mmfiles\Photos\Plants\Banana1.mic
- \Client\Imgcomp\Mmfiles\Photos\Plants\PhotoDsc\Purpfl1.mic
Figure 6.13.
A transparent sprite.
- 2. Move the purple flower to the upper left-hand corner of the Extended
Workspace.
3.Select the banana sprite and click the Arrange tool on the Toolbox.
4.Type 90 in the Rotation edit box and press the Apply push button. The banana
is rotated 90 degrees.
5 Enter 230 for the Width and 447 for the Height of the banana.
6 Move the banana to the x and y coordinates of 63 and 19, respectively.
7 Select the flower sprite and click the mouse on the Color Picker.
8.Change the Color Picker swatch by entering 255 for Red, 0 for Green, and 51
for Blue on the True Color tab display and pressing OK.
9 Click on the Paint tool to display the Paint Palette.
10 Choose the Colorize brush from the available options. This brush is directly
below the pencil.
11 Position your cursor over the center of the flower. You should notice that
the mouse cursor has become a paintbrush. Click on the left-mouse button to paint
the center of the flower with the new color in the Color Picker swatch. If you paint
over onto the edges of the leaves, you can erase this by choosing the Eraser from
the Paint Palette and using your mouse in the same fashion as you did to paint the
sprite.
12 Select the Arrange tool and change the Width to 150 and the Height to 160.
13.Move the flower to the x and y coordinates of 11 and 16.
14.Click the Art Effects tool to display the Art Effects Palette.
15 Select Exotic from the group list combo box and choose Glowing Edges from
the listbox.
16 Press the Apply push button to view the effect.
Analyzing the Results
In this exercise, you were able to use the Paint and Art Effects tools to customize
the look of your sprites. Both of these tool palettes offer many options to choose
from. You can use the Paint Palette to alter the color of a sprite. The Paint Palette
tools include a Paintbrush, an Airbrush, a Pencil, and an Eraser. Each of these tools
enables you to paint a certain type of desired effect onto the sprite. For example,
you can use the Pencil to draw very detailed lines around a sprite. Other tools on
the Paint Palette provide painting effects, such as creating a smudged, impressionist
look. You also can choose the size and opacity of the tool as well as create and
use templates from this palette.
The Art Effects Palette enables you to use the effects of three different categories
of art to produce a desired effect. The three categories include Paint, Sketch, and
Graphic. The Paint category consists of various painting effects like watercolor
and sponge painting. The Sketch category pertains to drawing and includes effects
such as charcoal and pastel. You can use the Graphic category to produce an effect
to make it look like a sprite was created from stained glass.
Two other Art Effects categories include Exotic and Utility. You used the Exotic
art effect in the preceding exercise to create glowing edges for the flower. Other
examples of Exotic effects include using plaster, glass, and chrome effects. You
can add texture and 3D effects by using the Utility effects.
TIP: When you are using the Painting and
Art Effects tools, you may find it easier to work with the sprite by increasing the
Zoom Percent to a higher magnification.
To truly learn about all of these features, you should practice with different
sprites and effects. Image Composer provides many options for designing professional-looking
compositions.
Using the Impressionist Plug-In
Image Composer supports the use of third-party plug-ins like Kai's Power Tools
to further enliven your compositions. In this section, you use the Impressionist
plug-in included with Image Composer.
NOTE: You need to make sure that the Impressionist
plug-in is installed. If not, you need to install this plug-in before you can complete
the next part of the lesson.
- 1. Click on the rectangle sprite and select Impressionist from the Plug-Ins
menu. The Impressionist dialog window is then displayed.
2.Click the Style button located at the top left corner of the Impressionist
dialog window.
3.Choose the Paint item to display the list of sub-menu options.
4.Select Hot Swirl from the list. The style displays in the field to the right
of the Style button.
5.Make sure that the Custom Color option is displayed in the Background combo
box. Click the color swatch to the right of the combo box. This action displays the
Color dialog window, enabling you to choose a color for the swatch.
6 Choose the last color swatch on the fourth row from the top. This color should
be a medium purple color and have the following values: Hue = 180, Sat = 240, Lum
= 120, Red = 128, Green = 0, and Blue = 255. Press the OK button to select the color.
7.Press the Preview button to view the desired effect on the Impressionist dialog
window.
8.Press the OK button to confirm the effect.
9.Save the composition as a Microsoft Image Composer file with the name of Food.mic.
Analyzing the Results
The Impressionist plug-in enables you to produce some pretty creative and artistic
styles. In this exercise, you used the Impressionist plug-in to change the color
and style of the rectangle frame for your composition. You first chose the Style
button to pick a specific style for the rectangle sprite. The Impressionist plug-in
provides many style categories and options to choose from. Again, you need to experiment
on your own with each of these styles to understand their potential.
TIP: You can press the Run Demo push button
to discover the various effects of these styles on your sprite. The demo runs continuously
and shows the result of a style in the preview box in the right corner of the Impressionist
dialog window. To stop the demo, press the Esc key.
Next, you selected the background and color for the brush strokes. The Background
combo box enables you to choose to which background you want the brush strokes applied.
In the exercise, you selected Custom Color. This option enables you to apply the
defined style to the custom color that you select. In other words, the Hot Swirl
style was brushed onto the medium purple color. In contrast, you could have chosen
Image from the Background combo box. This option applies the defined style to the
original image.
The Impressionist dialog window enables you to save custom styles and colors that
you define and create.
Animating Your Images with the
GIF Animator
Animation has become an important part of images and web pages, and users have
come to expect exciting pages that encourage participation and interaction. The Microsoft
GIF Animator provides a great tool for creating animated images.
NOTE: The Microsoft GIF Animator is on
the CD-ROM included with this guide. You should install this application now so that
you can complete the next part of the lesson.
The GIF Animator is fully integrated with Image Composer. In fact, when you install
the GIF Animator, a menu option is added to the Tools menu. You can use this menu
option to start the GIF Animator from within the Image Composer workspace. Once you
have started the GIF Animator, you can drag and drop your images from the Image Composer
workspace to the GIF Animator environment.
The GIF Animator supports the GIF89a file format for animation. This format creates
animation effects by storing timing information about the image.
Using the GIF Animator
You can start the GIF Animator by choosing the Tools menu from Image Composer
and selecting GIF Animator from the list. Use the following instructions to guide
you through a tour of the GIF Animator.
- 1. Click the potato sprite in your composition and choose the Arrange
tool.
2 Change the Width and the Height of the sprite to 200 and 10, respectively,
and press the Apply push button on the Arrange Palette.
3.Move the potato to an area of the Extended Workspace where you have some space
to work with multiple copies of the sprite.
4.Press the Duplicate button on the Image Composer toolbar three times to create
four duplicate potato sprites. Place the potatoes vertically on the Extended Workspace.
Your workspace should look similar to Figure 6.14.
Figure 6.14.
Creating duplicate sprites.
- 5. Select the second potato sprite and click on the Arrange tool.
6 Enter 90 in the Rotation field and press Apply to rotate the sprite 90 degrees.
7.Select the third sprite and enter 180 in the Rotation field to rotate the sprite
180 degrees.
8.Select the fourth sprite and enter 270 in the Rotation field to rotate the
sprite 270 degrees.
You are now ready to insert these sprites into the GIF Animator.
TIP: You need to resize Image Composer
to properly drag and drop sprites from Image Composer to the GIF Animator frames.
- 1. Resize and position the Image Composer application to be placed alongside
the GIF Animator application. Your desktop should look like the one shown in Figure
6.15.
Figure 6.15.
Dragging images into the GIF Animator.
- 2. Click on the first potato sprite and drag it over to Frame #1 in the
GIF Animator.
3.Repeat step 2 for the other three sprites. The order of each sprite corresponds
to the GIF Animator frame number.
Now you're ready to customize the sprites using the features of the GIF Animator.
The GIF Animator environment is pictured in Figure 6.16.
As you can see in Figure 6.16, the GIF Animator environment consists of a series
of frames on the left-hand side and a tab display on the right. The potato sprites
are positioned in each of the four frames. The tab display choices are Options, Animation,
and Image. The Options tab enables you to set parameters regarding the management
of your images. The Animation tab enables you to configure the animation settings
including the size, duration, and transparency attributes. You can use the Image
tab to set properties for an individual image.
Figure 6.16.
Taking a closer look at the GIF Animator.
I want to point out some of the features on the Animation tab. The Height and
Width fields enable you to set the size of the frame in which the animation is displayed.
The GIF Animator presents a default display that can be changed. The Image Count
field indicates the number of frames included in the current animation. You can use
the Looping checkbox to repeat your animation. When you check the Looping option,
the Repeat Count and the Repeat Forever fields become enabled. Repeat Count enables
you to repeat your animation a specified number of times. Repeat Forever provides
continuous animation. The Trailing Comment text box enables you to provide a comment
for the animation. You can use the Image tab to configure settings for all of the
images by selecting all of the frames and then using the options within this tab.
To select all of the frames, click on the Select All button. This option is located
next to the Move Up Arrow on the toolbar menu. You also can use the Shift key and
the left mouse button to select the frames.
NOTE: A selected image is denoted by a
thick, blue outline around the frame.
Follow these instructions to establish the animation settings.
- 1. Click on the Animation tab and change the Repeat Count field to 5.
2 Enter "This is a dancing potato!" for the Trailing Comment field.
3 Select all of the frame images.
4 Click the Image tab and change the Undraw Method to Restore Background. This
option redraws the original background every time an image is displayed.
- 5. Enter 50 for the Duration field. This field designates the frequency
of the animation in 1/100 of a second increments.
6.Select the Transparency checkbox. This option enables you to pick a color within
your animation that will be transparent.
7.Select each frame individually and set the Transparency Color by clicking on
the color swatch next to the Transparency Color field. This action displays a color
palette. Choose the white box from the color options and press OK.
8.Press the Preview button located to the right of the Move Down Arrow to see
what the animation will look like.
9.Save your animation by pressing the Save button on the toolbar. You are then
prompted to enter a name on the Save As dialog window. Name the file Dancing Potato.gif.
Notice that you must save the file as a CompuServe GIF file.
10 From within the Image Composer workspace, insert this new animated GIF file
by using the Insert From File dialog window. Choose the Dancing Potato.gif file from
the location that you saved it and press OK.
11 Place the potato at the x and y coordinates of 226 and 328.
12 Save the composition.
Summarizing the Results
You have now learned the basics of using Image Composer to create professional
looking graphics. You also discovered how to create animation for your sprites by
using the Microsoft GIF Animator. This part of toChapter's lesson has only touched the
tip of the iceberg concerning the ability of these tools. I would encourage you to
continue practicing and experimenting with the many features that these tools have
to offer.
Integrating Music into Your Application
Using Music Producer
Sounds and music also are a very important part of an interactive web site. Many
web pages are using background sound and other types of music to provide an enjoyable
experience for the user. This section switches gears and focuses on how to integrate
music and sounds into your applications.
What Is Music Producer?
Now that you have had the chance to play the role of a graphic designer, you're
ready for your next career in life. The Microsoft Music Producer makes you a musician
in no time at all. Music Producer enables you to create compositions that consist
of different keys, styles, tempo, personalities, and instruments. A composition also
conforms to a specific shape that defines the instrument activity. New
Term: Shape in the context of a musical composition refers to the
overall pattern of the instruments and the music. Music Producer uses the Microsoft
Interactive Music Engine to translate your instructions to music and sounds. You
can create MIDI compositions as well as Microsoft Music Producer (MMP) compositions.
MIDI compositions are ideal for web pages because of the relatively smaller file
size when compared to other audio compositions, like .wav files.
These compositions can be included in web pages and presentations. The best part
about your Music Producer compositions is that they are royalty-free.
Creating a Composition
Music Producer contains many features for producing high quality music and sounds.
The following sections focus on some of the main features that you will be using
when creating compositions.
Previewing the Music
The first step to creating a composition involves understanding the available
music options. The Preview button enables you to listen to your music choices and
adjust the music as needed. Figure 6.17 shows the Preview button and illustrates
the rest of the Music Producer environment.
The left side of the Music Producer environment displays a listbox of over 100
musical styles. The style defines the overriding theme of your composition. The key
melodies and rhythm are portrayed through the style.
The middle part of the window contains the Personality and Band choices. The contents
of each of these list boxes change based on the style that you select. The personality
determines the mood of the music while the band consists of the musical instruments
that will be used. A band is comprised of up to six musical instruments. When you
select a band, the band's instruments display in the Mix pane on the right-hand side
of the window.
Figure 6.17.
Using Music Producer.
You can adjust both the balance and the volume of an instrument by dragging the
musical instrument icon. The volume level is depicted vertically in the Mix pane.
For example, if you wanted to increase the volume of an electric guitar, you would
click on its icon and drag the guitar upward. To decrease the volume of the electric
guitar, you drag the icon downward. The balance is defined horizontally. You can
drag an icon to the left or right to adjust the speaker balance of an instrument.
The Meters pane displays the volume level for each instrument and reflects any changes
you make to a musical instrument's volume.
You also can adjust the tempo and key for the music. Each style has a default
tempo and key. You can use the Tempo slider bar to adjust the speed of the music.
If you move the slider to the right, the music becomes faster. You can adjust the
slider to the left to create a slower tune. The value for the tempo can range from
10 to 350 beats per minute. The value that you choose using the slider bar is displayed
in the Tempo field above the Tempo slider bar. The key defines the pitch or tone
of the music, and is set by default to C. If you wish, you can adjust this value
using the Key slider bar. The value that you choose is displayed in the Key field.
Composing the Music
After you have previewed and experimented with the various musical options, you
need to create your own composition. The Compose area provides the tools you need
to construct your composition. Figure 6.18 depicts the Compose area of Music Producer.
Figure 6.18.
Composing the music.
To create a composition, click on the Compose push button. You can then select
different attributes for your composition. You can use the Intro and Ending checkboxes
to create a distinct beginning and closing for your composition. The Shape combo
box provides several options for defining the pattern and number of musical instruments
that play throughout the composition. Available options include creating a rise or
fall in the musical level as well as defining a peak in the middle of the composition.
You need to set a length for your composition by using the Length field. You must
enter the length in terms of minutes, seconds, and tenths of a second, or MM:SS:T.
You can use the Playback controls to play, pause, or stop your composition before
you save it. The Loop checkbox can be used to continuously repeat a composition during
playback.
Saving the Composition
The final step in the creation of a composition is to save the file. You can save
this file either as a MIDI or MMP composition. The default is the MMP format.
Integrating Your Results into Visual
InterDev Applications
In this lesson, you have learned how to create images, sounds, and music to enhance
the look of your web pages. You have discovered the power of Image Composer and Music
Producer and gained a good understanding of the features of these applications.
The images that you create using Image Composer can easily be inserted into your
Visual InterDev project. After you save an Image Composer composition, you can open
your Visual InterDev project and add the file to the project. You can then insert
the image into your HTML web page, or insert the image visually using the FrontPage
Editor for Visual InterDev.
The process is similar for your musical compositions that you create using Music
Producer. Typically, you create a musical composition and include the music as background
sound for your web page. Again, you can include the file in your project and code
the HTML using the Source Editor, or you can use a visual tool like the FrontPage
Editor to insert the file into the page.
Summary
Visual InterDev includes some very robust tools for creating multimedia effects
for your web pages. Image Composer provides an excellent environment for producing
very artistic and graphical image compositions. Likewise, Music Producer enables
you to create rich and exciting musical compositions to spice up your web pages.
During the first part of toChapter's lesson, you gained an understanding of Image
Composer and its features. You learned about the various tools and options that you
can use to construct your compositions. You then took a guided tour of how to work
with sprites to create an Image Composer composition. You inserted several sprites
and used some of the painting and artistic palettes to produce a desired effect.
You also learned how to use the Microsoft GIF Animator to make your images come alive.
The latter part of the Chapter was spent learning how to use Music Producer. You learned
about Music Producer's features and how to create a musical composition.
This lesson has provided you with just a taste of the power of Image Composer
and Music Producer. The compositions that you create using each of these tools can
easily be integrated into your Visual InterDev projects. You were able to put on
a more creative and artistic hat for toChapter's lesson. Tomorrow, you will put your
developer hat back on as the lesson focuses on client-side script.
Q&A
- Q What are the main advantages of sprites?
Sprites are objects that have a defined shape. The main advantage to using sprites
involves their appearance and nature. Sprites have depth and provide a 3D look and
feel to your composition. Sprites also are easy to work with because you interact
directly with the image object. With other tools, you manipulate a rectangular border
for the object.
Q What is the difference between a MIDI and an MMP file
AMIDI stands for Musical Instrument Digital Interface. MIDI files enable you
to create a composition that contains musical instructions that tell your computer
how to play the music. MIDI files are an industry standard and are ideal for the
Web because of their relatively small file size and third-party support. MMP stands
for Microsoft Music Producer and is the default file format for Music Producer. MMP
files are smaller in file size than MIDI files. You can save files in this format
to edit them later using Music Producer.
Workshop
In the lesson toChapter, you created a composition using Image Composer and learned
how to interact with sprites. In the following workshop, you experiment some more
with both Image Composer and Music Producer. You can use the Image Composer composition
that you created, or you can create a new composition. You should practice using
each of the Image Composer tool palettes to really get a feel for their capability.
You also should practice using Music Producer to create some musical compositions.
You should focus on using the various styles, personalities, and bands as well as
adjusting the tempo and key.
Quiz
- 1. What is the Composition Guide?
2 What are the four color channels supported by Image Composer?
3.How many colors can you use with 8-bit color?
Quiz Answers
- 1. The Composition Guide is the central workspace for Image Composer.
The Composition Guide defines the area of the composition for inserted sprites. Every
sprite that is located in this area is included in the composition.
2. The four color channels are red, green, blue, and alpha.
3. 8-bit color supports the use of 256 colors.
|
