QUESTIONS and ANSWERS FOR ALL

[BradBradleySL]

I am still working on the book for KoolMoves, but I thought it would be nice to have sort of an interactive production of this with questions and answers from all, my opinion of what something is, may be different from someone elses..get??

First off I am going to post some terms...if you know them, then please feel free to answer them, if you don't know them or would like to know more, then keep checking back here and the answers (hopefully) will be given. These are terms you should know if you want to animate at all. I and others(i hope) will discuss how to do each of these things in KoolMoves, which should help bring along the production of the book with different ideas:)

tweening

onion skinning

panning

zooming

lip syncing

fade ins and fade outs

walk cycle

rotoscoping

frames/cells

squash

stretch

[BradBradleySL]

Right away I will answer one of my own questions....

rotoscoping-
One of my favorite learning tools, the idea is to use a real life or other image as a guide to creating your image.Basically you trace!
You can also use a sequence of images, say a man and woman dancing and trace each frame to create the realistic movement of them dancing. Though you don't want to over kill with this, cartoon animations tend to go beyond reality, like an arm stretching more then it should when throwing a ball. They do this because people don't believe the strict movements that rotoscoping creates, and seem to interpret the animation as fake. But it is a great learning tool, and many animation companies use rotoscoping to speed up there production, a well known example would be DISNEY. You can easily rotoscope in koolmoves by using the trace image feature.

1.Go to file
2.Trace
3.Display image
then choose you image and trace away

[BradBradleySL]

Well hope others will pitch in.

Todays term is onion skinning...just randomly picking.:)

Onion skinning is a term that relates back to the good ol days when the cartoons were first drawn on paper that was made from real onion slices...kidding. But the paper was called onion paper, not really sure why, if anyone knows if they are made from onions or the details of why it is called onion paper, please share, i am curious:)
Well onion skinning is when previous frames and following frames in an animation can be seen at the same time in varying degrees of intensity depending upon there closeness to the selected frame, the more transparent the image the farther away from the selected frame. Onion skinning can be used to observe the movement or changes in the animation clearly and make sure the animation is fluid. Well be back later today...with more info..maybe i can find out why it is called onion skinning.:)

[BradBradleySL]

Onion skinning can easily be accomplished in KoolMoves...

1.click view
2.click onion skinning
3.check onion skinning in the dialog box
The number of frames that are shown can be altered by editing numbers in the two boxes in the dialog box. The default is four frames.

[BradBradleySL]

The area that you are drawing on in KoolMoves, is a frame. Frames are what make up an animation, in KoolMoves you can animate very easily, create a circle, add a frame by pressing the plus sign on the tools bar, move the circle in the new frame and viola!! An animation!! A frame could also be known as a cell. A cell is what was originally used prior to the modern technology of computers and software, basically a transparent sheet was painted on, and each frame of the animation was(actually still is kind of)individually painted and then photographed. More later...but an idea you might want to try...

A great thing about KoolMoves is the capture frame ability.
You can create an entire animation and then capture each frame and output it to .bmp/etc. and then edit it in another program.

You can capture frames by
1.go to file
2.export to web
3.capture
4.in the dialog box choose your format and save

Now the idea thing-
I used to create cells by printing out images i created in a paint program. I printed out the cells on transparent paper, which you can purchase at almost any office supply store. So I had a "cell".
A note some printers may not be able to print on transparent paper, check your printers documentation.

More later...

[johnie]

I decided to add some to Brads.

To Intergrate Javascript with Kool Moves simply type Javascript: [script] Into the get URl Box. Leave the target box empty. You can use any function or any Method call in the Get URL box. Keep in mind though that you with all Java Script functions you have to define the function before you call the function (physically in your html document).

To send data back into the SWF you must us Flash Player Methods. Flash Player methods will allow you to use Tell Target commands, Set properties, and to physically change Frames and load aditional movies to the SWF. The Flash Player Methods that can be used are relational to the version of the Flash Player the user has installed on their machine. A complete list of Flash Player Methods and their uses can be found here... http://www.macromedia.com/support/flash/publishexport/scriptingwithflash/scriptingwithflash.html

[johnie]

FS Commands can be used in Kool Moves. Although FS Commands are supposed to be the way in which Flash comunicates with the Native scripting environment, the Javscript: method is more reliable.

FS Commands should be used when you are comunicating with the native scripting environment or the Flash Player (If you have Java or Visual Basic or C++ and are wanting to intergrate Your SWF within a program use the FS Command. FS Commands work with any Live Connect or Active X enabled language).

To use FS Commands within Kool Moves you will need to type FScommand: (type it exatly) in the Get URL action Dialog. Then imediatly following the colon type the command. Then in the Target Box you will want to type the arguments. This link will give you the FS Commands available to you: http://www.macromedia.com/support/flash/publishexport/scriptingwithflash/scriptingwithflash_03.html

There is one undocumented command that can be used with the Flash 5 Player. This command is the Save comand. Type FScommand:save in the Get URL and then type the file type and name in the Target Box. This will save all set variables in the timeline for retrival latter.

[johnie]

To Label Frames in Kool Moves what you need to do is select Frames> List Frames. After you have the Frames listed double click any of the Frames. You can now label the Frames.

To Label Shapes in Kool Moves select Shapes>list shapes. The shapes menue will slide out of the left. You can now label any of the shapes that you want.

[chance]

Thank you - please keep this going - and if you could add loading and preloading to this list, it would be really a great help.

[johnie]

Kool Moves make preloading a snap becuase it auto creates the preloader for you. To make a preloader with Kool Moves simply select Movie> Preload (the short cut is Alt-M then P) from the file menu. You will then be presented with a preload dialog.

To have your movie preloaded simply check the preload movie box (If you don't preload then you're movie will stream... If you stream your movie you want to take extra care about bottle-necking... I'll talk about this another time). Once you have set Kool Moves to Preload you have 2 options (represented by the radial buttons);

Text Message- When this is selected you will be able to leave any text message that you want as a preloader. Simply type the preloading message into the dialog. You also can change the font size and style by hitting the options button on the right of the Text Message text input box.

Movie(.FUN)- When this option for a preloader is selected then you can select a small movie as your preloader. Simply select this option the hit the ... button on the right to select the .Fun file that you wish to use as a preloader. The movie will loop until the preloading is completed. You could concievably hide (and its recomended that you do this) the fact that you are preloading a large file by putting a small game or credit trailer to the larger movie in front of it as a preloader.

The last option in the dialog will allow you to select what precentage of the movie you want to preload. Remember though that what you don't preload will stream and may not synch 100% (keep this in mind with large sound files).

[johnie]

For those of you wondering how to make a percent bar Preloader but have realized that with the Auto Preloader this option is not available I will tell you how here. I seperated this section from the normal preloader section becuase it should be used by advanced users.

****Warning- You need to be familure with Flash Player Methods (See Above), Javascript Intergration (See Above), Frame Counting, and general Javscript concepts (A good tut is at http://www.webmonkey.com ). ****

In order to make this work what you need to do is write a function that utilizes both the PercentLoaded method and the GotoFrame functions. Your Script will look a lot like this (Feel Free to use and modify this script to suit your own needs without restrictions as I am explicitly placing this script and method of Preloading with Kool Moves into the Public Domain for any uses. As this script stands it will only work on MS IE Explorer 3.0 and higher and only has 2 Frames for a Preloader. I highly suggest to anyone using this script that they add a browser detection script to make it cross browser):

<SCRIPT language="JavaScript">
function preload(){
var Name = window.document.movie;
var percent = Name.PercentLoaded();
if (percent == "50"){Name.GotoFrame(4);Name.Play();}
if (percent == "100"){Name.GotoFrame(6);Name.Play();}
}
</Script>

Now this script needs to be placed before you embed your SWF in the HTML document.

Now here is the tricky part... In my script here I have it set so that when the function preload() is called it will check to see if the movie has loaded to 50% if it has then it will foto Frame 4 and Play. Then it checks to see if the Percent Preloaded is 100% if it is then it goes to Frame 5 and Plays. So this presents an interesting problem. How do we get the movie to call the function throughout the loading process?

In order to do this we will first set our tweens to 0 (becuase we want to make frame counting easier- we don't have two but remember to count all the tweens if you don't.) and start by drawing a 0% bar at Frame 1 Then Frame 2 just copy Frame 1. In Frame three copy the Frame two but add the action Get URL Javscript:preload();void(0); to the frames actions and a goto Frame 2 action. This is our First Farme loop. Pretty much this loop will loop until the movie reaches 50%. In Frame 4 we Draw our preloader bar at 50% and Frame 5 we copy it. We add the Frame action get URL Javascript:preload();void(0); and the action Goto Frame 4 and Play at this pont. At Frame 6 we draw our bar at 100% and possibly add a couple of tweens in so that the viewer can see the movie has completed its preload (Please Note we could have added any # of refrence points for the Preload) and then start the movie.

I do want to add 1 thing here and that is the importance of only viewing the SWF inside of the HTML that you create to go along with it. If you don't then this movie will luanch an infinite # of windows efectivly crashing your machine.

That's it on Preloaders...

[johnie]

In Kool Moves when we talk about Loading Movies there are two types of things we can be talking about. We can be talking about the File Function Insert Movie (It early versions it was called Load Movie) or we can Be Talking about The Load Movie Action. The diference between the two is that the File Function deals with .FUN Files on your Local Hard Drive where as the Load Movie Action Deals with the SWF (The finished Product) loading another SWF (It doesn't mater what produced it) anywhere on the web or your local machine, and then Playing it.

The Load Movie Action is accessed either through the Button Action Dialog or through the Movie> Sounds and Actions Dialog ( This dialog is associated with Frame Actions). When you select Load Movie you are given a dialoug that asks you both for the URL and Level to place the movie. You can select any URL on the web by typing in the URL as http:// and the full web address as the URL. To understand levels:

Imagine a stack of pappers laying on your desk. The bottomost papper is at level 0 the next papper is at level 2 and the next at level 3. The higher the number there is the closer to you the level is. Now what happens is the background setting of Level 0 is the only background that gets displayed. All of the higher levels are transparent so that you can see the layer bellow it.

Imagine the levels as empty slots and you can place or remove any movie you want into those slots. The load movie action places the swf into that slot while the unload movie rwemoves those from the slots.


Now lets talk File Functions cause these are diffrent and usefull

The File function Load Movie allows you to place any shapes or group of shapes from another .Fun file into your current movie.

Before we start on this function lets talk about the diffrent save File functions;

Under File there are the standard save functions that anyone would expect. You Have Save (CTRL S is its short cut) and Save AS (Alt F-A). Both of these functions allow the user to save an entire movie.

But lets say we don't want the whole movie- perhaps we only want 3 or 4 shapes or how about just 3 or 4 frames?

To save a group of shapes or shape this is how you do it. First select your shapes. You can select them in many diffrent ways. Drawing a rectangle around them with the select tool, Selecting each shape with the mouse + the shift key, or by hitting the list shapes button and then selecting the shapes from the list (remember to hold down the shift key to select multiple shapes). Once you have selected your shapes hit Edit>copy (copy can also be found in the both the right click menu and Ctrl-C or Alt-E-C). Then Select Paste to File. When you do this just keep in mind that there is only 1 frame in the timeline and your shapes when loaded into another file cannot be extended when loaded like a short clip.

To save a group of Frames or sequence of frames you will do this; Either Select Frames> list Frames from the menu or hit the list frames button (it is the button in between the seconds display and the frame Bar). The Frame display will slide out of the right hand side of the screen. Now select the Frames or group of frames that you wnat selected (hit the shift key to select a group of frames). Once you have the frames you want selected then hit Ctrl-C to copy your selction. Again just like the shapes you are going to select paste to File from the Edit menu. If you have pasted more than 1 frame to file then you can use the timeline placement feutures in the insert movie function.

Now for the Insert Movie function...

To use the Insert Movie function hit Alt F- I- Enter or select File> Insert Movie. When you do this you will see the Insert Movie interface appear. On the left will be the Files avialble. Right of that you will see the preview pane, and then right of that you will see the ADD, Cancel, and Help buttons.

The first thing you will do is find the right Fun File and click on it to load it into the interface. You will see your movie on the bottom and the added movie previewing above it (Always on the layer closest to you). If your new movie is only 1 Frame long you can only make it last 1 frame. The colors of the text and shapes will be displayed under the preview. By double clicking any color bar you can change the that color before adding the clip to the movie. Under that you will see The X and Y positioning. You can change the physical loaction of the inserted clip by placing numirical values in Pixels into these boxes (Remember negative Numbers in the X value moves left positive numbers move right. Negative numbers in the Y value move up where positive move down.). Finally you will see the timing boxes. You have 3 choices here; The start Frame value, the End Frame Value and the Speed control. If your movie clip has 2 or more frames you can extend the length of the clip over as many frames as your current animation or stop and start it anywhere within it [The current animation]. Just select your start and finish frames while the preview window shows you what the inserted movie will look like with those settings.

When you are happy with what it looks like then click the add button to add the clip to your current movie.

[Edited by johnie on 01-25-2001 at 03:36 PM]

[BradBradleySL]

I am combining the two terms because they are very related.
Squash is the effect used in animations to show the effect of the weight of gravity on an object. Stretch is the effect used in animations to show the effect of movement against gravity on an object. A good example would be a rubber ball bouncing, when the ball hits the ground, its shape changes from a circle to an ellipse and is squashed, and as it accelerates back up into the air(bouncing) its form stretches slightly.

Both squash and stretch can be created in KoolMoves be simply using the squash tool in the effects tool section.

More detail on this later..

Back to cells...
Ok why should you be excited about being able to print out parts of your animation onto transparent sheets, well you can actually create an animation the traditional way, which is to me very cool.

This is how you do it, once you have printed out your transparences/cells:)

Things you will need, a tripod, a video camera, a table, possibly a background(a picture that you painted..etc and which you will place behind the cell, or you can simply use a black or white background..sheet..etc.)a watch if you want
, and good lighting

Ok this is what you do..

Set up the video camera so it is pointed straight down at the table

place your cell upon what ever background you have selected

press the record button on the video camera for no more then 3 seconds then stop

and repeat

Once again...any questions...please ask:)

[BradBradleySL]

Well first thing, what is a walk cycle, well my personal definition is the repeated motions a character performs while walking(ie. swing of arms,movement of hair..etc.)

some good pencil test examples to study can be seen here...

http://www.tcp.com/~bigboote/ptest.html

The best way to get the hang of creating walk cycles is by rotoscoping...which was discussed above. Fortunately, creating walk cycles will be easier, very soon with the release of the pro version, which will include bones:) And when the pro comes out i will include detail on how to recreate walk cycles with the bones.

Some things to not when creating your walk cycle:

1.keep a watchful eye out when tracing your reference image, and make sure the program morphs the shapes correctly

2.remember while you walk all that you are basically doing is falling forward, its actually amazing that we don't fall flat on our faces.

3.when thinking of hair, clothes, a tail, etc....remember gravity, each step is like a mini jump, so when beginning a step the hair is or the tail is going to flow downward, because the character is jumping(remember the squash and stretch section) and the the character has fallen, or taken a step the hair is going to flow up, just think....foot up=hair down and foot down=hair up, of course you should experiment and find out exactly how much is right for you character.

4.the whole body moves when a person walks, the head, shoulders, as i said arms, chest, remember that walking actually involves the whole body

5.lastly remember that a walk cycle is a CYCLE, do not have each repeated motion different or you could end of with a limping character or worse, which might be cool, depending on what you want. Also remember since it is a cycle all you have to do is go through it once and cut and paste:)

Well that is it....

[johnie]

Frame rate indicates how fast the movie is moving. If we are talking about movies the FPS and Framerate is the spead at which the projector is is turnning the film past the light source.

Video and television typically runs at 30 FPS where as film traditionally rans at 24 FPS (it can run at any speed though. Here is an interesting article about converting Film to TV if you are interested in this sort of stuff http://gregssandbox.com/gtech/movievideo/24-30fps.htm )however many animations and animation techniques involve producing animation at a lower (FPS 10 and 12) and then converting to telvision. Most Cartoons and Anime are done at 12 or 15 FPS to save money (Remember traditionally those frames were hand painted) while most High Quality Animations like Disney Feature Films are done around 24 or or 30 FPS. A good example of Frame Rate differences would be to watch the Disney Little Mermaid Movie and then watch the Disney Satarday Morning Cartoon with the same title and you will see the diffrence.

The Faster the frame rate an animation has the smoother the animation (Remember the Little Mermaid example?) and the trade of is more tween cells the animation studio had to produce (making it more expensive). Now Kool Moves generates those tween frames (Just click on button to the far left of the frame opertions icon group- its the drop down with the numbers) for you so it isn't that big a deal for you to raise the frame rate but there are some things you must keep in mind.

The Flash 4 Player could only achieve a max frame per seconds of 18 FPS. So first off anyone setting the Frame per second rate higher than 18 can garuntee that viewers who have not updated their player will see the Flash movie slower than it is meant to be seen. The Flash 5 player will attempt to play the higher Framerate at the expense of eating system resources. Movies with frame rate settings of 30 or higher when played on a machine with the Flash 5 player but tested on a machine with the Flash 4 player will appear speeded up drastically ( See this Tech Note: http://www.macromedia.com/support/flash/ts/documents/player5_issues.htm ) and may cause the computer to crash or lock up. As stated in the Tech Note users should set their FPS at the true target range of 15 to 18 FPS and never over 30(- which is what video uses) unless you have a very special need to have it that high.

Now to adjust FPS in Kool Moves simply hit Movie> Speed and set the FPS to the desired level (The defualt is 12).

[BradBradleySL]

Found the good link...finally...


http://www.gamasutra.com/features/20000406/lander_pfv.htm

Thank CNO for this...


[Edited by BradBradleySL on 01-29-2001 at 12:58 PM]

[BradBradleySL]

Going to go a little into character design before going to much more into animating, because what would be the point of knowing how to animate a lip sync if you don't even have a character:)

First some drawing techniques:)

http://www.jdillon.net/index2.html
great tips on drawing in the anime style

http://picopicolina.tripod.com/anatomy.htm

More later...i feel the footsteps of my boss....

[BradBradleySL]

Great info in this thread so bringing it back up and continuing..


Ok lip syncing, one thing to remember is that you aren't creating the entire word merely the phonetic of the word ie. I-O-U, etc. etc.

http://www.ibisfernandez.com/pages/017.htm
This is a link to a good site displaying basically all you need to animate lip sync..

[BradBradleySL]

http://www.animationmeat.com/index2.html
Get the meat on how to animate.
Great notes/tips from some masters.


Some tips

1. Path of action: The path of any motion should be plotted out in advance. For
simplicity's sake, it is best to plot this out on a single sheet, and use this as a guide
for all positions.

2. Extreme poses and inbetweens: Work hard to get good extreme poses, and the
inbetweens will come naturally. Most animation uses this system. The other way to
animate is "straight ahead." This is more natural, but harder to get right. Very
experienced animators sometimes create extremes that are only used as a rough
guide for their fluid, straight ahead animation.

3. Slow-in, slow-out: Lifelike movements start slowly, speed up, then slow down
before stopping. The inbetween positions will generally be closer together near the
extremes:
|| | | | | ||

4. Anticipation and follow-through: These are grouped together since they both
involve principles of inertia. Characters should anticipate a movement by moving
slightly in the opposite direction. Follow-through means incorporating inertia into your
animation. For instance, when a character moves quickly and stops, his clothing
may continue to move for a fraction of a second, then fall back into place. Great
examples of follow-through can be seen in classic fat characters.

5. Overlapping action: If you just animate one action at a time, your characters will
have a robot-like appearance. In good cartoons, as in the real world, movements
overlap.

5. Exaggeration! Tracing a motion from live action film rarely produces satisfactory
cartoons, since the whole idea of cartooning is to parody the real world. Push your
extreme drawings to the limits!

[chadmagic]

I have learned a great deal just by reading these posts.