10 Replies Latest reply on Jul 27, 2009 8:21 PM by SiamJai

    Animated GIFs

    Bullfn33 Level 1

      I can't get this to work. I've followed three different tutorials and my image is not animating at all. I have a button image with text on the right and, on the left, I simply want to cycle through six small images displaying one at a time. Before adding in all the images I wanted to try cycling back and forth between two images. I start by selecting animated gif from the optimize tab. Then I place the first image in Frame 1, then I add Frame 2, delete that image and import the next image. But when I press the play button nothing happens. What am I missing?

        • 1. Re: Animated GIFs
          Panos Zygopoulos Level 3

          Open the states panel and from the top right tiny menu add states. Then place your image in the second state.

          • 2. Re: Animated GIFs
            Bullfn33 Level 1

            I'm using fireworks and I don't see a states panel. I was under the impression I have to use frames in the Pages, Layers and Frames panel.

            • 3. Re: Animated GIFs
              Jim_Babbage Level 4

              Please post a link to the PNG file.



              • 4. Re: Animated GIFs
                Bullfn33 Level 1

                It's not online anywhere but I'll attach the button and the six images that I need to cycle through in the open space on the left side of the button.

                • 5. Re: Animated GIFs
                  Panos Zygopoulos Level 3

                  You are right, i use Fw cs4, which has states panel, and not frames.

                  • 6. Re: Animated GIFs

                    Then I place the first image in Frame 1, then I add Frame 2, delete that image and import the next image. But when I press the play button nothing happens. What am I missing?



                    The reason your animation didn't work is because you have added the image to a shared layer.


                    The fact that you needed to delete the first image in the new frame shows that you must have added the first image to a shared layer by accident. Normally, when you add a new frame, the image you want to show up in the first frame automatically disappears from the new frame, therefore no deletion is necessary.


                    To do it correctly, make sure that the animating objects are in a new, non-shared layer. Add the first object to that layer in the first frame. Then make a new frame (notice that the first object will not show up in the new frame - no deletion needed). Add the second object to the same - now empty - layer in the second frame. Add the third frame etc...


                    Repeat this cycle until all your objects are in place and press play. The animation will play.


                    You might want to adjust the frame delay to a larger value. For this type of animation, 100/100 does the job. (Do not use the Animated GIF preset in the Optimize window. It will reset the frame delay values to seven - a known bug in Fireworks. Use the Export Preview dialog Ctrl+Shift+X instead.)



                    For a quickstart, check out the file attached to this post. It's your button with an animation layer titled "Logo", and three of the six images already in place and working. By the time you finish the other three, you'll know this type of animation well.


                    It's really just the tip of the iceberg, however. If you are interested in learning more about animating with Fireworks, I wrote a couple of in-depth tutorials on the subject.


                    Good luck and happy fireworking! :-)





                    Innovative Fireworks Tutorials

                    1 person found this helpful
                    • 7. Re: Animated GIFs
                      Bullfn33 Level 1



                      You were right, I wasn't applying separate layers. I'm not experienced at photo editing and I need to learn how to use layer functioning. Thank you so much for the pointers.


                      I have my image animating the way I want now but I can't for the life of me get the background transparent to show up transparent on my site. It appears transparent in the editor and I go to export/save it and it shows up on my site with a white background every time. I need it transparent because it is going on a colored page background.


                      If someone can get these bad boys to stick with a transparent bg I would appreciate it. There are actually two images..I use one for a mouseover effect. I will keep trying and post back if I get it to show up right.


                      Thanks again all.

                      • 8. Re: Animated GIFs
                        SiamJai Level 2

                        Transparency can be enabled in the Image Preview dialog (Ctrl+Shift+X). There is a dropdown somewhere towards the bottom left of that window. Normally I choose alpha transparency and - in case of GIFs - add a white matte.


                        However, in this case the transparency will mess the image up. It's because GIFs are not good at displaying gradients, and absolutely not recommended for partially transparent gradients. Unfortunately, your image has both. The rounded rectangle gradient shows some banding but it's still still okay. The real problem is the drop shadow effect that's applied to the rectangle. GIFs and semi-transparent gradients such as this drop shadow don't go well.


                        I suggest removing the drop shadow live effect, and then saving the GIF with alpha transparency. Make three versions: one with a white matte, another one with no matte (no color selected) and finally one with a matte of the webpage's background color. See which one makes the animation fit in better.


                        If none of those produce the desired result, take a screenshot of the webpage where the animation will appear, and then edit the actual background into the animation and export it as such. No need to worry about transparency and can use drop shadows. The disadvantage is that this GIF will be suitable only for that particular background.



                        Good luck! :-)






                        Innovative Fireworks Tutorials

                        • 9. Re: Animated GIFs
                          Bullfn33 Level 1

                          I matched the background color of the web page and added the drop shadow back so it looks like similiar png buttons above it. It works fine.


                          Thank you for your help and suggestions!

                          • 10. Re: Animated GIFs
                            SiamJai Level 2

                            You're welcome. I'm glad it worked out.