5 Replies Latest reply on Apr 7, 2011 2:41 AM by Linda Nicholls

    Interactive Prototype - How do you simulate light boxes with buttons? (CS4)


      I am in the process of mocking up an interactive prototype of the homepage of a web application.  On this homepage, there are various links(text with slices) and fields that when clicked on will trigger a dialog to appear over the top of the page similar to a "light box" effect seen on many other websites/applications.

      The workflow I am trying to simulate is as follows:

      1. User clicks the text link (state 1)
      2. Dialog appears on top of current page (state 2)
      3. User fills in necessary fields then clicks save button (state 2)
      4. Dialog disappears and returns user to base state (state 1)


      The base state of the page is in state 1.  I placed the images/content for the light box in state 2 and then added an onclick image swap behavior to have the link in state 1 trigger the light box (also a slice) to appear in state two.  That all worked fine until I added a save button symbol from the common library to the lightbox dialog in state 2.  When I did that, Fireworks automatically brought be back to state 1 and the button appears on both/all states no matter what I try to do.  Also, my attempts to add an onclick behavior to the save button to bring me back to state 1 haven't worked either.


      So my questions are:

      1. How do I get that button only to appear on state 2?
      2. The "hotspot" for that button or any slice/hotspot in any state appears active for all states but are only valid for when that certain dialog appears.  Is there a way to manipulate button/slice hotspots across states so they are only active in the correct states?
      3. How do I get the Save button to bring me back to the base state?


      Mocking up a lightbox type dialog seems like it would be a pretty common thing to do so I am hoping this is just a simple mistake I am making... any help would be greatly appreciated!


      Here are some images to help illustrate what I am trying to do: 



      Snap165.jpg   Snap168.jpg


      Here is what Fireworks is doing:


      State 1 w/link behavior



      State 1 with button behavior (this appears on state 1 no matter where I add the button but I want it only to appear in state 2)




      State 2





      And here is the actual fireworks png proof of concept: