Lab: 5 Date:2081/3/20

5.AUDIO PROCESSING

1. Insert any audio files of your choice.

Software used: WavePad.

• Click on the “File” menu located at the top left corner of the WavePad Interface.

Select “Open” from the dropdown menu to import the audio file. Alternatively, we
can directly drag and drop the audio file.

Figure: Inserting Audio

2. Apply the following effects:

a. Amplifying

b. Fade-in

c. Fade-out

d. Pitch changes

e. Speed changes

• Access the amplify tool by navigating to “Effects” in the menu bar and selecting
“Amplify” from the dropdown menu.
• If necessary, select the portion of the audio you want to amplify by using the
selection tool.
• Adjust the amplification level using the provided slider or input field. Increase the
amplification level for a louder sound and decrease it for a softer sound.
 Figure: Amplifying

To apply fade in effect:

Go to “Effects” in the menu bar.

• Select “Fade” from the dropdown menu.

• Choose “Fade in”.

• Adjust the duration of the fade in effect if necessary.

Figure: Fade in

To apply a fade out effect:

• It’s the same two initial process as for fade in, and we choose “Fade Out”.
 • Adjust the duration of the fade out effect if necessary.

• Apply the effect by clicking “OK” or “Apply”.

Figure: Fade Out

Adjusting Pitch:
• Go to “Effects” in the menu bar.

• Select “Pitch” from the dropdown menu.

• In the Pitch dialog box, you’ll see options to adjust pitch. You can increase or
decrease the pitch by adjusting the semitones or cents value. Positive values raise
the pitch, while negative value lower it

• Apply the pitch adjustment by clicking “OK” or “Apply”.

Figure: Pitch
Changing Speed:

• Select the portion of the audio you want to adjust the speed for, if necessary, using
the selection tool.

• Go to “Effects” in the menu bar.

• Select “Time/Pitch” from the dropdown menu.

• In the Time/Pitch dialog box, you’ll see options to adjust the speed. You can
increase or decrease the speed by adjusting the percentage value. Increasing the
percentage will speed up the audio, while decreasing it will slow it down.

• Apply the speed adjustment by clicking “OK” or “Apply”.

Figure: Changing Speed

3. Perform the following operations:

a. Trim and cut sections of the audio file.

b. Merge two different audio files.

c. Mix multiple audio tracks.

To trim the audio:

• Use the selection tool to highlight the section of the audio you want to keep.

• Go to “Edit” in the menu bar

• Select “Trim” from the dropdown menu.

 • The selected portion will be kept, and the rest will be removed.

To cut the audio into separate sections:

• Use the selection tool to highlight the section of the audio you want to cut.
• Go to “Edit” in the menu bar.

• Select “Cut” from the dropdown menu.

• The selected portion will be removed from the audio file.

Figure: Trim and Cut

Merge two different audio files, mixing:

To merge the audio files into a single file:

• Ensure that the audio files are aligned properly on the timeline.

• Go to “File” in the menu bar.

• Select “Save Mix As” or “Export Mix” from the dropdown menu.

• Choose the desired file format and location to save the merged audio file on the
computer.
To mix the audio files together:

• Adjust the volume levels of each audio track to achieve the desired balance.

• Add effects, such as equalization, reverb or compression as required to enhance the

mix.

Figure: Merge and Mix File

4. Utilize a text-to-speech synthesizer to convert text into audio.

Text to speech synthesizer:

• Click on the “Tools” menu at the top of the WavePad interface.

• Select “Text to Speech” from the dropdown menu. This will open the Text
to Speech dialog box.
• In the dialog box, enter or paste the text you want to convert into speech into
the provided text field.
• Choose the desired voice from the available options.

• Click the “Synthesize Speech” button in the Text to Speech Synthesizer

dialog box to convert to speech.
• The converted speech will be inserted into WavePad project as a new audio
track.
 Figure: providing desires text

Figure: Converted text in to audio

Lab:6 Date:2081/3/20

Take any video of your choice. Trim unwanted sections, add some text to be displayed
at the beginning and end of the video. Provide a brief explanation of the steps you
followed and the software used.

Video editing is the process of manipulating and rearranging video footage to create a new
work. It involves selecting and organizing clips, adding effects, transitions, and sound, and
refining the video to achieve a specific flow or narrative.

Key Aspects of Video Editing

1. Trimming and Cutting:

• Trimming: Removing unwanted sections from the beginning, middle, or

end of a clip.
• Cutting: Dividing a clip into parts or cutting out specific portions to create
a more concise sequence.
2. Sequencing:

• Organizing clips in a specific order to tell a story or convey information

effectively. Sequencing ensures that the video has a logical flow, whether
it's a narrative film, a documentary, or a promotional video.
3. Transitions:

• Adding transitions between clips to create smooth or stylistic changes from

one scene to another. Common transitions include cuts, fades, dissolves, and
wipes.
4. Effects and Filters:

• Applying visual effects or filters to enhance the look of the video. This can
include color correction, brightness/contrast adjustments, slow-motion,
fastforward, and other creative effects.
5. Audio Editing:

• Syncing audio with video, adjusting audio levels, and adding sound effects
or music. Good audio editing can greatly enhance the overall quality of the
video.
 6. Titles and Text:

• Adding text overlays, titles, and credits to provide information or context.

This can include opening titles, lower thirds, subtitles, and closing credits.

7. Color Correction and Grading:

• Color Correction: Adjusting the colors in your video to make them look
natural and consistent.
• Color Grading: Applying a specific color palette to the video to create a
certain mood or atmosphere.
8. Motion Graphics:

• Incorporating animated text, logos, or graphic elements to make the video

more engaging. This is common in promotional videos, presentations, and
explainer videos.
9. Exporting:

• The final step where the edited video is exported to a specific format (e.g.,
MP4, MOV) suitable for the intended platform, such as social media,
YouTube, or broadcast.

Software used: Video Pad

1. Take any video and crop it.

• Click on the “Add Files” button in the toolbar or navigate to “File”>”Add

Files” to import the video file you want to crop into the VideoPad project.
• Drag and drop the imported video file from the media bin or file explorer
onto the timeline.
• Click on the video clip on the timeline to select it. Then, navigate to the

“Video Effects” tab in the top toolbar.

• Find and click on the “Crop” button.

• Adjust the crop region that you prefer.

• Press “Enter” to apply crop effect to the video segment.

 Figure: Applying Crop video effect

2. Trim unwanted section.

• Locate the section of the video you want to trim on the timeline.

• Click on the beginning of the section you want to trim to set the starting point.

• Click on the end of the section you want to trim to set the ending point.

Figure: Trimmed Unwanted Section

3. Add some text to be displayed there and add effects at the beginning of the video
and end of video.
Lab: 7 Date:2081/3/20

7. Write a program to morph one image into another. Explain the concept of image
morphing and the algorithm used in your implementation. Provide before and after
images as examples.
Image Morphing: Concept and Explanation: Image Morphing is the process of smoothly
transforming one image into another. This technique is commonly used in visual effects in
films, animations, and image processing applications. The goal is to create a smooth
transition between two images over a sequence of frames, so that the start image gradually
deforms and blends into the target image. Steps in Image Morphing

1. Feature Identification: Identify key features in both images that correspond to

each other, such as eyes, mouth, and edges. This is often done manually or with
automated landmark detection algorithms.

2. Warping: Adjust the shape of the first image to match the shape of the second
image. This involves applying a geometric transformation to the first image based
on the feature correspondences.

3. Cross-Dissolving: Blend the color and intensity of corresponding pixels from both
images. This step gradually shifts the pixel values from those of the first image to
those of the second image.

4. Interpolating Intermediate Frames: Create a series of intermediate images,

which show the transition from the first image to the second. This is done by
incrementally applying the warping and cross-dissolving steps over a sequence of
frames.

Algorithm Used

A common algorithm for image morphing is the Delaunay Triangulation combined with
Affine Transformation. 1. Delaunay Triangulation:
o The images are divided into triangles based on the feature points.
These triangles are used as a mesh for the morphing process. o
Corresponding triangles in both images are identified.
2. Affine Transformation:
 o An affine transformation is computed for each triangle, which warps it from
the first image's triangle shape to the second image's triangle shape.
o This transformation is applied to all pixels within the triangle.
3. Cross-Dissolve:
o After warping, the pixel values of corresponding triangles from both images
are blended together based on a certain weight.
4. Iterate:
o This process is repeated for each frame, gradually increasing the weight
from 0 to 1 (where 0 represents the first image and 1 represents the second
image).

Program:

import numpy as
np import cv2
import math #read
image
img=cv2.imread(r"D:\BCA8thsem\Multimedia System\morphing\Assets\anil.jpg")

img2 = cv2.imread(r"D:\BCA8thsem\Multimedia
System\morphing\Assets\digvijay.jpg") #lift , right eyes and
mouse pts1 = np.array([[218, 240],[295, 240],[250,
383]],np.float32) pts2 = np.array([[248, 245],[345,
270],[281, 366]],np.float32) pts11
=np.zeros((3,2),np.float32) pts22 =np.zeros((3,2),np.float32)
dis = 100.0 # iterations piece = 1.0 / dis for i in
range(0,int(dis)): for j in range(0,3):
disx = (pts1[j,0] - pts2[j,0])*-1
disy = (pts1[j,1] - pts2[j,1])*-1
#move of first image movex1
=( disx/dis) * (i+1) movey1 =(
disy/dis) * (i+1) #move of
second image movex2 =disx-
movex1 movey2 =disy-
 movey1 pts11[j,0] = pts1[j,0]
+ movex1 pts11[j,1] =
pts1[j,1] + movey1 pts22[j,0]
= pts2[j,0] - movex2
pts22[j,1] = pts2[j,1] - movey2
mat1=cv2.getAffineTransform(pts
1, pts11)
mat2=cv2.getAffineTransform(pts
2, pts22)
dst1=cv2.warpAffine(img, mat1,
(img.shape[1],img.shape[0]),None,None,cv2.BORDER_REPLICATE)

dst2=cv2.warpAffine(img2, mat2,
(img.shape[1],img.shape[0]),None,None,cv2.BORDER_REPLICATE)

dst=cv2.addWeighted(dst1, 1-(piece*(i)), dst2, piece*(i+1), 0)

cv2.imshow("dst",dst)
cv2.waitKey(25)
cv2.waitKey(0)
Output:

Figure: Before morphing

Figure: After Morphing

Lab: 1 Date:2081/3/20

1.Write a C program for bouncing ball animation using graphics. header file.
Theory:

Animation in programming refers to the process of creating the illusion of movement by

displaying a sequence of images or frames over time. In the context of graphics
programming, animation involves updating the visual elements on the screen (like shapes,
colors, or images) in a way that they appear to move, change, or interact dynamically.

In this particular program, the animation is achieved by continuously drawing a ball at

different positions on the screen and changing its color, which creates the illusion of a
bouncing ball that changes color as it moves.

Key Animation Functions Used in the Program:

1. initgraph (&gd, &gm, "C:\\TC\\BGI");

• Purpose: Initializes the graphics mode. It prepares the system for drawing
graphics by setting up the display mode and the graphics driver.
• Parameters: &gd and &gm: Pointers to integers that detect and set the
graphics driver and mode.
• "C:\\TC\\BGI": The path to the graphics driver files (specific to Turbo C++).
2. getmaxx() and getmaxy()

• Purpose: Retrieve the maximum horizontal (x) and vertical (y) coordinates
of the screen.
• Usage in Program: These functions are used to calculate the mid-point of
the screen and to check if the ball has hit the top or bottom edge.
3. setcolor(color);

• Purpose: Sets the current drawing color.

• Usage in Program: This function is used to set the color of the ball before
drawing it. The color is chosen from an array that cycles through red, white,
blue, and purple.
4. setfillstyle(SOLID_FILL, color);

• Purpose: Sets the fill pattern and color for the shapes that are drawn.
 • Usage in Program: This function is used to fill the ball with a solid color,
matching the current drawing color.
5. circle(x, y, radius);

• Usage in Program: This function draws the ball at the current x and y
coordinates with a radius of 30 pixels.
6. floodfill(x, y, color);

• Purpose: Fills an enclosed area with the current fill pattern and color.

• Usage in Program: After the circle is drawn, this function fills it with the
color set by setfillstyle.
7. delay(milliseconds);

• Purpose: Pauses the program execution for a specified amount of time.

• Usage in Program: The delay(50); function is used to pause the program for
50 milliseconds.
8. cleardevice();

• Purpose: Clears the screen.

• Usage in Program: This function clears the screen before the next frame is
drawn. Without this, the previous frames would remain on the screen,
leading to a trail effect rather than smooth animation.
9. kbhit()

• Purpose: Checks if a key has been pressed.

• Usage in Program: The loop continues until a key is pressed, providing a

way to end the animation.
10. closegraph();

• Purpose: Closes the graphics mode and returns to the text mode.

• Usage in Program: This function is called at the end of the program to clean up and
exit the graphics mode.
How the Animation Works:

• The ball is drawn at an initial position and then cleared from the screen after a short
delay.
• The ball's position is updated, and it is drawn again in the new position, creating the
illusion of movement.
• The direction of movement is reversed when the ball reaches the top or bottom of
the screen.
• The ball's color is changed with each frame, enhancing the animation with visual
variety.
Program:
#include <stdio.h>
#include <graphics.h>
#include <dos.h>

int main() { int gd =

DETECT, gm;
int x, y, flag = 0;
int colorIndex = 0;
int colors[] = {RED, WHITE, BLUE, MAGENTA}; // Array of colors

initgraph(&gd, &gm, "C:\\TC\\BGI");

/* get mid positions in x and y-axis */

x = getmaxx() / 2; y = 30;

while (!kbhit()) {
if (y >= getmaxy() - 30 || y <= 30)
flag = !flag;

/* Select color from array based on the current colorIndex */

setcolor(colors[colorIndex]);
setfillstyle(SOLID_FILL, colors[colorIndex]);

/* Draw the ball */

circle(x, y, 30);
floodfill(x, y, colors[colorIndex]);

/* Delay for 50 milliseconds */

delay(50);

/* Clear the screen */

cleardevice();

/* Change ball position */

if (flag) {
y += 5; // Move down
} else {
y -= 5; // Move up
 }

/* Change color for the next frame */

colorIndex = (colorIndex + 1) % 4;
}

closegraph();
return 0;
}
Output:

Figure: Bouncing Ball Animation

Lab:2 Date:2081/3/20

2. Write a program in C for moving object (Blooming Flower) animation.

Animation is the process of creating the illusion of motion and change by displaying a
sequence of static images or frames in rapid succession. Each image differs slightly from
the previous one, creating the perception of continuous movement when viewed in quick
succession.
Function used in the program:
1. Blooming Effect: The animation simulates a flower gradually blooming by
increasing the size of its petals.
2. Petal Size Growth: In each iteration of the loop, the petal size increases by 1 pixel
(petalSize += 1), making the petals appear to grow.
3. Resetting the Bloom: Once the petals reach a specified maximum size
(maxPetalSize), the size resets to a smaller value, creating a continuous cycle of
blooming and shrinking.
4. Frame Control: The screen is cleared (cleardevice()) and the flower is redrawn in
each loop iteration, showing the updated petal size.
5. Smooth Animation: A short delay (delay(50);) is introduced between frames to
make the growth appear smooth and controlled.
6. Loop Termination: The animation runs in an infinite loop until a key is pressed, at
which point it stops and the graphics mode closes.

Program
#include <graphics.h>
#include <conio.h>

// Function to draw a blooming flower void

drawFlower(int x, int y, int petalSize) {
// Draw the stem
setcolor(GREEN);
line(x, y, x, y + 100);

// Draw the petals (4 petals in a cross pattern)

setcolor(RED);
setfillstyle(SOLID_FILL, RED);
fillellipse(x - petalSize, y - petalSize, petalSize, petalSize);
fillellipse(x + petalSize, y - petalSize, petalSize, petalSize);
fillellipse(x - petalSize, y + petalSize, petalSize, petalSize);
fillellipse(x + petalSize, y + petalSize, petalSize, petalSize);
 // Draw the center of the flower
setcolor(YELLOW);
setfillstyle(SOLID_FILL, YELLOW);
fillellipse(x, y, petalSize / 2, petalSize / 2);
}

int main() {
// Initialize the graphics mode and driver
int gd = DETECT, gm;
initgraph(&gd, &gm, NULL); // No need to specify the path

// Flower properties int x = getmaxx() / 2; // Center of

the screen horizontally int y = getmaxy() / 2; // Center
of the screen vertically int petalSize = 10; // Initial petal
size
int maxPetalSize = 50; // Maximum petal size

// Animation loop
while (!kbhit()) {
// Clear the previous frame
cleardevice();

// Draw the flower

drawFlower(x, y, petalSize);

// Update petal size for the blooming effect

petalSize += 1;
if (petalSize > maxPetalSize) {
petalSize = 10; // Reset petal size to create a loop of blooming
}

// Delay for a short period to control animation speed

delay(50);
}

// Close the graphics

mode closegraph();
return 0;
}
Output:

Figure: Flower Blooming

Lab:3 Date:2081/3/21

3.Demonstrate RunLength compression in Python Programming Language.

Theory Run-Length Encoding (RLE) is a simple form of data compression that reduces the
size of a file by encoding consecutive identical data elements (called "runs") as a single
data value and a count of how many times it appears. It is used in lossless compression of
data allowing 4.259 bytes compression into 3 bytes. In this encoding, frequently (at least 4
times) repeating bytes are replaced depending on their occurrence into three byte, where
first byte depict the repeating byte second is the exclamation and third byte depicts the np.
of occurrence.

Syntax: x!x where x: repeating character !: exclamation (flag) x: no of repetition In this

lab, we have implemented the Run-Length Encoding(RLE) using C program.

Program

def run_length_encoding(input_string):

# Initialize an empty string for the encoded result

encoded_string = ""
# Initialize the count of the current character
count = 1
# Iterate through the input string
for i in range(1, len(input_string)):
# Check if the current character is the same as the previous one
if input_string[i] == input_string[i - 1]:
count += 1 # Increment the count if the characters match
else:
# Append the character and its count to the encoded string
encoded_string += input_string[i - 1] + str(count) count =
1 # Reset the count for the new character
# Append the last character and its count
encoded_string += input_string[-1] + str(count)
return encoded_string # Example usage
input_data = "AAAABBBCCDAA"
compressed_data =
run_length_encoding(input_data) print("Original
String:", input_data)

print ("Compressed String:", compressed_data)

Output:
Lab: 4 Date:2081/3/20

4.write a program for Implementation of Huffman Coding.

Theory:

Huffman Coding

Huffman Coding is an efficient algorithm used for lossless data compression. It is based on
the idea of assigning shorter binary codes to more frequently occurring characters in a data
set, and longer codes to less frequent characters. The technique ensures that no code is a
prefix of another, allowing for unique decodability.

Key Concepts in Huffman Coding

1. Frequency of Characters:

• Huffman coding begins by calculating the frequency of each character (or

symbol) in the data. Characters that appear more often will be given shorter
codes, reducing the overall size of the encoded data.

2. Binary Tree Construction:

• Nodes: Each character and its frequency are treated as a node in the tree.

• Tree Building: The algorithm builds a binary tree by repeatedly merging the
two nodes with the smallest frequencies, creating a new node whose
frequency is the sum of the two. This process continues until there is only
one node left, which becomes the root of the tree.

3. Code Assignment:

• Left and Right Paths: In the resulting binary tree, the path to each character
from the root determines its binary code. A left branch typically represents
a 0, and a right branch represents a 1.

• Unique Codes: Each character gets a unique binary code based on its
position in the tree. Frequently occurring characters have shorter codes
because they are closer to the root, while less frequent characters have
longer codes.
 4. Prefix-Free Property:

• The codes generated are prefix-free, meaning that no code is a prefix of

another code. This property is crucial because it ensures that the encoded
data can be uniquely decoded without ambiguity.

5. Encoding and Decoding:

• Encoding: To encode data, each character in the data is replaced with its
corresponding Huffman code.

• Decoding: The decoding process is straightforward: traverse the Huffman

tree based on the binary sequence until a leaf node (character) is reached.

Program
import heapq from collections
import defaultdict # Node class for
Huffman Tree class Node: def
__init__(self, char, freq):
self.char = char
self.freq = freq self.left
= None self.right =
None
# Define comparator methods for priority queue (min heap)
def __lt__(self, other):
return self.freq < other.freq
# Function to build the Huffman Tree def
build_huffman_tree(char_freq):
heap = [Node(char, freq) for char, freq in char_freq.items()]
heapq.heapify(heap) while len(heap) > 1:
 # Remove the two nodes of highest priority (lowest frequency)
left = heapq.heappop(heap) right = heapq.heappop(heap)
# Create a new internal node with these two nodes as children and with a frequency
equal to the sum of the two nodes' frequencies merged = Node(None, left.freq +
right.freq) merged.left = left merged.right = right
# Add the new node to the heap
heapq.heappush(heap, merged)
# The remaining node is the root of the Huffman Tree
return heap[0]

# Function to generate Huffman Codes def

generate_huffman_codes(node, code, huffman_codes):
if node is None:
return
# If this node is a leaf node, it contains one of the input characters
if node.char is not None:
huffman_codes[node.char] = code # Recurse for the left and
right children generate_huffman_codes(node.left, code + "0",
huffman_codes) generate_huffman_codes(node.right, code + "1",
huffman_codes)
# Function to encode the input string
def huffman_encoding(data): if
not data:
return "", {}
# Count the frequency of each character in the data
char_freq = defaultdict(int) for char in data:
char_freq[char] += 1 # Build the
Huffman Tree root =
build_huffman_tree(char_freq) #
Generate Huffman Codes
huffman_codes = {}
generate_huffman_codes(root, "",
huffman_codes)

# Encode the data encoded_data =

"".join(huffman_codes[char] for char in data) return
encoded_data, huffman_codes # Function to decode the
encoded data def huffman_decoding(encoded_data,
huffman_codes):
reverse_huffman_codes = {v: k for k, v in huffman_codes.items()}
decoded_data = "" current_code = "" for bit in encoded_data:
current_code += bit if current_code in reverse_huffman_codes:
decoded_data += reverse_huffman_codes[current_code]
current_code = "" return decoded_data # Example usage if
__name__ == "__main__":
data = "AAAAAAABCCCCCCDDEEEEE"
encoded_data, huffman_codes = huffman_encoding(data)
print("Encoded Data:", encoded_data) print("Huffman
Codes:", huffman_codes)
decoded_data=huffman_decoding(encoded_data,huffman_codes)
print("Decoded Data:", decoded_data)
Output:
Lab: 8 Date: 2081/3/20

8. Create a timeline-based animation using a software tool of your choice. Explain the
concept of timeline-based animation and describe the steps involved in creating the
animation. Provide screenshots or video of the final animation. Concept of Timeline-
Based

Animation: Timeline-based animation involves controlling objects over time. It's a type
of animation where keyframes are placed on a timeline, and objects or images move or
change appearance as time progresses. Each element can have its position, size, opacity, or
other properties modified at different points on the timeline.

Steps to Create Timeline-Based Animation in Canva.

1. Create a Canva Account and Open a Project:

• Go to Canva and sign up or log in.

• Click on "Create a Design" and choose "Presentation" or "Video" based on

your needs.
2. Set Up Your Canvas:

• Choose a template or create a blank canvas.

• Set the dimensions if needed (e.g., 1920x1080 for video).

3. Add Elements to Your Timeline:

• Add elements such as text, images, icons, or shapes from Canva’s library.

• Organize them as you want them to appear in the animation.

4. Animate Elements:

• Select an element on the canvas and click the “Animate” button in the
toolbar.

• Choose from animation styles like “Fade,” “Pan,” “Zoom,” or “Rise.”

• Customize the timing of the animation, duration, and delay to ensure it fits
into the timeline correctly.
5. Control the Timing:

• For more detailed timing, click on “Timing” and adjust the entry and exit
time of each element.
 • Arrange them on the timeline to create smooth transitions.

6. Preview and Adjust:

• Use the “Play” button to preview your animation. Ensure that all elements
are correctly timed.
• Adjust the timing, animation effects, and placement as necessary.

7. Export the Animation:

• Once you're satisfied with your animation, click on “Download” and choose
the file type (MP4 for video, GIF for short animations).
• Export your animation and save it.
Output:
Lab: 9 Date:2081/3/21

9. Create an animation using timeline and tweening techniques. Provide a detailed

description of the steps followed and include screenshots or a video of the animation.
Understanding Timeline and Tweening Animation Techniques.

• Timeline Animation: The timeline allows you to control the sequence of animation
events, determining when elements enter and exit the scene.
• Tweening Animation: Tweening (short for "in-betweening") is the process of
generating intermediate frames between two keyframes to create smooth motion.
This gives the illusion of an object smoothly moving, scaling, rotating, etc., from
one state to another.

Steps:

I. Go to 'File>New' to create new document ii. Set desired

dimensions and resolution, then click 'Create'. iii. Go to
'Window>Timeline' to open the Timeline panel.
iv. Click drop-down arrow in the middle of Timeline panel and select 'Create
Video

TimeLine'

v. Add Video layer from Layer>Video Layers>New Blank Video Layer. vi.
You can draw different shapes in each of the frame in the video layer.
vii. There must be changes of shapes, position, opacity, sizes, so it looks
like animation.

viii. Frame rate can be changed from the menu in the Timeline Panel ix. To
review the animation, click play button on the Timeline.
x. The animation can be exported using desired format.
Output:

Before After
Lab:10 Date:2081/3/21

11.Create an animation GIF. Explain the process of creating GIF animations and
describe the tools used. Provide the final GIF and a brief explanation of each frame.

GIF Animation:

GIF Animation refers to the use of the GIF (Graphics Interchange Format) file format to
create a sequence of images that play in a loop, producing an animated effect. GIF
animations are widely used on the web due to their simplicity and wide support across
different platforms and devices.

Key Features of GIF Animation

1. Frame-Based Animation:

• GIF animations consist of multiple frames, each containing a static image.

When these frames are displayed in quick succession, they create the illusion
of motion.
2. Looping:

• GIFs can be set to loop indefinitely, meaning the sequence of frames will
continuously repeat. This feature makes GIFs particularly effective for
short, repetitive animations like icons, memes, or small visual effects.
3. Limited Color Palette:

• GIFs support a maximum of 256 colors per frame, making them less suitable
for high-resolution images or animations with complex color schemes.
However, this limitation helps keep file sizes small, which is beneficial for
web use.
4. Transparency:

• GIFs can include transparency, allowing the background of the animation to

show through. This makes it possible to overlay GIF animations on different
backgrounds without a visible border.
5. Lossless Compression:
 • GIFs use lossless compression, meaning that the quality of the images is not
degraded during compression. This ensures that the images remain clear and
sharp.
6. Simple Timing Control:

• Each frame in a GIF animation can have a specified display duration,

allowing for control over the timing and speed of the animation. The timing
is typically measured in hundredths of a second.

Process of creating GIF animations:

1. Import any image or we can follow same steps as we have created file for frame
by frame animation,
2. At the top of Timeline panel, click the setting icon and select loop playback to
make the GIF loop continuously,
3. Click the 'Play' button to preview the animation,

4. For export, go to File > Export > Save for Web (Legacy),

5. Choose the number of colors (256 is standard),

6. Click 'Save', choose a location and click 'Save' again.

Brief Explanation of each frame:

1. Frame 1: The ball is at the top of the screen.

2. Frame 2: The ball moves slightly downward.

3. Frame 3: The ball touches the bottom of the screen and is slightly squashed to
mimic impact.
4. Frame 4: The ball rises halfway up the screen again.

5. Frame 5: The ball returns to the top, completing the loop.

Output:
Lab: 11 Date:2081/3/21

11.Create simple animated banner ads. Describe the design principles and tools used
to create animated banners. Provide examples of the final banner ads and explain the
animation techniques used.

Banner Ads: Banner ads are rectangular or square graphic advertisements displayed on
web pages. They are a form of online advertising that uses visual elements to attract users'
attention and encourage them to click through to the advertiser's website, landing page, or
a specific product offering.

Key Features of Banner Ads

1. Visual Content:

• Banner ads primarily rely on images, graphics, and text to convey a message.
They can also include multimedia elements like animations, videos, or
interactive components.
2. Sizes and Formats:

• Banner ads come in various sizes, typically measured in pixels.

Common formats include:
• Leaderboard: 728x90 pixels (often placed at the top of web pages).

• Skyscraper: 160x600 pixels (vertically aligned, often on the sidebars).

• Medium Rectangle: 300x250 pixels (often embedded within content).
• Full Banner: 468x60 pixels.

• These sizes are standardized by organizations like the Interactive

Advertising Bureau (IAB) to ensure compatibility across different
platforms and devices.
3. Call to Action (CTA):

• A banner ad usually contains a clear and concise CTA, such as "Click Here,"
"Learn More," or "Shop Now." The CTA is designed to prompt the user to
take immediate action.
4. Linking to Destination:
 • When users click on a banner ad, they are redirected to a specific URL, such
as a product page, promotional landing page, or the advertiser’s homepage.
5. Targeting and Placement:

• Banner ads can be targeted based on various factors, including user

demographics, browsing behavior, interests, or geographic location. They are
strategically placed on websites that align with the advertiser's target audience
to maximize visibility and effectiveness.

Steps to Create an Animated Banner Ad in Canva:

• Choose Your Banner Size.

• Design the Static Banner.

• Add Animation to Elements.

• Duplicate Pages for Frame-by-Frame Animation (Optional).

• Adjust Animation Duration.

• Set the Timing for the Whole Banner.

• Looping Options.

• Preview Your Animation.

• Export the Animated Banner.

Tools and Techniques:

• Pre-built Animations: Canva’s simple but effective animations allow for

smooth text or object transitions, making the banner dynamic.
• Layering and Timing: Adjusting the timing of each animation element ensures
the ad has a logical flow.
• Graphics and Photos: Canva's extensive library of images, illustrations, and
icons enables you to create visually appealing ads without needing to design
from scratch.
Output:
Lab: 12 Date:2081/3/21

11.Create a frame-by-frame animation. Describe the process of creating frame-

byframe animations and explain the advantages and disadvantages of this method.

Frame-by-Frame Animation:

Frame-by-frame animation is a technique in which each frame of an animation is

individually created or modified to produce the illusion of movement. This method is one
of the most traditional forms of animation, where every change in motion, position, or shape
is meticulously crafted by the animator.

Key Concepts of Frame-by-Frame Animation

1. Individual Frames:

• Each frame is a static image, slightly different from the one before it. When
played in sequence, these frames create the illusion of continuous
movement.
2. Frame Rate:

• The frame rate, typically measured in frames per second (fps), determines how

smooth the animation appears. A higher frame rate results in smoother

motion but requires more frames to be drawn.
3. Labor-Intensive Process:

• Since every frame is manually crafted, frame-by-frame animation is

timeconsuming and requires a great deal of skill. This process is particularly
intensive in traditional hand-drawn animation.
4. Unlimited Creativity:

• The technique allows for a high degree of creativity and control over every
aspect of the animation. The animator can precisely dictate the movement,
timing, and expression of characters or objects.
5. Keyframes and Inbetweens:

• Keyframes: Important frames that define the major points of motion or

significant poses.
 • Inbetweens (Tweens): Frames that fill the gaps between keyframes to
create smooth transitions. In traditional animation, these are often created
by junior animators or assistants.
6. Timing and Spacing:

• The timing (how long a frame is shown) and spacing (the position of objects
between frames) are crucial to conveying motion and emotion in frame-
byframe animation. Proper timing and spacing create the illusion of
acceleration, deceleration, weight, and impact.

Steps:

1. Go to 'File>New' to create new document

2. Set desired dimensions and resolution, then click 'Create'.

3. Go to 'Window>Timeline' to open the Timeline panel

4. Click drop-down arrow in the middle of Timeline panel and select 'Create Video

5. Timeline'

6. Add Video layer from Layer>Video Layers>New Blank Video Layer

7. You can draw different shapes in each of the frame in the video layer

8. There must be changes of shapes, position, opacity, sizes, so it looks like

animation Frame rate can be changed from the menu in the Timeline Panel 9.
To review the animation, click play button on the Timeline
10. The animation can be exported using desired format.

Advantages of Frame-by-Frame Animation:

1. Full Control Over Motion: Frame-by-frame animation offers complete control

over each element’s position and transformation in every frame. This level of
 precision allows you to create complex and nuanced motion that can't easily be
achieved with automated transitions.
2. Flexibility in Design: Since you create each frame individually, you can
animate anything you can imagine—morphing shapes, changing text, or
simulating physical interactions (like squash and stretch in a bouncing ball).
3. Creative Expression: Frame-by-frame animation allows for creativity and
experimentation. Artists can create organic, non-linear movements that feel
more natural and personalized than standard pre-built animations.
Disadvantages of Frame-by-Frame Animation:

1. Time-Consuming: Creating each frame manually can be very time-intensive,

especially for longer or more detailed animations. It requires patience to adjust each
element and ensure consistency across frames.
2. Complexity: The more frames you create, the more complex the project becomes
to manage. Keeping track of small changes between frames can become
overwhelming if not well-organized.
3. File Size: Since each frame is a separate image, frame-by-frame animations can
result in larger file sizes, particularly if there are many frames or the images are
detailed. This can impact loading times when used on websites.
Output: