Forum Discussion
How to move a rectangle (group of objects) up and down?
Hello Storyline developers,
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?
Thanks in advance!
- AlexMilyaev-f86Community Member
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.
- AlexMilyaev-f86Community Member
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.
- NedimCommunity Member
When translated into simple JavaScript, your trigger action would resemble something like this:
In the provided code, ifisTrue
istrue
, theelse
statement will never execute. It will only execute theif
block.
If you setisTrue
tofalse
within theif
statement, it will alter the value ofisTrue
before theelse
block is reached. Here's how it would look:
Even in this case, when the button is clicked for the first time, it will setisTrue
tofalse
and then perform "action A". Subsequent clicks will execute "action B" becauseisTrue
will 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. ThehandleClick
function toggles the value ofisTrue
using 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. - AlexMilyaev-f86Community Member
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.
- JeroenVerhoeckxCommunity Member
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).
- WaltHamiltonSuper Hero
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.
- NedimCommunity Member
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'.
- AlexMilyaev-f86Community Member
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.
- AlexMilyaev-f86Community Member
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.
- JeroenVerhoeckxCommunity Member
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.