3 Replies Latest reply on Feb 22, 2009 6:55 AM by Newsgroup_User

    Button symbol difficulties

    Level 7
      I swear I saw this work correctly in an earlier FW CS4 project, but now
      I'm really stuck for some reason. The whole handling of symbols is a bit
      confusing to me, but I think that I'm creating a button symbol in the
      correct way. Here are the steps for creating a simple rectangular button
      with background texture for use in a horizontal nav bar:

      1) Created a rectangle 90x26 pixels and filled it with my texture. OK so
      far.

      2) Did Modify->Symbol->Create Symbol and turned it into a Button Symbol
      with 9-slice enabled

      3) Dbl-clicked to open symbol editing mode, then created text on the
      button ("Home") and used the alignment panel to center it.

      4) Went back to the main page, and I had my first button.

      The problem occurs when I drag the symbol from the library to the canvas
      and want to modify it to create a new button. Since my menu text is of
      varying length, I want to change the width of the button in addition to
      changing the text. So I should be able to do the following things:

      a) Change the text, which I can see in the box labeled "Text" in the
      properties panel when the symbol is selected.
      b) Change the width of the button by entering a new value in the Width
      box in the prop panel.

      Neither of these actions works correctly. The main weirdness is that
      when I change the width, the text in the button jumps up from its
      centered position to rest against the top edge of the button rectangle,
      and of course I can't move it since that's not an instance-editable
      property. Changing the text also causes strange behavior such as the
      text wrapping, or the background is "shifted" so that the page
      background shows through. If I dbl-click the instance to go into
      symbol-editing mode, I see my original symbol with everything correctly
      placed.

      So am I doing something wrong? As I said, I know I created another
      design with similar button symbols where I was able to edit the text,
      etc. Any practical guidelines on creating and using button symbols would
      be appreciated.

      Doug G
        • 1. Re: Button symbol difficulties
          Level 7
          Doug Gordon wrote:
          > I swear I saw this work correctly in an earlier FW CS4 project, but
          > now I'm really stuck for some reason. The whole handling of symbols is
          > a bit confusing to me, but I think that I'm creating a button symbol
          > in the correct way. Here are the steps for creating a simple
          > rectangular button with background texture for use in a horizontal nav
          > bar:
          >
          > 1) Created a rectangle 90x26 pixels and filled it with my texture. OK
          > so far.
          >
          > 2) Did Modify->Symbol->Create Symbol and turned it into a Button
          > Symbol with 9-slice enabled
          >
          > 3) Dbl-clicked to open symbol editing mode, then created text on the
          > button ("Home") and used the alignment panel to center it.
          >
          > 4) Went back to the main page, and I had my first button.
          >
          > The problem occurs when I drag the symbol from the library to the
          > canvas and want to modify it to create a new button. Since my menu
          > text is of varying length, I want to change the width of the button in
          > addition to changing the text. So I should be able to do the following
          > things:
          >
          > a) Change the text, which I can see in the box labeled "Text" in the
          > properties panel when the symbol is selected.
          > b) Change the width of the button by entering a new value in the Width
          > box in the prop panel.
          >
          > Neither of these actions works correctly. The main weirdness is that
          > when I change the width, the text in the button jumps up from its
          > centered position to rest against the top edge of the button
          > rectangle, and of course I can't move it since that's not an
          > instance-editable property. Changing the text also causes strange
          > behavior such as the text wrapping, or the background is "shifted" so
          > that the page background shows through. If I dbl-click the instance to
          > go into symbol-editing mode, I see my original symbol with everything
          > correctly placed.
          >
          > So am I doing something wrong? As I said, I know I created another
          > design with similar button symbols where I was able to edit the text,
          > etc. Any practical guidelines on creating and using button symbols
          > would be appreciated.
          >
          > Doug G
          I boiled this down to a simple PNG with only the button in question:
          http://wdgordon.com/images/TestButton.png. Open this in FW and try to
          change the width of the button. It's also in the Document Library if you
          want to drag another copy to the canvas. As I said, I'm sure I had this
          working previously.
          • 2. Re: Button symbol difficulties
            Level 7
            Doug Gordon wrote:
            > Doug Gordon wrote:
            >> I swear I saw this work correctly in an earlier FW CS4 project, but
            >> now I'm really stuck for some reason. The whole handling of symbols is
            >> a bit confusing to me, but I think that I'm creating a button symbol
            >> in the correct way. Here are the steps for creating a simple
            >> rectangular button with background texture for use in a horizontal nav
            >> bar:
            >>
            >> 1) Created a rectangle 90x26 pixels and filled it with my texture. OK
            >> so far.
            >>
            >> 2) Did Modify->Symbol->Create Symbol and turned it into a Button
            >> Symbol with 9-slice enabled
            >>
            >> 3) Dbl-clicked to open symbol editing mode, then created text on the
            >> button ("Home") and used the alignment panel to center it.
            >>
            >> 4) Went back to the main page, and I had my first button.
            >>
            >> The problem occurs when I drag the symbol from the library to the
            >> canvas and want to modify it to create a new button. Since my menu
            >> text is of varying length, I want to change the width of the button in
            >> addition to changing the text. So I should be able to do the following
            >> things:
            >>
            >> a) Change the text, which I can see in the box labeled "Text" in the
            >> properties panel when the symbol is selected.
            >> b) Change the width of the button by entering a new value in the Width
            >> box in the prop panel.
            >>
            >> Neither of these actions works correctly. The main weirdness is that
            >> when I change the width, the text in the button jumps up from its
            >> centered position to rest against the top edge of the button
            >> rectangle, and of course I can't move it since that's not an
            >> instance-editable property. Changing the text also causes strange
            >> behavior such as the text wrapping, or the background is "shifted" so
            >> that the page background shows through. If I dbl-click the instance to
            >> go into symbol-editing mode, I see my original symbol with everything
            >> correctly placed.
            >>
            >> So am I doing something wrong? As I said, I know I created another
            >> design with similar button symbols where I was able to edit the text,
            >> etc. Any practical guidelines on creating and using button symbols
            >> would be appreciated.
            >>
            >> Doug G
            > I boiled this down to a simple PNG with only the button in question:
            > http://wdgordon.com/images/TestButton.png. Open this in FW and try to
            > change the width of the button. It's also in the Document Library if you
            > want to drag another copy to the canvas. As I said, I'm sure I had this
            > working previously.

            I can reproduce the problem every time in CS4. I'll try it out in CS3
            and let you know.

            --
            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
            ---
            • 3. Re: Button symbol difficulties
              Level 7
              Jim Babbage .:CMX:. & .:Adobe Community Expert:. wrote:
              >
              > I can reproduce the problem every time in CS4. I'll try it out in CS3
              > and let you know.
              >
              Thanks, Jim. FYI and for anyone else who's interested, here is how I
              finally got it working yesterday (or at least I got the results I was
              looking for!).

              1) Create the background button object. I found that it's best to make
              the prototype button about as wide as you expect to require, because
              fewer bad things seem to happen when you shrink a button vs. expanding it.

              2) Use the Text Tool to create the label text on the button.

              3) Important: Use the scaling handles to expand the text container box
              to just about the width of the button.

              4) In the text properties, click the centered-text button to center the
              text in the text box & button.

              Creating the button symbol from these objects now works as expected. I
              can edit the text and resize the button width without any dimensions
              changing or other weirdness.

              I think that the critical thing is the resizing of the text container
              box; FW CS4 might have problems with the automatic resizing of that box.
              I had assumed that the text box would change size according to the text
              that you enter, but apparently that's not how it works.

              Whew!

              Doug G