Custom Conversation interaction that needs a slider to scroll vertical for content above and below the stage. (The built-in Scrollbar can't do this..)

May 10, 2017

Kyle Main
By Kyle Main

Here is an Example of a Custom Conversation Interaction that needs to use a slider to scroll vertical for content above and below the stage. (The built-in Scrollbar won't let you scroll to see content above the window or stage.)

This is like the Engage built-in conversation interaction, but this allows a lot of custom options with sliders, variables, and styled exactly how you want it to look, without being stuck to the basic options.

I could not get the regular scrollbar to move and show content above the scroll window. I had a conversation that builds down one character speech bubble at a time. After 4, I needed to move up the graphics, but I wanted the users to have an option to review the whole conversation together, instead of the back arrow that lets them see the conversation in reverse. (That would remove the last talk bubble.)

Here is a link to see my example. 
https://360.articulate.com/review/content/49cd51c2-1e99-4837-a760-b2695a73c487/review

Let me know if there is an easier way to build this, or if you have any questions.

I also attached the Storyline 360 file if anyone wants to use this to start a similar interaction in their projects.

This is Not as easy as the Engage version at all, but has it's rewards.

Thanks,

- Kyle

12 Replies
Kyle Main
almost 7 years ago05/11/17 at 4:37 pm (UTC)

Thanks,

You're welcome, I didn't do it alone. The community here had examples of using an panorama image as the fill for the slider handle, and then another slider that had the same name would control it.

I took it to the vertical view.  Once challenge I had that was different from the horizontal view, was that the image looked blurry when the slider was rotated 90 degrees.  I ended up taking a screen capture at double the final size, and that helped a lot.  I think that is also a good practice if anything is going to be on an Apple Mobile device - or set the image to 144dpi, since it has the Retina / 4k size.

  • I do wish I could have used the built in scrollbar, but when content was above the top of the scrollbar it was not smart enough to let me scroll both ways to see content above and below the scrollbar window area.
  • I also wish that I could have used an object or a group instead of a picture.  This would have saved time, and it would not have been blurry.  Maybe there would be a way to do this with triggers and variables (not sure at all).

Thanks,

- Kyle

Kyle Main
almost 7 years ago05/12/17 at 1:04 pm (UTC)

Tom, 

That looks Great!

That is easier and works great, thanks!

does your example just use the graphics on the stage, or did you have to use a screenshot too?  I did not figure out how to have a slider move a group.  Did you use a path animation  maybe?

My process to my solution started down a path of trying to mimic the Engage file because the Engage interaction is having big errors that have not been fixed.

by the time I got to the part where the scrollbar appears, I was surprised that the built in scrollbar wasn't working like the Engage scrollbar to show content above and below. 

I had used layers to build the conversation one at a time, so by the time I had the next speech bubble, I was only thinking of "how do i solve the current issue".

I should have rethought the whole thing. Using a slider the whole time is better in my opinion than mimicking the Engage interaction.

Great Soulution Tom!

- Kyle

 

 

 

Kyle Main
almost 7 years ago05/12/17 at 5:11 pm (UTC)

Your last message makes sense, but I'm wondering how you used the states as it moves up.  Did you happen to have a white overlay on the bottom half of the stage so that the image would only appear once it slid under that shape?

I actually did use 2 sliders. The one that that has the image is a picture set in a slider instead of a color.  The other one is the regular slider that both use the same slider name (same variable).

  • When you made the images in PowerPoint, I assume you used the Articulate Presenter add-on (Which I have not used).  When you bring that into Storyline, is it an actual image (.png or jpeg?). I would really like to have the characters and the text be editable in Storyline.

 

Kyle Main
almost 7 years ago05/12/17 at 5:23 pm (UTC)

First, I really appreciate you sharing all of your ideas and the link to your example.

I looked at your example again.  I see that your characters have to be an image too, because you are having the same issue that I first had.  The images are too blurry for a final product.  I had to take the group of editable characters and text in a group and double the height and width. Then I put a big white shape behind it. I had to change the size of the text because that did not scale up. Then I took a screenshot at the doubled size.  I saved the screenshot and when I imported the image into the Slider's "Thumb Fill" I then divided the original screenshot size by 2 to match the exact original size of the group before multiplying that by 2.  

  • This is the only way I could get a "non-blurry" image inside of the slider. I don't think there is an easier way to get a non blurry image inside of the slider's Thumb fill.
  • Any thoughts for a more rapid way to get a clearer image?

I do like your example's way of avoiding the buttons and just using the slider the whole time. 

This discussion is closed. You can start a new discussion or contact Articulate Support.