Switching Between Photos | Proto.io Prototyping Tool

Published: 21 September 2015
on channel: Discover Business Degrees
2,918
14

Learn how to switch between photos in Proto.io in this tutorial video.


Switching between photos is easy to do. In this tutorial, we’ll show you how in 5 steps.

Step 1: Adding and Adjusting our Elements

To begin, add a button and photo element to your home screen canvas. We’ve added a few extra to fill out the screen. Center and align to your liking.

Then, adjust the button text. For our example, we’ll add “Next Photo”.


Step 2: Adding a State

Click on this state, and select duplicate.
Then, change the photo. We’ll add a photo of Chile.

Finally, change the button. We’ll change it to “Previous Photo”.

Step 3: Adding a Interaction to the Next Photo Button

Click to go back to the first state.
Select the “Next Photo” button, interactions, and add interaction.

For trigger, select tap.
For action, select change screen state.
For screen, select the current screen.
For state, select next state.
Leave delay.

Let’s recap:
When tapped -the trigger -this button will load a new screen state - the action. The screen state is the second state we created, with our photo of Chile. Click save interaction. Then right-click on the interaction and copy.



Step 4: Adding a Interaction to the Previous Photo Button

Click save interaction. Now, right-click on the interaction and select copy.

Click to go to the second state.
Select the “Previous Photo” button, interactions, and right-click on the add interaction button. Select Paste.

Click on the interaction to edit it. The only property that needs changing is state. Change this to previous state.

One final recap:

When tapped -the trigger -this button will load a new screen state - the action. The screen state is the first state we created, with our photo of Mallorca.

Step 5: Save the interaction. Save the project. Let’s preview!

There you have. The photos switch back and forth when the button is clicked.


Website: https://www.discoverbusiness.us
Google +: https://plus.google.com/+Discoverbusi...
Facebook:   / discoverbusiness  
Twitter:   / discoverbusines  
Pinterest:   / discoverbusines  

gala ventura
alexis piperides
at ha
protonerds


Watch video Switching Between Photos | Proto.io Prototyping Tool online without registration, duration hours minute second in high quality. This video was added by user Discover Business Degrees 21 September 2015, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,918 once and liked it 14 people.