Figure 1: Nice curves -- Compare the standard button click highlight (left) to a specially constructed highlight shape.


Figure 2: Line, rectangle, rounded rectangle, and oval -- The four native graphic drawing tools in Layout mode.


Figure 3: A button evolves -- Combining objects created with FileMaker Pro's drawing tools will become the new button shape.


Figure 4: Ta-da -- Making the new, actual button invisible.

A: You have a keen eye and will soon be joining the "pixel-perfect" club! Customizing the visual feedback for a button click so the highlight outlines that button's image is a professional touch most users appreciate. Some users will notice it only subliminally; they'll know your solution feels more polished, but may not be able to describe why. Sadly, there is no direct route to this highlight effect. However, the behavior you seek isn't difficult to implement -- using a little sleight of hand. Figure 1 shows an example of the effect.

FileMaker Pro will correctly render transparent portions of GIF and PNG graphics, so it might seem plausible that FileMaker Pro should be able to use the visible image as the highlight shape, when you format that object as a button. Alas, the button click highlight for an object remains the rectangle defined by the four corner anchors common to all objects in FileMaker Pro. We're stuck with the rectangular shape for inserted or pasted graphic objects, but there is a way to achieve your design goal.

In FileMaker Pro, everything you place on a layout (field, image, text label, etc.) is considered an object, and you can format almost any object (or group of objects) to be a button. When a user clicks on a button in FileMaker Pro, the button is highlighted to provide visual feedback. This highlight is the shape of the objects comprising that button in Layout mode. It might be a single field or picture object -- or you can construct a set of grouped graphic objects to produce a more attractive shape that follows the contours of the button image.

This behavior provides you with the opportunity to draw outside the lines, so to speak. You'll do so using FileMaker Pro's native drawing tools, which you can use to draw the graphic primitives of line, rectangle, rounded rectangle, and oval. When in Layout mode, these are available from the tools toolbar or the tools panel in the status area (figure 2).

Key to making the custom highlight effect work is one splendid feature of FileMaker Pro's native graphics: When you format them as buttons, only the actual graphic shape highlights -- not the enclosing rectangle. So if you've drawn a circle and made it a button, for example, then clicking on it in Browse mode displays a circular highlight of the same size. You can therefore make a circular highlight appear for your beautiful round buttons. I'll describe the steps, with a slightly more complex shape.

The graphic-only highlight behavior of drawn graphics is true even when you group the drawn object with other objects. This behavior opens the door to creating complex shapes, by combining the various graphic primitives. I created the custom highlight in figure 1 by overlapping a rounded rectangle and a circle, as shown in figure 3.

The sleight of hand I mentioned is because you do a switcheroo: The newly drawn shape will become the button instead of the button image … then you make the new button invisible! That way the user sees your beautiful button image, and also gets the custom highlight shape you designed. Here are the final few steps in Layout mode to put this effect into action:

1. Align the drawn graphic objects to the button image (front-to-back stacking order isn't important; you can use Arrange > Bring Forward or Send Backward, whichever is most convenient for you).
2. Select all objects that comprise the highlight shape and group them so they'll act as one object.
3. Format the group as a button, identical to your original button.
4. Remove the button formatting from your original button, so the buttons don't compete.
5. If you're using a field to contain the button image, be sure users can't click into that field in Browse or Find modes (under Format > Field/Control > Behavior...).
6. Make the fills and lines of the new button's drawn graphics invisible by formatting them with a transparent pattern (figure 4) and setting line width to 0.
7. Test in Browse mode.