Shopping cart using variables to calculate selected item amount, and total costs using variables. Project also includes a thumbnail gallery

Here is the set of prototypes from the Pro Tips and Tricks webinar: 1) Propagate Events to Items Below 2) Containers as Symbols 3) Conditional Animation 4) Screen Interaction 5) Sketches into Prototype Here is the video of the webinar: http://docs.proto.io/videos/pro-tips-tricks/ The video is broken down with time-codes on Vimeo here: https://vimeo.com/103316955 (under read more) They are also below. Enjoy... > Create popover menu with click through to icon below 4:08 > Propagate all events to the item below 4:08 > Using containers as symbols for efficiency (navigation assets etc.) 11:59 > Customizing a navbar component 14:55 > Customize a tabbar component 16:48 > Convert navbar to a container to repeat (as symbol) 19:10 > Convert tabbar to a container to repeat (as symbol) 19:43 > Convert text box to a container to repeat (as symbol) 19:49 > Using a container to create change font style for repeated Titles and labels. 21:55 > Conditional animations triggered by drag gesture using variables (mailbox swipe). 23:04 > Adding containers to canvas 24:44 > Using the draggable gesture 25:25 > Variable Manager 26:00 > Using onDrag variable to change an objects opacity 26:38 > Range of property values that can be changed based on a drag gesture 27:45 > Capturing the X position from dragging an object using a variable 27:57 > Creating a new value if/then argument using shorthand javascript to change opacity using a variable. 29:00 > Creating a callback to the change a property that reads from a variable. 29:52 > Using the onDragEnd gesture 30:33 > Change the Left property using a variable triggered by onDragEnd 30:49 > See range of properties that can be changed from onDragEnd gesture. 31:04 > Using On Screen Show Interaction for creating an automatically cycling carousel. 35:25 > Importing paper sketches (photos of them) to use as background for layering assets and interactions. 40:28 > Toggling between a sketch and your higher fidelity mockup using states. 44:25 > Duplicating interactions between states 45:18

This prototype showcases a new Proto.io feature called Gradients, it’s a new way to create and animate gradients straight in Proto.io. You can now make your UI pop with vibrant linear or radial colors, and bring to life with beautiful animations.

Interactive TV app prototype of Hulu's home page. Use the arrow keys on your keyboard (note: mouse click to enable keys) or map to a remote control on a television screen to explore a Hulu like home screen with proto io. Note: Must click the canvas to enable key presses, this seems to be a common restriction with most prototyping tools when building key press focus interaction models.

tcc

Dec2016

A basic animation created by using the Proto.io HTML Component with HTML and CSS. No additional images were needed to be imported to create this animation. The HTML and CSS used was found at: http://codepen.io/ajerez/pen/EaEEOW

Prototype for Citrix Secure Hub Enrollment.