New to axure and I need help with moving object back and forth

Hello, I’m new and I would appreciate some help.
What I want to achieve is seemingly a very simple thing.

I have two rectangles, one is red and the other is blue.
When i click on the red rectangle, the blue one should slightly move to the right and stay there.
When i click on the same red rectangle again, the blue one should return to its previous position.

Thats it, a simple back and forth object moving.

I almost managed to achieve this by creating two cases. But then when i click on the red square it pops up a small menu to choose which case to active (case1 or case2). I prefer not to have this menu.

And the “bounds” option is quite odd. I was expecting for an option to choose how many pixels it would move from its present position rather than bounding it to certain length.

Anyone has any suggestions?

Thank you.

Creating two cases is the right approach. It sounds like you did not have conditions for the cases–like, “If [[BlueBox.left]] is less than 500 Move BlueBox to (500, 200)”. If there are multiple cases but no conditions, Axure shows that popup menu to let the user choose which case to follow. What you want to do with the first case is test “Is the blue box in the initial position?” and if so, move it to the right, else move it to the left (back to its initial position.)

There are several ways this could be done. One straightforward way is to add a hotspot (or any hidden widget) behind the blue box and left-aligned with it. This will serve as a marker for the initial position of the blue box. Then you can easily test “If the blue box is aligned with the hotspot, move it to the right” else “move the blue box to the left edge of the hotspot”.

See this demo: Move box back and forth.rp (46.4 KB)

Here is the interaction code:

image

So, if the blue box is over the hotspot it must be in the initial position. If this is true then the blue box is moved to the right. Else it is moved back (leftward) to its initial position. This is defined by the left edge of the hotspot. To code this in Axure, I used a local variable named “LVAR1” and pointed it to the hotspot widget. “.left” is a way to access the “left edge value” (also can use the “.x” property) All widgets have these properties: x, y, left, right, top, bottom. Variables are wrapped in double-square brackets, so it is written as [[LVAR1.left]]. the [[Target.y]] is a shortcut to refer to “the y-value of the same widget that is being moved”, or in other words, “don’t move it up or down” --“Target” is a very useful built-in variable to learn and use.

The boundaries are limits for how far the (target) widget can be moved. When you are moving it directly by a fixed value (e.g., 200 or 500 pixels) then you don’t need limits so you can ignore the boundaries option. If you wanted to make your move more dynamic, like moving the blue box by 200px times the number of times the red box was clicked, but did not want it to move off the page or maybe collide with some other widget to the right, you could set some boundaries for how far it could move right or left. Another example is the left-wise move could be “Move BlueBox to (0, 0) with boundaries: top is equal to [[This.top]] and left is greater than or equal to [[LVAR1.left]]” (where “This” refers to the red box (the thing being clicked) and “LVAR1” is the hotspot.) That would achieve same result as I explain above.

Thank you very much, it really helped me to understand more about how this software works and now i can apply this knowledge to my project!

Cheers!

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.