Drawing a multistate button with Acrobat

Buttons commonly change appearance when you move the pointer over them, and they may change yet again when you click them. These changes are called button states. Adobe® Acrobat® 8 offers four different button behaviors, and one behavior, Push, allows you to configure different states for the buttons.

Requirements

To complete this article, you will need the following software:

Adobe Acrobat 8 Professional

• Try
• Buy

Prerequisite knowledge:

Basic knowledge of working with Acrobat

Drawing a multistate button

Select the Button tool on the Advanced Editing toolbar and draw a marquee on the page where you want to place the button. Release the mouse and the Button Properties dialog opens. Follow these steps to configure a multistate button:

1. The button is named “Button1” by default; change the name or add a tooltip if you like.
2. Select the Appearance tab and define how the button will look by choosing background and text color, borders, font, and line styles.
3. Select the Options tab and define how the content on the button should look. You have numerous choices:
   • From the Layout pop-up menu, you can select from a list of layout options. If you choose any options that include labels, the Label field becomes active; if you choose any options that include images, the Icon field becomes active.
   • From the Behavior pop-up menu, you can choose Push. The State menu changes to include Down and Rollover along with Up, the only state available for the other behavior options (Figure 1).
   • For each button state, click the State in the list at the left of the dialog and then type text in the Label field. To add an icon, which can be an image or a PDF file, click Choose Icon to open a browser dialog. Locate the file and select it. A thumbnail appears in the Button Properties dialog.

   Tip: Click Advanced to choose scaling and placement options in the Icon Placement dialog.

   
   

   

   Figure 1: Specify the appearance for each state of the button using images, text, or both.

4. Select the Actions tab and specify both triggers and actions that you want to associate with the button. Triggers are described in the “Mouse Actions” sidebar.
5. If you want to use separate actions for separate triggers, repeat the process and choose the appropriate trigger from the Triggers pop-up menu.
6. Click Close to dismiss the dialog and complete the button.
7. Click Preview on the Forms toolbar to toggle the form’s view from editing to an active mode, and test your button (Figure 2).

    

   

   Figure 2: Test the button and its states—in the figure, the left image is the static button, the center button shows the MouseEnter state, and the right image shows the MouseDown state.

Mouse actions

Buttons can cause different actions depending on where your pointer is in relation to the button, as well as the mouse action itself. These mouse movements are called triggers.

You can choose from a number of different triggers in the Options panel of the Button Properties dialog. Choose one of these triggers from the Trigger pop-up menu:

• MouseDown. The mouse button is depressed.
• MouseUp. The mouse button has been depressed and is released.
• MouseEnter. The pointer moves over the button.
• MouseExit. The pointer moves away from the button area.

There are several other triggers as well used specifically for forms and media, such as the on Blur and on Focus triggers for form fields, and Page Visible/Invisible for media clips.

Button states

You don’t have to use a push button to create a sense of interactivity in your document. The default button behavior is None, which, let’s face it, can be pretty boring as the button stays the same regardless of your mouse actions. On the other hand, if you want a little something without having to do a lot of work, try one of the other options. The Outline behavior highlights the button’s border when it is clicked; the Invert behavior reverses the dark and light colors in the button when it is clicked.

Where to go from here

For more information about working with Acrobat 8, check out these other great tutorials:

• Handling form data in Acrobat 8, by Donna Baker
• Distributing and tracking a form with Acrobat 8, by Donna Baker
• Configuring form fields with Acrobat 8, by Donna Baker

About the authors