In the attached slide I want the move 'Group 1' up and down by a click. I already created two motions paths, but only the first one is executed. So 'Group 1' moves to the top, but it doesn't move to the bottom. How can I do that?
Related to this question: when I click on 'Group 1' only 'Motion Path 1' is shown. How can 'Motion Path 2' be made visible? Is there a location in Articulate Storyline where I can see all Motion paths and there settings?
The .story file did not get attached. You can't attach one using a phone, you have to come here with a browser and use the Add Attachment button.
Meanwhile, reading your description, it sounds like the motion path was attached to a different object, perhaps a different object in the group. If you select the animations tab, you should see two circles for each motion path that exists on that slide or layer. (If they share the exact same starting and ending points, one will cover the other, but if you move one a little, you can see the other.)
Groups never play nicely with motion paths (or a lot of other things, for that matter). Experience has shown me that you will be a lot happier if you flatten your group into a single object. The two best ways to do that are:
1. Select all the objects in the group, right click, and export as an image. then insert the image.
2. Select all the objects but one and copy them. Edit the states of the uncopied one, and in Normal state, paste the copied objects.
Either of those methods will make the group one object, and it will respond correctly to triggers, states, clicks, resizing, and motion paths.
Your upload didn't succeed. However, I'm uncertain why both motion paths weren't executed. Attached is a short video illustrating grouped objects (two rectangles) with two motion paths, each moving up and down respectively. These are activated by clicking on various buttons, including 'Group object'.
If you want motion path 2 to start after the second mouse click, you will need additional triggers. There are several ways to implement such a mechanism.
The most obvious and correct way is to use variables. For example, you can create a numeric variable. Let's call it count, for example. When clicking on the button, we assign the variable a value of 1 if the variable's value is 0. In the Else case, we set the variable to 0 (i.e., if the variable has a value of 1 - it will become 0). And we will activate the motion paths when the count variable changes. When the variable changes, we activate path1 if the variable's value is 1, in else we activate path2.
This approach has its downsides, for example, a user can click the button at the moment it's moving. The mechanism will work, but the movement will be jerky. By adding a few additional triggers, you can either disable the ability to click the button while it's moving, or make it so that if you click the button during movement, it completes its motion and then immediately starts a new one.
If you want the user to be able to click the button during movement, and right after the click, the button starts moving from its current position back to its original position - you will need JS and the use of the GSAP library to control the movement. This is a more labor-intensive task.
To be honest, I don't understand why your version works and mine doesn't. The structure/logic of the triggers must be different then I thought. I have programmed a lot in the past, so I should understand it. I'm going to read the documentation to understand what's the difference between my reasoning and the reasoning of AS.
I've slightly modified the triggers. Instead of Else, I added an additional trigger with a condition. And it works as well. Most likely, Else is executed after we change the value of the variable. Because of this, the condition is never met. To know for sure, we need to export the slide and look at the code.
When translated into simple JavaScript, your trigger action would resemble something like this:
In the provided code, if isTrue is true, the else statement will never execute. It will only execute the if block.
If you set isTrue to false within the if statement, it will alter the value of isTrue before the else block is reached. Here's how it would look:
Even in this case, when the button is clicked for the first time, it will set isTrue to false and then perform "action A". Subsequent clicks will execute "action B" because isTrue will be false.
Your code didn't work because the interaction relies on a click event; nothing will occur until you click, and more important the "Reached_top" variable maintains the value of true after the initial button click. Therefore, you should implement a trigger to toggle the "Reached_top" variable.
Triggers in the final version will resemble the JavaScript below. The handleClick function toggles the value of isTrue using the ! operator, which negates its current value. Then, based on the new value of isTrue, it performs either "action A" or "action B".
I'm not very skilled at explanations, but I hope this sheds some light on your inquiry.
Thank you very much for your explanation! It's very clear! Your are right: my mistake was indeed that I should have used a toggle instead only setting the variable 'reached_top' to true. The interface of Articulate Storyline is a bit strange, but I slowly get used to it!
15 Replies
To implement this, 2 triggers will be required:
1. On click, start movement along motion path 1.
2. When movement along motion path 1 ends, start movement along motion path 2.
Hello Alex,
Thanks for thinking along!
I do exactly what you describe, but the point is that it doesn't work (see story file).
The rectangle (group of objects) should only move down after a second click (and not immediately after the ending of motion path 1).
Do you know how to make 'motion path 1' and 'motion path 2' visible? I only see 'motion path 1' (but motion path 2 does exist).
The .story file did not get attached. You can't attach one using a phone, you have to come here with a browser and use the Add Attachment button.
Meanwhile, reading your description, it sounds like the motion path was attached to a different object, perhaps a different object in the group. If you select the animations tab, you should see two circles for each motion path that exists on that slide or layer. (If they share the exact same starting and ending points, one will cover the other, but if you move one a little, you can see the other.)
Groups never play nicely with motion paths (or a lot of other things, for that matter). Experience has shown me that you will be a lot happier if you flatten your group into a single object. The two best ways to do that are:
1. Select all the objects in the group, right click, and export as an image. then insert the image.
2. Select all the objects but one and copy them. Edit the states of the uncopied one, and in Normal state, paste the copied objects.
Either of those methods will make the group one object, and it will respond correctly to triggers, states, clicks, resizing, and motion paths.
Your upload didn't succeed. However, I'm uncertain why both motion paths weren't executed. Attached is a short video illustrating grouped objects (two rectangles) with two motion paths, each moving up and down respectively. These are activated by clicking on various buttons, including 'Group object'.
If you want motion path 2 to start after the second mouse click, you will need additional triggers. There are several ways to implement such a mechanism.
The most obvious and correct way is to use variables. For example, you can create a numeric variable. Let's call it count, for example. When clicking on the button, we assign the variable a value of 1 if the variable's value is 0. In the Else case, we set the variable to 0 (i.e., if the variable has a value of 1 - it will become 0). And we will activate the motion paths when the count variable changes. When the variable changes, we activate path1 if the variable's value is 1, in else we activate path2.
This approach has its downsides, for example, a user can click the button at the moment it's moving. The mechanism will work, but the movement will be jerky. By adding a few additional triggers, you can either disable the ability to click the button while it's moving, or make it so that if you click the button during movement, it completes its motion and then immediately starts a new one.
If you want the user to be able to click the button during movement, and right after the click, the button starts moving from its current position back to its original position - you will need JS and the use of the GSAP library to control the movement. This is a more labor-intensive task.
Hello everybody!
First: thanks for thinking along!
I attached the slide to this comment. Can anybody see what goes wrong?
When you click on the text 'De vierlagen van verbinding' the text moves up, but it doesn't move down on a second click. The triggers seem right to me.
I'm afraid that flattening parts of the slide will not work, because the text has to stay editable.
In the first trigger, the "else" statement will never execute. You should modify your top two triggers as follows:
Hello Nedim,
Thank you very much: it works!!!
To be honest, I don't understand why your version works and mine doesn't. The structure/logic of the triggers must be different then I thought. I have programmed a lot in the past, so I should understand it. I'm going to read the documentation to understand what's the difference between my reasoning and the reasoning of AS.
Many thanks!!
I will use the code provided by Nedim, but I just don't understand why my code (see attachment/image) doesn't work. What's wrong about it?
(the start value of 'going_to_the_top' is true)
I've slightly modified the triggers. Instead of Else, I added an additional trigger with a condition. And it works as well. Most likely, Else is executed after we change the value of the variable. Because of this, the condition is never met. To know for sure, we need to export the slide and look at the code.
Of course, it's not logical that the Else check goes after the execution of the second trigger on button click, but most likely this is how it works.
@Alex: your solution is also very nice! Very understandable! Thanks!
When translated into simple JavaScript, your trigger action would resemble something like this:
In the provided code, if
isTrueistrue, theelsestatement will never execute. It will only execute theifblock.If you set
isTruetofalsewithin theifstatement, it will alter the value ofisTruebefore theelseblock is reached. Here's how it would look:Even in this case, when the button is clicked for the first time, it will set
isTruetofalseand then perform "action A". Subsequent clicks will execute "action B" becauseisTruewill befalse.Your code didn't work because the interaction relies on a click event; nothing will occur until you click, and more important the "Reached_top" variable maintains the value of true after the initial button click. Therefore, you should implement a trigger to toggle the "Reached_top" variable.
Triggers in the final version will resemble the JavaScript below. The
handleClickfunction toggles the value ofisTrueusing the!operator, which negates its current value. Then, based on the new value ofisTrue, it performs either "action A" or "action B".I'm not very skilled at explanations, but I hope this sheds some light on your inquiry.
Hello Nedim,
Thank you very much for your explanation! It's very clear! Your are right: my mistake was indeed that I should have used a toggle instead only setting the variable 'reached_top' to true. The interface of Articulate Storyline is a bit strange, but I slowly get used to it!