Title
Progressive multi-frame animation software for web objects
Technical Field This invention concerns an animation tool suitable for use with web objects. In particular the invention is a method and system for the progressive animation of web objects. In other aspects the invention also concerns a transmitter and method of transmission, a receiver and method of reception, and a signal for transmission and reception. A further invention involves non-linear replay of animation at the client side. This may be used where the client side parts of the primary invention are present, regardless of whether the animated sequence is being transmitted or recovered from memory.
Background Art
In spite of rapid development in multimedia communication technology, the ability to efficiently deliver multimedia objects over the network is still a problem. A widely used technique on the Internet is the multi-frame structure and linear replay mechanism of the GIF file. In this technique an entire file is loaded and then animation is started. The animation then has a linear replay mode. The animation is not available for other file formats, the GIF format is not compressed and individual frames cannot be indexed and referenced.
Many researches have been done on delivering video over the Internet. The techniques range from video server design, delivery agent, adaptive coding of video and low-level network protocols. Proactive buffer management for delivery of video stream using a pπori information stored in the video stream has also been proposed. This scheme also needs to monitor the available bandwidth. These techniques are all either too expensive or not suitable for animation.
Summary of the Invention Progressive Animation for Web Objects
A first aspect of this invention is a method for animating web objects, including the following steps: (a) Dividing an animation sequence comprising an ordered series of frames, into a plurality of strings of different frames. The first string comprises one frame of the sequence, or more frames widely spaced from each other in the sequence. The second string contains one or more frames, and the frames of the second string are widely spaced from each other and from the frame, or between the frames, of the first string. Each successive string then contains the same number or more frames than the preceding strings, and the frames of each successive string are widely spaced from each other and between the frames of the immediately preceding string, (b) Transmitting the first string of frames. (c) Receiving the first string of frames and then, using multi-thread controls, displaying a first partial animation sequence comprising the frame, or frames, of the first string in a first thread which will repeat until it is killed, (d) Transmitting and receiving the second string of frames while the first partial animation sequence is being displayed. (e) Then, once the second string is received and the first thread reaches its last frame, killing the first thread and displaying a second partial animation sequence comprising the frames of the first and second string, in sequential order, in a second thread which will repeat until it is killed.
(f) transmitting and receiving the next string of frames while the last partial animation sequence is being displayed.
(g) Then, once the next string is received and the last thread reaches its last frame, killing the last thread and displaying a next animation sequence comprising all the frames of the received strings, in sequential order, in a next thread which will repeat until it reaches its last frame and is killed. (h) Repeating steps (f) and (g) until all the strings have been received and the entire animation sequence is being displayed.
A second aspect of this invention, as currently envisaged, is a system for animating web objects, including:
(a) Dividing means to divide an animation sequence comprising an ordered series of frames, into a plurality of strings of different frames. Where, the first string comprises one frame of the sequence, or more than one frame widely
spaced from each other in the sequence. The second string contains the same number or more frames than the first, and the frames of the second string are widely spaced from each other and from the frame, or between the frames, of the first string. Each successive string then contains the same number or more frames than the preceding string, and the frames of each successive string are widely spaced from each other and between the frames of the immediately preceding string.
(b) A transmitter to transmit the strings of frames in order, starting with the first. (c) A receiver to receive the strings of frames in order, starting with the first.
(d) A multi-thread controller to display a first partial animation sequence comprising the frame, or frames, of the first string in a first thread which will repeat until it reaches its last frame and the controller kills it following reception of the second string. The controller will then display a second partial animation sequence comprising the frames of the first and second string, in sequential order, in a second thread which will repeat until it reaches its last frame and is killed following reception of the next string. Then, once each next string is received and the last thread reaches its last frame, the controller kills the last thread and displays a next animation sequence comprising all the frames of the received strings, in sequential order, in a next thread and so on until all the strings are received and the entire animation sequence is being displayed.
In further aspects the invention is a transmitter and method of transmission, a receiver and method of reception, and a signal for transmission and reception, which each involve the appropriate features mentioned above. The receiver may employ client-side buffers, progressive loading frames, and multi-thread animation. The signal itself is divided into 'pyramid' structured stages. The top layer of the 'pyramid' is first transmitted with as small amount of data as possible and then the rest of the layers are transmitted progressively through each level.
The invention enjoys the advantage that some, albeit crude, animation is displayed very quickly after transmission begins since the first string has only a relatively small amount of data and is transmitted relatively quickly. The quality of the animation is refined in steps as each successive string arrives, and no jitter appears in the animation. Since each successive string
will usually have more data than the last, each step in improvement usually takes longer than the last until the entire animation sequence is being displayed. This technique can give users a better view of the whole animation structure as early as possible so the user can decide to terminate the transmission at certain points. It also suits multi-cast as animation can be performed regardless the network capacity and storage space in the client side.
Another advantage of the animator is that it does not require special coded objects. The sequence can still be in original frames, and any file format can be supported. Therefore, the single frame in the original sequence can still be referenced and used for other purposes, such as non-linear replay. The animator can be easily incorporated into Web browser or attached as a plug-in processor.
Although versatile functions are defined, the animator class is relatively compact (less than 6K). It has less overhead comparing with other methods of animation. It can be downloaded from remote site and activated locally, or pre-installed in the Netscape browser as a plug-in.
Non-Linear Control Conventional frame-based animation uses linear replay and the speed of replay is fixed. This is not convenient and sufficient. The usual way to incorporate non-linear replay or change replay speed is to produce duplicated frames and arrange the frames in a pre-defined order. However, this will increase the size of the sequence and transmit redundant frames. The animator described above is lightweight in the sense that it does not carry redundant frames and coding information. In this animator, the control is handled at the client end. It is easy to incorporate non-linear control into the animation. There are three ways to achieve non-linear play: First, it is possible to relate the next frame to be displayed to the last by some formula dependant on the movement of a pointer. For instance, the display of the next frame during the nonlinear control can be expressed as: fn = f c + fd,. dι. where fπ denotes the next frame number, fc is the current frame number and (d, - d can be calculated from mouse movement. Using this technique the client can control the animation speed in both reverse and forward orders by simply dragging the mouse backward or forward with different speeds. The speed of animation increases or decreases with the
speed of mouse movement, while the frame number is displaying to provide a better way to view the animation.
Second, a duration tag can be attached to each frame to define the duration of each frame, say in milliseconds. There is no extra coding needed for the frames.
Third, the animation can also be controlled by a parametrical function, where a waveform, such as a sinusoid, is used to define the velocity of the animation sequence.
Brief Description of the drawings
An example of the invention will now be described with reference to the accompanying drawings, in which:
Fig. 1 is the first two frames of a sequence of seventytwo frames, that are displayed in a first partial animation. Fig. 2 is the three frames of the sequence that are displayed in a second partial animation.
Fig. 3 is the five frames of the sequence that are displayed in a third partial animation.
Fig. 4 is the nine frames of the sequence that are displayed in a fourth partial animation.
Fig. 5 is the eighteen frames of the sequence that are displayed in a fifth partial animation.
Fig. 6 is the thirtytwo frames of the sequence that are displayed in a sixth partial animation. Fig. 7 is the remaining thirtytwo frames of the sequence that form the seventh string of frames that complete the animation when joined to the sixth partial animation.
Best Modes of the Invention Progressive Animation for Web Objects
The invention makes use of a client-side buffer and multi-thread task management to speed up loading and smooth animation.
For an N frame sequence. F0. F, FN . the transmission starts with n0 = l"N/2λ ll frames and is progressed in a pyramid of JI0*2;'J {k = 1. 2 K). During the transmission of the i th level, the frames already downloaded at levels 0 to k-1 are animated in a thread. The old thread is killed only when it
is at the normal termination and a new thread has been started. Therefore, animation is refined during the loading process and no jitter appears in animation.
To organise the animation frames into the pyramid structure, let Nbe the total frame number of the animation sequence, then divide the N frames into K levels. The size of each level is nk = 2k [k = 1, 2, ..., K). The combination of all levels, in order of increasing size, consists of all frames of animation. That means:
N = n0 + n1 + ... + nκ — ∑nk
where, n0 = rN/2A l] defines the number of frames at the starting level.
For level i ( where i = 1, 2. ..., K). the position of the first frame of that level is f, = 2K" and the steps between adjacent frames are 2A~'"\ Therefore, to calculate the ;'th frame at the ith level, that is, fη, the following formula can be used: f„ = 2λ'-' + ;*2A'""1
where 0 < ;' < 2'+1 and 0 <fη < N
There are two ways to define level K: K = flog2N ] and K = Llog2iVj. When N equals a power of 2. both methods have the same level. An example of the pyramid structure of 32 frames is illustrated below:
0 16
8 24
4 12 20 28
2 6 10 14 18 22 26 30 1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31
I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
28 29 30 31 The structure is made available in levels of increasing sizes, hence the name pyramid is used.
More examples of the pyramid are listed as follows:
N= 16. K=4 start : 0 8 level 1: 4 12 level 2: 2 6 10 14 level 3: 1 3 5 7 9 11 13 15
N=64. K=6 start : 0 32 level 1: 16 48 level 2: 8 24 40 56 level 3: 4 12 20 28 36 44 52 60 level 4: 2 6 10 14 18 22 26 30 34 38 42 46 50 54 58 62 level 5: 1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31 33 35 37 39 41 43 45 47 49 51 53 55 57 59 61 63
Note that the number of frames do not have to be a power of 2. When it does not equal a power of 2, the two definitions of K produce different pyramids. There may also have not completely filled levels. The following two examples are from K = flogJVl:
N= 30. K=5 start : 0 16 level 1: 8 24 level 2: 4 12 20 28 level 3: 2 6 10 14 18 22 26 level 4: 1 3 5 7 9 11 13 15 17 19 21 23 25 27 29
Now. corresponding to the animation illustrated in Figures 1 to 7, the following pyramid shows how a sequence of seventy two frames may be animated:
N=72. K= 7 start (first string) : 0 64 level 1 (second string) : 32 level 2 (third string) : 16 48 level 3 (fourth string) : 8 24 40 56 level 4 (fifth string) : 4 12 20 28 36 44 52 60 68 level 5 (sixth string) : 2 6 10 14 18 22 26 30 34 38 42 46 50 54 58 62 66
70 level 6 (seventh string) : 1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31 33 35 37 39 41 43 45 47 49 51 53 55 57 59 61 63 65 67 69 71
With K = Llog2iVj. animation starts with n0 = ΓN/2 "1! frames. The above two examples appear as follows. They are one level less than the previous two examples but have more starting frames. Both methods are very efficient. The former suits for applications with small network capacity but requiring fast start, and the latter suits for applications with reasonable network capacity and not critical on start speed.
N= 30. K=4 start : 0 8 16 24
level 1: 4 12 20 28 level 2: 2 6 10 14 18 22 26 level 3: 1 3 5 7 9 11 13 15 17 19 21 23 25 27 29
N= 72. K=6 start : 0 32 64 level 1: 16 48 level 2: 8 24 40 56 level 3: 4 12 20 28 36 44 52 60 68 level 4: 2 6 10 14 18 22 26 30 34 38 42 46 50 54 58 62 66 70 level 5 : 1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31 33 35 37 39 41 43 45 47 49 51 53 55 57 59 61 63 65 67 69 71
The animation and downloading is concurrent in such a way that while downloading the frames of level i [i = 1. 2 K), frames already downloaded at levels 0 to j'-l are put into a thread and perform level i-1 pre-loading animation. The (i-l)th thread is killed only when it is at the normal termination and the ith thread has been started. This is done by using multi- thread concept in Java. The animator starts a bare-bones agent but gradually grows. In any time, there is one animation thread running. The main applet keeps loading frames and extra features. It is only necessary to keep track of loading and frame animation. The interface of the animator is as following:
public class animator extends Applet implements Runnable { // current animation thread
private Thread AnimatorThread;
// two objects for double-buffering
protected Image offlmage:
protected Graphics offGraphics:
// use MediaTracker to synchronise animation
protected MediaTracker tracker;
public void thread_start()
// Start a new animation thread when AnimatorThread is null
public void thread_stop()
// stop animation thread and clean double buffers
public void run()
{
\par // animating images
public void paint_style (Graphics g)
{
// four paint styles
}
// event handle and animation
}
Two objects are defined to eliminate flicking using double buffering.
MediaTracker is used to track the loading process at each level, and synchronise loading and animation.
Non-Linear Control There are three ways to achieve non-linear play:
1. Interactive:
A user can stop replay, freeze the current frame or step into the previous frame and the next frame using the mouse at the client side.
Interactive non-linear speed control can be achieved by dragging the mouse in different speeds. This provides a better way to view the whole animation sequence. The non-linear control is implemented in the following object: public void handle_mouse_event(Event e) { switch (e.id) { case Event.MOUSE_DOWN: // press the mouse to switch between animating and browsing modes case Event. MOUSE P:
// resumes animation by tracking the frame the user is viewing case Event.MOUSE_DRAG: // track mouse, adjust mouse movement and update the frame }
The client can control the animation speed in both reverse and forward orders by simply dragging the mouse backward or forward with different speeds. The speed of animation increases or decreases with the speed of mouse movement, while the frame number is displaying to provide a better way to view the animation. The display of the next frame during the nonlinear control can be expressed as: frι = f c + f d _ d . where fn denotes the next frame number. fc is the current frame number and (d2 - d can be calculated from mouse movement.
2. Duration-tag:
The animation class is activated from an applet call in a html tag:
<APPLET code = "animator. class" codebase = "http://www.cse.unsw.edu.au/~vip" width=200 height=230>
<PARAM name = "basename" value = "http://www.cse. unsw.edu.au/— vip/baby/T"> <PARAM name = "num_images" value =" 78 ">
<PARAM name = "frame jper_second" value = "10">
<PARAM name = "extension" value ="gif>
</APPLET> Each frame can be attached with a duration tag, eg, <PARAM name = "duration_tag" value = "2,2,l,3,....2">, where the numbers define the duration of each frame in milliseconds. There is no extra coding needed for the frames.
3. Parametrical control: The animation can also be controlled by a parametrical function, eg.
<PARAM name = "velocity" value = "sin" > . where a sinusoid wave is used to define the velocity of the animation sequence.
Industrial Applicability
The direct application is for animating web objects for the Internet. Although all three non-linear control modes can be used in the web environment, the most useful one is likely to be interactive control. At present, a large part of the popularity of animation is due to its novelty.
However, the range of usage available is still quite limited and there is a lack of tools to assist reply and multi-casting.
With this progressive animation in place, it is possible to envisage a boom in the number of animations used in web pages. If the number of animations in the World-Wide-Web is significantly large, installing this animation on popular browsers may be justified.
Besides the application in the Internet, the animation tool can be used for animation control in commercial art studios. Animation has been widely used in TV advertisements, movie production, special visual effects and visual illustrations. The current approach in commercial studios needs an expensive equipment with manual control of play, stop and speed, etc. In computer-assisted design, non-linear editing has been widely accepted, such as Adobe Premiere. Director, etc. Such software will put a high demand on non-linear animation tools. The interactive control in this scheme could replace the current manual control method while the duration-tag method and the parametrical control method will add extra features for non-linear animation control.
It will be appreciated by persons skilled in the art that numerous variations and/or modifications may be made to the invention as shown in the specific embodiments without departing from the spirit or scope of the invention as broadly described. The present embodiments are, therefore, to be considered in all respects as illustrative and not restrictive.