How to Switch Between Videos | Proto.io Prototyping Tool
Switching between videos 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 video 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 Vacation”.
Finally, click on the video, and under properties, add you video. For this example, we’ll add a video on Mallorca, Spain, from Vimeo. It’s ID is taken from here. If you are adding from YouTube, the ID can be found here.
We’ll select autoplay.
Step 2: Adding a State
Click on this state, and select duplicate.
Then, change the video. We’ll add a video from YouTube on Chile. We’ll select autoplay again, and adjust the video screen size.
Finally, change the button. We’ll change it to “Watch again”.
Step 3: Adding a Interaction to the Next Vacation Button
Click to go back to the first state.
Select the “Next Vacation” 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 video on Chile. Click save interaction. Then right-click on the interaction and copy.
Step 4: Adding a Interaction to the Watch Again Button
Click save interaction. Now, right-click on the interaction and select copy.
Click to go to the second state.
Select the “Watch Again” 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 video on Mallorca.
Step 5: Save the interaction. Save the project. Let’s preview!
When the app loads, our first screen with the Vimeo video on Mallorca loads. It autoplays (since we selected that option). When we click “next Vacaiton”, our second page loads with the YouTube video on Chile that autoplays. When we click watch again, we return to the first state. It’s working great!
Website: https://www.discoverbusiness.us
Google +: https://plus.google.com/+Discoverbusi...
Facebook: / discoverbusiness
Twitter: / discoverbusines
Pinterest: / discoverbusines
Watch video How to Switch Between Videos | 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,014 once and liked it 15 people.