Move elements in an Axure prototype
Today I ran into a problem that I would like to share. This post will be useful to those who are trying to make their Axure prototypes as interactive as possible.
So, the task. To visualize on a prototype the addition of an object with a shift of other objects. For example, let's take the addition of a question in the online consultation service.
')
It is necessary to make so that when you click the "Send" button, a new question appears above the old ones, and the old ones, in turn, move downwards. Like this:
Looking for a solution on the Axure forum, I found that this is a fairly common task among users of this program. However, the developers have not yet implemented dynamic relative positioning of elements, therefore, when such a problem arises, you have to either combine all the elements that need to be moved into a single panel (which is not always possible) or move each element separately.
So what you need to do to move the element. To begin with, it needs to be converted to a dynamic panel:
After this, select the element and its event, according to which the elements should shift:
And we add the Move panel (s) action, selecting the required panel and specifying the relative shift value (just a number - move it down by the corresponding number of pixels, a number with a minus - move it up):
The prototype from the example can be downloaded at the link: petwork.ru/data/stuff/move-object-example.rp
It seems simple, but on complex prototypes it can be torture.
PS I would be happy to adopt a more elegant solution, if one is available.
So, the task. To visualize on a prototype the addition of an object with a shift of other objects. For example, let's take the addition of a question in the online consultation service.
')
It is necessary to make so that when you click the "Send" button, a new question appears above the old ones, and the old ones, in turn, move downwards. Like this:
Looking for a solution on the Axure forum, I found that this is a fairly common task among users of this program. However, the developers have not yet implemented dynamic relative positioning of elements, therefore, when such a problem arises, you have to either combine all the elements that need to be moved into a single panel (which is not always possible) or move each element separately.
So what you need to do to move the element. To begin with, it needs to be converted to a dynamic panel:
After this, select the element and its event, according to which the elements should shift:
And we add the Move panel (s) action, selecting the required panel and specifying the relative shift value (just a number - move it down by the corresponding number of pixels, a number with a minus - move it up):
The prototype from the example can be downloaded at the link: petwork.ru/data/stuff/move-object-example.rp
It seems simple, but on complex prototypes it can be torture.
PS I would be happy to adopt a more elegant solution, if one is available.
Source: https://habr.com/ru/post/152263/
All Articles