7 Replies Latest reply on May 24, 2006 8:46 AM by Newsgroup_User

    Fireworks 8 button/animation help

    connie_mack
      I have several layers and 1 small animation. Everything works fine until I stick a button in and it will only work for 3 frames and when I preview the page the button isn't even there. I have tried every layer to see the difference but they just don't seem to be able to work together. I want the animation to run then stop and then I have the buttons. The 3 button states are animating with everything else -- I want them to be buttons not get all happy and animate.... help?
        • 1. Re: Fireworks 8 button/animation help
          Level 7
          connie mack wrote:

          > I have several layers and 1 small animation. Everything works fine until I
          > stick a button in and it will only work for 3 frames and when I preview the
          > page the button isn't even there. I have tried every layer to see the
          > difference but they just don't seem to be able to work together. I want the
          > animation to run then stop and then I have the buttons. The 3 button states
          > are animating with everything else -- I want them to be buttons not get all
          > happy and animate.... help?

          Anything within a slice that contains an animation becomes part of the
          animation. Flash would be a better tool for the kind of thing you are
          trying to do.


          --
          Linda Rathgeber ACE ::: PVII
          http://www.projectseven.com
          Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
          CSS Newsgroup: news://forums.projectseven.com/css/
          -----------------------------------------------------------------------
          Adobe Community Expert - Fireworks
          -----------------------------------------------------------------------
          Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
          • 2. Re: Fireworks 8 button/animation help
            connie_mack Level 1
            quote:

            Originally posted by: Newsgroup User

            Anything within a slice that contains an animation becomes part of the
            animation. Flash would be a better tool for the kind of thing you are
            trying to do.


            --
            Linda Rathgeber ACE ::: PVII
            http://www.projectseven.com
            Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
            CSS Newsgroup: news://forums.projectseven.com/css/
            -----------------------------------------------------------------------

            Unfortunately I can't do that. My school assignment calls me to insert an animated .gif then create roll over buttons using only Fireworks. I've exported it to HTML both ways (optimize: animated gif and optimize: jpeg). The first produces a page where everything starts fine but as soon as the animated gif stops the buttons disappear. The second produces great roll over buttons but no animation.

            • 3. Re: Fireworks 8 button/animation help
              Level 7
              connie mack wrote:

              > Unfortunately I can't do that. My school assignment calls me to insert an
              > animated .gif then create roll over buttons using only Fireworks.

              Just make sure they are in separate slices. You cannot add multiple
              state buttons to an animation in Fireworks. You can add animations to
              rollover buttons, however. Here's how:

              Create the animations first, and export them.

              Instead of using library buttons, or the Button wizard, draw your
              buttons from scratch and add slices to each. Make sure the buttons have
              exactly the same dimensions as the animations.

              You'll use the Swap image behavior to create the rollovers.

              For each button:

              Right click on the slice over the button and choose ADD SWAP IMAGE BEHAVIOR.

              In the Swap image editor, for SHOW THE SWAPPED IMAGE FROM: click the
              IMAGE FILE radio button and browse to the folder you exported your
              animation to. Select the animation you want to use for that button, and
              then uncheck PRELOAD IMAGES. The latter is to ensure that the
              animation starts on the first frame when you mouse over the button.

              Accept the changes and close the Swap image editor.

              Note that you will not be able to preview the image swap in the
              Fireworks workspace. You will be able to test it in browser preview,
              however [f12].

              --
              Linda Rathgeber [PVII] **Adobe Community Expert-Fireworks**
              --------------------------------------------------------------
              http://www.projectseven.com
              Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
              CSS Newsgroup: news://forums.projectseven.com/css/
              Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
              --------------------------------------------------------------
              • 4. Re: Fireworks 8 button/animation help
                connie_mack Level 1

                Okay, so the instructions read: (creating a template for a web page)
                1. create a banner across the page....import your animated logo (a small animation I created)
                2. Include a set of navigation buttons with rollover effects
                blah blah

                ..so I'm trying to add multiple state buttons to an overall image that happens to have a small animated logo on it as well. I sliced it up into separate slices too. From what you are saying I cannot have both unless I make the animation a button.
                • 5. Re: Fireworks 8 button/animation help
                  Level 7
                  connie mack wrote:

                  > ..so I'm trying to add multiple state buttons to an overall image that happens
                  > to have a small animated logo on it as well. I sliced it up into separate
                  > slices too. From what you are saying I cannot have both unless I make the
                  > animation a button.

                  You CAN have an animation and multi state buttons on the same page. You
                  MUST have them in different slices. You can have a banner, and an
                  animation in the same place as long as you slice the banner into
                  different sections and place the animation into one of those sections,

                  A web page is not a single image with stuff attached to the front of it.
                  It is mostly HTML text, with images as accents.

                  Would you mind posting the text of the instruction exactly as it is
                  written? If you can, upload the PNg file to your Web site so we can see
                  where things have gone wonky.

                  --
                  Linda Rathgeber [PVII] **Adobe Community Expert-Fireworks**
                  --------------------------------------------------------------
                  http://www.projectseven.com
                  Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
                  CSS Newsgroup: news://forums.projectseven.com/css/
                  Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
                  --------------------------------------------------------------
                  • 6. Re: Fireworks 8 button/animation help
                    connie_mack Level 1
                    Thanks so much for your help Linda -- irritating huh? To top it off the corporate gods have limited my bandwidth and I can't upload any files to my web site which exceed blah blah blah... I could email it though.

                    I did get the html code to go so you can view the source : http://connie_mckissack.home.mchsi.com/music/connie.htm
                    The PNG wouldn't go since it's over 500 kb but it looks like this: http://connie_mckissack.home.mchsi.com/music/connie.htm

                    I also tried moving the button layer just beneath the web layer. Optimizing the button slice as an animated gif, gif and jpeg.

                    The assignment reads as follows:
                    Design Requirements: You will create a .png file to serve as a template file for the Web pages of the In Motion Designs Web site. See the image on page 215 of the textbook (Training From the Source) as an example of a template file. Complete the following:
                     Create a new Fireworks file 800 pixels x 600 pixels with 72 pixels per inch resolution and a white background.
                     Create a banner across the top of the page - Import the animated In Motion Designs logo that you created in Assignment 3 as part of the banner. Modify the logo if necessary.
                     Include a set of navigation buttons with rollover effects - You may import the rollover navigation buttons that you created in Assignment 2 or create a new set of navigation buttons with the same labels (About Us, Contact Us, etc.).
                     Add any additional graphics or features that you feel are necessary to complete your template design.
                     Preview the image and make any necessary modifications.
                     Save the file as template.png.
                    • 7. Re: Fireworks 8 button/animation help
                      Level 7
                      connie mack wrote:



                      > ? Create a banner across the top of the page - Import the animated In Motion
                      > Designs logo that you created in Assignment 3 as part of the banner. Modify
                      > the logo if necessary.

                      OK. There you will have to slice the banner and add the animation to one
                      of the slices.

                      > ? Include a set of navigation buttons with rollover effects - You may import
                      > the rollover navigation buttons that you created in Assignment 2 or create a
                      > new set of navigation buttons with the same labels (About Us, Contact Us, etc.).

                      No problem. You just add those someplace below the banner.

                      If you want to send your PNG file to me, I'll show you an example of how
                      to do this. <lightly@sc.rr.com>

                      --
                      Linda Rathgeber [PVII] **Adobe Community Expert-Fireworks**
                      --------------------------------------------------------------
                      http://www.projectseven.com
                      Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
                      CSS Newsgroup: news://forums.projectseven.com/css/
                      Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
                      --------------------------------------------------------------