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
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
Nice example, Kyle - thanks for sharing here. The arrows and scroll bar made perfect sense and all seemed to work well.
Cool solution for simulating IM chats, Kyle! Thanks for sharing your source file.
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.
Thanks,
- Kyle
Here's an idea I was messing with a while back. It allows you to go back and forth in the conversation and only uses a single slide.
https://360.articulate.com/review/content/e624a00a-02e3-4f4c-8fe0-0f42cb2a8fc2/review
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
Essentially it's two sliders connected to the same variable.
Looking at your source file, you could take the slider layer and use that as your main image. Use a button to adjust the slider variable to move the conversation along.
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).
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.
I do like your example's way of avoiding the buttons and just using the slider the whole time.
Tom,
I cannot figure out how you changed the states of a slider Thumb Fill. Did you use your image in the Thumb fill option?
Thanks,
-Kyle
Hi Tom, would it be possible to get the source .story file for this?
Here's the attached file.
@Kyle, sorry I missed the earlier questions. I get messages from the entire ELH so often the ones I reply to get swallowed up.
This discussion is closed. You can start a new discussion or contact Articulate Support.