My states don't work like they are supposed to

I'm trying to emulate How to mark viewed tabs (http://learn.articulate.com/tabs-interactions/) and my states aren't working like they do in that screenr.

Around 2:51 in the demo he does a preview where he clicks on the button and it immediate goes to the selected combined with the visited "x"

In my case  I get the visited "x," but my button remains with the hover art and doesn't show the selected until I move the mouse outside of the artwork. And if I move the pointer back over it goes right back to hover.

First question: How do I get selected to appear immediately upon selection and not after I move away?

The other issue I'm facing is getting the button art set up in the first place. If I insert a button I don't see any way to change the shape of the button to have that chevron for the selected shape.

And if I draw my own shape I have problems getting the text to look right. For some reason when I duplicate the states the text doesn't show in the state preview panel. The text does show in the state when I preview/publish the story file. It is really strange.

Second question: How to make button artwork from scratch?

37 Replies
R Rothrock

I created a sample file and submitted it. Unfortunately the answer was "it is a design-related issue and we can't support those."

I don't agree. I see that visited state works differently depending upon if it starts as a button (correctly or desired) or it it starts as a shape which gets states added (not desired).

It would be really nice if someone could show me how the buttons in that video where created. As far as I can tell they can't actually be done by normal people.

Mike Enders

Hi R,

If you'd like to attach your file, I can take a look.  The behavior should largely be the same whether it's custom button or prefab.  I also used a cool little trick for the chevron.  Tell you what, I'll do up a couple Screenrs to walk you through!  But do go ahead and load your file, would love to take a look.

Mike

R Rothrock

Thanks for taking a look, here it is. My alternate view of it is. That the hover state is working incorrectly on inserted buttons. Notice that the ones I built myself go to hover when I move over the selected item (not really what I want) whereas the other kind of button remains in the selected state as long as it is selected.

It just seems to me that the states should work the same regardless of whether it started life as a button or regular shape artwork.

Mike Enders

R-

Looking at your file, it appears that the selected state you created had something to do with the wonkiness.  I deleted your selected state for the top button, added it back in (edit states>new state>selected) and added the chevron shape to the selected state) and all seems to work fine.   I've attached the file.  Check out the first button on top.  It's now displaying the correct behavior.

Mike

Anna Porter

I'm having another issue with button states.  I, like R Rothrock probably did, watched the latest tutorials about How to Build a Tabs Interaction Quickly and Easily and was excited to try it.  The author/narrator was right.  Building slide with layers was pretty easy but I was all extra excited about the cool things he did to make his tabs look different.  That has neither been Quick or Easy!  First of all I had to discover on my own that the added little chevron he put on tabs that were visited had to be overlaid on the particular slide layer not in the button states.  And even then I could never get mine to look as cool as his.  So I opted for second best and put a small white chevron on the button that looks like an arrow. Then in the button states I did what he did (or so I thought) and replaced the arrow with an x showing the user that that button had been visited.  But when I go to preview and "visit" a button the chevron shows beneath the "x".  Can someone help? 

Maybe that same author/narrator could do a tutorial how making the "cool" looking buttons!

Johnathan Brouwer

Is the white box part of the background slide? I too love the pointers on each layer but struggled to get them to function. 

Love the tutorials, but I think Articulate has to consider when making these that the majority of us out here are new and sometimes don't pick up on the fast pace of the heros presenting....

Mike Enders

Johnathan,

In this particular instance it is part of the background.  If you add your own white box while you're building from scratch, you'll want to make sure that the buttons are "in front" of the box (higher up on the timeline) so that the chevron in the selected state of the button appears on top.

Mike

PS.  Just a reminder, the pointers (chevrons) are actually in the button states vs. being on a new slide layer.

Laura Buck

I'm also having problems with button states.  I've created actual buttons, as opposed to using other objects and format painting them to have states like buttons.  I have the default Normal, Hover, Down, Disabled, and Visited states that are auto-created when creating the button.  I then added a Selected state from the built-in options.  I have 5 buttons on my slide, and each displays a different layer when clicked.  Initial state is "Normal."  I want the button that was pushed to show the Selected state, which it does.  However, when the user clicks another button, the buttons that were already pushed retain the Selected state, instead of showing the Visited state.  I want the differentiation so the user knows which buttons they've pushed, which they haven't, and which they're currently viewing.  I have a coworker who built buttons this way, and the functionality works perfectly!  But mine does not, and I have no idea why.  I have found that if I click the button again (that is in a Selected state), it turns to Visited.  But only after being pressed twice.

Can you help?  Thanks!!

Mike Enders

@Laura,

You'll need to add all of the buttons to a button set.  This will toggle them back and forth and only allow one at a time to be in the selected state.  So...select all the buttons, right click, and click button sets and then button set 1.  This adds them all to the same button set and should achieve your desired outcome.

@Anna,

The picture fills are simply textures created in Fireworks.  I've attached them here for you.  But yes, a solid fill would also work wonderfully.  

Anna Porter

Okay...so I guess I still haven't resolved all my issues.  When I'm editing states for my rectangles I give the normal and hover states a little arrow and on the visited state I put an "x".  But when I preview once I select the rectangle the x appears even though I didn't put an x in the selected state and once it switches to visited both the arrow and the x are showing!

Anna Porter

Also, when I preview my lovely selected pentagon doesn't show its pointed end over the selected layer.  It appears to be hidden.  I've tried making my layer go to the back and bringing my rectangles forward but that doesn't work.  Also the "visited" x shows up on my rectangle when it is in the selected state even though I put the x only in the visited state.