Getting Creative With States, Part I: Carousel Teardown

Easy Ways to Add Interactivity to Your Wireframes

I get a lot of questions about working with States, and in particular when and how to use some of the more obscure State Navigation components. In this 3-part post we will dissect a few of the example widgets that we’ve recently added to the new Stencils and Widgets Library in an effort to better understand the usage and configuration of stateful components.

NOTE: If you want to follow along, make sure to drag-and-drop each example Widget onto your own ProtoShare design.

First, let’s take a look at the Carousel widget. This widget utilizes the Horizontal State Navigation, Prev/Next State Value, and State Value Name components. Using a single state called “Carousel Page” we can configure the three components such that they mimic the behavior of a standard carousel control:


Prev/Next Value:

set to “None”, because we only want the arrow icons to be displayed
Hover and Click appearance settings are configured so that each Prev/Next component behaves like a button. The fill color is darkened on hover, and an inverse border style and inset shadow are added on click.
Fill Image:
set to the left/right arrow icons

Horiz. State Nav: For the page indicators, I wanted to create the standard circular dot navigation control that we see on many popular carousel widgets. Rather than use a fill image to create each dot, I created them using the “full-rounding” appearance setting. This works great, with one small problem: we still need to hide the text that is automatically displayed in each navigation cell. Because there is no setting to explicitly hide the text on a State Navigation component, I set the font size to the smallest value ( 1 ) to eliminate overflow issues, and made the text color the same as the fill color.

State Value Name: Almost no configuration is required for this component, simply assign the same state as the navigation components above and you are done. The State Value Name component always displays the current state value ( in this case the page number ) to the user when either of the navigation controls are clicked. Just make sure to configure your state values with the correct label for each page of your carousel.

This entry was posted in Blog, ProtoShare Tips & Tricks. Bookmark the permalink.

Previous post:
Next post:

Leave a Reply

Your email address will not be published. Required fields are marked *