Tiles with Building Text - Layers or Selected State?

May 01, 2024

Ashleigh Hally
By Ashleigh Hally

I've built 2 versions of  a slide with 3 tiles that the user will click to reveal bullets. Version 1 has several layers to "flip" a card when the user clicks it (no animation actually). I used this tutorial as inspiration  for both versions of the slide I want to build. 

  • Tile 1 is in full color to indicate the card is ready to flip,
  • then the back of the card builds text using the fade animation
  • After Tile 1 is complete, the back continues to show, and Tile 2 turns from monochrome to color to indicate it's ready to click. Repeat for Tile 3.
  • When the 3rd card finishes, the Next button goes back to normal state.

Problem:  The transition between layers seems abrupt - any way to "soften" the change from the monochrome/disabled image to the color/normal image? 

Version 2 contains the same tiles using only Normal and Selected states and no layers. The user can click any tile first, but the text appears all at once. Is there a way to use the fade animation on the Selected state? 

Alternatively, what triggers would I add to the layered version to enable a user to click the tiles in any order and leave the backs revealed after clicking? 

Thanks, 

Ashleigh in Atlanta :)

 

6 Replies
Walt Hamilton
16 days ago05/02/24 at 1:21 pm (UTC)

For states, you can use entrance animations. Create the desired text box, set the animation, then copy the text box, edit states, and paste the text box onto the selected state. Check this, it’s possible it might work only the first time, but not later times if the learner clicks back and forth. In fact, the drawback to using Selected states is that they toggle; another click will change it back to Normal. If you don’t want that behavior, use a custom state (and a name that is not on the drop down list), and a trigger to change to it when the object is clicked.

If you use layers, you will need one for each card, and set their properties to de-select the “Hide other layers” function.

Ashleigh Hally
16 days ago05/02/24 at 1:36 pm (UTC)

Thx, Walt - for the States fix, pasting in the formatted text box worked to a degree, but the text appears as a block rather than by paragraph as I've chosen. Any ideas how to fix that? 

BTW - the fade did work on multiple clicks.

And for anyone reading this, I softened the transition between layers by adding a Transition Fade on the color images. SMH.

Judy Nollet
16 days ago05/02/24 at 2:01 pm (UTC)

It looks like Walt answered while I was prepping my answer. Well, here's what I was going to say:

In the version with layers, the transitions would be smoother if (1) you make the color image exactly match the size/placement of the black-and-white image, and (2) you add Entrance Animations to the color images and/or add Transitions between the layers.

You can simplify the slide if you want the user to be able to click in any order: 

  • The "buttons" on the base only need a Normal state.
  • Delete the "Tile # Active" layers. They aren't needed. As long as the Slide Layer Properties are set so they don't hide other layers, each "Back Tile #" layer will show when the corresponding button is clicked, and it will remain on the slide. 
  • Use T/F variables to track whether each layer has been shown.
  • Add a trigger to each layer that changes NEXT to Normal when the layer's timeline ends with the conditions that all of the variables = True. 
    • Also add conditions to the trigger that disables NEXT to ensure it won't be disabled again if the user returns to the slide. 

This is shown in the attached file. 

Ashleigh Hally
16 days ago05/02/24 at 4:34 pm (UTC)

Thanks so much, Walt and Judy! Appreciate the benefit of your experience.  I've been using Articulate for our annual training for 5 years, and each year, we use a different interaction to keep it fresh. Each year, I build my knowledge bank (but need my own refresher after 8 months of not using it!). 

Sign In to Reply