 |
|
|
|
|
Series 2 Image
Effects Applet in a Frame
The Series 2
Image Effects applet is
ideal for showcasing a your company logo or any image
you would like your viewers to notice. Often times it is desirable to put
a frame around the applets image to set it off from other images on the
page, but not have the frame image affected by the applet. This can be
tricky because you typically have to slice the frame into pieces and use a
table to assembly the parts. This tip will examine how to use table
background images to implement simple frames with out slicing up the frame
image using only FrontPage Picture tools.
The Parts - The Picture, Frame,
Table and Applet
So lets get started: First bring up a
page and place the image with its frame on the page. Click on the picture
to select it. Right click on the image and select the Properties item from
the Popup menu. Look for the Size properties and record the dimensions of
the image. The image below is 341w x 236h.
Original Picture with Frame
The Pictures tool bar (shown below)
should appear either as a floating tool bar or at the bottom of the
FrontPage window. If the Pictures tool bar does not appear, then select
the Tools->Customize... menu and then check the Pictures item and press
the OK button. the Pictures toll bar should now be available.
The Crop Tool on the FrontPage
Pictures Tool Bar
To keep the frame from being part of the
image effects applet, we will crop the image area to become the background
image of the applet. Click on the Crop tool icon on the Pictures tool bar
and then click and drag an area on the picture frame. Using the crop
handles, adjust the crop area to include the picture area without the
picture frame. Then press the Enter key to execute the crop. If you would
like to redo the crop, just press the Control-Z to undo the crop and try
again.
Right click on the
cropped image and select the Properties item from the Popup menu. Look for
the Size properties and record the dimensions of the image. The image
below is 311w x 202h. you will also need to determine the height of the
frame, in this case it is 341 - 311 = 30, and then 30 / 2 = 15 pixels.
Each frame piece is about 15 pixels high.
Picture Area after cropping the frame
Now press Control-S to
save the new crop by saving the page. A "Save Embedded File" dialog will
prompt you to save the newly cropped image. It is important that you
change the name of the image before saving so as to not overwrite the
original image. Do this by pressing the "Rename" button and then
changing the name. You may also wish to adjust the save folder using the
"Change Folder" button.
Rename and save the cropped image
Now that the picture is
save, you can delete it from the page for now. We will add it back later.
Now add a table to the
page using the Table->Insert->Table... menu.
Table->Insert->Table... menu
Make the table 3 rows by
1 column and make the width of the table same as the width of the original
image. Also select the "In pixels" radio button. Also set the alignment,
border and padding as illustrated in the dialog below.
Insert Table Dialog
Now right click anywhere
in the top cell of the table and select the Cell Properties item from the
popup menu. The Cell Properties dialog will appear. Set the height of the
frame to 16 pixels or whatever the frame, in this case the frame height is
about 16 pixels.
Setting the Cell Properties of the
middle cell
Right click anywhere in
the middle cell of the table and select the Cell Properties item from the
popup menu. Set the height of the frame to the height of the cropped
image, in this case 311 pixels.
Right click anywhere in
the bottom cell of the table and select the Cell Properties item from the
popup menu. Set the height of the frame to 15 pixels. Your table should
look like the one below:
Table Structure without applet or
background image
Now right click anywhere
on the table and select the Table Properties item from the popup menu. The
Table Properties dialog will appear.
Setting the Background Image of the
Table
Press the "Browse"
button and select the original image as the background image of the table
as illustrated below:
Picture as background image of table.
Insert the Applet
Place your cursor in the
middle of the table and click. Then select the
Insert->FrontLook->FrontLook Series 2->Image Effects Applet menu item. The
Applet Properties dialog will appear.
Image Effects Applet Properties
Dialog
Go to the Background
panel and click on the Background Image popup menu and scroll up and
select the Add Files... menu item. A open dialog will appear, locate the
cropped file and press OK. then press the Size to Image button. Now go to
the Applet panel and set the alignment to "Top".
If you don't want any
text in the display, then go to the Strings tab and replace the "Place
your text here" string with a single space. Go to the Effects panel and
select the effect you would like to use.
You can use the Preview
button to examine the effect and set the animation parameters before
inserting the applet. Once you have the effect the way you would like it,
press the OK button to insert the applet. It should now look like the
illustration below:
Table with applet and frame
background image
as seen in FrontPage normal view
Clean Up
If there are alignment
problems between the applet and the table background image, look for the
following potential problems. You should test the design in all the major
browsers as well.
