9 Replies Latest reply on Jan 29, 2008 3:40 PM by Newsgroup_User

    Exporting Rollovers

    Willy_Vegas
      Hello,
      I've made a rollover in FW CS3 that consists of 2 images and followed the directions to the "T" (see below my post). It works great when I hit F12 and preview it, however when I export it as an animated gif, it runs on a continuous loop- not being affected by the rollover. I used the export wizard and tried unchecking the "loop forever" under animation. I just want the text to change color when someone mouses over the image. I don't have the image posted and I haven't used DW CS3 for this particular image. I've put it directly into DotNetNuke. I even tried exporting to a png. Thanks in advance for help. I followed the carefully...

      "To attach a simple rollover to a slice:
      1. Ensure that the trigger object is not on a shared layer. For more information, see Sharing layers.

      2. Select Edit > Insert > Slice to create a slice on top of the trigger object.

      3. Create a new frame in the Frames panel by clicking the New/Duplicate Frame button.

      4. Create, paste, or import an image to use as the swap image on the new frame.

      Position the image beneath the slice you created in step 2, which is still visible even though you're in Frame 2. Slices are visible across all frames.

      5. Select Frame 1 in the Frames panel to return to the frame that has the original image.

      6. Select the slice and place the pointer over the behavior handle. The pointer changes to a hand.

      Note: You can select the slice while in any frame.

      7. Click the behavior handle and select Simple Rollover from the menu.

      8. Click the Preview tab and test the simple rollover, or press F12 to preview it in a browser. "

      --Will
        • 1. Re: Exporting Rollovers
          pixlor Level 4
          Do you want a rollover or an animated gif?

          If you want a rollover, export your two images, then go to Dreamweaver (or some other HTML coding tool) and create the rollover. Your two images are the two designs you want to show when the mouse is and is not over the image. A rollover requires JavaScript code in your HTML file. Dreamweaver's code is excellent, but you can find rollover code to hand-edit on JavaScript sites.

          An animated .gif is a single file that changes based on internal timing, not on external mouse events. If you followed the instructions for setting up a rollover, but exported as an animated .gif, then you produced a single animated .gif file. The single animation won't work as a rollover.
          • 2. Re: Exporting Rollovers
            Willy_Vegas Level 1
            Thank you for the Quick response pixlor. I wish I would have posted sooner instead of wasting 3 hours trying to figure it out. Opening DW...

            Thanks again.
            -Will
            • 3. Re: Exporting Rollovers
              heathrowe Most Valuable Participant
              Willy as pixlor mentions, rollovers require javascript, Saving it as an animated gif does not work in this case.
              What you see in the preview/F12 is equivelent to 'Export > Html & Images' option.

              • 4. Re: Exporting Rollovers
                pixlor Level 4
                ...although you can use an animated .gif as one of your images in the rollover. It is, after all, just another image file.
                • 5. Re: Exporting Rollovers
                  heathrowe Most Valuable Participant
                  .. indeed

                  though Save as .gif in the above process will create an animation, but export as Html and Images will get you the associated 'Rollover' behavior required.

                  As for putting a stop to the 'loop' animation, I wish there was a method.

                  h
                  • 6. Re: Exporting Rollovers
                    Level 7
                    heathrowe wrote:
                    > .. indeed
                    >
                    > though Save as .gif in the above process will create an animation, but export
                    > as Html and Images will get you the associated 'Rollover' behavior required.
                    >
                    > As for putting a stop to the 'loop' animation, I wish there was a method.
                    >
                    > h
                    >

                    To solve the looping issue, just set the file to No Looping in the
                    Frames panel. It should only play once. Now if you don't increase the
                    frame delay, the animation may happen so fast you barely see it.

                    As for the rollover image. Make the up state a static image - no
                    animation. Set the animation image as the rollover state. Make sure the
                    Swap Image Restore behavior is applied as well as swap image, so when
                    the mouse moves off the graphic, it switches back to the original. I'd
                    do this behavior work in DW because I'd find it faster.

                    Doable in FW alone? Probably, by making use of symbols. I wrote a huge
                    article for CMX years ago that dealt making simple GIF animations and
                    builidng up to a multiple GIF animation using FW MX. I made use of
                    symbols to create a fairly involved GIF animation (link to the gif, if
                    you're interested:
                    http://www.newmediaservices.ca/jim_babbage/flyby40k.gif). The kinda
                    thing that shoulda/coulda been done in Flash. But me and Flash, well
                    let's just say my enlightenment continues. lol

                    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/
                    • 7. Re: Exporting Rollovers
                      heathrowe Most Valuable Participant
                      quote:


                      To solve the looping issue, just set the file to No Looping in the
                      Frames panel. It should only play once. Now if you don't increase the
                      frame delay, the animation may happen so fast you barely see it.



                      I could never get this to work.
                      Everytime I create an animation, setting the Loop to none on the Last Frame, the animated gif still keeps going.

                      There must be something I am missing!
                      Do you have a working link to your article? The one you posted seems to be broken.

                      thanks

                      h
                      • 8. Re: Exporting Rollovers
                        Level 7
                        heathrowe wrote:
                        >
                        quote:


                        > To solve the looping issue, just set the file to No Looping in the
                        > Frames panel. It should only play once. Now if you don't increase the
                        > frame delay, the animation may happen so fast you barely see it.
                        >

                        >
                        > I could never get this to work.
                        > Everytime I create an animation, setting the Loop to none on the Last Frame,
                        > the animated gif still keeps going.
                        >
                        > There must be something I am missing!
                        > Do you have a working link to your article? The one you posted seems to be
                        > broken.
                        >
                        > thanks
                        >
                        > h
                        >
                        >
                        The link is just to the final GIF. The article can be found here:

                        http://www.communitymx.com/abstract.cfm?cid=0B633

                        It's at least six pages long and goes into basics as well as some more
                        intricate stuff.

                        The panels have changed a bit since FW MX, but the concepts are still
                        pretty much the same.

                        And here's another link to a series of articles on GIF's, some about
                        animation, some not:

                        http://tinyurl.com/2ljze9

                        --
                        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/
                        • 9. Re: Exporting Rollovers
                          Level 7
                          Heh Heh!

                          Many neat effects can be created using a high quality JPEG or PNG
                          rolling over to an animated GIF

                          pixlor wrote:
                          > ...although you can use an animated .gif as one of your images in the rollover. It is, after all, just another image file.