Fireworks 8/CS3 Tutorial

Now, to clear things up.
Fireworks is a paid program, so don't ask in this thread how to get it.You can PM me for that.

Next, Fireworks is really an easy program.

Creating a File and managing Images

Let's start with the basics, first, you create a new file, let's make it a sig sized file, OK?
Either go to File > New, or input Ctrl + N on your keyboard.

Now you give the size in pixels, first is width, then height. resolution is 72 for skills and most things, so, use that.

Next, let's put a background on our animation.
You can import a background by going to File > Import or typing CTRL + R and choosing your file, or you can Open a new image then copy-paste it to the animation.

So, when you select an image to import, it'll turn your mouse an L-shaped icon, simply click anywhere and it'll add the image to the current file, now drag it to the desired position and let's observe the background I chose:


Now, see how the selected image extends beyond our canvas size, also known as the animation workspace?
Yes, now, there's no need to keep that as such, in this animation, at least.
So we can either use the Eraser (shortcut "E") or the Marquee (shortcut "M") to get rid of it or we can use the ever-useful Canvas Size tool as shown below.

You click the "Canvas Size" button, and don't change anything, just type ENTER, and it'll fix every image in the screen to the canvas' size.

Now, let us enter the magical process of ...

LAYERING



As said in the image, Layering is easy on Fireworks.
You can have multiple editable objects in a same layer and even in the same layer you can set them to be above others, which is really useful.

I guess that's enough on Layering, you should learn the rest (whatever little is to discover) by yourself.
Let's go into frames now.

FRAMES

Now, I'm sure this is what you all have been waiting for.
The frame system is actually really simple, let's examplify with an image.


1 is pretty self-explanatory, let's skip that.
2 is the frame speed, good speeds for the most common stances are 7, 9 and 12.
3 is to manually add a new Frame, same as shift+F on CS3 or if you added your custom shortcut.
4 Deletes chosen frames.
5 Loop settings is how many times you want your gif to loop when it's being visualized, you'll usually just leave that at Forever.
That neat key I said I'd leave for later, I'll leave alone for a while more.
As for the button on the left of loop settings, that's Onion Skinning, I don't use it very often, but it shows the next, and previous frames or the whole animation in low opacity in the current frame, it's weird, and not really all useful, but you should try experimenting with it.

Now, let's get on that neat tool and some more.


The image is self explanatory, so let's only go deeper on the Distribute to frames function.
Notice how beneath my char there's a bunch of images?
Like if there were all the frames of a skill there?
Well, there are. What you have to do now, is choose all the skill frames, and click 'Distribute to frames'.It'll then distribute all the frames of your skill in order trough the animation.

Useful things about this tool are obvious, but here is what I do.
I align all the images of a skill I'm going to use, then I save them on a separate file or a large sprite sheet.
Then, all I have to do is import the skill and distribute it to the frames, really useful, huh?
But of course, gif animations aren't all about skills, specially mine, most of it will have to be painfully aligned manually.
Here go some tips on that.
Using the arrow keys on your keyboard allow you to move the chosen image(s) 1 pixel. Using shift+arrow keys move your image(s) 10 pixels.
Ctrl + UP move the chosen image up in the layer, so, suppose you have 3 images, 1 is the tile, another is the background, and the third is your character.
You imported your character beneath the tile and in front of the background, so you'll have to click him and press CTRL+UP to bring him ahead of the tiles or you would use CTRL + Down if for example, you had imported him in front of a pillar or something that should be in front of him.
Pressing CTRL + Shift + UP/DOWN will move your image to the bottom OR top of your layer.
Alt + arrow keys when pressing an image will copy the image and move it.

Now, let's prepare the outcome of our gif and finish it, right?

As said on the image, these are the best settings you can use, and it's what I'll use.

Now, let's finish the animation, right?
So, what will we do, well, that's simple.
We choose the skill images and distribute it to frames.
Here's the end result.



Walking: Video Tutorial
Download
Note: It's a bit big, but it's very detailed.

Written Walking Tutorial
For Frame Speed 9, if you are using Frame Speed 7, instead of 7 pixels, move it 5 pixels.
Place your walking stances 7 pixels apart from the previous, starting by walk 0.


Frame by Frame.
Frame 1

Frame 2

Frame 3


Do the same with the other stances of walk, having stances 1 and 3, One pixel lower than 0 and 2.

In the end, it should look like this (except faster)


Copy that sequence and paste it aligning the first walk0 of the copied sequence with the last walk 3 of the original sequence via the head, then move it one pixel up and 7 in the desired direction.


Repeat until you walk the desired distance.


The result should be as follows.
- Slow, pixel-by-pixel version

Proper result.





Pre-Aligned Maple and Custom Skills.
MEDIAFIRE LINK

Map Making Tutorial.
MEDIAFIRE LINK

Distribute to Frames Tutotial.
MEDIAFIRE LINK
Basic distribute to frames animation.

Next on this tut: Walking and Jumping plus some tips. COMMON LIBRAAAAAARY (CS3 Only)

I just realized I should use this tutorial since I just got Fireworks...

o_o"

nice tut! i like it!!

-btw wat skill is that under u (the red circle thingy)??

It's a custom-made alchemy circle.

Gregio wrote:It's a custom-made alchemy circle.

awesome, kinda looked like the circle that comes before jr balrog gets summoned xP

That's because Jr.balrog is the DEVIL! :)

I love this tut. confuses me at some parts though? x.x any tips on how to export a file but make the size not so big? :(

Preview it on your browser pressing F12 after setting the proper optimization settings then save that image, for some reason, it usually makes smaller files.

Anyways, explore around, "Exact" optimization setting is for the best image quality and it's consequentially a larger file.

Try Web Adaptive if you don't need extremely good quality, or if the GIF has few colors, i.e: My char against a black background without doing flashy skills doesn't use many colors resulting in a smaller file.
The Canvas size is also the most important factor for the file size.

Besides that, my tutorial isn't confusing at all, make sure to read inside the images.

how do u get all ur stances into a library like u have in you walking tut?

-UberNub

Some of the pictures are gone now i cant practice using it

They're all working for me, and I'm not even logged on my PB.

they are working now but before it was saying upgrade to photoshop pro or sumin

is this tut using Adobe CS3 or MacroMedia 8?

Nova wrote:is this tut using Adobe CS3 or MacroMedia 8?

Fireworks 8 aka Fireworks CS3

Fireworks 8 =/= Fireworks CS3.
Anyways, as I mentioned somewhere up there, most functions are available on 8 as well as CS3, the ones who don't the same way I posted can have a custom shortcut added to them.
The only function that FW8 DOESN'T have is the Common Library.

Hey gregio did you get my pm already

Where would I get the trial of Fireworks 8/CS3?

I've only got the Fireworks Portable thing. Is that the same?

can u make a 2 person tutorial, please

Two persons don't need tutorial.
No offense, but, if you can't animate two persons, you're a retard.
If you're animating two people at once, do each individually, one or two actions at a time, then do the other.
If you're using Distribute to frames for animating, just pick each sequence of sprites separately. Pick first, all frames of Char 1, then all frames of Char 2.
It needs no tutorial.

For distributing to frames, can you distribute only to some frames? To make a alert stance/walk stance easier to make.

No, it'll distribute each image to each frame.
If you don't want to ruin the flow, add several of the same image to make alert or stands.
Walks work fine distributing 1 to each frame as long as you use the walking tut, video or text...

I know this may seem like a noob question, but how do I see the animation looping without exporting?
Like previewing it.

Either you press the small play button on Fireworks (often messes up speed and is completely unreliable) OR you make sure your GIF is properly Optimized and press F12 for a preview. (It's basically an export, but you don't have to do anything but press F12).

When is the common library tut coming? I want to know more of fireworks :o!

Explore the program, I'm not your babysitter.