How to Create a Download Bar| Proto.io Prototyping Tool
Learn how to create a custom download bar in Proto.io in this tutorial video.
Complex animations are easy in Proto.io. In this tutorial, we’re going to create a custom downloading bar.
Step 1: Adding Elements
Add three text boxes to your canvas. You can find these in the UI panel:
Position them to your liking. Adjust their labels as you see in our example. To adjust a label, double-click on it to select the text, and make your changes.
As you can see, we’ve added some more elements just for fun.
Step 2: Creating a Bar Container
Click container, add new container.
Label it d_bar. Set its size to 270 x 30, and select a transparent background.
The white portion of the screen, which is small, is the canvas.
Now, create 2 rectangles each 270x30. Place 1 in the white canvas, and the other directly beside it. Color the left rectanlge with the color you’d like to have for the progress bar.
Now, click on state and select duplicate. Move the color rectanlge onto the canvas, and delete the other rectangle.
Below, under timing, scale back to see the entire time-frame. Drag the timer for the colored rectangle to just after 8 seconds.
Let’s recap:
What we’ve done here is create the two halves of the downloading status bar. The first state, when completed, flows into the second state - and the second state will take about 8 seconds to complete.
All of this is contained in a container, which can be dragged and dropped onto any screen.
Step 3: Create a Button Container
Click container, add new container.
Label it d_button. Set its size to 270 x 80, and select a transparent background
Drag a button into the screen, size it to fit, and label it download.
Now, click on state, and duplicate. Click on the button, properties, and change the background color to a light grey.
Change the text to Downloaded.
Step 4: Adding the Containers to the home screen
Navigate back to the home screen.
Click on containers, and find the d_button and d_bar containers. Click add to canvas. Now, position them to your liking.
Step 5: Add an interaction to the Download Button.
Click on the download button, itneractions, add interaction.
For trigger, select tap.
For action, select change container state.
For screen, select current screen.
For container, select d_bar.
For state, select next state.
Leave delay.
Step 6:
Save the interaction. Save the project. Preview!
When we press download, the bar fills. When it is complete. the button fads to downloaded. Perfect!
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 How to Create a Download Bar| 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 4,129 once and liked it 37 people.