Types Of Animation Animation Using Director Computer Science Essay

Published: Last Edited:

This essay has been submitted by a student. This is not an example of the work written by our professional essay writers.

Animation is the quick and rapid display of a sequence of images of 2-D or 3-D artwork or model positions in order to generate an illusion of movement. It is an ocular illusion of motion due to the occurrence of persistence of vision, and can be created and demonstrated in a numeral ways. The most widespread method of presenting animation is as a motion picture or video program, even though several other forms of presenting animation also exist.

In other words a simulation of movement formed by displaying a series of pictures, or frames. A cartoon on television is simple example of animation. Animation on computers is one of the leader ingredients of multimedia presentations. There are numerous software applications that allow you to create animations that you can display on a computer monitor.

Note the differentiation between animation and video. While video takes constant motion and breaks it up into separate frames, animation starts with independent pictures and puts them collectively to form the illusion of continuous motion.

4.1 Animation:

A sequence of frames, when played in order at sufficient speed, presents a smoothly moving image like a film or video is known as Animation. Every image holds a minute change, for example a head turns slightly, or the eye moves slightly. When these images are viewed swiftly, your eye fills in the details and the illusion of movement is complete.

Animation is that incentive to the mental, physical, and emotional life of people in a given area which moves them to presume a wider range of experiences during which they find a higher degree of self-realization, self expression, and awareness of belonging to a community which they can influence (quoted by Simpson 1989: 54).

Each animation must be associated with a visual element affected by the animation called as Animation Target Object. This provides the content that is displayed to the user. An animation will proceed either on the animation target object as a whole, or on a specific property of the target. Animations are allied with an animation target object. The animation target object starts and stops the animation robotically.

4.1.1 Types of Animation:

Animation is broadly classified into two types:

Frame-Based Animation

Cast-Based Animation

Frame-Based Animation is one of the easiest animation techniques. It involves simulating movement by displaying a series of static frames. A movie is a big example of frame-based animation; each frame of the film is a frame of animation. While the frames are revealed in rapid succession, they make the illusion of movement. In frame-based animation, there is no idea of an object distinguishable from the background; everything is reproduced on each frame. This is an very important point, because it distinguishes frame-based animation from cast-based animation.

Frame-based animation in Director is an extension of traditional cel-based animation where the animator draws "key" poses that define the action or movement within a scene. As this method translates to a visual paradigm in a computer interface, programs such as Director, Flash, and powerful 3-D animation applications like Maya, Softimage, and Animation Master make extensive use of Frame-based animation tools. Frame-based animation in Director involves placing sprites in various channels in the Score and using Director's timeline animation tools to alter sprite position, size, rotation, and other visible qualities of each sprite to achieve the desired effect.

Key-framing is effective and relatively easy to work with because each sprite can be modified visually. Though, as useful as key-frame animation can be it is not without disadvantages. Key-frame animation is only as adaptable as the tools the software provides to work with it, and the tools are sometimes not enough. For example, key-frame animation in software frequently makes use of linear interpolation, which finds intermediate positions from one or more specified screen coordinates. To gain more animation precision using key-frames requires more key-frames. At some point there may be so many key-frames that the animation process becomes counterproductive. Another disadvantage of key-frame animation is that it is not particularly well suited for games, where complex logical conditions often determine the visible actions of sprites.

Cast-Based Animation, which also known as sprite animation, is extremely popular form of animation and has seen a lot of usage in games. Cast-based animation which involves objects that moves separately of the background. An object is something that sensibly can be thinking of as a separate entity from the background of an image. For instance, in the animation of a forest, the trees might be part of the background, but a deer would be a separate object moving independently of the background.

Every object in a cast-based animation is referred to as a sprite, and can have a changing position. Almost every video game uses sprites to some degree. Sprites usually are assigned a position and a velocity, which determine how they move.

4.1.2 Animation Using Director:

In Director, extremely interactive animations are created by using highly advanced programmatic controls created with Director's scripting language, called Lingo. To build a project, import the painting cells of animation into a cast. Then place the cast members on a stage as sprites, which are animated by tweening or by cycling through consecutive cast members. Control sprites with a spreadsheet-like timeline called score. Finally, bestow sprites behaviors by using the Lingo language to attach programs called scripts.

Director is also used for traditional cell animation, which may not be as compact as tweened animation but is much more graphically interesting and effective. The Cast to Time animates a series of cast members over time. Select all the cells in sequence and select Modify/Cast to Time command. The cells are automatically compiled into a single sprite on stage. This sprite can be animated using automatic tweening as many times as you like.

On the score, every layer of animation is given its own track, and as the animation plays, all these tracks play along with their precise actions. While a frame of the script track or any sprite is attached with a Behavior at a particular frame, the Behavior executes when the needle arrives on that frame. Each column of the score represents a frame of action and each row is an actor, script or event.

What's new with Director scripting

Dot syntax scripting format

In Director, you could write Lingo scripts by using two types of syntax: verbose syntax or dot syntax. Verbose syntax was extremely similar to English, and was relatively easy for new programmers to learn. Though, verbose syntax scripts quickly became long and complex, and were difficult to debug.

Now that the scripting model of Director is compatible with both Lingo and JavaScript syntax, scripts ought to be written only in dot syntax. Dot syntax will be recognizable to many programmers, since it is the syntax used in most object-oriented languages such as Java or C++, and in many web-based scripting languages such as Microsoft JScript or JavaScript.

To hold up backwards compatibility, scripts written by using verbose syntax in previous versions of Director will still run. Though, starting with Director MX 2004, dot syntax is the recommended syntax to use, and is the only syntax that will be supported and documented in theĀ future.

JavaScript syntax compatibility

Director is now compatible with JavaScript syntax. This means that in adding up to being able to author and debug scripts by using Lingo, which is the long-time scripting language of Director, you can choose to author and debug scripts by using JavaScript syntax. The execution of JavaScript in Director is referred to as JavaScript syntax throughout this reference.

The sustain of JavaScript syntax in Director helps create a scripting environment that is familiar not only to JavaScript developers but also to developers experienced with Macromedia Flash ActionScript, Macromedia Flash Communication Server, Macromedia Dreamweaver, Macromedia Authorware, and a number of other environments.

The execution of JavaScript syntax in Director is JavaScript 1.5, which means that it is fully compliant with the ECMAScript Language Specification ECMA-262, 3rd Edition. Roughly all of the features and functionality in JavaScript 1.5 are now available in Director.

New ways to access the scripting APIs

In Director, the scripting APIs have been grouped into objects, and are accessed through these objects. These objects enclose the functionality required to add interactivity to your movies and are accessible to both Lingo and JavaScript syntax within Director, projectors, and Macromedia Shockwave Player.

Even though the way you access the scripting APIs in this release may vary from previous releases, you still have access to the same APIs that you did before, in addition to some brand new ones. The only dissimilarity is that you access them by using the new objects.

What Is Lingo?

Lingo is the one of the well known programming language used in Director Movies. Except you attach to bare bones, PowerPoint-like presentations or linear animations, you require learning Lingo to use Director to its full capabilities.

Lingo code is stored in cast members recognized as scripts. There are three dissimilar types of script members: behavior scripts, movie scripts, and parent scripts. In adding up, other cast members, such as bitmaps, can have scripts embedded inside them. These are generally referred to as cast scripts.

The disparity between script types is not in what they look like or how they behave, but in when they act. Here is a summary:

Movie script-Contains handlers that can be accessed by any other script. Cannot be assigned to precise sprites or frames.

Behavior draft-Assigned to sprites or frames. Controls the sprite or frame that it is assigned to.

Parent script-Could be used only by object-oriented programming techniques.

Cast script-Exists inside a cast member. Only affects that one cast member, but affects all sprite instance of the cast member.

A movie script is a worldwide presence in a movie. If a movie script produces a system beep at any time the mouse is clicked, this script sounds the beep whenever the mouse is clicked anywhere in the movie. Therefore the name movie script: It acts on the entire movie.

A behavior script does nothing in anticipation of it is placed on a sprite or in a frame script channel. While a behavior script is placed on a sprite, the Lingo commands inside the script are active only as far as the sprite is concerned. If you have a behavior that plays a beep while the mouse is clicked, for example, and you apply that behavior to a sprite, the beep sounds only when users click that sprite. Behavior scripts are occasionally called sprite or Score scripts for this reason. They act only on a sprite in the attain to which they are assigned.

Creating Scripts

To create a script, select an empty location in the Cast panel and press (Command-0) [Ctrl+0]. The Script panel appears. The Script panel also appears while you try to edit an existing cast member, double-click on the frame sprite channel, or use any of the various shortcuts found throughout Director to get access to a frame's, sprite's, or cast member's script.

Using the Script Panel

The Script panel has a few buttons at the top collectively with the typical Director cast member buttons that take you forward and backward in the Cast, make possible you to add a new cast member, and enable you to switch cast libraries. Figure 1 shows the Script panel.

Image 1: Script Panel

Source: http://ptgmedia.pearsoncmg.com/images

The rest of the buttons work with added sophisticated Lingo functions, such as debugging and handlers. There are five menu buttons which authorize you to speedily access various Lingo commands. The first two are for alphabetized and categorized common Lingo, the second two are for 3D-specific Lingo, and the last is for Lingo added to Director via Xtras. These five menus facilitate you to hunt for and automatically insert any Lingo keywords into your script. They come in useful while you just can't remember the name of a command, but you have a good idea of how it starts or under which category it falls. They are also useful in refreshing your memory as to the proper syntax for using Lingo commands.

4.1.3. Evolution of Web Animation:

World Wide Web has been gradually and rapidly evolving day by day. With this rapid changes, Internet authors and readers always want to transmit more elaborate sorts of content over the Internet. To reach most of the users, the file size for Web content has to be small enough to transmit quickly over standard Internet connections. This gave an opportunity to innovative brains to come up with different methods for delivering complex content over limited connections.

Animated GIF files:

One of the biggest achievements of the World Wide Web is to assimilate photographs and other illustrations with text on a web page. The illustrations come in the form of bitmap files. A bitmap file simply explains the color of each pixel in the image. Web sites post these kind of images as either JPEG files or GIF files.

Animation is just a simple series of still images displayed in sequence. Adding animation to a Web site is posting a series of bitmap images that the user's browser displays in sequence. This kind of animation, called GIF animation, or GIF89, was the first Web animation to catch on, and it is still very popular today.

The main advantage of GIF animation is that it is incredibly simple to work with and it is automatically recognizable to most of the Web browsers. The disadvantage is that the animation should be pretty simple and the file size should be small. Sound cannot be added to GIF animation.

An animated GIF (Graphics Interchange Format) file is a graphic image on a Web page that moves - for instance, a twirling icon or a banner with a hand that waves or letters that magically get larger. In exact, an animated GIF is a file in the Graphics Interchange Format specific as GIF89a that contains within the single file a set of images that are presented in a particular order. An animated GIF can loop ceaselessly (and it appears as though your document never finishes arriving) or it can present one or a few sequences and then stop the animation. Animated GIFs are frequently used in Web ad banners.

Flash, Java, and other tools can be used to achieve the same effects as an animated GIF. Though, animated GIFs are normally simpler to create than similar images with Java or Flash and generally smaller in size and thus faster to display.

How to Create Animated GIFs Using Photoshop CS3

As WebPages develop into more complicated works of art, it becomes essential for designers to use dissimilar techniques to draw a viewer. One method that is utilized is the animated .gif graphic. The animated .gif allows a designer to insert movement into webpage graphics to obtain the attention of the viewer. There are numerous software programs available that allow the creation of these graphics. One such software program is Adobe Photoshop Creative Suite 3 (CS3), which will be used for our tutorial. It is significant to note that this tutorial requires basic knowledge of Photoshop CS3, along with experience using layers.


Create a document with each frame of the animation on a different layer.

choose the layers to be used in the animation from the layers palette

Image 2:

Source: http://www.wikihow.com/images

Note1: To select a collection of layers, select the layer at the top of the group. After that hold the shift key and click on the bottom layer and this will highlight every layer in # Open the animation palette by choosing window from the menu bar and selecting "Animation"

Image 3

Source: http://www.wikihow.com/images/

While the animation palette opens, it should look like this. If it doesn't that means it opened in the timeline manner.

Alter to frame animation view by clicking on the flyout menu in the upper right hand corner of the animation palette and selecting "Convert to Frame Animation".

Modify each layer showing on one frame to every layer showing on its own frame, by clicking the flyout menu on the animation palette and choosing "Make frames from layers"

Modify each frame by selecting the frame on the animation window and changing it as preferred in the main photoshop window.

Under every frame is an arrow head pointing downward. Click on the arrow head to show timing menu and choose the display time for each frame.

From the file menu choose export to export the document as a movie or under the save as option save the file as a gif. Make sure to select Save for Web and Devices (.gif under this option).

NOTE: If you desire to loop your animation incessantly you can select that option in window that pops up after you have chosen "Save For Web & Devices". Underneath the color table that shows up is "Looping options", immediately select "forever" and save it. You can also choose "others" and select the amount of times you want your animation to loop.

JAVA Applets:

An additional way to present Web animation is throughout the universal network-oriented programming languages known as Java. With Java, programmers can create applications that users download from the Internet. Java-enabled browsers use a virtual machine, a part of software that recognizes the Java language and translates it for the user's computer system. The virtual machine is basically a kind of plug-in, and it must be installed with the browser.

Java Web content is normally created as programs called applets. The key benefit of Java is that it works on all operating systems and is very flexible. You can create an animation program that draws simple vector shapes for the individual frames, or one that uses bitmap images. Java is preferably suited for creating interactive animations and combining animation with other Web page elements.

Applets are used to offer interactive features to web applications that cannot be provided by HTML alone. They can imprison mouse input (like rotating 3D object) and also have controls like buttons or check boxes. In reply to the user action an applet can change the provided graphic content. This makes applets well appropriate for demonstration, visualization and teaching purposes.

Java applets are executed in a sandbox by the many web browsers, preventing them from accessing local data like clipboard or file system. The code of the applet is downloaded from a web server and the browser also embeds the applet into a web page or opens a new window showing the applet's user interface. The applet can be shown on the web page by making use of the deprecated applet HTML element, or the recommended object element. This gives the applet's source and the applet's location statistics.

A Java applet extends the class java.applet.Applet, or in the case of a Swing applet, javax.swing.JApplet. The class should supersede methods from the applet class to set up a user interface inside itself (Applet is a descendant of Panel which is a descendant of Container. As applet inherits from container, it has essentially the same user interface possibilities as an ordinary Java application, including regions with user specific visualization.


Develop an Animation in Director

Define the evaluation of web animation?

Define the importance of java applets in animation?

4.2 Animating with Shockwave for Director:

Shockwave is the technology developed by Macromedia to permit users of its popular multimedia software Director to create interactive applications and animations as a part of a web page. Shockwave features a streaming audio format which allow for long, high quality sound files to be played across low bandwidth connections. It also has the ability to communicate with web server programs. Shockwave offers classy and versatile tools for synchronizing media and creating rich, customized interactive interfaces. Shockwave audio is of tremendously high fidelity. Shockwave also includes inspiring compression of media for transmission over networks as well as methods for "streaming" the media.

Unlike most "animation" tools, Shockwave does not have to play sequentially like a movie, it can play back an animation in an arbitrary or random, non-linear fashion, as well as in response to viewer interaction. It is pretty a bit more than an animation tool.

4.2.1 Shockwave Animation:

To create a Shockwave animations in Director install the Shockwave plug-in on browser.

Launch Director

Choose File/New/Cast to open the New Cast dialog, and name the cast

Click the first frame in the cast and choose File/Import to open standard file dialog.

Choose Add All button and click the import button to add all the frames to the cast. The Director automatically imports the frames in proper order if the files are numbered.

In the Cast window, click all the cast members that make up the cells of the animation to select them all.

Choose Cast/Modify to Time. The cast members are positioned on stage in a sequence as a sprite. The cast members also appear on the first timeline in the Score with duration equal to the number of frames in the new sprite.

Click frame 0 in the score to move the time pointer to that frame. Choose the sprite on the stage and drag it to the left side of the screen.

In the Score, click the last key-frame of the sprite and then drag the sprite to the right side of the stage. This changes the position of the sprite at that key-frame so that the sprite animates across the screen.

Click Play in the Control Panel to preview the animation.

To adjust the timing for the animation, drag the last key-frame of the sprite from frame 10 to frame 60 in the Score. This stretches the time of the animation.

To add a performance to the sprite, choose Xtras/Behaviors to open the cast of preset behaviors. Drag and drop the Behaviors onto the objects to apply them. Play the animation to check the effect of the Behavior.

Add a user input behavior to the sprite. [Drag the behavior Frame, click sprite's timeline in the Score. A small dialog box opens, to specify parameters to the behavior. Enter 1 in the Frame box, choose initializing Event: MouseUp and Play Mode. Click OK to admit the changes. This makes the movie to start from frame 1 on clicking sprite.]

To play with sound, drag the Sound Behavior. In the Behavior's dialog box, prefer the cast-member sound file to play. Check the animation.

Click File/Save AS Shockwave Movie to save the movie in Shockwave format.

4.2.2 Streaming Movies:

While Director streams a movie over the Internet, it first downloads the Score data, scripts and the size of every cast member's bounding rectangle. Before starting the movie, Director downloads the interior and linked cast members that are required for the first frame of the movie. After the movie starts, Director continues to download cast members in the background, in the order that the cast members appear in the Score.

If the movie jumps further on in the Score or uses cast members that are referred by scripts, and the necessary cast member is unavailable, the movie either ignores them or displays a placeholder, depending on how the streaming options are set in the Movie Playback Properties dialog box. In addition, you might encounter script errors if the cast members are not fully downloaded and present in memory. To avoid missing the cast members, ensure to download all the cast members required for a particular scene before beginning theĀ scene.

Director movies stream automatically if the Streaming playback option is ON. Set the media elements in such a way that a specific number of frames finish downloading before the movie starts playing. Control streaming movies by arranging sprites in the Score and by controlling the movement of the playhead, either with the Director behaviors or with Lingo or JavaScript syntax.

4.2.3 Movie Playback Options:

Select Modify > Movie > Playback to define streaming options

To stream movie automatically, select Play while movie is being downloaded

Before playing the movie, enter the required number of frames in Download __ Frames

By default, movies start downloading from the first frame; adjust this setting to the number of frames as per the requirement

Select Show Placeholders to display placeholders for media elements that have not been downloaded

The placeholders appear as rectangles when the movie starts playing.

Select Lock Frame Durations to lock the movie to its current tempo settings


Install the Shockwave plug-in on browser

Define the importance of shockwave animator?

Define the importance of streaming movies in animation?


This is the fourth module for the multimedia web development course. This module explains about the different types of animation such Frame-Based which involves simulating movement by displaying a series of static frames and Cast based which involves objects that moves independently of the background

In this chapter you have learnt about creating animation using directors. Additionally you have learnt director scripting such as Dot syntax scripting format and JavaScript syntax compatibility

In addition, this module pointed out the Lingo, a well known programming language used in Director Movies.

It also explained the Animated GIF files and pointed out steps to create such files using Photoshop CS3

Finally you have learnt about the Shockwave, a technology developed by Macromedia to permit users of Director to create interactive applications and animations as a part of a web page.


GIF - Graphics Interchange Format

CS3 - Creative Suite 3