Changing the resources of a button

You can change the image resources for the three states of image and stock buttons. The images can be edited as well. The three states are : normal, as the button exists when the page is displayed, down, when the button is clicked, and over, when the users pass their cursors over the button. Assigning images to the down and over states is optional. Select images from your file system, the Stock Library, the Media Library or re-use an existing image.

To change the resources of a button:

  1. In the Title Explorer, click the button graphic or in the work area, click the button object.

  2. Click the Style ribbon.

  3. Click the States button. The Button States window opens.

  4. Use the controls in the Button States window as follows. They are the same for each state tab (Normal, Over, Down and Disabled).

    Shape Select this to change the shape of the button. Select from the variety of different shapes, such as the basic shapes, block arrows, and stars, for example.
    Fill Style

    Fill style, such as color, gradient, texture or picture. To change the color setting, you can select a predefined color, specify a custom color, or select an existing color. To select a predefined color, click one of the color samples displayed. To specify a custom color, select Custom and use the controls in the Color window to configure a custom color. To select an existing color, click Select and use the eye-dropper to click-to-select a new color from an existing color currently displayed on your desktop.

    To change the gradient, click or hover on Gradient and click a gradient type from the sub-menu. To change the gradient settings such as the direction, color, and angle, click More Gradients. This opens the Gradient dialog. Use controls on the Gradient dialog as follows:

    Color Color of the gradient. To change the color setting, you can select a predefined color, specify a custom color, or select an existing color. To select a predefined color, click one of the color samples displayed. To specify a custom color, select Custom and use the controls in the Color window to configure a custom color. To select an existing color, click Select and use the eye-dropper to click-to-select a new color from an existing color currently displayed on your desktop.
    Type Type of gradient.
    Direction Direction of the gradient relative to the object.
    Angle Angle of the gradient relative to the object.
    Gradient Stops Use the Add Stop and Delete Stop buttons to manage the stops for the gradient. Click Reverse Gradient to reverse the color order in the gradient. Use the Stop Color control to select the color of each stop on the gradient. Use the Position control to set the position percentage of the gradient.

    To change the texture, click or hover on Texture and click a texture type from the sub-menu. To select a local file that contains a compatible texture, select Browse from File. To select a texture from the Media Library, select Browse My Media.

    To change the picture, click or hover on Picture and click the location from which to choose the picture. To select a local file that contains a compatible picture, select Browse from File. To select a picture from the Media Library, select Browse My Media. Browse and select the picture. The picture is cropped within the shape. Additionally, the resource drop-down list in the Shape Style group is populated with the name of the fill picture. Use the resource drop-down list to change the fill picture.
    Outline Weight Thickness of the outline from 0 (none) to 10.
    (Image Resource)

    Select this pull-down to change the resource of the image. To select a local file that contains a compatible image, select Browse from File. To select an image from the Media Library, select Browse My Media. Browse and select the image. To select a stock button, select Browse Stock Buttons. Browse and select the image or use the search bar to search for a stock button. To select a previously imported image, select it from the list. For no image, select None.

    Texture and picture fills are mutually exclusive. Selecting these will cancel/replace any previous selection. The background color and/or gradient can be changed beneath a transparent image.
    Outline Color Color of the outline. To change the color setting, you can select a predefined color, specify a custom color, or select an existing color. To select a predefined color, click one of the color samples displayed. To specify a custom color, select Custom and use the controls in the Color window to configure a custom color. To select an existing color, click Select and use the eye-dropper to click-to-select a new color from an existing color currently displayed on your desktop.
    Opacity Transparency of the object from 0 (invisible) to 100 (completely opaque).
    Outline Style Style of the outline.
    Shadow Shadowing effects of the button object. For shadowing, you can change the type, color, transparency, blur, angle and distance.
    Reflection Reflection effects of the button object.
    Text Style

    Text style of the button object. Select a text style, change the font, or alter the font size, for example.

  5. To customize an individual state, click the corresponding state tab (Normal, Over, Down, or Disabled) and click the button in the Style group so that the Custom graphic is displayed. Change the appropriate properties as necessary.

  6. When you are finished customizing each state, click OK.

Knowledge Base | Training | Support
© Copyright eLearning Brothers 2021