Skip to main content
Justenuf2bdangerous
Inspiring
December 5, 2016
Answered

Creating a button that is only active while being clicked

  • December 5, 2016
  • 3 replies
  • 1185 views

Here's the question: I have to simulate an action that resizes a given shape when I press a button (on the actual device) and hold it down. This means I need a button that will activate when pressed and deactivate when not pressed - is this possible?

As far as the shape, I am assuming I can use multi-state tool for an image to resize to move an image while the button is depressed - the question is, will it spool through the states while it's depressed or do I have to create some sort of animation to run while it's depressed?

    This topic has been closed for replies.
    Correct answer Justenuf2bdangerous

    Thought about it and solved the problem by digging in the CPM.js file and finding the jscript that controls the go to next state and go to previous state actions.

    (NOTE:  I did give up on using an "on click" entry as found in InDesign or Animate since it seemed like it might be incompatible with Captivate)

    Let's use an object with 5 states as an example.

    To bring the object up on entry in a state that allows both buttons to work on entry create the following advanced action:

    Change State of <object name> to <state name>

    (if I wanted to have the object start with an equal number of clicks for previous and next state command, I would select the state name assigned to the second new state I created.)

    Assign <variable> with <literal>

    (in order to make the conditional sync up with the current view on entry, this number would be 3 - the midpoint of the variable value range)

    Here's the conditional action for "Go To Next State" that will disable the "Next State" button when it reaches the last state created:

    IF

    <variable> is not equal to <literal>

    (for example, if the object had 5 states, and you create the variable with a value of 1 - the literal number here would be 5, as each click will increment the value by 1 as shown below)

    THEN

    Execute JavaScript 'cp.goToNextState("object name");cp.actionChoicePauseMovie();' in current window

    Increment V <varaible> by 1

    Enable <Go To Previous State Button name>

    ELSE

    Disable <Go To Next State Button name>

    and here's the conditional action for "Go To Previous State" that will disable the "Previous State" button when it reaches the object's default state:

    IF

    <variable> is not equal to 1

    (the variable is created and assigned a value 1 - therefore the default state will occur when the value reaches 1)

    THEN

    Execute JavaScript 'cp.goToPreviousState("object name");cp.actionChoicePauseMovie();' in current window

    Decrement <variable> by 1

    Enable <Go To Next State Button name>

    ELSE

    Disable <Go To Previous State Button name>

    the actions above prohibit the states from cycling. The states can go from default through intermediate to last state (1, 2 3, 4, 5), last  through all intermediate to default (5, 4, 3, 2, 1) and back and forth infinitely within this series selecting the buttons associated with the actions, but cannot switch directly from 5 to 1 (4, 5,1) or from 1 to 5 (2, 1, 5) as the standard advanced action allows.

    The variable value can also be used to more than simple state changes. It can trigger feedback or open/close branched activities based on the selections made by simply adding i to the IF and ELSE lines as needed.

    3 replies

    Justenuf2bdangerous
    Justenuf2bdangerousAuthorCorrect answer
    Inspiring
    December 7, 2016

    Thought about it and solved the problem by digging in the CPM.js file and finding the jscript that controls the go to next state and go to previous state actions.

    (NOTE:  I did give up on using an "on click" entry as found in InDesign or Animate since it seemed like it might be incompatible with Captivate)

    Let's use an object with 5 states as an example.

    To bring the object up on entry in a state that allows both buttons to work on entry create the following advanced action:

    Change State of <object name> to <state name>

    (if I wanted to have the object start with an equal number of clicks for previous and next state command, I would select the state name assigned to the second new state I created.)

    Assign <variable> with <literal>

    (in order to make the conditional sync up with the current view on entry, this number would be 3 - the midpoint of the variable value range)

    Here's the conditional action for "Go To Next State" that will disable the "Next State" button when it reaches the last state created:

    IF

    <variable> is not equal to <literal>

    (for example, if the object had 5 states, and you create the variable with a value of 1 - the literal number here would be 5, as each click will increment the value by 1 as shown below)

    THEN

    Execute JavaScript 'cp.goToNextState("object name");cp.actionChoicePauseMovie();' in current window

    Increment V <varaible> by 1

    Enable <Go To Previous State Button name>

    ELSE

    Disable <Go To Next State Button name>

    and here's the conditional action for "Go To Previous State" that will disable the "Previous State" button when it reaches the object's default state:

    IF

    <variable> is not equal to 1

    (the variable is created and assigned a value 1 - therefore the default state will occur when the value reaches 1)

    THEN

    Execute JavaScript 'cp.goToPreviousState("object name");cp.actionChoicePauseMovie();' in current window

    Decrement <variable> by 1

    Enable <Go To Next State Button name>

    ELSE

    Disable <Go To Previous State Button name>

    the actions above prohibit the states from cycling. The states can go from default through intermediate to last state (1, 2 3, 4, 5), last  through all intermediate to default (5, 4, 3, 2, 1) and back and forth infinitely within this series selecting the buttons associated with the actions, but cannot switch directly from 5 to 1 (4, 5,1) or from 1 to 5 (2, 1, 5) as the standard advanced action allows.

    The variable value can also be used to more than simple state changes. It can trigger feedback or open/close branched activities based on the selections made by simply adding i to the IF and ELSE lines as needed.

    Paul Wilson CTDP
    Community Expert
    Community Expert
    December 5, 2016

    I just tested this out but I thought it might work. Tell me if this works for your project.

    1. Create a button like the one that you need for your interaction.
    2. Click on State View
    3. on the Normal State for your button draw the shape that you need and copy it
    4. Change to the roll over state and paste it there (you may have to reposition it)
    5. on the down state paste it there as well, but increase it's size like how you want it.

    Assuming I understand what you are trying to do, I think this should work. I tested it out and it seemed to work like you wanted, however I may have misunderstood what you wanted.

    Paul Wilson, CTDP
    Justenuf2bdangerous
    Inspiring
    December 6, 2016

    Paul:

    Good idea, but it isn't creating the action I need, because the "go to next state" button needs to be disabled only when the last state of the object is reached and the "go to previous state" button only needs to be disabled only when the default object state is reached. In the simulation we're building, that is the first and last state in a series that may be between 11 and 21 states in total.

    Lilybiri
    Legend
    December 5, 2016

    You could use a scale effect, which can be triggered by a button, and you can control its duration. I don't see how you would try to do this with multi-states, unless you create a sequence of the commands 'Change State' followed by 'Delay Next action'. Seems bit cumbersome.

    However Captivate's actions are event driven: it is the Success action, which means clicking on the button, that triggers the action. Captivate has no even for releasing the button. Maybe that can be done with JS, using the cpAPIEventEmitter. Another possibility, which I didn't check out for a use case like yours, is using the CpExtra widget by InfoSemantics which allows you to have multiple events on an object.

    Justenuf2bdangerous
    Inspiring
    December 5, 2016

    I want a conditional action that does the following:

    set a variable that will indicate what state of an object to show (circle = 0 through 7)

    IF: <variable> is equal to 0

    THEN:

    change state of <object name> to <next state up>

    Increment <variable> by 1

    Pause

    this repeats on six more tabs with each IF statement increasing the variable value by 1 and the THEN statement opening a new state.. The problem is, the action does not pause as directed -it shoot straights through from 0 to seven without stopping.

    Question:

    can I get this to operate, or am I going to have to create a massive show/hide shared action?

    Lilybiri
    Legend
    December 5, 2016

    Using pause will not help, since you are incrementing and an action is always evaluated totally. Each increment will lead to the next decision being correct.

    As I mentioned, combining Delay command with change to a next state could do that trick:

       Change to state one

       Delay next action by 1 second

       Change to sate two

       Delay next action by 1 second

       Change to state three

    ....

    But that is still not solving your first requirement: when the button is released, the action should stop.