Articulate Storyline 360 - How to make a analog stick for interactive menu navigation
Feb 14, 2024
Hi, everyone.
I am currently developing a SCORM package activity using Articulate Storyline 360.
This activity is a brief 'virtual demonstration' about the Garmin eTrex 22X Rugged Handheld GPS. Alternatively, here is an image of the device:
If you look at the link, you can see that on the top right-hand corner of the device is a small analog stick. This stick is pushed in directions (up, down, left and right) to navigate through the menu. The user then presses down on the stick to enter that menu category.
In my activity, I want the user to click and drag the top right analog stick just slightly (I don't want the analog stick 'running away' so to so speak), so that the user can navigate down to the Setup icon. The user will then be prompted to click down on the analog stick to enter Setup.
I've made several menu screens, to replicate each highlighted menu option (for example, the menu with the 'Map' icon highlighted is its own layer, while the icon of 'Where to?' being highlighted is also its own unique layer).
I have a feeling in order to achieve this, I will need to make a motion path for the analog stick (which is its own object), and I imagine it will involve being a trigger to show the appropriate designated layer, when the stick is clicked and dragged on that motion path... I'm just not sure how to restrict the clicking and dragging movement of an object, to confine it to a designated motion path.
I hope all this makes sense. Any advice and assistance would be appreciated. Please let me know if you need more information. In the mean-time, I'll follow the ol' "F-Around And Find Out" routine and see what happens! :)
Thank you,
-Craig
1 Reply
You have two problems.One is that the motion paths are for the system, so you can't really force the user to drag an object on a specific path. The other is that when you are dragging an object, it always sticks to the cursor, no matter what happens, until the mouse is released. (You can see this in action by removing one of the Masks and dragging the stick to that spot.) So the real trick is to get the learner to release the mouse at the appropriate moment. The attached sample shows one way to do that. I left outlines on the rectangles to illustrate how it is done, but you can take them off. I only did states and triggers for three options. Just copy them and make the necessary changes for the other three. If you want it to wrap around, you could change the triggers to do that, too.
By putting the triggers on layers, I avoided having to create copious amounts of conditions to decide which trigger to fire when.