Show/hide layers on select/deselect textboxes

Jul 05, 2012

Hi all,

Here's hoping someone can understand my dilemma! I'm trying to set up an activity where a user can click on text items to reveal a speech bubble on another layer. The idea is that this layer will become hidden again if they click on the bubble, if they click on "white space" or if they click again on the trigger textbox. I have managed to get this working on one textbox/speech bubble pair by using the following:

  • Show the speech bubble layer when the state of the textbox is Selected
  • Hide the speech bubble layer when the user clicks outside the speech bubble
  • Hide the speech bubble layer when the user clicks on the speech bubble
  • Change state of textbox back to Normal when you click outside the textbox

Unfortunately, if I add these exact same triggers to the other textbox/bubble pairs on the slide, the textbox select/deselect doesn't work. i.e. The bubble layer will disappear and the text returns to Normal state if I click on the bubble or on white space, but if I click the textbox again to toggle it off, it stays selected and the bubble layer stays visible. Funnily enough the initial pair continues to work.

Has anyone got any idea of what's going on? Or suggestions for a better way of achieving this?

Cheers!

10 Replies
Adrian Dean

Hi Erin,

I did a search for your problem and found something similar. Hopefully the thread below will be of some help. A private message to both of the people on the thread might yield you some answers. I'll play around with it myself, but they will be faster. I'll keep an eye on this.

http://community.articulate.com/forums/p/14860/86170.aspx

Hope this helps somewhat,

Adrian

Greg Damron

Hello Erin, Adrian,

Here's an suggestion that may  help for what you would like to do, good idea from Steve in the other thread:

-add a rectangle shape (or hotspot) to the layer and size it to the entire slide

-set the fill to none if standard object (not needed if hotspot)

-ensure you add this object to the layer last, or set it to be on top

- only one trigger will be needed per layer - if click on the rectangle, then hide layer

This doesn't make use of the selected state of the textbox if that is important, but it does open and close the comment bubbles nicely.

Give it a look and see what you think...

Mel Aclaro

Hi Erin,

It might help if you can upload the story file here -- or some subset of it -- so we might be able to help troubleshoot.  

That said, from what I was able to follow in your initial description, I found myself wondering if perhaps you've inadvertently set up a situation where you have conflicting triggers.  

For example, the last trigger you describe on the first text box...

"Change state of textbox back to Normal when you click outside the textbox"

...will trigger when you click text box #2 if it's on the same slide.  (i.e., Text box #2 fulfills the condition of being outside the first text box, hence, Textbox 1 becomes normal when you click TB#2.)  But, here's the deal:  meanwhile, if the same set of rules is also defined for the second textbox while on the same slide, it's likely becoming similarly conflicted when you click text box #1 again (because, text box #1 is outside of TB#2 and so, will [probably] keep TB#2 in a normal state.)   (It sorta reminds me of those time travel movies where the protagonist causes all kinds of havoc when he meets his earlier self.  But I digress.)

Trace the logic through.  It might be the case that rather than using the somewhat open-ended "...when clicks outside..." condition, that you might instead find it more helpful to specifically identify the specific objects that will cause the action to happen. 

I hope that helps. 

Erin Lawson

Hi Mel et al.

I agree that I've probably created some sort of vicious cycle with the triggers - I think I've been looking at it too long as so far I have failed to work it out! I'm attaching one of my slides here - hopefully someone with a fresh pair of eyes will be able to see what the issue is!

Not all the textboxes have triggers - the one that currently works is the "ISSN" information. The "Taylor & Francis" and "DOI" info are the other two I'm trying to get working.

Many thanks,

Erin

Nancy Woinoski

Hi Erin, I think you over over complicated this interaction. I have edited your file and removed all of the layers.

I also removed all of the triggers.

What I did instead was add a hover state to each of the objects - the hover states contain the text bubbles that you had on the layers.

I also removed the selected states on each of these objects.

The way it works now is that when you hover over the text boxes, the text bubbles appear and when you move off they disappear.

I think this achieves what you are trying to do and does not require the use of layers or triggers.

Let me know if you have any questions.

Greg Damron

Hi Erin,

Nancy has a really great solution and the simplest way to achieve what you are after. Since it seems you may still be getting use to how states, triggers, and layers inter-relate - here's two other ways you may find helpful to take a look at. The first uses a mouseover trigger to display/hide the caption layers. The second uses the same mouseover trigger with just the base layer to change the state of the captions from hidden to normal. Nancy's solution rocks, but it may also be  interesting to look at and see how these work with your content to apply to other situations.

Erin Lawson

Thank you all for your responses and demos - very much appreciated!

Obviously this newbie still needs to get her head around the way the different states work, but hopefully the assistance you have provided will get me on the right track now!

It will be interesting to see if/how the mouseover or hover layer reveals translate to the HTML 5 output on touch devices - that was the reason I was using onclick triggers to begin with (and how it became so complicated!).

Cheers,
Erin

Nancy Woinoski

Ah I see, I think the best way to do this would be to keep your layers but instead of having all those triggers, add a large transparent symbol on each layer - it should cover the slide and should sit on top of the text bubble.

Then just add a trigger to the transparent symbol that says close layer when user clicks the symbol.

On your base slide for each of the clickable text boxes have a trigger that says show layer x when user clicks the text box.

This discussion is closed. You can start a new discussion or contact Articulate Support.