Creating a slider box

July 15, 2019

kuhde Follow

(4)

Comments

(8)

July 15, 2019

Creating a slider box

kuhde Follow

(4)

(8)

(4)

Summary

I want to create a menu that slides on and off the screen, like a door that moves to the left and right, when the user clicks a button.

Hey everyone,

I want to create a menu that slides on and off the screen, like a door that moves to the left and right, when the user clicks a button.

I created a rectangle and positioned it outside of the slide and assigned a motion path to move the box to the right to show on screen. I then created another shape to act as a toggle button. However, I can’t seem to figure out how to make the button execute the action. I normally use Articulate 360 but can’t figure out which triggers to use to make this happen in Captivate 9.

Thanks in advance.

Ken

"Elearning authoring tools"

actions

Advanced Actions

Animations

Interactions

question

(4)

Comments

(8)

kuhde Follow

8 Comments

Lieve Weymeis

Jul 17, 2019

Lieve Weymeis

Jul 17, 2019

I published a step-by-step workflow on my blog, will be here in the community as well after moderation (tomorrow probably). You can have a look at:

https://blog.lilybiri.com/sliding-menu

(1)

Greg Stager

Jul 16, 2019

Greg Stager

Jul 16, 2019

Ken,

Lieve will have a great way for you to do this through advanced actions but it will probably not make it through the moderation process and ready for you to read until tomorrow at the earliest so I will offer another possibility to chew on in the meantime.

I have also done some similar work on animating objects like this but have used JavaScript to do the work. I have done a couple posts to help explain how to do it. I tried to share the links but they must need moderation as well. Sigh.

Well – if you do a quick search on the site for Sliding Information Panels you can find one.
Then there is a two part on on Animation of Objects – Three Examples – that is a 2-Part post.

One particular issue that seems to pop up is working with an object that starts entirely off the stage. You may consider having the menu start with just a sliver of the menu on screen and animate off onEnter quickly so that no one even notices or perhaps having it on stage and hidden but reveal it as you start animating it.

If you wish to explore this option further – let me know and I can assist.

(1)

(3)

Lieve Weymeis

Greg Stager

's comment

Jul 16, 2019

Lieve Weymeis

Jul 16, 2019

Greg Stager

's comment

Sure, Greg, it is possible with JS and you provided that solution. Since this is a much easier version of a sliding box, it can be a great introduction to using custom effects, rulers and shared actions. Reusability of a shared action is something most developers completely ignore.

It is up to the OP to try out both workflows. For users with a programming background, JS will be more appealing but I would recommend an external JS file, not copy/paste scripts for each project. With a shared action it is more accessible for users without programming background. You know that I like that type of comparisons, will write out a step-by-step workflow. Creating an example file is a breeze…

(1)

Greg Stager

Lieve Weymeis

's comment

Jul 16, 2019

Greg Stager

Jul 16, 2019

Lieve Weymeis

's comment

For the record – it has never been my intent to provide code for users so they can just copy and paste into their own project but I am not so naive as to think that it does not happen.

My intent has always been to provide the code for working examples so that users can see it, learn from it, and some day eventually write their own.

I do not use external libraries. As you know, Captivate turns actions into JavaScript. I am simply doing it all manually through the Execute JavaScript onSuccess action for every button, onEnter action, or other event. I prefer it this way because it does not require any post-publish modifications.

While it is only my opinion and experience – I was a Captivate GUI user exclusively for many years until I encountered an issue that only JavaScript was going to fix for me. Since then I have found this method to be very liberating and has allowed me to create things that would have been either impossible or so complicated through the menu as to thwart the effort. It also allows me to make edits or updates to the behavior of the actions much more quickly – particularly when actions become extremely complex with multiple conditions.

I know we have different views on this – that’s OK – just think of me as a resource for anyone out there who is interested in learning new tricks. In the end – we are on the same team.

(1)

Lieve Weymeis

Greg Stager

's comment

Jul 16, 2019

Lieve Weymeis

Jul 16, 2019

Greg Stager

's comment

I think the meaning of External Library is different for you and for me. I am talking about using a Captivate project as external library in any future project. It has some time saving tricks, especially with shared actions.

It is just an other workflow, Greg. I love seeing your use cases with JS, but explained that it is pretty difficult to explain such a script to a client whereas advanced actions or shared actions are easier. Of course the result is JS also for those actions and they are a lot more limited than what you can achieve with JS.

Several years ago, I discussed with a JS expert (he is no longer in eLearning) and he told me to keep focus on Advanced actions (shared didn’t exist yet) because there are too few experts compared with JS experts.

In my professional career I have programmed, and debugged a lot in at least 10 scripting languages, bit tired of writing code. Actions are fun, and they are a good test for logical thinking. Same as you do with JS.

As a teacher I do not like the copy/paste of scripts which happens so much, without understanding the core of the script.

Client had some issues, in between I managed to have a working Slider example, but not sure to be able to write out the steps, almost 10pm here.

(1)

Greg Stager

Jul 16, 2019

Greg Stager

Jul 16, 2019

Ken,

I have also done some similar work on animating objects like this but have used JavaScript to do the work. Here are a couple posts I have done to help explain.

https://elearning.adobe.com/2019/07/sliding-information-panels/

https://elearning.adobe.com/2018/05/animation-objects-three-examples-part-1/

https://elearning.adobe.com/2018/05/animation-objects-three-examples-part-2/

One particular issue that seems to pop up is working with an object that starts entirely off the stage. You may consider having the menu start with just a sliver of the menu on screen and animate off onEnter quickly so that no one even noticesor perhaps having it on stage and hidden but reveal it as you start animating it.

If you wish to explore this option further – let me know and I can assist.

(2)

(1)

Lieve Weymeis

Greg Stager

's comment

Jul 17, 2019

Lieve Weymeis

Jul 17, 2019

Greg Stager

's comment

Thanks Greg, will spare me time to find the links to add them to my blog. I will probably put it on my personal blog, and later on here in the portal (why the moderation is needed, whereas commercial spam is even let in?).

(1)

Lieve Weymeis

Jul 16, 2019

Lieve Weymeis

Jul 16, 2019

You will need a variable to track the situation of the ‘box’, sort of a Boolean. Based on that variable you can build the action for the toggle button.

You’ll need a conditional action, which means you have to create two custom effects to be used in that action. I may write out a short blog post to show you the workflow, maybe today. It is too difficult to explain just in text.

()

Add Comment

You must be logged in to post a comment.