Learn how to prototype web and mobile apps

How to simulate a dice throw in your prototypes using random content

Learn how to create an iPhone 6 app prototype that simulates a dice throw in this tutorial using random content. In the previous tutorial, you learned how to create and simulate random content in your interactive prototypes.

You can download the below example here.



Creating a Dice throw in a mobile app prototype


The first thing we have to do is get all the components we need onto the canvas.

1. In a new iPhone 6 mobile app prototype, drag a dynamic panel into the center of the screen. Within this, add 5 additional panels so there are 6 panels in total.

2. Within each panel, add an image widget, by double clicking on the dynamic panel to edit its contents. Choose an image for each panel, (in our example each image represents a side of the die).

interactive-prototypes-random-content-UI-assets interactive-prototypes-random-content-ui-assets-images

3. Drag an eclipse widget onto the screen next, followed by another image widget and a button. Place the widget on top of the dynamic panel in the center of the screen, (you can change the order of components by right-clicking on them and selecting the ‘Order’ option). Place the image widget at the top of the screen and add an image that represents the meaning of the app. Place the button at the bottom of the screen and type ‘Roll the Dice’ into it, in the ‘Value’ value in the Properties tab.


4. Finally, go to the ‘Variables’ tab in the floating palette in the bottom right-hand corner of the interface. Create a new variable by clicking the ‘+’ option and name it ‘Roll’. Leave the ‘Default value’ as is and click OK.


We now have all the components we need to get started. Now, we’ll add some events to make our prototype functional and interactive!

Adding events to your prototype to make it interactive


1. First, we’re going to create an event to signal which panel we’re going to change the state of upon simulation. Select the button widget and go to the Events dialog at the bottom of the interface. Add an ‘On tap’ + ‘Set Value’ event, selecting the ‘Roll’ variable. At the bottom of the dialog box, select the ‘Calculated’ option. Now, we will add the following expression:



First, drag the ‘Round’ function to the expression builder. At this point, another text box will appear on the right of the current text box present. Now, drag the ‘Rand’ constant and the ‘X’ function into the expression builder, as in the example above. In the farthest left text box, type in ‘5’. After this, drag the ‘+’ function to the right of the ‘5. At this point, another text box will appear on the right of the ‘X’ function. In the text box next to the ‘+’ function, type ‘1’, and in the farthest text box, type ‘0’.

2. Our next step will be to create an action that will change the style of the button when the screen is tapped by the user. Right-click on the event you have just created select the ‘Add action after selected’ option. In the dialog box that appears, add an ‘On tap’ + ‘Change style’ action, selecting the button. At the bottom of the dialog box, select the ‘Background’ option and change the color to black. Click OK. Between the two events, make sure that the linking option is set to ‘WITH previous’.

3. Now, add another action, the same as you have just created above by selecting the gear icon on the right of ‘Do’ again. This time, ensure that the linking option is set to ‘Time AFTER previous started’ at 300 ms. Click OK.

4. Now, we’re going to add an expression so that, upon simulation, our wireframe knows to switch between panels. to show different sides of the die. On the right of the action you have just created, select the ‘Add Event’ option and add an ‘On tap’ + ‘Set Active Panel’ event, selecting Panel 1. Add a ‘Flip horizontal’ transition effect at the bottom of the dialog box. Click OK. Now, add a condition by selecting the link on the left of this event. The condition should read: “When ‘Roll’ = 1”. You must go to the ‘Variable’ tab to drag the ‘Roll’ variable to the expression builder here. Click OK. This event will ensure that the panel containing the number related to the number on the die appears, (e.g. this event will ensure that Panel 1 appears because we wrote ‘1’ in the expression builder).

5. Now, do the same for the rest of the panels, ensuring that each expression contains the right number, (i.e. 2 for Panel 2, 3 for Panel 3, and so on).


And that’s it! You can now click ‘Simulate‘ and enjoy your die rolling mobile app prototype!


Next tutorial > Create a loading animation using variables