Need ideas to create a 3-Function Button

Mar 19, 2021

Glenda DeHoff
By Glenda DeHoff

I know this group cannot resist a challenge and I would  greatly appreciate any suggestions! I do not require a working example - I will test. I am a fairly advanced user of Storyline, looking for ideas to simulate a 3-function button for a crane control: Detent-1 (press to hear one click and forward motion one occurs) is , Detetnt-2 (press down farther to hear a second click and forward motion two occurs) , and release (forward motion stops). I was able to achieve success through a combination of three separate buttons with the appropriate triggers and cue points denoting the appearance of each button on the timeline.

I suggested we use one of two methods below and he responded with:

Method one with a possible alteration. Hover first detent, click and hold for 2nd detent, release click to stop.

Method 1

  • Det 1 = User hovers mouse over button
  • Det 2 = User clicks button
  • Off = User clicks off button anywhere other than the button/ or User clicks button second time

Method 2

  • Det 1 = User clicks button
  • Det 2 = User clicks button second time
  • Off = User clicks button third time

Thank you!!

17 Replies
Math Notermans
3 years ago03/20/21 at 7:30 am (UTC)

As promised... a sample showing Mouse events handling in Storyline. With Javascript you can add all events wanted to your project. From Keycontrol to Mousewheeling.

Here you can see it work...
https://360.articulate.com/review/content/da978c12-b78a-4ba8-bd01-e40541e8413c/review

Hover over the 'right' or 'left' arrow will move the container. Clicking then will move the container down. Clicking any of the buttons will move the container down. Clicking up offcourse only moves the container up. When releasing the mouse, the animation stops.

Clicking and moving the mouse to any of the other arrows, will change direction of the container.

I do think with this code you can make your concept exactly as you want it. The Javascript code is quite straight forward, but if any troubles with it fitting it into your project, just call out and i will help.

code

Adding the Storyline.

Adam Zamczyk
3 years ago03/23/21 at 11:37 pm (UTC)

this javascript example is really cool. 


But I like challenges so here is my take with a crane using only triggers and animations.

https://360.articulate.com/review/content/044b3495-4449-4de9-8a08-2080658f4cff/review

- up and down will work when buttons are in down state, animation repeats if we keep the button down
- left and right when buttons are in hover state, animation repeats if we keep the hover state

storyline file attached.

Adam Zamczyk
3 years ago03/24/21 at 10:04 am (UTC)

Thanks Math, and challenge accepted.

Updated review link below with 4 different approaches - whatever feels better.

No. 2 replicates your navigation.
No. 3 has dedicated arrow to move diagonal (1 move)
No. 4 my favourite with repeat diagonal animations.

It's not the same smooth animation like yours, but I think it's good enough for built-in animations. 

https://360.articulate.com/review/content/044b3495-4449-4de9-8a08-2080658f4cff/review 

I was also thinking about using variables to keep crane within the screen (so it would stop when got to the end of the screen). 

storyline file attached.

 

Sign In to Reply