The last part of the job was of course getting a video file out of flash.
FPS---
The first problem I had was with the fps in the video file. Since the animation of Toast!/malfunction had movie clips with applied effects on them (some of the backgrounds) that really slowed it down. To get over that problem, I exported the background as jpg and imported it back to my libraries and replaced the movie clips with jpg files. Don't use too many effects on your movie clip symbols, that will slow it down. The ending result still had some slight slow downs on some of the shots. The slow downs didn't occur in the swf file, which leads me to believe that it had something to do with the way flash renders the animation to video files. I could still play with the settings there.
Encoding--
The second problem was getting a small file size with a relatively good quality. The defaut settings of exporting a mov file will give you a huge file,that is not internet-friendly. I had to set up three things (quicktime settings):
>settings: compression type:mpeg4 video,quality:best
>filter: you can play with the color settings ,but this will slow down the rendering time,so I didnt use any filters.
>size: 720x576 PAL , 4x3 , keep aspect ration with letterbox
>sound> I didnt touch the sound settings
Colour--
I had to go and upload the file at Bradford university's horton labs. One thing those computers are useful for is downloading and uploading. After seeing the animation again, I found out that the colours look awful there. The boy's shirt was over saturated red, the robot's head is too purple. The lesson to be learned here was monitor calibration. While drawing my character's , I should have thought more about how they are going to look like on other people's screens. I have to find out- is the monitor at the labs set up badly or is it my own monitor. I tend to set mine in a way that doesnt strain my eyes. Changing the default settings to lower saturation, I also lower my brightness and contrast slightly. The weird thing was that it also had a slightly different hue (the robot's purple head). All and all, after I fix all the annoyances of the animation, I will export it properly as a big file and edit and encode it with Adobe after effects.
Showing posts with label toast. Show all posts
Showing posts with label toast. Show all posts
Wednesday, February 24, 2010
Adding sound to Toast! animation
The name of Toast! was changed to "Malfunction". Decided that I don't want to give away the ending too much with the title.
Adding sound to the animation
The sound in Toast! is really low on quality standards. After seeing it for the first time with sound, I thought that it was horrible.
Some of the sound effects were recorded by myself. For the robot , I used the creaking door of the kitchen at the halls. The title screen sound was made by a real empty tin can (from mexican beans) and a pencil.
The bucket sounds, electricity and so on were taken from the internet, after carefully examining their license.
The Music in the end is made by me, with my Nintendo ds. I used "Jam sessions" imitation of guitar. You might notice that the rhythm is the same as the title sceen sound.
The voices were recorded and edited with Audacity. My brother did his goofy/mickey mouse rip-off voice, as my voice is too deep to imitate a boy's.
All and all, I hate the sound in "Malfunction". It's messy and badly edited.You can even hear some static sounds in the background. Flash has a real nice way of setting the volume ease out and ease in and I played with that too alot.
Adding sound to the animation
The sound in Toast! is really low on quality standards. After seeing it for the first time with sound, I thought that it was horrible.
Some of the sound effects were recorded by myself. For the robot , I used the creaking door of the kitchen at the halls. The title screen sound was made by a real empty tin can (from mexican beans) and a pencil.
The bucket sounds, electricity and so on were taken from the internet, after carefully examining their license.
The Music in the end is made by me, with my Nintendo ds. I used "Jam sessions" imitation of guitar. You might notice that the rhythm is the same as the title sceen sound.
The voices were recorded and edited with Audacity. My brother did his goofy/mickey mouse rip-off voice, as my voice is too deep to imitate a boy's.
All and all, I hate the sound in "Malfunction". It's messy and badly edited.You can even hear some static sounds in the background. Flash has a real nice way of setting the volume ease out and ease in and I played with that too alot.
How to work fast with flash
Toast animation is complete now. It's well over one minute, but I've set up everything in a symbol hierarchy that will let me easily cut out shots or shorten them without much effort. All in all,it took me 1 week to come up with it and make the animatic, and two more weeks to draw everything and animate it in flash. And I didn't work on it all that much really (I'd say no more than 2-3 hours a day, and some days I didn't work on it at all). Some people might think that I went through like 18 hours of work every day or something.Those people just have no idea how to use flash efficiently.
The reason I managed to complete it that quick is because I knew how to take advantage of fash's features.
So here's how to work faster with flash animations:
- The storyboard animatic is key to good planning. It will help you figure out the timing of the scenes and you can even draw over it in flash (if it's drawn well).
- Good character libraries and fla file structure - is key for efficient production. Keeping everything in symbol hierarchies will enable you to layer animations, time them and position them quickly.It will greatly simplify your work flow. Some people don't want to do it,and will go with frame by frame. I think thats just crazy.
Using symbols and tweens and even armatures will also make your fla file easier to further edit. Imagine you are working on something like this in a group. If you don't have a well structured source file, taking out animations out of it and reusing them will be a living hell for your colleagues.
-Reusing graphics - In flash, you can easily reuse a lot of your graphics. If you draw the base of a head once, you dont have to redraw it every time your character changes expression. To do that, you must separate the base, the eyes, the eyebrows (and even the nose if you like) on layers and symbols. You can move and transform everything too. And even while drawing, keeping everything on separate layers means that you can copy and alter easily.If you have separated your character to: head,torso,upper arm> down arm> hand, upper leg> down leg> foot symbols, you can reuse some of them- no need to draw them all over.
- Reusing animations- The eyes symbol will contain variations of the blinking animation. The mouth symbol- variations of the mouth. And you can tell flash when is that variation or animation going to be played and replay it. You don't have to draw all the expressions all over. The same applies for body animations. If you have something that can be looped, just loop it. If there is a movement of the character or his head that is kind of like in a previous shot- just take the one from the previous shot and alter it slightly. You will be able to do that easily if your symbol hierarchies are good.
The reason I managed to complete it that quick is because I knew how to take advantage of fash's features.
So here's how to work faster with flash animations:
- The storyboard animatic is key to good planning. It will help you figure out the timing of the scenes and you can even draw over it in flash (if it's drawn well).
- Good character libraries and fla file structure - is key for efficient production. Keeping everything in symbol hierarchies will enable you to layer animations, time them and position them quickly.It will greatly simplify your work flow. Some people don't want to do it,and will go with frame by frame. I think thats just crazy.
Using symbols and tweens and even armatures will also make your fla file easier to further edit. Imagine you are working on something like this in a group. If you don't have a well structured source file, taking out animations out of it and reusing them will be a living hell for your colleagues.
-Reusing graphics - In flash, you can easily reuse a lot of your graphics. If you draw the base of a head once, you dont have to redraw it every time your character changes expression. To do that, you must separate the base, the eyes, the eyebrows (and even the nose if you like) on layers and symbols. You can move and transform everything too. And even while drawing, keeping everything on separate layers means that you can copy and alter easily.If you have separated your character to: head,torso,upper arm> down arm> hand, upper leg> down leg> foot symbols, you can reuse some of them- no need to draw them all over.
- Reusing animations- The eyes symbol will contain variations of the blinking animation. The mouth symbol- variations of the mouth. And you can tell flash when is that variation or animation going to be played and replay it. You don't have to draw all the expressions all over. The same applies for body animations. If you have something that can be looped, just loop it. If there is a movement of the character or his head that is kind of like in a previous shot- just take the one from the previous shot and alter it slightly. You will be able to do that easily if your symbol hierarchies are good.
Friday, February 19, 2010
Flash CS4 bugs and how I managed to get over them
This is my second rig for the boy, which I made sure will be more stable and more controllable than the first I made:
Obviously I had to take it apart and mess it up to demonstrate the set-up. The only symbols of the rig that contain variations/animation are the hands and the head, thought in some cases it might be useful to have that for the torso as well. One thing that could have been done to improve this is to make it possible to move the character's shoulders by adding one extra chain with a hidden symbol between the neck and the upper arm.
Bugs in flash cs4
Here is my report on problems I met while doing my Toast! animation for Bradford university. I might have to add some more to the list, as it is not completely finished yet.
Bugs with the rigs/ rigged symbols:
*Bug: Head symbol animation won't play properly timed in test movie/exported file, thought it plays just fine in flash cs4. It will freeze on the first frame it is set to start from
+fix: When you have an armature layer, be sure to set it to start from frame 1 and it doesnt have any blank space before it starts. Put it in a symbol and have that symbol start the armature animation inside from frame one.You can tell the head symbol to start from whichever keyframe it starts in the particular scene in the armature itself.
*Bug: After the armature is keyed and animated, for some reason its messing up the pivot points and that causes limbs/head/bodyparts to fall off.Even when you move them to attach them back, that breaks their position in previous keyframes.
+fix: Quickest way is to just start over and
DO NOT DO the following after you start keying the armature (you can only do it before you animate), it will cause this bug:
--don't use the transform tool on the armature layer- be it parts of the armature or the whole layer.If you need to move the whole model, put it in a symbol or set the armature in a way that lets you move it (enable movement on root or skeleton).
--don't touch any pivot points
--don't alter any of the constraints that you have already set up. Be sure to check that you don't have to add or take value before you start animating. You can enable and disable rotation and so on, but you can not touch the constraint values that you have set before animating.
--Don't ctrl(+shift)+up/down -- arrange the symbols -- after you start keying your armature. It might cause weird problems.
*Bug: After copy-ing the symbol that contains armature animation and transform-->flip it horizontally on a keyframe, that flips the symbol everywhere else (in all scenes that it is used in)
+resolution- I couldnt quite find a solution to this problem. In my animation,I had to turn my character to the other direction and make him run. The only way to do that was to create another armature and use most of the symbols from the previous one.
*Bug: If you have multiple symbols on one layer ,and you select them ,right click and choose "distribute to layers", Flash CS4 might either give you "unknown error" or crash altogether,losing all your progress.
+ to avoid: dont "r.click>distribute to layers" many symbols and especially if they contain other symbols. Save your progress before doing that.
Flash CS4 symbol armatures can NOT do the following things:
You can not set loop/start/single frame on every keyframe of the armature's layer. If you need facial animations, you can only tell the armature where to start from, so the whole timing of that animation must be inside the (head) symbol itself, no cheating there.
You can not put any blank keyframes in the armature layer.
If you resize it in timeline, it will also alter the timing of the animation, it will take away or add space between your keyframes (really annoying!)
You can not really move any keyframes of the armature layer. You can only cut and paste them one by one (no multiple select). Some times it just does not work at all. When you paste a keyframe of a pose, it just adds the keyframe there,but doesnt add the pose itself.
Shape armature: Its somewhat limited and hard to move. It makes the file harder to play. You can not attach it to a symbol armature,which is a real pity.You also have to use the bind tool to skin the shape. The bind tool has one of the worst gui's I have ever seen in my life. It's deformation point markers are huge and often overlapping each other, even when you zoom as much as possible. That makes it hard and even impossible to select individually (or see for that matter) some of the control points (or most of them).So when you make a shape to rig, for the love of god, draw the shape with the pen tool- use as less as possible control points!
My overall impressions of Flash CS4:
Shame on you adobe, for releasing such a bug-riddled version of flash! It introduces the new ik features,but It is so buggy and limited, that it is somewhat better to avoid using ik if possible. If you want to have nice IK structures and parenting, go for Anime studio (moho) or toonboom Animate. Both are nicer for animation , more stable and probably cheaper as well. Flash CS4 has caused me some grief, but I think that I managed to establish some control over some of it's new features.
Obviously I had to take it apart and mess it up to demonstrate the set-up. The only symbols of the rig that contain variations/animation are the hands and the head, thought in some cases it might be useful to have that for the torso as well. One thing that could have been done to improve this is to make it possible to move the character's shoulders by adding one extra chain with a hidden symbol between the neck and the upper arm.
Bugs in flash cs4
Here is my report on problems I met while doing my Toast! animation for Bradford university. I might have to add some more to the list, as it is not completely finished yet.
Bugs with the rigs/ rigged symbols:
*Bug: Head symbol animation won't play properly timed in test movie/exported file, thought it plays just fine in flash cs4. It will freeze on the first frame it is set to start from
+fix: When you have an armature layer, be sure to set it to start from frame 1 and it doesnt have any blank space before it starts. Put it in a symbol and have that symbol start the armature animation inside from frame one.You can tell the head symbol to start from whichever keyframe it starts in the particular scene in the armature itself.
*Bug: After the armature is keyed and animated, for some reason its messing up the pivot points and that causes limbs/head/bodyparts to fall off.Even when you move them to attach them back, that breaks their position in previous keyframes.
+fix: Quickest way is to just start over and
DO NOT DO the following after you start keying the armature (you can only do it before you animate), it will cause this bug:
--don't use the transform tool on the armature layer- be it parts of the armature or the whole layer.If you need to move the whole model, put it in a symbol or set the armature in a way that lets you move it (enable movement on root or skeleton).
--don't touch any pivot points
--don't alter any of the constraints that you have already set up. Be sure to check that you don't have to add or take value before you start animating. You can enable and disable rotation and so on, but you can not touch the constraint values that you have set before animating.
--Don't ctrl(+shift)+up/down -- arrange the symbols -- after you start keying your armature. It might cause weird problems.
*Bug: After copy-ing the symbol that contains armature animation and transform-->flip it horizontally on a keyframe, that flips the symbol everywhere else (in all scenes that it is used in)
+resolution- I couldnt quite find a solution to this problem. In my animation,I had to turn my character to the other direction and make him run. The only way to do that was to create another armature and use most of the symbols from the previous one.
*Bug: If you have multiple symbols on one layer ,and you select them ,right click and choose "distribute to layers", Flash CS4 might either give you "unknown error" or crash altogether,losing all your progress.
+ to avoid: dont "r.click>distribute to layers" many symbols and especially if they contain other symbols. Save your progress before doing that.
Flash CS4 symbol armatures can NOT do the following things:
You can not set loop/start/single frame on every keyframe of the armature's layer. If you need facial animations, you can only tell the armature where to start from, so the whole timing of that animation must be inside the (head) symbol itself, no cheating there.
You can not put any blank keyframes in the armature layer.
If you resize it in timeline, it will also alter the timing of the animation, it will take away or add space between your keyframes (really annoying!)
You can not really move any keyframes of the armature layer. You can only cut and paste them one by one (no multiple select). Some times it just does not work at all. When you paste a keyframe of a pose, it just adds the keyframe there,but doesnt add the pose itself.
Shape armature: Its somewhat limited and hard to move. It makes the file harder to play. You can not attach it to a symbol armature,which is a real pity.You also have to use the bind tool to skin the shape. The bind tool has one of the worst gui's I have ever seen in my life. It's deformation point markers are huge and often overlapping each other, even when you zoom as much as possible. That makes it hard and even impossible to select individually (or see for that matter) some of the control points (or most of them).So when you make a shape to rig, for the love of god, draw the shape with the pen tool- use as less as possible control points!
My overall impressions of Flash CS4:
Shame on you adobe, for releasing such a bug-riddled version of flash! It introduces the new ik features,but It is so buggy and limited, that it is somewhat better to avoid using ik if possible. If you want to have nice IK structures and parenting, go for Anime studio (moho) or toonboom Animate. Both are nicer for animation , more stable and probably cheaper as well. Flash CS4 has caused me some grief, but I think that I managed to establish some control over some of it's new features.
Monday, February 8, 2010
Flash rig notes
Ok, I think I'm finally done with the rigs. The robot rig is easier to control, while the boy's rig is separated into some pieces which I will have to move and key accordingly (like the old times).
While rigging, I took some notes of the process and the things that I learned from the whole thing:
Shape Rig notes(bind tool):
Symbols Rig notes:
And here is me having some fun while posing the characters:
Still work to be done on the character libraries. I think I managed to get the hardest bits out of the way by now.
While rigging, I took some notes of the process and the things that I learned from the whole thing:
Shape Rig notes(bind tool):
Symbols Rig notes:
And here is me having some fun while posing the characters:
Still work to be done on the character libraries. I think I managed to get the hardest bits out of the way by now.
Saturday, February 6, 2010
Rigging in Flash- Toast progress report
"Toast!" Character libraries are half way there. It took me one day to learn the two ways of rigging in flash. I just had to take advantage of this new function. Though it still has some minor issues to iron out.
There are two ways to use the bone tool in flash, and my curiosity just had me use both. For smooth deformation I used the shape rig for the boy. Rigging a shape can be tricky and I found that in the hard way. Almost a whole day of frustrating trial and error tests paid of in the end. What did I learn? Well, you have to be careful how you draw your character. Just as it is with skinning in 3d, you have curve control points on your character, which will be affected by the rig.For that reason, its preferable to have less of these points where not needed (they might mess up the character after the rig). It's also tricky where you put them and skin them,so the shape bends predictably without deforming too much.
Cons of a shape rig:
- it can NOT contain any symbols which can be keyed! (can't connect the head to the body and the arm to the hand) My solution:separate legs+feet and arms from the rest of the body
-Sometimes when you constrain some points,and you move the rig, you have to edit constrains all over again...
----------------------------------
I just started the robot rig, doing the other way- the symbols rig. This way seems to be easier than the shape rig, but it also has some issues. I found it to be slightly unpredictable and glitchy. I shall note the problem after I find out why it's acting like that some times. I just hope it doesn't blow up my robot before I manage to finish this project in time...
Tuesday, February 2, 2010
Toast! storyboard ver1
Today I got some valuable feedback for the storyboard from my animation tutor at uni, who also has a blog here . He liked my storyboard. I am really glad that there is someone like him to show it to, because he's a guy with experience and his feedback is valuable..
Here is what I got this far:
First of all, the rules of my assignment do not allow me to make the animation longer than 30 seconds. But I have too many shots put in that small time window.And the duration of some of the shots is too short. So 10 seconds must go. For that I must cut out some of the first shots. Some other scenes need a slight change in the camera and the composition (more space between and around characters).
after thinking about it, I decided to make a short version of my animation (for the module assignment) and later a longer one which will be as much as at least 2 minutes!
Before editing my storyboard , I would like to post it in the name of good documentation and progress evaluation. So here it is, no revisions- purely as it came out of my mind:
Toast! storyboard ver1 01.02.2010
I used software called Toonboom storyboard to do it. You can download a trial version, but you should export your work as a video/pdf before you close the app, because if it has over 30 panels, you are not going to be able to open it again.
It's a really awesome application for storyboards- simple and powerful. This storyboard took about 2 hours to make with it.
Here is what I got this far:
First of all, the rules of my assignment do not allow me to make the animation longer than 30 seconds. But I have too many shots put in that small time window.And the duration of some of the shots is too short. So 10 seconds must go. For that I must cut out some of the first shots. Some other scenes need a slight change in the camera and the composition (more space between and around characters).
after thinking about it, I decided to make a short version of my animation (for the module assignment) and later a longer one which will be as much as at least 2 minutes!
Before editing my storyboard , I would like to post it in the name of good documentation and progress evaluation. So here it is, no revisions- purely as it came out of my mind:
Toast! storyboard ver1 01.02.2010
I used software called Toonboom storyboard to do it. You can download a trial version, but you should export your work as a video/pdf before you close the app, because if it has over 30 panels, you are not going to be able to open it again.
It's a really awesome application for storyboards- simple and powerful. This storyboard took about 2 hours to make with it.
Monday, February 1, 2010
flash animation project character designs + IK in cs4...
After completing my storyboard for the 30 second animation, the next logical step was to do the character designs- their size and colors. I still have the backgrounds to do, though I can leave them for the end.
name of project: Toast!
duration: 39 seconds (I might have cut it 9 secs, will try to beg my tutor to give me 9 extra seconds)
Character sheet:
Its not perfect perfect- I know, But i dont really need it to be at this point.
I will release the storyboard this week, at this blog .. I made both an animatic and a pdf storyboard
Meanwhile,I've been studying the new features of Flash CS4, since my experience is on cs3. The new version does introduce some really good features, namely inverse kinematics. After seeing how simple it is implemented and how powerful it can be, I decided to move to actionscript 3.0 fla files for the project (since 2.0 doesnt support ik). The new tweening system, the two types of armatures and their inverse kinematics are really going to save me a lot of headaches!
Watch about how to use IK in flash here:
http://www.youtube.com/watch?v=_iql2VMnKCA
name of project: Toast!
duration: 39 seconds (I might have cut it 9 secs, will try to beg my tutor to give me 9 extra seconds)
Character sheet:
Its not perfect perfect- I know, But i dont really need it to be at this point.
I will release the storyboard this week, at this blog .. I made both an animatic and a pdf storyboard
Meanwhile,I've been studying the new features of Flash CS4, since my experience is on cs3. The new version does introduce some really good features, namely inverse kinematics. After seeing how simple it is implemented and how powerful it can be, I decided to move to actionscript 3.0 fla files for the project (since 2.0 doesnt support ik). The new tweening system, the two types of armatures and their inverse kinematics are really going to save me a lot of headaches!
Watch about how to use IK in flash here:
http://www.youtube.com/watch?v=_iql2VMnKCA
Sunday, January 31, 2010
Flash animation Pipeline
It's second semester now and I have a special assignment as part of one of my modules- Create a 30 second animation in flash... Sounds simple, right? Well,no! 30 seconds is not enough to create something meaningful for me. I had a lot of trouble coming up with a story that will last only 30 seconds and will put a smile to someone's face.
So the biggest issue was really fitting it in 30 seconds.
So the biggest issue was really fitting it in 30 seconds.
I felt like I have an advantage over the other students (well, some of them) .. I already have worked with flash on a professional level. I have worked on an animation show, called scoyo and another one- bio. So I know how the pipeline works- the steps in the production of animation. Nobody at uni told us (yet?) how does the pipeline work with 2d animation. Nobody told us how to do it, the storyboard, how to organise the fla files and take full advantage of the software. My guess is that they will in the following weeks. But I already have it all in my head. So, in case some fellow students from my course read this, I hope it will help them.
This is my production pipeline for 2d animation. Something that I learned from work experience.
This is my production pipeline for 2d animation. Something that I learned from work experience.
Flash animation Pipeline
By Todor Imreorov
1.0 Storyboard
2.0 Character sheets
Make character variation sketches ---> make a character sheet
3.0 Animation in Flash
3.1. Set flash file3.2. Import storyboard *.mov file and set the global timeline
3.3 Set the scene and create the character libraries
example of symbols/sub symbols hyerarchy
Subscribe to:
Posts (Atom)