8 Replies Latest reply on Sep 27, 2008 8:47 AM by Newsgroup_User

    EEk! How Do I Animate in FWCS3?

    webgyrl1
      Hi!

      I am quite stuck! I just realized that Photoshop CS3 no longer has Adobe ImageReady and I am trying to do a simple animation of a feather tickling a cat. I have NO idea how to do this in FWCS3 as the controls are different to me. I have a deadline of midnight tomorrow to get this done. I was wondering if someone might explain to me how do I make the feather go up and down on the cat's belly.

      What I have tried is:
      I have a 2 layer PSD file

      I have taken that into Fireworks

      The feather and hand is the top layer and the base of the graphic is on the bottom

      I have converted the hand+feather to a symbol

      I copied and pasted the hand+feather symbol graphic

      I placed the images in the top and bottom positions and tweened the instances with Distribute to Frames checked.

      The frames tween, but I lose my bottom layer (the base).


      I can't figure out how to do it and keep the base.

      Any help out there? You can download the PNG file here:
      https://www.yousendit.com/download/bVlEbUpTeFVoeVozZUE9PQ

      I really would just like instructions on how to do it as I really need to learn how to use FW to animate. I tried a few tutorials, but they were bouncing ball ones and didn't really help me out.

      Thanks so much!
        • 1. Re: EEk! How Do I Animate in FWCS3?
          Level 7
          webgyrl1 wrote:

          >
          The frames tween, but I lose my bottom layer (the base).


          You can solve your problem by "sharing" the frames. Double click on the
          header bars of the layers and check the Share across frames boxes.

          --
          Linda Rathgeber - Adobe Community Expert
          http://www.adobe.com/communities/experts/members/8.html
          --------------------------------------------------------------
          • 2. Re: EEk! How Do I Animate in FWCS3?
            webgyrl1 Level 1
            quote:

            Originally posted by: Newsgroup User
            webgyrl1 wrote:

            >
            The frames tween, but I lose my bottom layer (the base).


            You can solve your problem by "sharing" the frames. Double click on the
            header bars of the layers and check the Share across frames boxes.

            --
            Linda Rathgeber - Adobe Community Expert
            http://www.adobe.com/communities/experts/members/8.html
            --------------------------------------------------------------



            Hi again Linda!

            I am still running into an issue where when I do as you instructed, then go ahead and create my symbol, copy and paste it and then tween, all the 'tweens' show up in the Layers area, and no extra frames, therefore no animation.

            I have screencaptured the process for you to see what I did. Below is a link to download a WMV video of my exact steps.
            https://www.yousendit.com/download/bVlEV0p6QzdmVFlLSkE9PQ
            The video is 3.6MB

            I got an extension on this project, thank goodness. I feel a bit naked not knowing how to do a thing in the FW environment. I must spend some time learning over the weekend.

            Thanks Linda!
            • 3. Re: EEk! How Do I Animate in FWCS3?
              Level 7
              webgyrl1 wrote:

              > I am still running into an issue where when I do as you instructed, then go
              > ahead and create my symbol, copy and paste it and then tween, all the 'tweens'
              > show up in the Layers area, and no extra frames, therefore no animation.

              Hi webgyrll,

              Animate the frames, not the layers.

              Let's say that you have a layer with a background image that you do not
              want to move, plus a layer with a figure that you want to make appear to
              walk across the background layer.

              First convert the figure to a symbol. Use the animate wizard to make the
              figure move the way you want it to. Play your animation to see if it is
              correct. You'll notice that the background layer is found on frame 1 of
              the animation only. To distribute it to all the frames and make sure
              that it remains behind the animated figure(s), ensure that it is on
              Layer 1, then either double click on the little folder icon next to the
              layer name or number and check the Share Across Frames box, or click on
              the background image to select it, and then use the Copy to Frames
              command from the Frames panel menu.

              --
              Linda Rathgeber - Adobe Community Expert
              http://www.adobe.com/communities/experts/members/8.html
              --------------------------------------------------------------
              • 4. EEk! How Do I Animate in FWCS3?
                SiamJai Level 2
                quote:

                Originally posted by: webgyrl1
                Hi!

                I am quite stuck! I just realized that Photoshop CS3 no longer has Adobe ImageReady and I am trying to do a simple animation of a feather tickling a cat. I have NO idea how to do this in FWCS3 as the controls are different to me. I have a deadline of midnight tomorrow to get this done. I was wondering if someone might explain to me how do I make the feather go up and down on the cat's belly.

                I can't figure out how to do it and keep the base.

                Any help out there? You can download the PNG file here:
                https://www.yousendit.com/download/bVlEbUpTeFVoeVozZUE9PQ


                Hi webgyrl1,

                I played around with your file... please see the result here. Is this the kind of animation you'd like to do? If so, you can download the source png here (right-click the link, "save as").

                Briefly, I created another layer below the current one, and then put the background image object into that layer. Then I set that bottom layer to "share across frames" and exported the result.

                I hope that helps.


                SiamJai
                ~~~~
                http://design.thaiwonders.com - Innovative Fireworks Tutorials
                • 5. Re: EEk! How Do I Animate in FWCS3?
                  webgyrl1 Level 1
                  Hi Linda and Siam!

                  OK yeah! I think I've got the simple stuff down.

                  I created a new Layer and put the background in it. Then with just my one object that I wanted to move in the feather/hand layer I then converted to Symbol and positioned start and finish and then clicked on the Frames tab and then did the tweening. That worked great.

                  Now one more question... if I wanted to show the hand first going from top to bottom and then bottom to top so that it is a back and forth motion (as you would do when tickling someone with a feather), is there a way to create new tween frames and reverse the motion?

                  Thanks so much! I am going to spend the weekend working on this animation stuff. Is there a good series of tutorials offered on animating with Fireworks at all?

                  Thanks to you both!
                  • 6. Re: EEk! How Do I Animate in FWCS3?
                    webgyrl1 Level 1
                    Oh BTW SiamJai, the links in the header and body of your web site are not working to get to your tutorials. I just get a blank page.

                    Thanks!
                    • 7. EEk! How Do I Animate in FWCS3?
                      SiamJai Level 2
                      Hi there webgyrl1!

                      quote:

                      Now one more question... if I wanted to show the hand first going from top to bottom and then bottom to top so that it is a back and forth motion (as you would do when tickling someone with a feather), is there a way to create new tween frames and reverse the motion?

                      Sure thing. There are a couple ways to do this, but the shortest is to go the second frame of your current animation, switch to layer view, copy the symbol there. Then jump to the last frame of the animation and paste the copied symbol into the layer with a feather already in it. (So, in that layer there should be two feather symbols now.) Then do like you did before: select both symbols and tween them. This should add a reversed animation sequence leading back to the first frame smoothly. :)

                      Unfortunately, animation is a mostly unexplored feature of Fireworks, and as such, it's hard to find good tutorials on it. I have a few pieces in the works, but I can't progress with them until I fix that problem you saw on my site. It's been like that for a while now and it keeps giving me headaches. :-(

                      Anyway, there is one off-site tutorial I wrote on Fireworks animation; you can check it out on the Fireworksguru forum.

                      Best luck with learning animation in Fireworks! ^_^
                      • 8. Re: EEk! How Do I Animate in FWCS3?
                        Level 7
                        webgyrl1 wrote:
                        > Hi Linda and Siam!
                        >
                        > OK yeah! I think I've got the simple stuff down.
                        >
                        > I created a new Layer and put the background in it. Then with just my one
                        > object that I wanted to move in the feather/hand layer I then converted to
                        > Symbol and positioned start and finish and then clicked on the Frames tab and
                        > then did the tweening. That worked great.
                        >
                        > Now one more question... if I wanted to show the hand first going from top to
                        > bottom and then bottom to top so that it is a back and forth motion (as you
                        > would do when tickling someone with a feather), is there a way to create new
                        > tween frames and reverse the motion?
                        >
                        > Thanks so much! I am going to spend the weekend working on this animation
                        > stuff. Is there a good series of tutorials offered on animating with Fireworks
                        > at all?
                        >
                        > Thanks to you both!
                        >
                        I have a few articles on Community MX about Creating GIF animations, if
                        you're interested:

                        http://tinyurl.com/6fwr4z

                        HTH

                        --
                        Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                        http://www.communityMX.com/
                        CommunityMX - Free Resources:
                        http://www.communitymx.com/free.cfm
                        ---
                        .:Adobe Community Expert for Fireworks:.
                        Adobe Community Expert
                        http://tinyurl.com/2a7dyp
                        ---
                        See my work on Flickr
                        http://www.flickr.com/photos/jim_babbage/