MULTIMEDIA& ANIMATION

LAB MANUAL
SEMESTER: 2
Practical Exercises

1. Browse the Internet and find different Multimedia Presentations and identify the
building blocks.

 Introduction:

Multimedia is a computerized method of presenting information combining textual data, audio,

visuals (video), graphics and animations. For examples: E-Mail, Yahoo Messenger, Video
Conferencing, and Multimedia Message Service (MMS).

Multimedia as name suggests is the combination of Multi and Media that is many types of media
(hardware/software) used for communication of information.

 Classification:

Two types of Multimedia presentation are:

 Linear Presentation:Linear active content progresses often without any navigational
control for the viewer such as a cinema presentation.

 Non-linear Interactive:Non-linear uses interactivity to control progress as with a

video game or self-paced computer based training. Hypermedia is an example of non-
linear content.

 Building Blocks:

Following are the common components of multimedia:

 Text- All multimedia productions contain some amount of text. The text can have various
types of fonts and sizes to suit the profession presentation of the multimedia software.
 Graphics- Graphics make the multimedia application attractive. In many cases people do
not like reading large amount of textual matter on the screen. Therefore, graphics are
used more often than text to explain a concept, present background information etc.
  Audio- A multimedia application may require the use of speech, music and sound effects.
These are called audio or sound element of multimedia.
 Video- The term video refers to the moving picture, accompanied by sound such as a
picture in television. Video element of multimedia application gives a lot of information
in small duration of time. Digital video is useful in multimedia application for showing
real life objects.
 Animation- Animation is a process of making a static image look like it is moving. An
animation is just a continuous series of still images that are displayed in a sequence. The
animation can be used effectively for attracting attention.

 Applications of Multimedia:

Following are the common areas of applications of multimedia.

 Multimedia in Business- Multimedia can be used in many applications in a business. The

multimedia technology along with communication technology has opened the door for information
of global wok groups.
 Multimedia in Marketing and Advertising- By using multimedia marketing of new products
can be greatly enhanced. Presentation that have flying banners, video transitions, animations, and
sound effects are some of the elements used in composing a multimedia based advertisement to
appeal to the consumer in a way never used before and promote the sale of the products.
 Multimedia in Educational Field:In education, multimedia can be used as a source of
information. Students can search encyclopedias such as Encarta, which provide facts on a
variety of different topics using multimedia presentations. Teachers can use multimedia
presentations to make lessons more interesting by using animations to highlight or
demonstrate key points.
 Multimedia in Entertainment:Many computer games use sound tracks, 3D graphics
and video clips.

2. i) Identify the importance of Resolution, Size and compression of Images.

 Resolution:
It refers to the number of pixels per inch within an image. It’s important because the
resolution of the image determines the quality.
 Size:
Image size describes the height and width of an image in pixels.
The simple way to choose an image size is to use the preset and size pop-up menus. The
preset pop-up lists several categories: Clipboard, Default Photoshop size, Letter, custom
etc.
 Compression of Images:
A technique that reduces the file size of bitmap images. Compressed images are used on
web pages to improve viewing speed and performance

ii) Classify file formats of various Multimedia files

A file format is the structure of how information is stored in a computer file.

When working on an image, keep saving it as a Photoshop document (.psd).
 The following are the outline of current file formats used for the production and delivery of
multimedia data.
 .BMP (Bitmap) – It is file format developed by Microsoft for windows. There is no
compression or information loss with BMP files which allow images to have very high
quality.
 .GIF (Graphics Interchange format) – GIF is a compressed image format. It is suitable
for graphics that uses only limited colors, and it is the most popular format used for
online color photos.
 .JPEG (Joint Photographic Experts Group) – JPEG was designed to attain maximum
image compression. It uses lossy compression technique, where a compression method is
referred that loses some of the data required for the image reconstruction.
 .PNG (Portable Network Graphics) – An extensible file format for the less loss,
portable and well compressed storage of raster images. It works well with online viewing
applications like worldwide web.
 .AVI (Audio/Video Interleave) – AVI is the video file format for windows. Here sound
and picture elements are stored in alternate interleaved chunks in the file.
 .TIFF (Tagged Image File Format)- They are lossless image files meaning that they do
not need to compress or lose any image quality or information, allowing for very high-
quality images but also larger file [Link] format is common in desktop publishing
world.

3. i) Practice setting the canvas on the workspace for different requirements.

Step 1: To set up the new canvas, click on FILE-> NEW
When you choose it, the new dialog box opens. You can enter a name for your new file at the top
of the dialog box and click OK.

ii) Import an image

from the browser / Picture folder and place it on the
workspace.
To import an image click the “File” menu, click “Open,”
select the image file and click the “Open” button or you
can also Drag and drop the new image into the
Photoshop window.
 iii) Click and drag the image on the work space.
You can Drag and drop the new image into the Photoshop window.
iv) Scale the image up and down.
To resize an image in Photoshop:
1. Open your image in Photoshop.
2. Go to “Image”, located at the top of the
window.
3. Select “Image Size”.
4. A new window will open.
5. Under “Document Size”:
6. Select “inches” for the unit of
measurement.
7. Check that the resolution is no lower than
“200 pixels/inch”, however “300 pixels/inch” is
ideal for printing.
8. Input the width and height you desire.

4. Design a Greeting card. Use different Layers for image and text.
Step 1: Click on New (ctrl+N) and Open a new file
Step 2: Set up the background by selecting any solid color or gradient color or any background image file.
Step 3: Create new layer. Layer-> New->layer
Step4: Select Text tool (T) from the toolbox and type the words ex: HAPPY BIRTHDAY
Step 5: Create new layer. Layer-> New->
Step6: Go to File->Import. Select images to be used in greeting card.
Step 7: Go to File-> Save As. Save the document with a name with extension .PSD
5. Practice using different Selection tools.
The selection tools are what you will use to select portions of an image to edit.
 Marquee tool (M): You can select rectangular portions of an image with this
tool.
o The Rectangular marquee and Elliptical marquee tools are hidden in the
Toolbox under one and the same icon.
o Rectangular marquee
 This tool selects rectangular and square areas.
o Elliptical marquee

 This tool selects ellipses and circles.

 Lasso (L): The tool allows creating freehand selections.

o The Lasso, Polygonal Lasso, Magnetic Lasso tools are hidden in
the Toolbox under one and the same icon.
o Polygonal Lasso
 The tool makes freehand selections, but its contour is made up of straight segments.
o Magnetic Lasso
 When you use Magnetic Lasso you do not need to follow the contour of the object
precisely. If the object stands out against the background the border of the selected area
will be traced automatically as you move the cursor along the object.
 Magic Wand (W):
o This tool selects a consistently colored area. You can set Tolerance in the Options palette
of the Magic Wand tool. The higher is the value, the more colors will fall into the
selected area. The Tolerance value ranges from 0 to 255. At Tolerance equal to 0 the
selected area will be represented only by one color, at Tolerance equal to 255 - all colors
of the image will be selected, that is the whole image.
 Crop (C) :
o This tool allows you to select a portion of the image and get rid of everything not
included in the selection. It is useful for getting rid of backdrops you don't want, such as
photo bombers.
 Eyedropper (I):
o This tool samples a color in the image you are working on and matches it to one in
Photoshop. It is useful if you want to retouch part of an image but can't tell which color to
use.
 6. Practice using different painting tools.
The main painting tools in Adobe Photoshop are as follows:
 Brush Tool (B)
o This tool is used to draws lines with a softer edge.
 Pencil Tool (B)
o The Pencil draws free form lines with a hard edgeand it creates freeform lines using the
current foreground color.
 Clone Stamp(S)
o This tool picks up and copies a brush- shaped piece of the background and “ stamps” it
wherever you click.
 History Brush Tool (Y)
o This tool works in a similar way as the Brush Tool, except the information that it paints
with is from the original state of your image. If you go to "Window" > "History" then you
will see the History Palette. The History Brush Tool paints with the information from
whatever History State is selected.
 Gradient Tool (G)
o You can use this tool to make gradient colors. It creates a blending of your foreground
color and background color when you click and drag it.
 Paint Bucket Tool (G)
o This tool fills the area with the Active Foreground Color and Pattern.

7. Restore old monochrome photos to a new one. Apply suitable colors.

Step 1: Open Photoshop
Step 2: Import a monochrome photo
Step3: select Image-> Adjustments-> Color balance from the menu bar.
Step 4: make sure that you have selected the midtones radio button->Preview checked.
Step5: Make adjustments with the color sliders

Step 6: save the file.

8. Import a similar picture from the internet. Erase unwanted parts in the image, retouch old
photos into new. Color partially.
Step 1: open Photoshop
Step 2: Import original photo/damaged photo into Photoshop.
Step 3: create a new layer.
Step 4: use the spot healing brush to erase creases, fix the tears in the photo.
Step 5: Select toolbox-> clone stamp tool. Use this tool to smooth over fine details or areas with a lot of
texture.
Step 6: Colorize your photo- create a new layer.
Step 7: Select solid layer in adjustment layer. Press control+I to invert. Set the blending mode to color
and color the object.
Step 8: Save the file.

9. Import a picture of a stationary motorcyclist. Apply suitable masking filters and

background. The image should appear as though the motorcyclist is speeding fast
Step 1: Open photoshop
Step 2: Select a motorcyclist image and a background grass with road image.
Step 3: Open a new file with width 15 inches and height 4 inches, resolution 96 pixels/inch.
Step 4: Copy and paste the grass with road image on the canvas. Press alt and copy it to the entire length.
Step 5: Merge layers- Select all layers with road images and press Control+E
Step 6: Now drag motorcyclist image on the same canvas with grass background.
Step 7: Use transform tool (control+T) to adjust the size.
Step 8: Now go to image ready.
Step 9: select new frame->move car to some distance by pressing shift key.
Step 10: Now click Tween button->frames to add-set to 45-> OK.
Step 11: Press play button.
10. Create a professional web layout. Use different layers, textures, colors, text, blending
features and filter masking.

1. Open a new file in Photoshop by clicking on File/New and enter a width of 750pixels and
height of 450px.

2. Color the background with Black by choosing black in the foreground color and
selecting the paint bucket tool and click on the canvas. Your background will now
be black.
3. Add a new layer by clicking on the Add Layer icon in the Layers panel. If your Layers
panel is not open then go to Window/Layers. Name the new layer copyright .
Select Rectangle Marquee Tool and drag to make the bottom banner with a width
of 750pixels by 21 pixels. Color this banner with color #303030.
4. Choose Horizontal Type Tool. A text layer is created automatically. Now enter the
text for Copyright, e.g. "Copyright © 2005 [Link]. All Rights
Reserved.
5. Choose Horizontal Type Tool. A text layer appears automatically. Enter the button text
on the top banner too: "home l sitemap l news l downloads".

6. Add a new layer. Now make the gray horizontal line color #808080 with single Marquee
[Link] to Edit>Stroke. Choose Stroke width 1 pixel. Color #808080. Location
Center. Click OK.
7. Right click on the layer and select duplicate layer 3 times, because you have 4 lines. Put
the lines in their corresponding place: in bottom, middle, top.
8. Now you can enter the button text on the second top banner in a new layer e.g. About us
l services l products l clientele l contact us.
9. Now define the logo area with the rectangular marquee tool. Go to Edit>Stroke.
Choose Stroke width 1 pixel. Color is #808080. Location Center. Fill inside with Black
color with Paint tool. Name it Logo area.
10. Choose the Horizontal Type Tool and write your company name or website name.
 11. Choose the Horizontal Type Tool and enter content in the middle.
12. Insert your [Link] could also be any image you choose. The image needs to be a
horizontal banner. Open your image file. Go to move tool. Drag from your image file to
this layout in the middle of the layout.
13. Draw the boxes seen on the right with the Polygonal Lasso Tool. Go to Edit>Stroke.
Choose Stroke width 1 pixel. Color is #808080. Location Center.
Name your layer borderpics. Make two more Boxes. Adjust them equally in the right side
of the layout. Insert the images by dragging them to your layout and naming the layers.
14. Drag the layer borderpics on top of the 3 pic layers. The edges of the pictures have to be
cut according to the design of the box.
15. Now create the white bands with text at the bottom of each of the right graphics with the
rectangle marquee tool. Fill the box with white color with Paint tool. Name it
"whitebandpics". Choose the Horizontal Type Tool. A text layer is created automatically.
Now enter the text for Gifts. Follow the same for the rest of the pictures. You can click
here for the images - pic1, pic2, pic3. You can drag these images to your layout.

11. Create an innovative logo for your Institute considering all the features of your Institute.
Step 1: Create a new canvas. Go to File -> New, or press CTRL+N in Photoshop. Select the
appropriate width and height for your design 1000px width and 600px height.
Step 2: Create new layer, either select "add new layer" from the bottom of the layers panel or simply
click Shift + Ctrl + N to create a new layer.
Step 3:Pick Photoshop Text tool from the toolbox on the left. Type your slogan - your logo text,
select the font style and font color.
Step 4:Use [Ctrl] + O to open an image. Right-click and select [Layer via Copy]. It will generate a
layer named [Layer 1]. Drag and add it to [Layers] block in previous document.
 Step 5:Resize logo text by applying a larger font size. Make use of shortcut [V] to select any object
on your canvas quickly. Move their positions on the canvas for a nice look.
Step 6:Step 5: Save the file.

12. Design a flyer for a short term course that is supposed to commence from 3 weeks ahead
from the current date.
Step 1 : Open Photoshop

Step 2 : Select New Canvas. File-> New

Step 3 – Create Flyer

Now you can start designing your flyer by first selecting the background color. Go to the color
tool on the left side. Select a color according to your taste and liking and click ok. Now you can
add text from the text tool.
Steps 4 – Customize
Once you have designed the flyer, you can further customize it by adding other details as you like
—for example, images, logo, name of the brand, official website, etc.
Step 5: Save
When the flyer is complete, go to the File tab and click on save. Enter the credentials for your file
to select the desired location. Finally, click on save.
 ANIMATION
Definition of Animation :
Animation is the process of creating an illusion of motion and shape change
by means of rapid display of various type of pictures that were made to
create a single scene.
Principles of Animation :
Before doing animation, every animator should follow these principles to
create a good animation. These principles was evolved from past animation
techniques but these principle are also very useful and essential for doing
animation. In 1981 two bright Disney animators Ollie Johnston and Frank
Thomas introduced twelve basic principles of animation to produce more
realistic works. These principle are also applicable on present computer
animations.
There are 12 basic principles of animation, they are-
1. Squash and Stretch –
This is the most important principle of animation, it gives the sense of
weight and volume to draw an object.
2. Anticipation –
In this principle animator will create a starting scene like that it shows
that something will happen, almost nothing happens suddenly.
3. Staging –
Animator creates such type of scene which attract audience so that
audience’s attention is directed toward that scene.
4. Straight Ahead –
In this principle, all frames are drawn from beginning to the end and then
fill all the interval or scene.
5. Flow through and overlapping action –
Two object’s action have different speed in any scene can easily describe
this principle.
6. Slow in and Slow out –
When an abject have maximum acceleration in between and resist on the
beginning and end will show this principle’s working.
7. Arc –
Arcs are present in almost all animation as no object will follow straight
line and follows some arc in its action.
8. Secondary action –
As with one character’s action second character move shows the multiple
dimension of an animation.
9. Timing –
For playing a given action a perfect timing is very important.
10. Exaggeration –
This principle creates extra reality in the scene by developing a proper
animation style.
11. Solid drawing –
In this principle, any object will created into 3D form to get realistic
visualization of scene.
Appeal –
Any character need not be as same as any real character but it somewhat
seems to be like that which create a proper thinking in the audience’s
mind.

13 i) Add different objects to the space. Practice with both shortcut keys and menus.
 To add objects to the space we can import images, go to File > Import > Import to Stage.
 Flash will import .AI, .BMP, .EPS, .GIF, .JPG, .PCT, .PNG, .PSD, .TIF, .WMF and other
image formats.
 Select the images you would like to import and click OK. You will find all of your
imported images in the Library panel.
 To add an image to your canvas, select the image and drag it onto the canvas.
ii) Perform Transformation operations on objects.
 To perform transformation, after importing the objects on canvas select Free form tool.

 The Free Transform tool on Tools panel allows you to interactively scale and rotate any
selected object or shape on the Stage.

 The Free Transform tool allows you to select an object on the Stage and then
interactively change its size or rotate it freely.

14. Create primitive objects like an ice cream cone, snowman, house, tunnel and like.

Creating ice cream cone:

Step 1: Create a new document with a 600px width and a 700px height in Photoshop.
Step 2: Set orange as your foreground color. Now, select the Pen Tool, click on the “Shape
layers” option from the options bar, and draw the cone shape.
Step 3: Click on this cone layer and go to “Layer” > “Layer style” > “Blending options.” Do the
settings accordingly.

Step 4:Next, we’ll create stripes for the cone biscuit. Firstly, select light brown as your color and
then pick “Hard round brush” with 3px size. Now, select the Pen Tool, choose “Paths” from top
options bar, and draw a slightly curved line like the one below. After that, right-click and select
“Stroke Path” > “Brush.” Then, press “Delete” to get rid of the path.

Step 5:Now, we need few more copies of this line. To do this, take the Move Tool over the line
and press the Alt key. Repeat this step to get the desired copies of the line.

Step 6:Collect all of the stripe layers into a single group, duplicate this group, and go to “Edit” >
“Transform” > “Flip horizontal.” After that, press Ctrl + “T” to activate the Free Transform Tool.
Tilt these duplicated stripes group to form the crisscross pattern common to waffle cones.

Step 7:Merge both “cone stripe” groups together. You can do this by selecting the groups by
holding the Shift key, then right-click to open the options window and choose “Merge layers.”
Once you are done, click on the merged layer and then press Ctrl + the thumbnail of cone layer.
Now, click on the “Add layer mask” icon found at the bottom of the layers panel.

Step 8:Now, we’ll move ahead to create different flavored (and different colored) ice cream
scoops. Select the Pen Tool with the “Shape layers” option to draw the shape as shown below.
Use #ffeb8a as the color for this.

Step 9:Next, draw some shadowing and highlights over the scoop using the Pen tool. You can
approach this step roughly and imprecisely to get the proper imperfections for ice cream. I’ve
used #fec22b for shadows and #fbfec6 for highlights. Once you are done, right-click on the scoop
layer, choose “Copy layer style,” right-click on rest of the shape layers, and select “Paste layer
style” to apply the same inner glow effect on them.

Step 10:Merge all the layers that comprise the scoop of ice cream, then go to “Filter” > “Artistic”
> “Palette Knife.” Use the following settings.

Step 11:Duplicate the scoop layer, turn it black using “Color Overlay,” change the blending
mode of this layer to “Multiply,” and then reduce its opacity to 40%. Place this layer below the
original scoop layer; drag it a bit downward and go to “Filter” > “Blur” > “Gaussian blur.” Use a
1.5px value for the Gaussian blur. You can erase unwanted shadow area.
 \

15 Change the structure of objects by editing Vertices, Edges, Faces and transform the same and
observe the changes.
Step1: Open Macromedia Flash
Step 2: Open a new document.
Step 3: Select frame 1 and layer 1.
Step 4: Insert a rectangle by using rectangle tool, select frame 35, right click and insert blank key
frame.
 Step 5: Insert an oval by selecting oval tool.
Step 6: Select any mid frame between 1 and 35 and select option Tween-> Shape
Step 7: Press control + Enter to run the document.

16. Design a red ball lying on green grass. Apply suitable texture and render the same.
Step 1:Create a new Flash document and name it
Step 2: Import a background image consisting of grass and name the layer as grass.

Step 3: Create another new layer for ball

Step 4: select Oval tool and draw a ball on the grass background.

Step 5: Now select Frame 5 from both layers and Right click-> Insert key frame

Step 6: Now select only the frame from ball layer and move it to some distance.

Step 7: next select frame 10 from both layers and right click-> insert key frame.

Step 8: Continue the same steps unti ball rolls to some distance.

Step 9: Now we can play the animation by pressing Enter.

Step 10: Save the file.

\

17. Animate the ball (both rigid and elastic) to bounce thrice and roll. Use suitable animation
principles. Add a booing sound when the ball bounces.
Step 1: Create a new Flash document and name it something like Motion Tween Bounce.
Step 2: Flash creates a document with one layer and a keyframe at Frame 1 by default.
In the Timeline, select Frame 1.
Step 3: In the Toolbar, select the oval tool; set the Line Color to None.
Step 4: Near the top of the Stage, draw a [Link] circle will be the ball. Make it fairly large.
Step 5: With Frame 1 still selected, from the Insert menu, choose Create Motion Tween
Choose Insert > Create Motion Tween.
Flash creates a symbol from the objects on the Stage. Flash gives the symbol a default name
based on the number of tweening objects already created in the movie. In this case, Flash
turns the ball into a symbol named Tween 1
Step 6: In the Timeline, select Frame 5.
 Step 7: Choose Insert > Frame. Flash adds frames containing a dotted line
Step 8: In Frame 5, move the circle to the bottom of the Stage to create the downward bounce of the ball.
Step 9: In the Timeline, select Frame 10.
Step 10: Choose Insert > [Link] extends the motion-tween tinting to Frame 10.
Step 11:In Frame 10, move the circle to the top of the Stage to create the upward bounce of the ball.
Step 12: From the Control menu, choose Play to preview the animation.

18. Design two playing dice and animate the same. Add suitable sound for dice fall.
Step 1:Create a new Flash document and name it
Step 2: Import a dice image in first layer.

Step 3: Use move tool and select the dice. Then select the frame 5, right click-> insert key frame.

Step 4: Add another layer and name it as dice 2.

Step 5: Use move tool and select the second dice. Then select the frame 7, right click-> insert key frame.

Step 6: Keep inserting the key frame at the interval of 10,15,20th frames and so on.

Step 7: once done, run the animation by pressing Enter key.

Step 8: Save the file.

 19. Show the animation of water flowing out from a pipe around a suitable environment.
Step 1:Create a new Flash document Ctrl+Nand name it
Step 2: Draw a rectangle and press F8 to convert it to symbol. Delete the outline by going inside the symbol.

Step 3: Edit the shape of the rectangle in the shape of a waterfall.

Step 4: Use eraser tool and add distortion to the waterfall for more convincing effect.

Step 5: on the 30th frame add a key frame and apply shape tween. Then by going to the first key frame add four
shape hints. We place these keys at the four corners of the shape and then by clicking on the last key place
them again at the same position of the shape.

Step 6: Now on the first keyframe add a new hintwhich keeps the first keytowards upper side and then bring it
down. Here we can see water like animation on one side in the same way add a shape hint to the opposite side
and match it.

Step 7 :To preview press control enter.