11 Replies Latest reply on May 13, 2008 9:47 PM by behrez

    Animation & Rollover question

    behrez Level 1
      Hi everybody,
      I am a Photoshop user and work in restoration/retouching the pictures and design.No experience in web design and animation.
      I'm making a web page,with Fireworks 8 to show some of my jobs.So far everything was ok. However i would like to add an Animation text.I already made an animation text (in Fireworks) and I have a problem while playing back.

      In My home page(where I want to add the animation) I have a Rollover picture and Buttons too. As soon as I hit play back ,the Rollover and buttons change and animate too at the same time than the Animation Text ,which is not my goal.
      I want every objects to stay static except my Animation Text. How that can be done?
      I am sure I'm missing something, that's why I came here to ask help.

      Any advice or guidance would be appreciated.
      Here is the link of my web page but without animation:
      http://www.lumiereplanet.com/
        • 1. Re: Animation & Rollover question
          heathrowe Most Valuable Participant
          If you create the animation in a separate document and export as animated gif, you should be able to simple add anywhere in the final html page.

          h
          • 2. Re: Animation & Rollover question
            behrez Level 1
            Hi heathrowe,
            Thanks for the reply.
            quote:

            If you create the animation in a separate document and export as animated gif, you should be able to simple add
            anywhere in the final html page.



            As I mentioned above I am new to web design and have no knowledge in HTML coding.
            I would wish to learn about html but unfortunately I don't have time and I am making this web page just for my personal usage.

            Just by curiosity,as you mentioned, how we can add the final animated gif anywhere in the final html page in Fireworks?
            That would be great if you know other options.
            Thanks anyway
            • 3. Re: Animation & Rollover question
              pixlor Level 4
              Make your animation in a separate Fireworks file and export the .gif file.

              In your main Fireworks file, make a slice that is the same size and give it the same name as the animation. This will just be a placeholder. After you export your HTML and graphics, replace the placeholding graphic with your animation. HTML refers to files by name. As long as the two files have the same name, you can trade the animation for the static one.


              A really great book on HTML is Elizabeth Castro's HTML for the World Wide Web, although I think the title title is somewhat different now that it's in the 6th edition. It's worth checking out.

              Good luck!
              • 4. Re: Animation & Rollover question
                behrez Level 1
                pixlor,
                Thank you for the info.
                Here is what I did:
                quote:

                Make your animation in a separate Fireworks file and export the .gif file.

                Done

                quote:

                In your main Fireworks file, make a slice that is the same size and give it the same name as the animation.

                Done
                quote:

                After you export your HTML and graphics,
                replace the placeholding graphic with your animation.
                HTML refers to files by name. As long as the two files have the same name, you can trade the animation for the static one.


                Done

                After these steps, I opened the file in Dreamweaver and Preview in Firefox browser but unfortunately it doesn't resolve the problem.I am wondering if this problem can be resolved with Frames and Layers in Fireworks,thought.
                Anyway thank you for your help and the book's reference.
                • 5. Re: Animation & Rollover question
                  heathrowe Most Valuable Participant
                  quote:


                  I am wondering if this problem can be resolved with Frames and Layers in Fireworks,thought.
                  Anyway thank you for your help and the book's reference.



                  I believe you answered you own question. But it begs the question, how else did you create the animation (the one that doesn't work) in the first place?

                  Nonetheless, here are some other walkthrough's to help you get aquainted with
                  Creating Animations

                  h
                  • 6. Re: Animation & Rollover question
                    behrez Level 1
                    Thanks for the link.
                    Here is how I make my Animation:
                    1- Open my file which has Static text, Rollover picture and navigation bar(3 buttons)
                    2- Type a text (Lumiere Planet) in a New layer.
                    3- Select the text > Modify > Animation > Animate Selection
                    4- in Animate Setting > Scale to 10%
                    5- I get this message
                    " http://smg.photobucket.com/albums/v311/Behrouz/?action=view&current=Picture1.png"
                    and I hit Yes and it adds 3 more Frames, total 5 frames.
                    6-View in Firefox browser.
                    That's all.
                    Here is a snapshot:
                    " http://smg.photobucket.com/albums/v311/Behrouz/?action=view&current=Picture2.png"
                    • 7. Re: Animation & Rollover question
                      behrez Level 1
                      Here is the link for my Animation's problem:

                      target="_blank"><img src=" http://img.photobucket.com/albums/v311/Behrouz/HomepageTest.gif" border="0" alt="Photobucket"></a>
                      • 8. Animation &amp; Rollover question
                        pixlor Level 4
                        quote:

                        Originally posted by: behrez

                        Here is how I make my Animation:
                        1- Open my file which has Static text, Rollover picture and navigation bar(3 buttons)
                        2- Type a text (Lumiere Planet) in a New layer.
                        3- Select the text > Modify > Animation > Animate Selection
                        ...


                        Right, don't do that. Make your animation in a separate file from the one that has your static text etc. That way neither can interfere with the other. Even better, put the two files in separate folders.

                        Make a new file for your animation that only has the images necessary to make the animation. No more, no less. Export your animation to the animation folder. You should be able to view your animation in a Web browser.

                        In the file with your static text and the rest, use a placeholding image in the spot you want your animation to be. Make the placeholding image the same size and give it the same name as your animation. Export everything from this file as before. The only difference is that you won't have your animation, you'll just have a static image. That's okay. Next, go to the animation folder and copy the exported animation over your static placeholding file to replace it.

                        By the way...that ballerina seems to be missing her back foot...?



                        • 9. Re: Animation &amp; Rollover question
                          behrez Level 1
                          Hi pixlor,
                          Thanks for your support.
                          I did every step,(if I am not mistaken) and i could not get the result.
                          Here are some snap shot:
                          <a href=" http://smg.photobucket.com/albums/v311/Behrouz/?action=view&current=Browser.png"

                          <a href=" http://smg.photobucket.com/albums/v311/Behrouz/?action=view&current=DW2.png" target="_blank"><img

                          <a href=" http://smg.photobucket.com/albums/v311/Behrouz/?action=view&current=DWfiles.png"

                          By the way that ballerina is not missing her back foot. Look at the picture carefully,you will see it.Thanks for your attention.
                          • 10. Re: Animation &amp; Rollover question
                            pixlor Level 4
                            I think you should take some time to learn a bit of HTML. What you're doing isn't the best way, nor is it following what I said you should do. Your Photobucket images look like you have a small broken image where your logo (Lumiere Planet) would go, but when I went to your site to look at your code, to see why your image is breaking and I see this in the upper left hand corner:
                            http://www.lumiereplanet.com/imagesIndex/index_r2_c1.jpg

                            The logo and the image that is really in your Web page are not the same size. In order for you to put an animation for your logo, you need to either slice your image into smaller sections or make your page more properly.

                            For example, the words that start with "Thank you for taking the time to browse through my web pages" should be text in your HTML file, not an image. The blue gradient behind your header could be a very small tiling background in a table. What you're doing is just...kinda crazy. Web pages are not .pdf files or printed brochures. They're different beasts and until you understand what it is you're trying to do, you're not going to get it to work.

                            Anyway. Here's a link to a basic HTML tutorial at W3Schools:
                            http://www.w3schools.com/HTML/default.asp

                            And...this one looks friendly
                            http://www.htmlgoodies.com/primers/html/article.php/3478141

                            There really isn't a lot to basic HTML, actually. You can make a pretty complex and beautiful page with about a dozen tags.

                            Good luck!

                            • 11. Re: Animation &amp; Rollover question
                              behrez Level 1
                              Hi pixlor,
                              Thanks for your help and your time.
                              As I mentioned in my first post I am coming from a professional photographic background and I try to make this web page just for my need. I agree with you that making web pages is a different conception of design.
                              I'll check the links about HTML.
                              Just a question:
                              Is it possible to open my Home page file in Dreamweaver and add a Text Animation with Dreamweaver?
                              Thanks.