1 Reply Latest reply on Oct 25, 2009 12:31 PM by pixlor

    innitial question on animating an existing image in CS4

    trinaz Level 1

      I would like to add a little 'flare' to an existing gif on my site.  Don't want anything real significant...just some animation to draw attention to the gif in the top right hand corner.  maybe the red just 'waving' slowly left to right and back...or the telephone maybe vibrating a little to imitate ringing ?

       

      Can I just start with this existing gif...and how/where should I approach this...

      clicktocall.gif

       

      Thanks, Tim

        • 1. Re: innitial question on animating an existing image in CS4
          pixlor Level 4

          I'm not sure what you mean by "the red waving." The phone wiggling could be a nice touch, though, especially if you set the delay on one of the normal positions to be rather long.

           

          If you want to make an animated .gif of the phone wiggling, you'll have to make an image which is just the phone and an image which is your button without the phone. Cutting the phone out may be a bit tricky, since it is so small. But if you don't have it wiggle very much, you should be okay with some red pixels around the phone. Export this as a .gif or .png. (Don't save, export). To make a version of your current button without the phone, copy a row of pixels between the phone and the text and paste that - multiple times - over the phone. Probably the best thing at this point is to export that as a new .gif or .png file, as well.

           

          For the animation, start a new Fireworks .png document. Bring in your new button without the phone. Put it on its own layer and share that layer across frames. Then, bring in your phone image and make three copies (total of four). Rotate the second one way and the fourth the opposite way. Check the documentation, on how to distribute the objects to frames. They might need to be in their own layers.

           

          Some animated GIF tutorials for various versions of Fireworks (your commands and menus may be different):

          http://www.peachpit.com/guides/content.aspx?g=flash&seqNum=370

          http://www.smartwebby.com/free_tutorials/fireworks_tutorials/graphic_design/animated_GIF_g raphic.asp

          http://www.disdatdesigns.com/fireworks/animation1.shtml

           

           

          An easier modification might be to add a slightly transparent white star or other shape as a glint to your phone, maybe brighten and dim the star as your animation, maybe have it move across the phone. Or you could do have a glint move across the entire button.