Creating animations

March 6, 2008

    * Pro Motion is a low cost, feature packed paint program that is especially designed to create frame based animations. It supports FLIC files, Animated GIF and a private animation file format.
      One of the strong points of Pro Motion is the handling and creation of images and animations with 256 colours. It offers full control over the palette.
      Pro Motion can be extended with plug-ins to support more file formats or to add image processing filters. A good example is the PluginMaker plug-in, which modifies frames in Pro Motion under control of a user-written program. A plug-in to add support for EGI extended FLIC format is also available here.
    * Plastic Animation Paper is a professional, easy-to-use cel drawing program (to create frame based animations). It is especially good in creating cleaned-up "inked" drawings from initial "rough sketches". It’s light box (onion skinning) is convenient to use.
    * Already mentioned, Chromacolour International. is a good source for hardware and software for both traditional or computer-based animation.
    * Paint Shop Pro by JASC Software, Inc. is a nice program for drawing and image processing. Notable for Paint Shop Pro is that it can save the alpha channel in a separate file in the .BMP format (although the extension is .MSK). These (alpha channel) masks can be used with AniSprite.
    * TVPaint by CiS is a full featured paint and animation program.
    * Video editing programs, like Adobe Premiere, can be put to good use for animation as well. Next to the transition effects and the general image processing filters, these programs also provide support for sequencing and synchronization.

Comments (0)

Animation Tips and Tricks

Animation is all the rage on the web and is becoming more popular every day. But before you begin to create animations for your web site, you need to consider some basic questions, such as: What is its purpose? What kind of audience do you want to attract? What are you trying to say/promote? Will the animation add interest to your site or detract from it? If you’ve decided that having an animation will add value and interest to your site, we move onto other considerations, which include file formats and size, along with design and execution.

When looking at the available image and animation formats, here are a few things to keep in mind. JPEG, (Joint Photographic Experts Group) is a 24-bit file format and is the overall best choice for compressing photographs, naturalistic artwork, grayscale images and similar material. As a JPEG file is compressed, it discards data and is referred to as a "lossy" format. Repeated saving discards more data and can cause "artifacts," where portions of the image begin to clump together.

GIF, (Graphic Interchange Format) is the format of choice to compress lettering, simple cartoons, and line drawings. GIF images are often made up of Vector graphics, such as lines and curves, which are mathematically defined, so they produce a high quality result, no matter how much they are scaled, but a GIF is a bitmap format, so the scaling options don’t apply. GIF files are often composed of few colors and compress well. Other common animation formats are AVI (Audio-Video Interleaved - a desktop video movie format from Microsoft), MPEG (Moving Picture Experts Group), MOV (Quicktime), SWF (the Flash Player format) and Shockwave.

When using image maps in 3D, file formats to consider are: JPEG and GIF as above, as well as TIFF (Tagged Image Format), TGA (Targa, by Truevision) and PNG (Portable Network Graphics). PNG is worth noting because it offers a 48-bit true color setting and a 16-bit grayscale setting. One advantage is that PNG is lossless, meaning that no matter how many times you save the file, you will not lose data. This is important for maintaining high-quality images. Another factor favoring PNG is gamma correction, a setting used by many image manipulation programs to measure brightness and contrast levels. PNG automatically adjusts the gamma setting and makes sure that images look correct across platforms.

On the down side, PNG files are almost always larger than JPEG images. Another issue involves file size and compression. As an example, let’s say you took a 24-bit TIFF file and saved it as both a PNG and a GIF. The GIF format would be smaller due to the fact that PNG uses up to 48 bits of color, whereas GIF uses only eight. The GIF compression scheme discards a lot of data, while PNG almost always saves images in a 24-bit color format. Thus, there is no way the files can compare. Regardless of PNG quality, JPEG is still a better choice for 24-bit color images. PNG files tend to be five to 10 times larger than a standard JPEG file. Other caveats: Don’t recompress JPEG files with PNG because artifacting can become a problem. And don’t add alpha channels to opaque images because this can create large files unnecessarily.

Below are 10 animation tips designed to help you make clear decisions about animation aesthetics, implementation, storyboarding and optimization, without sacrificing quality. These tips, while aimed at 3D, can also be applied GIF or Flash animations.

1. Before you even begin to create animations, there are several important aesthetic issues to take into account. To elaborate, a single animation on a web page will overwhelm all static images, so placement is important. As mentioned above, make sure that the animation is beneficial to your web site, otherwise you will lose your audience.

2. Before you place a finished animation on your site, be aware that if you have more than one animation on a single page, the effect can overwhelm the viewer and turn them off, rather than draw them in. Also, animations that cycle endlessly can quickly become annoying. Design your animation with a finite number of loops, so that it eventually stops.

3. Once you’ve decided to create an animated sequence, you need to start with the fundamentals. Of these,
a crucial step is the creation of the storyboard. Here, you detail the animation in a precise fashion with sketches, scripts, transitions, timing, etc. It is with the storyboard that you can work out many creative difficulties. And once you’ve finished the storyboard, you have, in a sense, created the animation.

Comments (0)

General principles of timing in Animation

March 2, 2008

The ‘readability’ of ideas depends on two factors:

  1. Good staging and layout, so that each scene and important action is presented in the clearest and most effective way.

  2. Good timing, so that enough time is spent preparing the audience for something to happen, then on the action itself, and then on the reaction to the action. If too much time is spent on any one of these things, the timing will be too slow and the audience’s attention will wander. If too little time is spent, the movement may be finished before the audience noticed it, and so the idea is wasted.

To judge these factors correctly depends upon an awareness of how the minds of the audience work. How quickly or how slowly do they react? How long will they take to assimilate an idea? How soon will they get bored? This requires a good knowledge of how the human mind reacts when being told a story. It is also important to remember that different audiences react in different ways. So, for instance, an educational film for children would be timed in a different way from an entertainment film for adults, which requires a much faster pace.

Animation has a very wide range of uses, from entertainment to advertising, from industry to education and from short films to features. Different types of animation require different approaches to timing.

Limited animation

With limited animation as many repeats as possible are used within the 24 frames per second. A hold is also lengthened to reduce the number of drawings. As a rule not more than 6 drawings are produced for one second of animation. Limited animation requires almost as much skill on the part of the animator as full animation, since he must create an illusion of action with the greatest sense of economy.

Full animation

Full animation implies a large number of drawings per second of action. Some action may required that every single frame of the 24 frames within the second is animated in irder to achieve an illusion of fluidity on the screen. Neither time nor money is spared on animation. As a rule only, TV commercials and feature-length animated films can afford this luxury.

Animation is expensive and time-consuming. It is not economically possible to animate more than is needed and edit the scenes later, as it is in live-action films. In cartoons the director carefully pretimes every action so that the animator works within exact limits and does no more drawings than necessary.

Ideally, the director should be able to view line test loops of the film as it progresses and so have a chance to make adjustments. But often there is no time to make corrections in limited animation and the aim is to make the animation work the first time.

Timing in general

Timing in animation is an elusive subject. It only exists whilst the film is being projected, in the same way that a melody only exists when it is being played. A melody is more easily appreciated by listening to it than by trying to explain it in words. So with cartoon timing, it is difficult to avoid using a lot of words to explain what may seem fairly simple when seen on the screen.

Timing is also a dangerous factor to try to formulate—something which works in one situation or in one mood may not work at all in another situation or mood. The only real criterion for timing is: if it works effectively on the screen it is good, if it doesn’t, it isn’t.

So if having looked through the following pages you can see a better way to achieve an effect, then go ahead and do it!

In this book we attempt to look at the laws of movement in nature. What do movements mean? What do they express? How can these movements be simplified and exaggerated to be made ‘animatable’ and to express ideas, feelings and dramatic effects? The timing mainly described is that which is used in so-called ‘classical’ or ‘full’ animation. To cover all possible kinds of timing in all possible kinds of animation would be quite impossible.

Nevertheless we hope to provide a basic understanding of how timing in animation is ultimately based on timing in nature and how, from this starting point, it is possible to apply such a difficult and invisible concept to the maximum advantage in film animation.

 

 

 

Comments (0)

Multimedia Tips

March 1, 2008

Multimedia is the presentation of audio, video, animation, simulation through computer technology. Rather than just static (non-moving) text or images, it provides a dynamic and changing scenario where one can gain a greater appreciation of the subject matter being presented. Unfortunately, a price has to be paid for this added sensation and that price is the processing of large data.

All data processed on a web page is digital and is characterized by "bytes" or million of bytes "megabytes" or "mbytes". Text is composed of pages, paragraphs, words and characters where each character represents one byte. A byte is made up of 8 bits where a bit is either 0 or 1. A picture is made up of a lot of dots or "pixels" where each pixel represents one, two or four bytes depending on the amount of color memory (8-bits per pixel is one byte, 24-bits per pixel is three bytes, etc.). A small picture, e.g., 100 x 100, contains 10,000 pixels and therefore requires 10,000 (10K), 20K or 40K to represent it, depending once again on the color depth (8-bits/pixel, etc.). A page of text, on the other hand, has about 600 characters or 600 bytes (less than 1K) and therefore much less than an image.

When you transfer text or images over the network, pictures or text or a combination are collected and packaged and submitted as bits or bytes or megabytes. The speed at which this data arrives is a function of the speed of all servers involved including the host (in this case LaxPower), the intermediate servers, and finally the receiver (that’s you), where you have a device, usually a modem, which transfers data from a telephone line into your computer memory or fast-memory (cache). A modem that is 28K transfers 28,000 bits per second. A modem that is 56K transfers at twice the rate and therefore downloads pages twice as fast. Systems that run at companies or at school usually run on high- speed "T-1" lines which is approximately 30 times faster than a 56K modem. So these privileged people get data very quickly.

Slower systems can handle text without too much problem. When you introduce graphics, then slower systems do not respond well, whereas faster systems do just fine, e.g., a wait of only a few seconds. Now when you start talking about audio and video, you’re talking large data of many megabytes which can take a long time, e.g., 5-10 seconds per mbyte on a T-1 and 1-5 minutes on a 28K-56K modem. A video is nothing more than digital data representing a collection of images (and sound), so if you have 24 frames/sec and 30 seconds of video, you’re talking 720 images * 20K (or 10K or 40K), which is many mbytes and which is impractical. This is why you don’t see a whole lot of videos on web pages.

For lacrosse, though, it’s important to try and get videos and/or sound because they provide a more meaningful experience of an event or happening. So how do we send you a 25 mbyte video that you can receive in seconds or a couple of minutes instead of a half hour which most people will not have the patience to wait for? We employ tricks and compromises!

Tricks and compromises to reduce data:

  1. We employ a technique called data compression. Compression in very simplistic terms collects data that have the same characteristics and represents them only once and not multiple times. As an example, instead of collecting every pixel on an image and storing its value, why not just collect the first pixel and if its value does not change, just count the number of consecutive pixels and store that number? If an image contains mostly background (e.g., black), then it would be foolish to store thousands of bytes containing "0" when you could just represent this by just a few bytes. Also when storing video, why not subtract data from the next image instead of storing each pixel again? Compression can reduce images from 50 megabytes down to 1 or 2 megabytes. When you receive compressed data, the applications which run your program will be able to "decompress" this data on the fly and you will not know the difference.
  2. We reduce the size of the images. It would be nice to run full-screen images of videos but the data size would be unmanageable. The smaller the size, the less the data. As an example, a 400 x 400 image contains 160,000 pixels, but a 200 x 200 image contains only 40,000 pixels or 1/4 the size. Thus if you are disappointed with the size, would you rather wait four times longer to download this large amount of data? Does your system have the memory capacity to handle that much data?
  3. We reduce the number of colors or go monochromatic (grey scale) which could also reduce the file size to 1/2 or 1/4.
  4. We use the lowest sound resolution which hopefully will not affect the quality of sound output. We may in some cases eliminate sound altogether.
  5. We reduce the video frame rate (keeping the sound at its current rate). If you watch a video at 5, 10 or 15 frames, there is a loss in continuity for the 30 frames/sec that you are accustomed to, but sometimes it is perfectly acceptable, especially if it means viewing or not viewing the video. I have even run 2 minutes of video at one frame per second with the audio at 30 frames/sec and have found that I captured the essence of the event and reduced the data to the 1 megabyte range.
  6. We crop or cut out the peripheral part of the scene that does not add significantly to the content.
  7. We get a faster modem or faster servers which will be happening in the near future.

I have employed a number of tricks to get videos down to a reasonable size for your viewing pleasure. I cannot guarantee the quality in all cases but compromises have to be made.

We welcome any feedback on the following:

  • Is the image/sound quality acceptable?
  • How long did it take to download the video?
  • Did you maximize to full screen? Was that better viewing?
  • Did you automatically play the video from an application on your system or did you have to download a helper application from the web?
  • What is your modem’s speed? 56K?
  • Who is your server? AOL? School dormitory? etc.
Comments (0)

Get free blog up and running in minutes with Blogsome | Theme designs available here