Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to design an automatic slideshow in your mobile prototypes

Learn how to simulate an automatic slideshow in your mobile prototypes with the help of this tutorial.

In previous tutorials, we showed you how to create a basic slideshow and in this, an advanced slideshow. In this tutorial, we will use dynamic panels and On Page Load and On Variable Change events to create a slideshow that flips through screens automatically. This type of slideshow is great for user onboarding and walkthroughs. Follow the steps below to replicate our example.

You can download the below example here.

interactive-prototypes-automatic-slideshow-walkthrough

Creating an automatic slideshow in your prototypes

1. Open a new iPhone 6 mobile app prototype. From the Outline tab, customize the style of the Screen as desired. In our example, we have made the Background color blue.

2. Drag a Dynamic Panel to the canvas, resize it to 375 x 503 pixels, and position it in the center of the iPhone screen.

3. Double click in the Dynamic Panel to edit its contents and drag an Image widget and Paragraph widget into it. Resize them to match our example. Add an image to represent the first screen of your slideshow and add the text you wish to display in the first screen in the Paragraph widget.

1-1-interactive-prototypes-automatic-slideshow-walkthrough

4. Right click on Panel 1 in the Outline tab and duplicate the panel twice (or for as many screens as you wish to display in your slideshow) so that you have three panels in total. Replace the images and text in the other panels to represent your other screens.

2-2-interactive-prototypes-automatic-slideshow-walkthrough

5. Below the Dynamic Panel, drag ellipse widgets to the canvas, one for each panel, resize them and align them horizontally to match our example by using the Align option in the top toolbar. Change their color to gray and group them together.

6. Add a rectangle behind the ellipses, resize it to 375 x 224 pixels, and change its style as desired. In our example, we have made the Background color white.

7. Finally, add a variable in the Variables tab by selecting the ‘+’ icon. Name it ‘dots’ and type the number ‘0’ into the Default value input field.

3-interactive-prototypes-automatic-slideshow-walkthrough

Adding events to your prototype to make it interactive

1. Select the Screen from the Outline tab and go to the Events tab. Add an “On Page Load” + “Change Style” event, selecting the left ellipse. Below, tick the Background box and change the color to the color you used in the Screen background in Step 1 (in our case, blue). Click OK and right click on the event to add another.

2. Create an “On Page Load” + “Set Value” event, selecting the ‘dots’ variable from the Variables tab. Below, write the number ‘2’ into the input field and click OK. Change the link between these events time AFTER previous started (4000 ms).

4-interactive-prototypes-automatic-slideshow-walkthrough

3. Now, add another event: select “On Variable Change” from the first drop down and from the “Select a variable” drop down, select the “dots” variable. In the last drop down, select “Change Style”. Select the center ellipse. Below, tick the Background box and change the color to the color you used in the Screen background. Click OK and click on the ‘Add condition’ link on the left of this event. Add the following expression:

Drag the ‘dots’ variable to the first position, drag the EQUALS function to the next and finally write the number ‘2’ into the final position. Click OK.

4. Right click on the event you have just created to add another. Leave the “On Variable Change” in the first drop down and the “dots” variable in the “Select a variable” drop down. In the last drop down, select “Set Active Panel”. Select Panel 2 and add a ‘Slide left’ transition effect below. Click OK, change the link between these events to WITH previous and right click on the event to add another.

5. Leave the “On Variable Change” in the first drop down and the “dots” variable in the “Select a variable” drop down. In the last drop down, select “Set Value”. Select the ‘dots’ variable from the Variables tab. Below, write the number ‘3’ into the input field. Click OK, change the link between these events to time AFTER previous started (4000 ms) and click the Else button on the right of this event.

6. Leave the “On Variable Change” in the first drop down and the “dots” variable in the “Select a variable” drop down. In the last drop down, select “Change Style”. Select the center ellipse. Below, tick the Background box and change the color to gray. Click OK.

5-5-interactive-prototypes-automatic-slideshow-walkthrough

6-6-interactive-prototypes-automatic-slideshow-walkthrough

Copy the On Variable Change event steps (steps 3-6) for the other Panels 3 + 1, changing the relevant panel and ellipse in each instance. For example, for Panel 3, the Change Style events should refer to the right dot, the active panel should be Panel 3, the expression number in the final position should be ‘3’, and the value in the Set Value event should be 1.

8-interactive-prototypes-automatic-slideshow-walkthrough

Make sure that the link between the three event series to WITH previous. 

7-interactive-prototypes-automatic-slideshow-walkthrough

And that’s it! Click ‘Simulate‘ to see your slideshow. Upon loading the simulation, your slideshow will automatically start.

 

Next tutorial > Create a before and after image slider