Oh, Muse Gods, impart your knowledge. Show me how to use a State button as a Trigger.

[charliepapasierra]

Oh, wise Muse Gods, I sing thee praises.  You have created website upon website showing your creativity and mastery over all things Adobe without having to use the dark arts of coding.  I hope my panegyric prayers please you and you bestow upon this mere mortal knowledge from on high.

In my first foray into using Muse I have created a static website that includes six, squarish State Buttons laid out in a 2 x 3 panel.  Inside each State Button is a <grouped> image and text box.  My intention is to maintain the State feature of those grouped items, while using the State Button as a Trigger for a Lightbox that will have amplifying text.  The lightbox has a Close button to hide the Lightbox allowing the User to "return" to the page with the six State Buttons.

My feeble Muse-ings have consisted of resizing and placing a similarly-sized transparent Trigger from the Lightbox on top of each of the State Buttons and stacking the layers to ensure the Triggers are on top.  Of course, the Muse Gods will laugh at my attempt because that nullified the State Button feature as the State Button has the transparent Trigger box over and never "senses" the input from the User.  Alas...  What to do?

My questions:

1. Is there a way to assign a State Box as a trigger for a Lightbox, instead of having to use a Trigger?
2. If that doesn't work, is there a way to nest under a Trigger a State Box that will change attributes according to the state?

My efforts have failed thus far proving I am a mere mortal Muse-ling.

[Ussnorway]

1 yes you can have a state button turn a lightbox on by just placing the lightbox inside the state button

2 I'm not sure what you want here but you could have a state button with different states as a trigger yes

example demo = lightbox

the accordion and basic com-widget allow you to see how a state button is different... there IS a second state button beside these that only shows on mouse over state i.e, is hidden

[charliepapasierra]

Thank you for your guidance, Ussnorway​.

I was able to drop and drag a lightbox in to the state button, but I am still a little confused on what to do with the Trigger box?  Do you have any guidance on what order the layers should be in, and the size of the Trigger box?

Thank you.

[Ussnorway]

every design is different but as a basic rules;

• I always make the design elements first, so I would make the state button and place it where it goes + the lightbox in its spot... then I would "cut" (not drag and drop) and paste the lightbox into the state button because that has less change of error.
• I tend to make the trigger (just one) the same size as the state button so that it doesn't matter where a user clicks it to open the lightbox... start from the top left corner whenever resize a object that is inside another.
• layers are not generally an issue because the lightbox | state button are seen as one [thing] so they all move to the same design layer... when you turn the lightbox on it rendors on top of anything else

if you still have problems,

I recommend you make a simple .muse file with just the state button and lightbox as two parts then share that from Adobe CC or a dropbox so we can see what you want to make... if it can be done then one of the guys here will quickly put it together for you and if not then perhaps we can suggest a different fix but we would need the files

[charliepapasierra]

I believe you have addressed my concern with the following: "layers are not generally an issue because the lightbox | state button are seen as one".  Thank you.

[charliepapasierra]

Good day, Ussnorway​

I am at a bit of a loss.  I added the The order and Status Buttons are now not working as expected after adding a Lightbox into the State Button.

Here is a lean example of what I am trying to do.

Please let me know what I have done wrong.

Thank you.

[Ussnorway]

Please let me know what I have done wrong.

a lot of simple mistakes that add up;

• lightbox does not hide on click

• svg images should not be set to expand if not needed because when you make the frame (state button) bigger the image will just resize itself over and over... if you do need an expanding svg then set to none until your design is finish then reset it

• a state button assumes states... your design parts have no difference between any of their states so adding a state button is pointless imo

I made you an example page of your design... one is inside a state button and one isn't so please have a look and consider if you do in fact want a state button

example page = state-lightbox

p.s, setting the svg image to none will make building this design much easyier but another trick is to hide the lightbox while fitting it to your state button

[charliepapasierra]

Good day and thank you, Ussnorway​.

A few points of clarification to make sure I am following you:

- In the example page state-lightbox the two icons do no change state upon Mouse Over.  That is the same situation I had in an earlier version of the page and I have not been able to figure that out still.

- Additionally, although the elements inside the Group (e.g., the image you have selected in your screenshot) do not have states, the Group as a whole (image plus text box) do have different states that change upon Mouse Over.  To be clear, I applied the different states to the State Button (with the grouped image and text box inserted inside the State Button) instead of assigning states to individual elements.

The other tips are appreciated.

Thank you,

C.P.

[Ussnorway]

charliepapasierra  wrote

To be clear, I applied the different states to the State Button (with the grouped image and text box inserted inside the State Button) instead of assigning states to individual elements.

to be clear, your design does NOT need state buttons... have a look at this lightbox (I added it to the cc lib for you to play with as well)

state-lightbox2

charliepapasierra  wrote

Basically, the layers and the correct use of nesting is essential to get the effect I wanted.

well done!

[Ussnorway]

charliepapasierra  wrote

I am at a bit of a loss.  I added the The order and Status Buttons are now not working as expected after adding a Lightbox into the State Button.

I had another look at home and imo you are prob getting mixed up by putting too much on your canvas at once... I try to break complex designs down to their base parts and work on them one at a time.

anyway here are your .muse file back and cc lib working out

Adobe Creative Cloud

Adobe Creative Cloud

• state button option

• lightbox option

[charliepapasierra]

Good day, Ussnorway​

I saw you "Pasted in place" the image and text into the Trigger.  I will try Pasting in Place the State Button and see if that works.

Thank you,

C.P.

[charliepapasierra · Accepted solution]

Many thanks to Ussnorway​ who provided me with the insight in the video above to create the effect I wanted.

Basically, the layers and the correct use of nesting is essential to get the effect I wanted.

To create the effect:

1. Create a text box
2. Create an image box
3. Group the text box and image box together
4. Create a State Button
5. Cut and Paste in Place the Group in a State Button
6. Create a Lightbox
7. Cut the State Button
8. Select the Trigger button and Paste in Place the State Button.

See the structure below.

The result is a State Button that opens a Lightbox.

I am not sure if I created the equivalent of Rube Goldberg code, but I like the effect.