6 Replies Latest reply on Aug 26, 2009 8:52 AM by Dave Hogue

    Slices

    epalencar

      I am trying to get something to work on a prototype project I am working on.  Here is my dilemma:

       

      I have 3 radio buttons on a master page.  The first radio button shows information regarding a loan contract directly below the radio button.  The second radio button, when clicked should show vehicle information in the same area below the radio buttons.  Then the third radio button should show dealer information in the same area.  Where I am running into issues is you cannot have multiple slices on top of each other.  Is there any way I can set this up, except different pages, so when the different radio buttons are clicked the information populates (overwrites) in the same area based upon the active radio button?  Any ideas would help.  Thanks.

        • 1. Re: Slices
          pixlor Level 4

          Why not just export the pages one way and then edit the code for the two pages you want different? Much less work that way.

          • 2. Re: Slices
            Dave Hogue Level 2

            You can do this all from a single page with just four slices and three states (or frames if you using CS3 or earlier.) Here's how to do it on a single page:

             

            (1) Draw slices over each radio button and over the area where you want the content to swap out.

             

            (2) On State 1, the content area should include the loan contract info.

             

            (3) On State 2, the content area should include the vehicle info.

             

            (4) On State 2, the content area should include the dealer info.

             

            Select the slice over the first radio button, click on the circle with cross-hairs that appears in the middle, and drag it to the content area slice. A dialog will appear asking for the state to swap images from, so for button 1 choose State 1, then click on More Options and UNCHECK "Restore Image onMouseOut." Now open the Behaviors panel and make sure the radio button slice is selected - you'll see one event in the behaviors list for "Swap Image", but it is "onMouseOver", so click the down arrow and change that to "onClick."  (You've just added a behavior that will display the content from State 1 when you click the first radio button.)

             

            Repeat these steps for each radio button slice, but make sure that radio button two swaps images for State 2 and radio button three swaps images for State 3.

             

            If you want to get more involved, you can also add rollover behaviors to the radio buttons, because slices can have multiple behaviors. Copy the radio buttons from State 1, then switch to State 2 and paste them. Update each radio button on State 2 to have a rollover look. Return to State 1 and select the first radio button slice, right-click, and choose "Add Simple Rollover Behavior" - this will swap the radio button image from State 1 with State 2 when you roll your mouse over that slice area. Select a radio button slice and look in the Behaviors Panel - you'll see two events for that slice: one Swap Image (which we added first) and one Simple Rollover.

             

            (NOTE: If you need the radio buttons to live on a Master Page, it gets more complicated, because slices on the Master Page cannot be easily connected to slices that exist only on child pages. I recommend starting with this approach first to get more familiar with creating image swapping.)

             

            Hope this helps!

             

            Dave

            • 3. Re: Slices
              epalencar Level 1

              This worked great on a single page!  Thanks for the help.  You mention it is more difficult for a master page...any ideas how to do it?

              • 4. Re: Slices
                Dave Hogue Level 2

                To make complex interactivity work between the master page and regular pages, you need to dive into the JavaScript and create custom behaviors, then edit the HTML to add those behaviors.  We use jquery libraries to accomplish this in our prototypes here - it cannot be done completely within Fireworks. (Remember also that slices and hotspots placed on the master page will appear on every page in your Fireworks file, but they are not "smart" enough to know what page they are on, so they will behave exactly the same way on every page. You cannot add behaviors to the master page and have then act differently on different pages.)

                • 5. Re: Slices
                  epalencar Level 1

                  Okay, thanks.  I will deal with it on one page for now.  Is there a way I can get various states on the radio button (i.e.  when loan_info is selected only the radio button for loan info is active)?

                  • 6. Re: Slices
                    Dave Hogue Level 2

                    Yes. You can add multiple behaviors to a slice, so add a "swap image on click" behavior to the slice over the radio button so that when it is clicked, two things happen:

                     

                    1 - swap out the content area to show the info that corresponds to the selected radio button

                    2 - swap out the image of the radio button in the UP state with an image of the radio button in the DOWN state

                     

                    You will also need to add a "swap image on click" behavior to the radio button slice for EACH other radio button slice to make sure that their images show the UP state when the selected radio button displays a DOWN state.

                     

                    For example, the slice for radio button #1 would have the following behaviors:

                     

                    - swap image on click for the content area

                    - swap image on rollover for the button #1 slice to show a mouseover state (make sure that restore image on mouseout is selected in the options ONLY for this behavior)

                    - swap image on click for the button #1 slice to show it's down state when selected

                    - swap image on click for the button #2 slice to show it's UP state when button #1 is clicked

                    - swap image on click for the button #3 slice to show it's UP state when button #1 is clicked

                     

                    (Yes, it will take 5 behaviors for EACH of the three buttons - if you have more buttons or add more in the future, you'll need to add more behaviors to each button slice to make sure that all unselected buttons show their UP state when the selected button swaps to the DOWN state.)

                     

                    Hope this helps,

                     

                    Dave