March 24, 2018
Changing States as a Form of Navigation
Comments
(0)
March 24, 2018
Changing States as a Form of Navigation
I am currently a provider of technical training and support in the electronic manufacturing industry. My prior training and work experience as a teacher, network administrator, web design, and instructional design make me well prepared to design it, develop it, and deliver it. I am a father of five, a US Army veteran, and I enjoy playing the guitar as well as performing in local community theater. 
Legend 99 posts
Followers: 154 people
(0)

Not sure if this has been covered or not so here we go…

Captivate has this great feature that allows you to change the state of an object. I have used this in many situations where I need to swap an image based on input from a user. Two that I use often are to display some form of icon as a way to inform the learner that an answer was right or wrong and to change the ‘display’ of a screen as part of a simulated activity.

Have you considered using states as a form of navigation? This might be suited best for less interactive projects or even small websites.

A nice thing is that it required no fancy advanced actions or javascript – only six buttons with change state actions and six matching states – all on a single slide.

In this post I thought I would share this idea and perhaps it will provide some creative fuel for you and some of your own projects.

Here is the link to the working demo…

https://s3.us-east-2.amazonaws.com/captivateshare/tabbedNav/index.html

Basic Design

I was thinking of a tabbed form of navigation for this one so I started by simply placing a rectangle in the upper left corner to serve as a ‘Home’ tab. I went into the state view and created five more boxes of the same size and placed one of them on the far right and then distributed them horizontally. I wanted to have a little overlap in the tabs to help distinguish the one on top.

Then I created a large rectangle to fill the rest of the space below along with a nested box with rounded corners for the content area.

Then I colored the objects.

At this point, I duplicated the state and simply moved the next tab to the top and adjusted my colors to shift to the active tab. I repeated this until all tabs were complete.

All that was left was to place some content on each of the page states.

Closing the state view and going back to the design stage, I created five boxes that matched the size of the additional tabs and converted them to buttons. Each button action is to change the state to match the page corresponding to the button.

I hope you are able to find something useful from this idea. Feel free to ask any questions and Happy Captivating!

0 Comments
Add Comment