7 Replies Latest reply on Oct 25, 2010 9:43 AM by Deano J.

    Rollovers and Animations

    Deano J.



      I purchased CS5 a few months ago and am finally going to try and use Fireworks. I have made websites for years and am ashamed to admit I'm STILL using ImageReady to convert my Photoshop files to html pages. (I also still use GoLive and will be forcing myself to use Dreamweaver but that's another story.)


      On my business site I use timed, rotating images of my work (graphic designer) on the home page and have simple rollovers for the sub pages. ( I just have the color of the text change when rolled over). On the additional site pages I use thumbnails of my work that, when rolled over, reveal the larger versions of the images. Pretty simply stuff, although I do sometimes use animations in these rollovers.


      Here's a link to my site to give an idea: http://www.polywogdesign.com/


      I managed to figure out how to create the big animation by using "states", but it seems like now I don't have any States available to create the rollovers without interfering with my main animation. Is there a simple way to make the text change on the link when rolled over that would be self contained and wouldn't interfere with an animation playing on the page? I can't find anything that just lets you apply an "over state" characteristic.


      I'm also wondering how I'll be able to have 3 or 4 animations buried in one page that, when their respective thumbnail is rolled over, will reveal the animation.


      Any help would be much appreciated.





        • 1. Re: Rollovers and Animations
          Deano J. Level 1

          Well, I figured out that I can just create more states and assign a new one for the roll over. The problem is, the animation isn't included when I export as html & images.


          Anybody know how to export as an html page and have an animation play? (Why the hell would Adobe discontinue ImageReady? It was too efficient? )

          • 2. Re: Rollovers and Animations
            Linda Nicholls Level 4

            You need to place the animation in a seperate slice and make sure that slice is designated an animated GIF.  You can select the slice tpe in the Optimize panel after you have drawn the slice.

            • 3. Re: Rollovers and Animations
              Deano J. Level 1

              Thanks. They were on their own slice but hadn't been designated an animated gif.


              Now the animated gif is being exported and playing in the html page but the roll overs are not working. They all have had "Add Nav Bar" applied to them, have a new state assigned to their rollover, and all work in Preview just not after an export ("html & images").

              • 4. Re: Rollovers and Animations
                Deano J. Level 1

                Also, the states that are needed for the rollovers are included in the animation. Is there a way to separate the two?

                • 5. Re: Rollovers and Animations
                  Jim_Babbage Level 4

                  Try starting the animation after the first four states, assuming you've got fours button states.


                  Another thing to consider is using button symbols, as their states are self contained.


                  Jim Babbage

                  • 6. Re: Rollovers and Animations
                    Deano J. Level 1

                    I think part of my problem was the time I alloted each state. I set animated states to 350/100th of a second so they'd play 3.5 seconds. I had left that time on the roll over states as well. It may be worth noting also that I went back and deleted slices and animation I had created in Photoshop before importing the PSD to Fireworks, not knowing if it was interfering with the new slices (since they didn't translate to FW).


                    I'm curious how I should save the project. I saved as a psd but when I reopened everything was gone.

                    • 7. Re: Rollovers and Animations
                      Deano J. Level 1

                      Well I set up the roll over states first, then added the animation (making sure it is an animated gif). When exported the animation works and so do some of the roll overs. However there's several slices switched around. It's just a mess and not consistent. I can re-export and there's different slices in different spots.


                      The roll over is the most basic task of a website building program, why would it be so ridiculously complicated to create one? Guess I go back to ImageReady and mark another fail for CS5. Adobe really dropped the ball with CS5, Photoshop is so problematic I use CS4 most of the time.


                      Thanks for the help.