Customize Button States in Lectora 12

blog_guestblogLauraButtons

With the latest release of Lectora® e-Learning software, we’ve introduced the ability to customize button states. In Lectora 12, you can tailor the look and feel for each of the following button states:

Screen Shot 2014-12-09 at 4.31.22 PM

  • Normal: The default state of the button—this is how the button looks when a page is initially displayed.
  • Over: The state of the button that is revealed when a learner hovers the mouse over the button.
  • Down: The state shown when the button is clicked.
  • Disabled: This state will be displayed if you trigger a Set State action to set the button to disabled. We’ll go over this in more detail below.

For each state, you change the shape style or modify the text style.

Consistent Properties for All Button Types

Screen Shot 2014-12-09 at 4.31.36 PM

In Lectora 12, you’ll notice that all button types—text, stock, transparent and image buttons—have the same set of properties on the Style ribbon. This allows you to take advantage of the new style features regardless of the kind of button you’ve added to your title. For example, you can change the shape of a transparent button (hot spot) to a circle, polygon or rounded rectangle. You can also add text to an image button or add a shadow or reflection effect to a text button.

Default Formatting

Let’s take a look at the States dialog that opens when you select the States button on the button’s Style ribbon. While you can always customize each state, by default, the states properties are based on which type of button you’ve added to your title:

For a default text button with a gradient fill, Lectora will automatically define the Over and Down gradient style based on the Normal state. The Disabled state will display the same image as the Normal state, but with a 60% opacity setting.

Screen Shot 2014-12-09 at 4.31.46 PM

By default, transparent buttons will look the same for each state—an opacity of 0. Remember, transparent buttons are not visible on the page once published, but they will have a blue tint in Edit mode so you can easily locate them.

Screen Shot 2014-12-09 at 4.31.51 PM

Both image and stock buttons already have a defined image for the Normal, Over and Down states. The Disabled state works just like text and image buttons.

Screen Shot 2014-12-09 at 4.31.59 PM

Automatic Updates from the Normal State

By default, any change you make to the Normal state will automatically apply to the other three states. This will save you a significant amount of time if you want to make a basic change to your button. For example, if you change the button’s shape, fill style or text style from the Normal tab, you’ll see these changes updated on the other states’ tabs as well.

Screen Shot 2014-12-09 at 4.32.05 PM

Customize the Over, Down and Disabled State

However, what happens if you want to make a change to an individual state? For example, you may want to change the gradient style for the Over state, add an outline to the Down state or modify the opacity setting of the Disabled state. You can do that by changing that state’s mode from Auto to Custom. Simply click the Auto icon to toggle to Custom mode, which will enable the individual properties on the tab.

Screen Shot 2014-12-09 at 4.32.32 PM

Setting a Button to Enabled or Disabled

Use the new Set State action to set a button to disabled (to display the Disabled state) or enabled (to display the Normal state). With this action, you can conditionally set the next button to disabled on the last page of your course, or until the learner has completed a question, game or interaction on the page. How will you use custom button states in Lectora 12? The possibilities are up to you!

Screen Shot 2014-12-09 at 4.32.37 PM

Sign up for a free 30-day trial of Lectora 12 today to try these timesaving improvements yourself.

Subscribe to the Lectora e-Learning Blog for more Lectora how-to tutorials and tips.

  • Joshua Jon Gantz

    Is the disabled state read by screen readers?

    • Stephanie Ivec

      Yes, disabled buttons use the disabled HTML attribute to specify that a button is disabled (un-clickable). A screen reader can detect this.

  • Tim MacDermot

    the buttons are faulty, they do not return to normal state once the mouse has exited the button, fyi i’m using images for the button states which are semi transparent

    • Stephanie Ivec

      Hi Tim, this sounds like a case for our trusty support team! Email support@trivantis.com and they will help you troubleshoot this.

  • Dave Heckert

    While I understand there might be reason for a transparent button to have four button state images, it doesn’t really seem like it might be there norm. I have an online job aid with about 500 transparent buttons. (Yes, it is painful but not my choice.) Since updating to V.12 and publishing, I now have well over 2000 files in the images folder. While they are not large files, it greatly inflates the number of files in the title. It would be REALLY nice to be able to turn that “feature” off so it only uses the one image for all four states and reduces the number of images by up to 75%.

    • Laura Silver

      Hi Dave – We’ve got a fix for this “unintended feature” in our upcoming service pack. Keep an eye out next week for an email about the update, or check the Trivantis Community forum for news: community.trivantis.com. Thanks for posting your feedback!

  • Charity

    In previous version of Lectora, you could have a beveled button. Is that no longer an option?

    • Laura Silver

      The bevel option is no longer a specific button option, but if you bring in an older title with a beveled button, Lectora will draw it to match the look using gradients – which are a new option for buttons.

  • Brutuss100

    Can actions be added to disabled button states? I would like to display a simple message on “mouse-enter/hover-over” a disabled button without having to go through a bunch of brew-ha-ha with variables and programming, etc., but alas…

    • Jennifer Valley

      In more recent versions of Lectora, yes. There’s an action called “Set State” that allows you to set a button to disabled or enabled when triggered.