5 Replies Latest reply on Mar 4, 2009 3:19 PM by Newsgroup_User

    psd file into FW...trying to create rollover states

    bdaul Level 1
      Ok, first here is the link to the PSD file I used to load into FW (cs4):

      http://human-landscaping.com/test/soniMENUbar.psd

      Here is the file I tried to get a rollover (state change) in on the first item GALLERY:

      http://human-landscaping.com/test/soniMENUbar.png

      WHAT I did...brought my menu bar (psd) file in. Each menu item (button) is unique with it's background and text.
      I then CREATED BUTTOM SYMBOLS for each navigation button. I created a hotspot on GALLERY. Moved my cursor in FW off the image and the Symbol Properties opened. BUT...the STATE only has one choice STATE 1. When I looked at the Lynda.com video there were multiple choices...rollover, mouse down...

      I have read links from the Forum where people said this explained everything. I guess it explains everything if you already know what the answer is. I am at a loss on how to proceed. Any help would be appreciated.

      I should add...when the cursor rolls over I want the box to display a shadow under it.

      I am dreading the next part ... drop down choices from each navigation category!!!

      Thanks, humble and ignorant Bill
        • 1. Re: psd file into FW...trying to create rollover states
          Level 7
          bdaul wrote:
          > Ok, first here is the link to the PSD file I used to load into FW (cs4):
          >
          > http://human-landscaping.com/test/soniMENUbar.psd
          >
          > Here is the file I tried to get a rollover (state change) in on the first item
          > GALLERY:
          >
          > http://human-landscaping.com/test/soniMENUbar.png
          >
          > WHAT I did...brought my menu bar (psd) file in. Each menu item (button) is
          > unique with it's background and text.
          > I then CREATED BUTTOM SYMBOLS for each navigation button. I created a hotspot
          > on GALLERY. Moved my cursor in FW off the image and the Symbol Properties
          > opened. BUT...the STATE only has one choice STATE 1. When I looked at the
          > Lynda.com video there were multiple choices...rollover, mouse down...

          No hotspots are necessary

          Try it this way:

          1-open the PSD file in FW CS4 and delete the text on the buttons. You'll
          put it back later.

          2-Select the first button and convert it to a button symbol (Modify >
          Symbol > Convert to Symbol > click the Button radio button.

          A green slice guide will appear over your new symbol

          3-double click on the green slice guide to open the new button symbol in
          the symbol editor window

          4-open the States panel (Window > States). This step isn't really
          necessary, but it's helpful in getting used to thinking about how states
          work in Fireworks.

          Back in the Property inspector, you'll see the word UP selected for
          State. In the States panel, you'll see that State 1 is selected.

          5-type the text (gallery) on the button symbol

          6-once you've typed the text, change the State selector on the Property
          inspector from Up to Over.

          Note that when you do this, State 2 is selected in the States panel.

          7-if you wish to use the same image and text you used for the Up state,
          click on the Copy UP Graphic button in the Property inspector. You can
          edit both to make them look different without the originals on the Up
          state being changed.

          If all you want is a simple two state rollover, then you are finished

          8-click on the left facing arrow at the top left of the document window
          to leave the symbol editor.

          Repeat for the other buttons.

          --
          Linda Rathgeber - Adobe Community Expert
          http://www.adobe.com/communities/experts/members/8.html
          --------------------------------------------------------------
          • 2. Re: psd file into FW...trying to create rollover states
            bdaul Level 1
            Linda...

            I am so down/frustrated...I believe I followed your instructions...there is still only STATE 1...see the image of my screen...this should help you understand what I did:

            http://human-landscaping.com/test/Picture2.png

            I know once upon a time I did this...THANKS...
            • 3. Re: psd file into FW...trying to create rollover states
              Level 7
              bdaul wrote:
              > Linda...
              >
              > I am so down/frustrated...I believe I followed your instructions...there is
              > still only STATE 1...see the image of my screen...this should help you
              > understand what I did:
              >
              > http://human-landscaping.com/test/Picture2.png
              >
              > I know once upon a time I did this...THANKS...

              Did you create a second state?

              --
              Linda Rathgeber - Adobe Community Expert
              http://www.adobe.com/communities/experts/members/8.html
              --------------------------------------------------------------
              • 4. Re: psd file into FW...trying to create rollover states
                bdaul Level 1
                I create a STATE 2. I see it on the STATES menu...when I click on STATE 2 on the STATES menu then the images on my workspace disappear. The PROPERTIES says STATE: STATE 2. Nowhere do I see mouse over, up, down...all the things I saw in a tutorial. ALSO in STATE 1 all my layers show up in the LAYER menu...when I click on the STATE 2 (of the STATE menu) I end up with NOTHING in the LAYERS list (explaining why everything goes away when I change STATE.

                I thought I was suppose to see UP, DOWN, OFF or whatever in the PROPTERTIES STATE list?

                Am I an idiot not knowing this stuff?

                Thanks Linda!
                • 5. Re: psd file into FW...trying to create rollover states
                  Level 7
                  bdaul wrote:
                  > I create a STATE 2. I see it on the STATES menu...when I click on STATE 2 on
                  > the STATES menu then the images on my workspace disappear. The PROPERTIES says
                  > STATE: STATE 2. Nowhere do I see mouse over, up, down...all the things I saw
                  > in a tutorial. ALSO in STATE 1 all my layers show up in the LAYER menu...when
                  > I click on the STATE 2 (of the STATE menu) I end up with NOTHING in the LAYERS
                  > list (explaining why everything goes away when I change STATE.
                  >
                  > I thought I was suppose to see UP, DOWN, OFF or whatever in the PROPTERTIES
                  > STATE list?
                  >
                  > Am I an idiot not knowing this stuff?
                  >
                  > Thanks Linda!
                  >
                  There are two ways to create rollovers in FW. You can use the Button
                  Symbol, which has its own internal set of states (up, over, down, over
                  while down)

                  Or you can create simple rollovers by adding a second state to your main
                  design, and adding the rollover graphic to that state.

                  Both graphics must be the same size, and you will need to add a slice in
                  order to generate the rollover effect.

                  So here are the basic steps if you do not use the button symbol.

                  In state one (your main design) you add your up state.
                  Copy this to the clipboard,
                  Create a new state
                  paste the copied button into State 2
                  Without resizing the graphic, change it somehow (make it brighter,
                  darker, etc)
                  Go back to State 1.
                  Right-click on the state 1 button and choose Insert Rectangular slice
                  Now click on the white circle in the middle of the slice and choose Add
                  simple rollover.

                  Assuming your button is rectangular, that's all you have to do (but you
                  must do it for each button). If your button is oval or odd-shaped, you
                  will have to make sure the states also share the main background
                  image/color of your main design. Otherwise, you will get an undesirable
                  effect on export.

                  Here's a link to the FW help file on the subject.

                  http://help.adobe.com/en_US/Fireworks/10.0_Using/WS4c25cfbb1410b0021e63e3d1152b00d35d-7ff1 .html



                  --
                  Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                  http://www.communityMX.com/
                  ---
                  .:Adobe Community Expert for Fireworks:.
                  http://www.adobe.com/communities/experts/members/206.html
                  ---