Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Fireworks CS5 Essential Training, author Jim Babbage gives a detailed overview of Fireworks CS5, Adobe's software for creating and optimizing web graphics and interactive prototypes. This course includes a detailed tour of the interface, the enhanced PNG format, and the image editing toolset in Fireworks. Critical concepts, such as prototyping for HTML applications and working with symbols, the heart of an efficient workflow in Fireworks, are covered in detail. Exercise files are included with this course.
I've got another animation technique in my bag of Fireworks tricks, and this is a really fun one using one of the commands in our Commands menu. I've got a little logo here, KIDS logo. I am going to select this object onscreen, and I am going to go to my Commands menu and choose Creative > Twist and Fade. Now the dialog box, it looks a little bit intimidating at first, but it's actually a pretty cool little feature. You've got the ability here to create your own animation manually by adjusting all the different settings that you see in the dialog box.
So, for example, I can go ahead and change my Opacity, final opacity. Let's make it about 70% - no let's go to 100, so the final version of my logo ends up being 100% opaque. I can go and change things like Blur. I can make the different iterations of this object blur a little bit and eventually come into sharpness. I can change things like Rotation or Direction. I think I'll just add a little bit more Spacing here, and as I am doing this, you'll notice it onscreen, the different instances of my main object are basically updating.
And I think I'll reduce my Scaling down to 100%. There we go, so we start off a little bit smaller size, actually make it a bit smaller. Let's make it smaller than - it ends up as, so there. All right. And I think the only other thing I'll do is maybe increase my starting Opacity a little bit, makes things a little bit more solid. Now I am just playing around with these different settings, but the cool thing is I can turn this into an animation. You'll see a little magical button here, little check box that says Animate.
If I click on that check box and then click OK, Fireworks generates all the States needed, and there is 11 States in total in this case, to create an animation. And you will see there it is, just running it through, now which is a pretty cool thing. I didn't have to do a lot to actually get that to work. I am going to stop that, and I am going to revert back to my original again, and we'll go back into with the Commands menu. I will just point out a couple of more things here before we wrap up with this one.
Oop - also when you trying to use this command, make sure you select your object first, so Commands > Creative > Twist and Fade, and not only can I make my own custom animations, but there's a whole bunch of options down here that give me the ability to create sort of pre-built animations. So I can choose any one of these. You can see a whole change has occurred inside of Fireworks, so I can play around with these. I'll think I'll try - well let's go Depth of Vision.
These are all presets that give me a very specific animation. I can still customize it as much as I like, but it does give me a good starting point. Now the other option I've got is I can also Randomize effects too, if I want to just sort of feel lucky and see what I get, but I am going to start with this one. I think I like this. We are going to click on our Animate option first, and then click OK. And again, if I click on the Play button, there you can see it comes in the view, and this is over a significantly more States. This about 25 different States in order to get this animation to work as it does.
Okay, so once you've got an animation like this, you've got your whole series of States, again, you can go through the same process. You can optimize it as an Animated GIF, or you can save it out as a Flash SWF file for use in Flash, a just another neat way to create an animation without having to go and deal with things on a frame-by-frame basis.
There are currently no FAQs about Fireworks CS5 Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.