Switch Between Photos with Dialog

May 02, 2024

Kris Shenenberger
By Kris Shenenberger

I don't know if I phrased the title properly. I have two images of people, an audio file, and animated dialog boxes to simulate a conversation. The images are on each side of the slide and the dialog boxes are in the center. At the beginning of the slide, the left person is full color, the audio starts, and the first dialog box animates in.  The person on the right is dimmed. When the dialog switches to the person on the right, he becomes full color, the second dialog box animates up, and the left person is dimmed. I'm using four staggered images on the timeline that are synced to cue markers. Is there a simpler way to have the states of the images change without all the layers? There should be no user interaction other than a button to start the conversation. Any suggestions?

10 Replies
Judy Nollet
16 days ago05/02/24 at 7:45 pm (UTC)

The attached file has a simplified version of the slide. Here's what I did:

  • I used only 1 picture-object for each person (Abby and Raymond). Each picture has 3 states.
    • Normal. This state isn't used. 
    • FullColor. This has a copy of the full-color pic pasted into the state. That allows added entrance and exit animations to the state (for fading between states). 
    • Green. This has a copy of the green-monotone pic pasted into the state and given entrance and exit animations.  
      • This is set as the Initial State for both pics. IMHO, it's nicer to have them look the same when the slide loads, and then have them switch to full color when the corresponding dialog appears. 
    • NOTE: For more info about smooth transitions between states, see this post: TIP: Animate the change between character poses, photos, or other objects - Articulate Storyline Discussions - E-Learning Heroes 
  • I moved the audio and dialog text-boxes to start at 1 second. I also changed the trigger that shows the Pause layer so that appears at 0.5 seconds. This allows the pictures to animated on before the layer stops the base timeline. 
  • I re-did the Cue Points so they appear in order at the points where the dialog changes.
  • I added triggers that change the state of the Abby and Raymond pics as needed when the timeline reaches the Cue Points.
  • By the way, I also edited the labels, so the text is entered directly into the rectangle. I adjusted the margins to indent the text.
Kris Shenenberger
15 days ago05/03/24 at 2:59 pm (UTC)

Hi Judy. Because of an accessibility issue, we've decided to put the Start the Conversation button on a separate slide. I've attached the project. Would you happen to know why the images flash from the first slide to the second? I suspect it has to do with an animation attached to the states but I can't see how to get rid of it. Also, the images aren't selectable on the screen like the names and shapes. Do you know why? Thanks so much.

Judy Nollet
15 days ago05/03/24 at 4:32 pm (UTC)

Yes, the "flash" is because the photos in the custom states have Fade entrance and exit animations. 

  • Those animations can be edited via going into Edit States mode, and selecting the pic in the custom state. 
  • However, those animations provide the smooth transition between the custom states. So if you delete them, the pic will cut between states (instead of fading between states). 

On the "Start" slide, you could use clean copies of the pics with just a Normal state. And you could start with a Normal (and unanimated) state on the conversation slide. However, starting with Normal will mean there's a flash when the pic first changes to a custom state, because the Normal state will exit without an animation, but the custom state will appear with an animation.  

So, if you're going to use two slides, you'll have to have a flash either when the slides change or when the pics change states for the first time. 

I suggest you use only 1 slide, like you did in the original version. But put the Start button on the base. And add a trigger to it that changes its state to Hidden when it is clicked. 

BTW, in the custom states, the original pics have been deleted, and copies have been pasted in. Unfortunately, that makes it look like you haven't selected the object, even when you have. You can verify that it's selected, because it will be highlighted in the Timeline. And its states will show if you're looking at the States panel.

Kris Shenenberger
15 days ago05/03/24 at 5:45 pm (UTC)

Someone I'm working with came up with a solution and I wanted to share what they did:

There may be one state more than needed for Abby, but I created a non-animated state and used that for initial state on both the slide with the button and the dialogue slide. I just used a clean version of the Raymond image on the slide with the button.

Next slide starts with the full color image as the Normal state for Abby. I created a green version on the timeline with a .5 fade intro and .5 fade exit animation then cut and pasted that image on top of the normal version for the Green state, then did the same thing with the full color state (made a version on the timeline with animations and cut and pasted as a new state - Full Color).

For Raymond I did something similar, starting with a green washed normal state, but added another state that was Green with the animations so it would transition smoothly on the start of the slide. And then added another regular color version on the timeline, added the animations (.5 Fade on, .5 Fade off) and cut and pasted that over the green washed normal image to create the Full Color state. Then just set the triggers to alternate like it was set up already.

 I've attached the slides for you to see. It seems to be working okay. 

Thank you again for all your help.

Sign In to Reply