28 Replies Latest reply on Nov 8, 2009 6:02 AM by Jim_Babbage

    Putting animated gifs in a Fireworks layout: What is the deal?

    thomasbricker Level 1

      Ok I have scoured the help files.

      Im not finding what I need to know.

       

      I want to create a Fireworks layout with 10 squares that have photos in them that fade back and forth between one image and another, slowly.

       

      I would imagine I can pull this off with animated Gifs.

      Thing is, I can not figure out how to pull this off in Fireworks.

      Do I slice up my layout and make each photo square a symbol, then give it a different state and tween between them?

      And if so, how do you control that?

       

      Or do I make animated gifs in Photoshop and drop them into Fireworks?

      I tried this and the gif came in with 40 states and the animation looked ridiculously bad. Not smooth and way to slow.

       

      Is there a decent video tut on how to make animations in Fireworks.

      I havent found it yet (nothing on Adobe TV oddly)

       

      I have a feeling this shouldnt be that difficult but so far, it is.

       

      I also want to have a rollover in the same layout.

      Is this asking too much of Fireworks?

        • 1. Re: Putting animated gifs in a Fireworks layout: What is the deal?
          Jim_Babbage Level 4

          You can do this with gif animations but I think Flash might be a better option. I've written a few gif animation tutorials on community mx if you're interested.  Look into animation symbols as an option; you can set opacity, number of states, scaling and even movement using this type of symbol.

          • 2. Re: Putting animated gifs in a Fireworks layout: What is the deal?
            thomasbricker Level 1

            Well from what I can gather, it looks like animation symbols is what Im after.

            (I want to avoid using flash)

             

            So where can I find a video tut on creating animation symbols.

            (Im getting no where with the help files in Fireworks)

            • 3. Re: Putting animated gifs in a Fireworks layout: What is the deal?
              Linda Nicholls Level 4

              The GIF format will make the photos look terrible, and you'll end up with a huge file size. You really are better off using Flash for something like this. If you insist, select the image you want to fade and choose Modify > Symbol > Convert to Symbol. Give the symbol a name and choose Animation for type. Follow the wizard the rest of the way.

              • 4. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                thomasbricker Level 1

                The photos in this case do not have to look too perfect.

                Thats why Im considering using this method.

                 

                What about the rollover.

                Are these also achieved with modifying symbols and states?

                • 5. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                  Linda Nicholls Level 4

                  Slice your mockup. Right click on the slice over the animation and choose 'Export selected slice'.  Export it you the assets folder of your site. Once you've done that, return to your document and replace the symbol with a copy of the static image you started with. Once agaion, click on the slice over the image, but  then follow by clicking on the little target shaped button in its center. Select 'Swap Image Behavior' to open the Swap image editor. In the Swap Image editor, click on the part of the little diagram that represents your image slice. For 'Show the Swapped image from' click the Image File button. Browse to your exported animation. Uncheck 'Preload images', but leave Restore image onMouseout checked. Click OK to exit the Swap image editor. That should be it.

                  • 6. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                    Jim_Babbage Level 4

                    You could do it in FW if you plan to use the FW HTML (not a great 

                    idea). I'd recommend creating the rollover effects using DW. Perhaps 

                    do two exports for each image - one as a jpg for better quality (the 

                    static image) and then reset the export settings to animated GIF for 

                    your animations.

                     

                    I would not recommend going beyond 10 or 12 states in the animation. 

                    This will help keep the file sizes low.

                     

                    If you have my Fireworks CS4 Classroom in a Book, it has an exercise 

                    on creating an animation symbol.

                     

                    Or you can check out this link:

                     

                    http://www.communitymx.com/search.cfm?searchbox=gif+animation&searchbutton=Search

                     

                    A long while back, I wrote a pretty in-depth article on creating 

                    Animated GIFs. It's in the list above, but here's a direct link:

                     

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

                     

                    It's an old article, but other than Frames changing to States in the 

                    latest version, the same principles apply.

                     

                    HTH

                     

                    Jim Babbage

                    • 7. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                      thomasbricker Level 1

                      Thanks Jim and Linda.

                       

                      I will get an understanding of states, instances and tweens if its the last thing I do. : )

                       

                      Im going to read this link too:

                      http://www.adobe.com/devnet/fireworks/articles/pages_states_layers.html

                       

                      So far Im finding the animation construct chosen by Fireworks to be way less intuitive than After Effects or even Final Cut Pro.

                      But when in Rome, do as the Fireworks people do...

                       

                      Here is a a related question:

                       

                      Say I animate a symbol to fade out, using the animation pop up menu.

                      How do I get the stack of states to reverse the fade out?

                      I tried copying the 10 states and reordering them by hand.

                      Didnt work.

                      In Image Ready you could duplicate a sequence of animation frames and give them the command to reverse their play order so you could achieve this fade in fade out sequence.

                      How do you do this with states to achieve a smooth fade in fade out?

                      • 8. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                        Jim_Babbage Level 4

                        If you're not using an animation symbol, you can just duplicate  a set 

                        of states and then reverse the order. I believe there's a actually a 

                        command to do the reversing for you.

                         

                        If you're using animation symbols, add the first one to create the 

                        fade out. then on the final state for the fade, add another instance 

                        of the symbol, and reverse the opacity.

                         

                        HTH

                         

                        Jim Babbage

                        • 9. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                          thomasbricker Level 1

                          Thanks Jim,

                           

                          Where is the command for reversing the order of the duplicate set of states.

                           

                          As for the Animation Symbol method, how do you add the additional instance?

                           

                          Also, could you ask Adobe to hire you to make a few more video tuts about animations and rollovers to be added to Adobe TV? : )

                          They are sorely needed there.

                          • 10. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                            Jim_Babbage Level 4

                            Commands > Document > Reverse States

                             

                            Just drag the symbol onto the canvas to add it.

                             

                            I did give you a list of links for reference. Have you reviewed those 

                            articles?

                             

                            HTH

                             

                            Jim Babbage

                            • 11. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                              thomasbricker Level 1

                              Believe it or not I still cant get this fade in fade out to work.

                               

                              I created an Animation Symbol.

                              Gave it 20 states and fade it from 0 to 100.

                              Then on state 20 I try to drag in another instance of it and reverse the opacity settings.

                               

                              But I get no additional states.

                              They remain at 20.

                              The two instances fade in opposite directions but at the exact same time.

                              I want the one that fades from 100 to 0 to follow the one that fades from 0 to 100.

                              I need 40 states and Im not getting them.

                               

                              HOW DO I SET THIS UP?

                              I have wasted an hour trying to figure this out.

                              This should not be this hard.

                              • 12. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                                Jim_Babbage Level 4

                                supply the file please.

                                 

                                Jim Babbage

                                • 13. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                                  thomasbricker Level 1

                                  Ok here it is.

                                   

                                  I just want to be able to fade the opacity of the colored images in and out in a cycle.

                                  (I have only placed one color image into this file so far. [Upper right hand corner] Once I figure out the drill, I will put nine more in, with each one having a different fade rate to look random)

                                   

                                  I just cant seem to add 20 more states at state 20. I got this fade in fade out thing to work once but no dice this latest time...

                                   

                                  Thanks in advance.

                                   

                                  - T

                                  • 14. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                                    Jim_Babbage Level 4

                                    OK, here's the deal:

                                     

                                    1) You're sharing this layer (Color) to all states. No real point in doing this as the contents of each state will change. and when you try to create an additional state to beign the new animation, it already contains the original animation from the color layer.

                                     

                                    I forced the color layer to not be shared to all states to deal with this issue.

                                     

                                    2) Both of your animation symbols contain only a single state. There is no multi-state animation in either 1A or Symbol. So when you add it to the design, nothing happens. It appears that FW is not remembering the states within the symbol, just that the symbol is capable of animation. This is most likely to give you instance-level control of the animation, rather than locking it down within the symbol.

                                     

                                    I added a 21 state in the States Panel. Then I dragged 1A onto the canvas and positioned it based on the b/w layer location.

                                    In the Property Inspector I changed the number of state from 1 to 20. FW warns me as expected, that it needs to add additional states. I agree.

                                    After adding the states, I reverse the opacity.

                                     

                                    Animation plays as expected.

                                     

                                    Another option is to copy the existing Instance in State 1, then when you have your 21 state created, just paste the instance.

                                     

                                    File is attached.

                                     

                                    HTH

                                    • 15. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                                      thomasbricker Level 1

                                      Thanks for helping Jim.

                                      I appreciate it.

                                       

                                      I will go through this word by word until I understand what you did.

                                      Wish me (and anyone else following this thread) luck. : )

                                       

                                      I will report back when I have gotten it.

                                      • 16. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                                        Jim_Babbage Level 4

                                        I think you are making this harder on yourself than it needs to be, Thomas. Really, the only thing I did was to add the required number of steps to the newly added Instance, and reversed the opacity. The fact you have to do this can be a bit confusing, but the logic behind it is to give you instance-level control over much of the placed symbol's characteristics.

                                         

                                        Several links to articles have been supplied in this thread. Have you read through them? They should be quite helpful.

                                         

                                        Cheers

                                        • 17. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                                          BrickDaddy Level 1

                                          Jim, I whole heartedly agree with you.

                                          What I am trying to do is very simple.

                                           

                                          The issue for me is the nomenclature involved.

                                          Understanding the role of instances, states, symbols is what is making it difficult for me.

                                          And these things relations to physical layers is confusing to someone unfamiliar with them.

                                          Like having "instance level control over placed symbols": I dont exactly know what that can do for me yet.

                                           

                                          I will get it eventually.

                                           

                                          And yes I looked at the links mentioned in this thread.

                                          Few of them actually have understandable pictures of what you are supposed to click on where.

                                          And there are no videos that I have found that show the steps.

                                          This is truly a case where a video would be worth a million words.

                                           

                                          Thanks again.

                                           

                                          - T

                                          • 18. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                                            Jim_Babbage Level 4

                                            Fair enough.  If you think it will help, I can try to break down the terms and their relationships to each other.

                                            • 19. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                                              thomasbricker Level 1

                                              Ok Jim,

                                               

                                              Ive gotten as far as putting in the top row of fading in-out animation symbols.

                                               

                                              Now the next question is how to control the timing of the fades.

                                              I know how to delay a state but how do I stagger the start times so I get a sense of random play backs.

                                              (Seems like if I what to delay one symbol, it delays all of the symbols.)

                                              Do I need to add more states?

                                              Do I make a different set of states?

                                              Do all the animation symbols have to share the same states sequence?

                                               

                                              Here is the file so far:

                                              • 20. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                                                BrickDaddy Level 1

                                                What makes it tricky is you cant see where the symbols are on the states sequence.

                                                It's not like a timeline.

                                                I dont have visual feedback.

                                                • 21. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                                                  Jim_Babbage Level 4

                                                  Yes you can, by uaing Onion skinning, althoug that is more useful for animations which change position.

                                                   

                                                  In your case, just select the state you want to see either by clickikng on it in the States Panel or by stepping through the animation using the playback controls at the bottom of the document window.

                                                  • 22. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                                                    BrickDaddy Level 1

                                                    And how about that timing of the starting points of the different symbols?

                                                    How do I do that?

                                                    • 23. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                                                      Jim_Babbage Level 4

                                                      Umm, use Flash?

                                                       

                                                      Seriously, FW is a graphics application, it's not a animation program. And you're venturing into territory that is much better handled in an application like Flash. If you want to work on complex animations with various timings, you're not gong to be able to do this easily using Fireworks. Not seamlessly, anyway. All content on a state remains for the duration of that particular state.

                                                       

                                                      If you want to stagger the start of each animation, you will have to start each animation on a different state. But that's a lot of work for a visualization of a web page.

                                                       

                                                      I'd recommend slicing and exporting each animation with the desired delay, then - as you should - build the page within Dreamweaver. Use CSS or JavaScript to create your rollover effects, or if its just animation, where on the load of the page, all the images begin transitioning, just set longer delays for the first state of each separate animation and let the browser handle the display

                                                      • 24. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                                                        thomasbricker Level 1

                                                        Well the reason I want to try to do something like this animation in Fireworks is, I dont like Flash.

                                                        I wish I did.

                                                        But I dont for lots of reasons.

                                                         

                                                        Im trying to push the abilities of Fireworks, to make it a work around to create web content in an environment that is at least slightly WYSIWYG.

                                                         

                                                        I resent the fact that Adobe in all their wisdom has not really created a WYSIWYG web creation application that bridges the divide between hard core web site developers and the rest of the graphic design community.

                                                         

                                                        I used to use GoLive.

                                                        It has been politely phased out in favor of Dreamweaver.

                                                        So Im stuck with Dreamweaver which  is my opinion less intuitive.

                                                         

                                                        Oh well.

                                                        I realize Im in a minority here in my opinions about Adobe's web creation apps.

                                                        But such is life.

                                                         

                                                        If Apple just made a pro version of iWeb, I could stop my whining. : )

                                                        • 25. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                                                          Michel Bozgounov Level 2

                                                          Well, some time ago I also thought: Why not create a set of very complicated animated GIFs (using Fireworks, of course;-) and connect them to the HTML/CSS layer of the web design, and thus do with html/css and images things that are only possible with Flash and/or adavanced AJAX scripting.

                                                           

                                                          I soon realised that this is not possible -- and in certain cases, not needed at all. Animated GIFs (+ an HTML/CSS layer) cannot substitute AJAX scripting or Flash.

                                                           

                                                          Even more: Even if in some cases you can achieve a certain effect using only animated GIFs, this will be at the cost of very poor browser performance! Reason? Animated GIFs slow down browser performance, and a lot. Flash does not slow down performance in browsers so much. JavaScript doesn't slow down performance so much, too (although it depends).

                                                           

                                                          Example: Put 100 animated GIF images inside one simple html page and watch your browser slow down terribly. Put 500, and it will maybe even crash!   Even simple GIF animations sometimes slow can be seen to slow down when starting, and then at some point, their speed goes back to normal. And that's just one example...

                                                           

                                                          In some cases, Flash is the correct answer to your questions. Well, I don't like Flash much, too, but for certain tasks there are certain tools.

                                                           

                                                          Using very complicated animated GIFs instead of Flash is like using a set of 60 spoons instead one simple shovel... :-)

                                                           

                                                          Just my 2 cents...

                                                           

                                                          PS I don't create Flash content, but in the worst case, I can ask a fellow developer to help me...


                                                          PPS I would have created a demo with very complex Fireworks GIF animations only for the sake of pure art/pushing Fw to the limits; never in production:)

                                                          • 26. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                                                            Jim_Babbage Level 4

                                                            I completely understand about Flash. I've never been able to do 

                                                            anything productive in it. I've got some kind of hang up I guess. I 

                                                            did love LiveMotion, though, and I'm sure that puts me into my own 

                                                            special minority.

                                                             

                                                            But as you indicate, you are pushing the boundaries in FW for this 

                                                            type of requirement. It was never designed to act as you are trying to 

                                                            make it act - despite marketing hype. It's not a development 

                                                            environment. It's not  a proper web page/site creation tool, because 

                                                            those features are primarily automated functions. There's very little 

                                                            user input as to how FW generates a web page, and you must work within 

                                                            very specific guideline if you hope to do so. And you must still 

                                                            understand CSS and HTML on more than a basic level. Those are 

                                                            secondary features, just as they are in Photoshop. Actually, in PS 

                                                            it's far less than a secondary feature. And that is fine with me.

                                                             

                                                            That said, David Hogue has written and recorded some excellent 

                                                            tutorials on the process and I strongly recommend you read/watch them. 

                                                            He has an excellent grasp of the advantages and pitfalls of exporting 

                                                            CSS pages from Fireworks. Check out the Fireworks channel on Adobe TV.

                                                             

                                                            Never used GoLive so I can't commiserate in that area. I've used DW 

                                                            since it came into existence, after multiple frustrations with the 

                                                            dreaded PageMill (Shudder). Those experiences in themselves are 

                                                            probably what kept me from even touching GoLive.

                                                            • 27. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                                                              thomasbricker Level 1

                                                              Well guys,

                                                               

                                                              I dont want to sound like some kook trying to get to the moon on a bicycle.

                                                              Im not trying to do Flash level animations with animated gifs.

                                                              Just thought I'd see what I could achieve with a few cross fades.

                                                              And rollovers is another objective. Fireworks does those excellently.

                                                              So I'll keep it simple for now.

                                                               

                                                              I created my entire website using iWeb a little while ago.

                                                              http://www.thomasbricker.com/

                                                              iWeb truly is WYSIWYG and super easy to use.

                                                              Im sure the code it generates would infuriate lots of web purists out there.

                                                              I dont really care. There are plenty of other things to concern me in my professional life. Im not too bothered by overly complicated code.

                                                              I created rollovers in iWeb by inserting html code in what they call Snippets.

                                                              It worked.

                                                              Im sure building a professional site in this way is considered foolhardy by some, but sometimes you gotta just get something done, no matter how you do it. (We call it "country-style" at my studio)

                                                               

                                                              I was looking to Fireworks to get me in the backdoor of the Adobe web fraternity of site creation.

                                                              It kind of works.

                                                              Who knows, I might get good at it.

                                                              I will try to go through the David Hogue stuff.

                                                              And try to get to like CSS construction, (since tables are supposed to be so yesterday)

                                                               

                                                              Thanks again Jim for you patient answers.

                                                              Way better than the typical snarky replies I got to questions I posed on the Dreamweaver forums.

                                                              (Kind of the reason I wound up using iWeb to make my site. : ) )

                                                              • 28. Re: Putting animated gifs in a Fireworks layout: What is the deal?
                                                                Jim_Babbage Level 4

                                                                I'm happy to know you have found a workflow whihc works for you.

                                                                 

                                                                Take care.:-)