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.
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)
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.
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?
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.
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
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:
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:
It's an old article, but other than Frames changing to States in the
latest version, the same principles apply.
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:
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.
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?
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.
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.
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
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.
supply the file please.
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.
Who_We_Serve.png 879.1 K
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.
Who_We_Serve_jb.png 878.4 K
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.
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.
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.
Fair enough. If you think it will help, I can try to break down the terms and their relationships to each other.
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:
Who_We_Serve_jb_TB.png 1.5 MB
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.
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.
And how about that timing of the starting points of the different symbols?
How do I do that?
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.
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.
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. : )
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.
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:)
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
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.
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.
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.
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. : ) )
I'm happy to know you have found a workflow whihc works for you.