Axure tutorial | How to use Axure to implement the interactive prototype of egg smashing

Recently, when drawing an activity prototype, I tried to make one Smash eggs Here I would like to share with you about this process.

Almost everyone has played egg smashing. The most important thing we have achieved is that "when the mouse moves in, a small hammer will appear, and the result will be displayed after the egg smashing."

Step 1: Drag the dynamic panel from the component library, name the dynamic panel Egg, and create the initial state of Egg

This is the initial state of the dynamic panel. The panel state is named "Egg not broken"

Step 2: Set the result status of egg smashing as required

Here I have set a total of four states, namely, the egg smashing failed, the egg smashing won, no winning prompt, and winning prompt.

Step 3: Drag in a dynamic panel again and draw a hammer.

Drag a new dynamic panel from the catalog and name it Hammer. Well, this hammer is not Lao Luo's hammer! (Extraneous remarks: of course, you can also directly import a hammer picture --. I just want to draw a hammer with a rectangle to see). Then, set the dynamic panel of the hammer as hidden

Step 4: set the mouse to move into the egg and display the hammer moving with the mouse; Move the mouse out to hide the use case event of the hammer

Set the moving in and moving out event of the egg dynamic panel: when the mouse moves into the egg dynamic panel, the hammer will follow the mouse, and when the mouse moves out of the egg dynamic panel, the hammer will disappear.

It should be noted here that the setting of the hammer moving with the mouse requires the use of the mouse pointer variable. The X axis and Y axis variables moved to the absolute position are Cursor. x and Cursor. y of the mouse pointer. In order to make the hammer display slightly behind the mouse, 50 is subtracted from the basic coordinates of the variables. (Subtract the corresponding value according to the actual situation)

Step 5: Set the mouse click event of the hammer, that is, the interaction of colored eggs.

Here I set the interaction of red eggs without prizes and orange eggs with prizes.

5.1 Set the click conditions of hammer smashing red eggs

When the hammer touches the egg, and the egg panel status is that the egg is not broken

5.2 Set the use case event when the hammer meets the conditions

When the hammer touches the red egg, click the mouse,

1. Set the panel status to Egg Failed
2. Hide Hammer
3. Wait 1000 milliseconds
4. Set the panel status to no winning prompt

5.3 Similarly, set the conditions and use case events for hammering orange eggs

The interactive implementation of the whole egg is basically like this. If necessary, you can download the egg prototype.

Download link: http://pan.baidu.com/s/1c02Vswo Password: rp84

This article is written by @ Kefei (WeChat official account: pm kefei)

Operation article of last year and today

1. 2023:   Little Red Book New Employee Training Manual (0)
2. 2023:   2023 Little Red Book Pet Social IP "Depend on You Little Cute" Investment Promotion Scheme (0)
3. 2023:   2023 Real Estate Project National Day Series (City Sunset Party Theme) Activity Planning Scheme - 49P (0)
4. 2023:   Ability Improvement Series: Learning and Thinking Tools (1)
5. 2023:   A large factory earns 30000 yuan a month, which is no match for a bowl of chow mein (0)