1

Web Application (803)

 A WEB APPLICATION is a software application that runs on a REMOTE SERVER.
• In most cases, WEB browsers are used to access Web applications, over a network, such as
2
the INTERNET.
• Some web applications are used in INTRANETS, in companies and schools.
• Some example web applications are: Facebook (social networking), Flickr (photo
sharing), Mibbit (chatting), and Wikipedia.

ADVANTAGE: DRAWBACKS:
 It run "inside" a browser; no complex installation is  The user experience or ease of use is different and some may
needed. dislike it.
 It require very little disk space (or computing  Web applications need to be coded so they follow standards.
power) on the client. All the client does is display  It needs a connection to the server where the application
the data. runs, all the time. The connection may need a certain 
 It solve some of the "compatibility issues" bandwidth.
(Windows, Mac, Linux); all that is needed is a  Many applications are dependent on the server that hosts
browser. them.
 In many cases, the data is stored remotely too.  When the server is switched off, the application is no longer
(CLOUD) usable.
 Help for communication and mail  The company offering the web application has complete
control over it.

Web Application (803)

 Part 3
Employability Skills
A 10
Unit 1:
 Multimedia Authoring- Animation Tools – (10)

Unit 2:
 Digital Content Creation- Adding Styles to Web Pages (CSS) – (12 )
Part
B
Unit 3
50  Web Scripting (Using Java Script) – (20)

Unit 4:
 Work Integrated Learning IT (WA-1): - (08)

Web Application (803)

 4
Part Animation Tools (08)
C HTML (07)
Web Scripting (Java Script) (10)
30 Viva Voce (05)

Part
Practical File/ Student Portfolio (10) D
10

60 Theory

40 Practical

Web Application (803)

 5
Multimedia
Multimedia
Authoring
Authoring

Animation Concept

Frames and Layers

Motion and Shape Tweening

Frames and Layers

Web Application (803)

 6

Web Application (803)

 7

Web Application (803)

 8
Learning Objectives:

↦ What is animation?
↦ What is Frame & Layers?
↦ Motion and Shape tweening
↦ Importing AV files
↦ Publishing work in animation

Web Application (803)

 Computer Animation
 It will not be an exaggeration to say that animation can bring the dullest of the features to life.
It has the magic of injecting energy and emotions into the most seemingly inanimate objects.
9

What is Animation?
 ‘To animate’ literally means to give life to. Animating is moving something that cannot move on
its own. Animation adds the dimensions of time to graphics which tremendously increase the
potential of transmitting the desired information. In order to animate something the animator
has to be able to specify directly or indirectly how the ‘thing’ has to move through time and
space.
The Heritage of Animation:
 In 1824, Peter Roget presented a paper titled “The persistence of vision with regard to moving
objects” to the British Royal Society. Later in 1887, famous scientist Thomas Edison started his
research into motion pictures. He projected a 50ft length of film in approximately 13 seconds.
Winsor McCay used rice paper to draw images each were slightly different from the other.
 In 1910 John Bray used celluloid in compositing multiple layers of drawings. Later, In 1915,
Fleischer patented ‘roto scoping.’ Roto scoping is drawing images on cells by tracing over
previously recorded live action.
Web Application (803)
 In 1928, Walt Disney created the first cartoon with synchronized sound called “Mickey 10
Mouse.” He used ‘story board’ to review the story. In 1998 he used a powerful technique
called Multi-plane camera stand, which allowed allows a sort of parallax effect, moving the
backgrounds @ different rates. The other known production was “Alice in Wonderland”

 In 1964, Ken Knowlton, while working at Bell Laboratories, started developing computing
techniques for producing animated movies.

 The University of Utah is said to be amongst the earlier pioneers in computer graphics.

 In the late sixties, Chuck Csuri of the Ohio State University did some initiatory work in
computer animation as a member of the Computer Graphics Research Group.

 In the early 80s, the research group became the Advanced Computing Center for Art and
Design and continues to produce computer animation.

 Some of the current activity centers are, University of Toronto’s computer Science
Department, UC San Diego’s Department of Computer Science and Engineering, University
of North Carolina’s Computer Science Department and MIT’s Media Lab and MIT’s Lab for
Computer Science.

Web Application (803)

 Types of Animation: 11
Procedural:
Animation is generated by writing a program that spits out the position/ shape/whatever of
the scene over time
Representation:
This technique allows an object to change its shape during the animation. The 3 sub
categories are:
 Animation of articulated objects - complex objects composed of connected rigid
segments.
 Soft object animation - for deforming and animating the deformation of objects, Eg.
Skin over a body or facial muscles.
 Morphing – changing one object into another. This can be done in 2D or 3D.
Stochastic:
This uses random processes to control groups of objects, such as in particle systems.
Examples are fireworks, fire, water falls, etc.
2D animation:
• Two dimensional animation
3D animation:
• Uses three dimensional object for creating animation
Web Application (803)
 Traditional Methods:
12
As evident from the history, most of the animations are done by hand. All the frames in an
animation had to be drawn by hand. Since each second of animation requires 24 frames (film),
the amount of work required to create even the shortest of movies, can be tremendous. Some of
the traditionally used methods are:
Key Frames:
• In this technique a storyboard is laid out and then the artists draw the major frames of the
animation. These major frames are, those in which a lot of changes take place. This technique
is, of course, very time and effort intensive.
Cel Animation:
• In this technique, each character is drawn on a separate piece of opaque paper. Then, at the
time of shooting animation, the different characters are overlaid on top of the background in
each frame. This is relatively a less tedious process, one has to draw parts that needs to
change.
Rota scoping:
• Rota scoping is a technique where images are copied from a moving video into an animation.
The animator draws the motion and shape of the object by referring to the video. With rota
scoping, one can animate some complex scenes that would be hard to visualize otherwise.
The disadvantage is that one will have to hunt for the exact video that one wants to animate.

Web Application (803)

 Computer Animation:
With time the technique of animation has become more and more computer assisted and 13
computer generated. All such techniques require a trade-off between the level of control that
the animator has over the finer details of the motion and the amount of work that the
computer does on its own. Computer animation is classified as follows:

Key framing:
• Key framing requires the animator to specify critical or key positions for the objects. The
computer then automatically fills in the missing frames by smoothly interpolating between
those positions. The characters for a movie called Story were made through key framing.
Key framing requires that the animator has well thought of plan about how the moving
objects are going to behave.
Motion Capture:
• In this technique a magnetic or vision-based sensors record the actions of a human or
animal object in three dimensions. A computer then uses these data to animate the object.
This technology has enabled a number of famous athletes to supply the actions for
characters in sports video games. Motion capture is pretty popular because the actions can
be captured with ease, however there can be serious discrepancies between the shapes or
dimensions of the subject and the graphical character and this may lead to problems of
exact execution.

Web Application (803)

 Simulation:
• Simulation uses the laws of physics to generate motion of figures and other objects. These 14
models are only approximation. Simulations can be easily used to produce slightly different
sequences in maintaining physical realism. Real-time simulations allow higher degree of
interactivity. One drawback that simulation suffers from is the expertise and time required to
handcraft the appropriate controls systems.

Hardware and Software

Hardware and software are the two major factors that determine the quality of computer
animation that is produced.

Hardware:
Hardware comes in many shapes, sizes, and capabilities. Some hardware is specialized to do
only certain tasks while other hardware are equipped for a variety of things.

Web Application (803)

 Silicon Graphics Inc. (SGI):
SGI computers operate using the wide spread UNIX system, produced by Silicon Graphics. These 15
computers are extremely fast and produce excellent results. They come in a variety of types,
ranging from the general purpose ‘Indy’ to high power ‘Indigo Extreme’ that is used for
animations. Onyx is another type, which is suited to the complex calculations involved in
rendering. Some of the software like Wave front, Alias, and Soft Image that run on SGI’s.
PC’s:
PC’s are very versatile machines combining flexibility and power. PC’s have proven to be very
useful for small companies and businesses as platforms to do computer animation. Applications
such as 3DStudio and Animator Studio are used on PC’s to make animations.
Macintosh:
Macintosh or Mac were originally designed for graphic and desktop publishing and hence are
pretty useful platforms for producing computer graphics and animation software. Some of these
applications that work well on Mac’s are Adobe Products like Photoshop and Premiere and
Strata with Strata Studio Pro.
Amiga:
Originally owned by Commodore. Amiga computers have held a position in the computer
animation for long. The two software packages that Amiga is associated with are: Video Toaster
and Light Wave 3D. The new d’Amiga systems has been customized to be a great graphics
machine. Sophisticated hardware has to be coupled with a good software to produce good results.

Web Application (803)

 Software 16
Some of the popular software packages used by the companies, schools and individuals all
around the globe include some of the following.

3Dstudio Max
The successor to 3DStudio 3.0. 3DStudio Max runs under Windows NT. It is entirely object
oriented, featuring new improvements, such as volumetric lighting, space warps, and all new
redesigned interface.

LightWave3D
Originally developed for the Amiga platform, it is considered as the best 3D product for the PC.
This software has been used for quite a few television productions such as Babylon 5 and Sea
Quest.

Adobe Premiere
Adobe Premiere is a tool that is used to composite Digitized video, stills, and apply a variety of
transitions and special effects. Adobe Premiere runs both on Macintoshes and PC Windows.

Web Application (803)

 Alias / Wave front
Alias is one of the topmost animation packages in the market. Produced by two companies, 17
Alias and Wave front who work in collaboration, it runs on the SGI’s. Alias is well known for its
great modeller which is capable of modelling some of the most complicated objects. Also, this
software package is very flexible allowing programmers that will allow the programmers to
create software that will run in tandem.
Animator Studio
Animator Studio is a cell animation program from Auto Desk. Animator runs on Windows. It
has a multitude of features that minimizes the animation creation time.
Elastic Reality
This is one of the top line programs used for morphing. Elastic Reality runs on Mac and SGI’s.
One of the distinctive features of Elastic Reality is that it uses splines as opposed to points to
define the morphing area. Elastic Reality allows to morph video as well as still images.
Soft Image
Soft Image is one of the three top most computer animation software packages. Soft Image is
used in many top production studios around the country and around the world.
Strata Studio Pro
Strata Studio Pro is probably known as most popular 3D graphics application on the Mac.
Created by Strata Inc. Strata Studio Pro is mainly a still graphic rendering application, but it
does have animation capabilities also.
Web Application (803)
 Director Vs Flash 18
Two of the currently popular and widely used tools are; Director and Flash. Both are the products
of the same company (Macromedia) but interestingly have developed unique audiences often
working in separate even opposing campuses. The following section of the paper traces the
reasons that make both these products so competitive in the field of multimedia.

Flash
Flash on the other hand was built for the Web and was purchased by Macromedia in the mid-90s
from a company called FutureSplash. The product earlier known as the Animator was recoined as
Flash. Flash is based on scalable vector graphics instead of fixed size bitmapped images. Web
builders have adopted Flash as a somewhat replacement for HTML. The Shockwave Player, in
contrast, doesn't lend itself well to full window presentations because of the bitmapped Director
graphics. Flash graphics can bend and stretch and still look gorgeous, but bitmapped graphics end
up distorted when manipulated. Director content is usually developed for a fixed size and the
included as a supplement to standard HTML text.
Web Application (803)
 Streaming differences
Streaming was a big advantage of Flash over Director. Director now has streaming capabilities. 19
From the user's point of view there is not a big difference between the streaming performance of
Flash and Director Content. The quality of playback in both the tool is about the same.

Animation Styles and Asset Management

Flash artwork can be used as symbols but Director automatically turns everything into a cast
member. Flash can afford more flexibility. The lines and shapes of animation sequence in Flash
are easily editable without too many obstructions. On the other hand, using bitmaps and having
limited drawing tools like Director cannot support free-form animation. Thus, Flash provides a
more interactive animation platform.

The Interfaces
Flash and Director have interfaces similar in function but quite different in appearance and
implementation. Director has a very strictly defined authoring metaphor of Cast, Score and Stage.
All objects including pictures, sounds and behaviours used in a movie are called Cast
Members and are centrally organized in the window. Time based activity is laid out and edited
using the Score window, which allows only one object per layer. On the other hand Flash has a
slightly fuzzy authoring metaphor. The Timeline places no restrictions on the number of object
combinations that can occupy a single layer, and scripting can be organized according to the
developer’s team.

Web Application (803)

 1. What do you understand by the word animation?
20
2. What are the key frames?
3. What do you understand by SGI? Points to recollect
4. What is amiga?
5. Name any one of the topmost animation packages in the market.
6. What are the various types of animation?
7. Components like fireworks, fire, water falls, etc. can be implemented via which
animation?
8. Name the most well-known 3D graphics application on the Mac?
9. __________ is a technique where images are copied from a moving video into an
animation.
10. __________ is a technique in which magnetic or vision-based sensors record the
actions of a human or animal object in three dimensions.
11. __________ the Animation is generated by writing a program that spits out the
position/shape/whatever of the scene over time.
Web Application (803)
 21

Web Application (803)

 Creating Frames and Key frames: 22
The Timeline is the key to animation. Look at the Timeline you’ll notice the numbers across
the top and the layers along the left side as shown

Web Application (803)

 Number
23

Layer Frame
Each number has a matching frame. These frames are white
when they are empty and turn gray when they contain content.

Web Application (803)

 To create animation, you’ll be manipulating two types of frames: Key frames and regular 24
frames.
 A Key frame is a point in your movie where new content first appears. They are the key to
animation. In Key frames you can also scale and reposition elements. The first frame of
each layer is a Key frame. You can always identify the Key frames because they contain a
tiny filled circle
 Regular frames are static and contain the same content as the preceding Key frame. They
are sometimes called “slaves” to the Key frame. Frames contain a hollow circle

Let us explore:
Let us create an animation that’s about 10 seconds in length.
• Right now our movie contains only one frame, a Key frame.
Key
• Use a frame rate of 12 frames per second (fps) which is the default in Flash. Frame
Frame
• To develop a movie of 10 seconds and frame rate at 12 fps, we’ll need 120 frames.
• We can always add or remove frames if we decide to change the length of our movie.

Web Application (803)

 To insert frames on the Timeline: 25

First insert necessary Layers by clicking on + symbol or using insertTimelineLayer (menu)

• Next locate frame 120 of the first layer. Click on it.

• Shift-click on each of the other layers. (As you shift-click on each layer it will turn blue/grey)

• Pull down the Insert menu, choose Timeline, and select Frame (F5).

• The frames will all be shaded with blue/grey because each layer contains content.

• The last frame (120) will contain a white rectangle.

Web Application (803)

 Creating Key frames 26
Add Key frames at points in the movie where we want the content to change.
For example:
• Click Frame 120 of the first layer. Sometimes it is difficult to identify which frame you have
selected. To confirm look at the status bar at bottom of the Timeline.
• Click on InsertTimelineKeyframe (F6).
• A black circle will appear in Frame 100. Notice that there’s now a line between Frames
119and 120.
• A rectangle appears in Frame indicating the end of the frame segment.
• Click on Frame 1 of the first layer. Press the Delete key

Web Application (803)

 Commenting Frames 27
Frame comments allow developers to record text descriptions for Key frames. This helps you
remember the events that take place at important points in your animation. These comments
won’t be exported or viewed by end users, so they don’t need to be pretty, just descriptive.

To add a comment to a frame:

• Select a key Frame and the layer. You should select the frame where you wish the comment
to be recorded. In the Properties panel, click in the area under the word Frame.
• Comments should start with 2 slashes, indicating that they are comments, not frame labels
• The comment will appear in the Timeline

Web Application (803)

 1. How do you insert a frame on the timeline?
28
2. What is the use of frame comments?
3. When are key frames actually added?
4. Fill in the blank:
Points to recollect
a) ________ are static and contain the same content as the preceding
Key frame and are sometimes called “slaves” to the Key frame.
b) Most developers use a frame rate of ________ frames per second
(fps) which is the default in Flash.
5. True or False?
a) The frames are white when they are empty and turn gray when
they contain content.
b) The first frame of each layer is a Key frame

Web Application (803)

 29

Web Application (803)

  Swinging Pendulum
Creating Animation 

Playing On Seesaw
Frown Turns Into Smile
30
 A Plant Grows
Frame-by-Frame:
The most flexible approach is called frame-by-frame animation.
• With this type, the developer makes small, individual changes to objects on the
Stage within every frame.
• Although effective, this can be very time-consuming. If you’ve tried making a flip-
book, you’re familiar with this approach.
• Since Flash is a frame-based program, it’s easy to move from frame-to-frame to
make these changes.
• With frame-by-frame animation, you can make incremental changes in the
placement of the object to give the appearance of motion.
• In addition you can change the object itself, so it looks like it had been
transformed
Web Application (803)
 Creating Animation 31
Tweening:
• It is a technique used to make animation much easier. You identify a start point and end
point, then the software figures out the position of the objects “between.” Flash contains
two types of tweens: motion tweens and shape tween.

Motion Tweening:
• Motion tweens move objects from one place on the Stage to another.
• Places an object at the starting point at a Key frame.
• Create a Key frame somewhere along the Timeline and move an instance of the object to the end point.
• The creator returns to the beginning frame and chooses the motion tween option.
• The software then moves the object on a direct path from the beginning to the ending point.
• Flash provides options to tweak the tweening so that it looks more realistic.
• For example, motion guide can be used to move the animation along an established line so it looks like a
plane is taking off.
• Easing is used to make it look like a ball is really bouncing.
Web Application (803)
 Creating Animation 32
Shape Tweening:
• Shape tweens morph one image into another image.
• For example, we’ll change the shape of the cloud as is moves across the Stage. You can also
change circles into stars, a seed into a plant, or a bike into a car.
• Shape tweening really works well with the vector graphics. In other words, Flash shape
tweening won’t work well on a photograph of a human face, but it would work for a line-
based smiley face.

ActionScript:
• Besides frame-by-frame and tweening, objects can be animated using ActionScript. In
addition to animation, scripting is also used for highly interactive projects such as video
games and simulations. Finally, you can also choose from pre-built animations provided by
Flash

Web Application (803)

 Creating Frame By Frame Animation 33
Setting page properties:
 Create a new document.
 In the PROPERTIES area of the Properties panel, choose to Edit... next to the Size option.
Change the size to 550 x 100 pixels.
 Notice that you can change the Background Colour and Frame rate here

 Create a picture for the simple animation. Use the line and shape tools to draw a simple stick
person on the extreme left side of the screen.
 Building the animation involves creating a series of Key frames with small changes to the figure.
 The default setting is 12 frames per second. Let’s create movement every 5-10 frames.

Web Application (803)

 Creating Frame By Frame Animation 34
Creating animation:
 Click on Frame 5.
 Click on the Insert menu, choose Timeline and Key frame (F6).
 Click on Frame 15. Add another Key frame. Also add Key frames on 20, 25, 30, and 40.
 Click on Frame 1.
 Click on the Edit menu, Select All.
 Click on the Edit menu, choose Copy.
 Go to Frame 5. Click on the Edit menu, choose Paste.
 Go to all the other frames and paste.
 Go back and make small changes on each Key frame such as moving legs or arms.
 You can also go to the Modify menu and choose Transform to make changes such as rotation.

Web Application (803)

 Creating Motion Tween Animation 35
The most common animation technique is motion tweening. You simply provide Flash with
a starting point on a Key frame and an ending point on another Key frame. Then, you set the
motion “tween” .

Classic Motion Tween:

 Remember you can only use graphic symbols and movie clips as motion tweens. To convert a layer to
symbol, select the layer, press F8/click ModifyConvert to symbol and select the option Graphic and
provide a same and press OK
For example:
 Insert an image as a layer.
 Convert it to a symbol
 Add a KEY FRAME at a desired frame. Move your layer to a desired frame. Click anywhere in the frame.
 Select Tween as motion from properties window
 Press ENTER to play the movie the animation. CTRL + ENTER to test movie

Web Application (803)

 36
Timeline

START END

Web Application (803)

 37

Web Application (803)

 38

Web Application (803)