Axure Tutorial - Drag to Move Map
Introduction
In the visual prototype, the map is a commonly used component, so today I will teach you how to create a prototype template for dragging to move a map.
Generally speaking, most people directly call charts like Google Map Map. The disadvantage of this method is that it needs to be connected to the Internet, and it needs to understand a little code when modifying, and the maps are provided by others, you can't use your custom maps. Map materials such as detailed maps of parks, or maps of shopping malls are not suitable. So today I'm going to teach you how to make a map dragged effect without calling an external map.
The completed production should have the following interactive effects:
- Drag the map with the mouse to view the details of each direction;
- After the template is made, you only need to import the map material, and the interactive effect can be automatically generated.
1. Preparation of basic materials
We only need to use two widgets for this prototype, one is the image and the other is the dynamic panel.
We import the pre-image into the image component. It should be noted here that the original image should be uploaded, preferably a larger one. If it is too small, there is no room for moving. The image size in the case is 1920*1080.
The dynamic panel should uncheck the adaptive content, and the size should be smaller than the picture, in the case of 960*544.
After we move the image into the dynamic panel, we need to set the initial position. Here, it is best to have the map just in the middle of dynamic panel.
2. Interaction settings
When the dynamic panel is dragged, we use the move action to follow the mouse drag.
After this setting, when we drag the image, the image can move with the mouse, and because the size and position of the dynamic panel are fixed, the effect of dragging the map to view the details of different positions is realized.
But there is still a problem here, because the image is not infinite large, if we keep dragging in one direction, it will cause the image to be finished and leaved blank. So in the move action, we need to add boundaries to the dragged orientation:
The left boundary and the upper boundary are the simplest, they are both less than or equal to 0. It is easy to understand here. Suppose the x coordinate of the image is 10, then the position of 0-10 is blank, so the coordinates of the top boundary are less than or equal to 0, The same goes for left boundary.
The right boundary is actually the position where the right boundary of the image and the width of the dynamic panel overlap. In this case, the width of the dynamic panel is 960, so the right border must be greater than or equal to 960. Here, beginners can fill in 960 directly.
However, it is recommended that you write the function directly, because if you write a number and you change the size of the dynamic panel in the subsequent modification, then you need to go back and change the interaction. If you use the width function, it will automatically hook up with the width of the dynamic panel, even if it is modified. You don't need to go back and change the interaction, and the reusability will be greatly increased.
In the same way, the bottom boundary is actually the position where the bottom edge of the image and the height of the dynamic panel overlap. In this case, the height of the dynamic panel is 544, so the bottom border should be greater than or equal to 544. It is also recommended that you use the height function.
In this way, we have completed the making of the dragging map template. When using it later, we only need to import the map material into the image, move a position and size, and then automatically generate the interactive effect of dragging map. Isn't it very convenient? .
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting!
Note: Click here to download the completed RP file for this tutorial (RP 10 or up).
Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.
Leave a comment