[Novice Tutorial] Axure RP 8 realizes automatic picture rotation

Recently, I am working on the prototype of a new project, and I need to implement the carousel map requirements. I have found many tutorials on the Internet. The blogger seems to have tacitly agreed that some steps can be completed by readers alone, but I have not found any that can be provided to those who are unfamiliar with Axure RP. tutorial for beginners. So here I record my learning process and operation method.

1. Create a panel, name it Banner, right-click on the dynamic panel and select "Manage Panel Status":


 

2. Add status:

 

3. Select each state to enter the edit page of each state:


4. Drag the picture control in the State1 panel and select the local picture:

At this point, the page editing of each state is completed (as for the small dots at the bottom of each picture, it is the same as the carousel map production, add and in another dynamic panel , and a lazy way is to add it to the state editing canvas The same number of small dot controls as the picture are placed on the top layer, set the color of the first small dot in State1, and set the color of the second small dot in State2... ) .

Let's start adding interaction to the dynamic panel.

5. Click "More Events >>>" in the interactive panel under "Properties" under "View: Dynamic Panel",


 

6. Select "When the mouse moves in", and set the state of "Destination" to "Stop looping".

 

7. Continue to add events: When the mouse is moved out, the page continues to rotate in a cycle, and the time of the cycle is defined as 2 000ms ( 2s).

 

8. Add interaction to the page (the same as when the mouse is out): Continued to add an event when the page is loaded.

 

So far, a simple carousel effect is ready. Of course, for specific applications, you need to add small dots at the bottom of the picture, left and right picture switching arrows, picture loading effects (fade in and out), and so on.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326548255&siteId=291194637