INDEX

Page Staff
Ex.No. Date Name of the Experiment Marks
No Signature
Selection and transformation tools to
1 1
modify an image

2 Design a Logo using Inkscape 3

3 Design a Banner using Inkscape 9

Working with Audio editing tools in

4 11
Audacity
Perform Audio compression with
5 17
Audacity
Video Editing and Special Effects using
6 20
OpenShot

7 Conversion of Video File Formats 25

8 Design Home page with Banners , Links 28

Design simple navigation and search in

9 33
Website
Working with animation Tools – 2D
10 56
Animation
Simple 3D Animation with Keyframes
11 61
and Kinematics
Working with E-Learning Authoring
12 a 69
Tools

12 b Create a simple E-Learning module 74

Ex. No. 1
Selection and transformation tools to modify an image
Date :

Aim:
To insert an image , modify the image using selection and transformation tools.

Procedure:

Step 1 : Create a new document by selecting File -> New or by using shortcut Crl+N

Step 2 : Select the width and height as required in pixels and resolution in pixels / inch

Step 3 : Select the image to place by Layer -> Import / export -> Import layer

Step 4 : Use Transform a layer or Selection tool (Ctrl+T) to resize the image

Step 5 : Use Filter : slope , offset , power

1
 Step 6 : Use Filter -> Color adjustment

Result:

Thus the selection and transformation tools is used and the image modified successfully.
2
Ex. No. 2
Design a Logo using Inkscape
Date :

Aim:
To design a logo by using inkscape software.

Procedure:
Step 1 - open inkscape software and create a new project

Step 2 - select the circle shape tool to design the below element

3
 Step 3 - select the same circle shape tool to design the below element with different sizes

Step 4 - select the below designed element and group that

4
Step 5 - select the designed element and make a copy or duplicate and paste it.

Step 6 - select the circle shape tool to design a circle.

5
Step 7 - Change the color for circle shape

Step 8 - place the circle shape in the center of the designed element.

6
 Step 9 - draw the triangle shape using star tool

Step 10 - Change the color of triangle and place it in the center of the circle.

Result:
Thus the given logo design was completed successfully using inkscape software.

7
Ex. No. 3
Design a Banner using Inkscape
Date :

Aim:
To design a banner using inkscape

Procedure:

Step 1 : Open Inkscape.

Step 2 : Create a New Document by clicking File > New.

Set the canvas size for your banner. You can choose a custom size or use standard

dimensions (e.g., 728x90 pixels for a web banner).

Step 3 : Draw the Banner Shape:

Use the Rectangle tool (R) or the Bezier Pen tool (B) to create the outline of your

banner.

Step 4 : Add Text by selecting the Text tool (T).

Click on the canvas and type either a promotional message , event or website name.

Adjust the font, size, and color as needed.

Step 5 : Position and Style:

Arrange the text within the banner shape.

Apply effects like gradients, shadows, or strokes to make it visually appealing.

Step 6 : Add Graphics or Icons

Include icons, logos relevant to your banner. Use the Import tool (Ctrl+I) to add

external images.

Step 7 : Export Your Banner:

Go to File > Export PNG Image.

Choose a location and save your banner as a PNG file.

8
Result:

Thus a banner with text is designed successfully.

9
Ex. No. 4
Working with Audio editing tools in Audacity
Date :

Aim:
To work with audio editing tools like audacity.

Audacity:
Audacity is a free and open-source digital audio editor and recording application software.
Even two decades after its original launch date, Audacity remains one of the most widely-used open
source applications. It’s a free audio editor that works on Windows, Mac, and Linux systems. It is
developed by The Audacity Team. It was initially released on May 28, 2000. After installing this
nifty little package, you’ll find everything you need to record, edit, and enhance the sound files.

2.1 Audio editing with Audacity:

1. Voice recording in Audacity:
To record our voice go to the home page of Audacity software Navigate to 'Audio Setup.'
From there, move down to 'Recording Device,' where you'll see a list of all installed devices. If
you've plugged in an external device like a Yeti stereo microphone, make sure you select that.

Adjust the recording level to edit the recording volume of audio.

Once you have adjusted your volume, go ahead and hit that big red Record button. As you
start speaking, you will be able to see the waveform change in real-time. When you are done, just
10
 Hit Stop.

If you want to hear the last few sentences sounded , just click on that part of the waveform
and click 'Play'.

2. Importing audio tracks:

To import audio tracks click on the project tab in the upper left corner of the screen.
+Then click on import audio. Select the file you want to open.

11
3. Selecting audio tracks
To select all of the audio click on the edit tab, then click on select, then click on select all,
or press Ctrl A on the keyboard.
To select some of the audio track make sure the select tool in the upper left corner is
selected.Then click and hold at the beginning of the section you want to select.Then drag the
cursor to the end of the section you want to select.
To select from your cursor to the beginning or end click on the edit tab.Then click on
select.Then click on "cursor to end" or "start to cursor"

4. Splitting audio tracks

To split audio tracks you have to select the second have of what you want to split.Then
you click on the edit tab.Then click on split.(The second half of the split audio will move to a
seprate track)

12
2. Exporting audio
To export the audio click on the File tab.Then click on "Export as WAV" or "Export as
MP3" (depending on the type of audio file you want).Then name the file and click save. (If the
sound is ever messed up after you export it as WAV or MP3 try exporting it as the other file type
than you used the first time)

2. Sound Mixing in Audacity

To mix two tracks together, you can use the time shift tool to move the tracks up and
down the timeline. You might need to tweak the dB levels to make sure it’s nicely mixed and not
distorting.

13
3. Adding special effects to our audio
We can apply effects to either the entire audio file, or selectively to tracks and portions of
audio. Both are easily achieved with Audacity. To apply an effect, first select the track by
dragging over the portion of audio. Then, navigate to the "Effect" tab in the menu bar and choose
the effect you want to apply.

Fading In and Out in

AudacityFading In
"Fading in" in Audacity refers to the audio editing process of gradually increasing the
volume at the beginning of an audio clip or track.
To apply this effect select a section in the audio and Click on Effects >> Fade In.Over the
selected length, the audio will now gradually fade in.

14
Fading Out
"Fading out" in Audacity is the opposite of fading in. It refers to the audio editing process of gradually reducing the
volume at the end of an audio clip or track.
Go to Effects and select Fade Out. Over the selected length, the audio will now gradually fade out to silence over.

Result:
Thus the audio editing tools in audacity to demonstrate different effects produced successfully.

15
Ex. No. 5

Date : Perform Audio compression with Audacity

Aim:
To work with audio editing tools audacity for performing audio compression.

Procedure:

Step 1 : Open audacity

Step 2: Upload the audio by selecting File -> open

16
Select and upload the audio file
Step 3: Select the audio file. Use Ctrl + A to select entire file

Step 4: Go to the Effect menu in the toolbar. Scroll and find the "Compressor" option.

Step 5 : Select the compressor setting options

17
Step 6 : Select the threshold , noise , ratio and compress
Threshold
The threshold setting in Audacity's compressor determines when compression starts.
Setting the threshold at -12 dB means any part of the audio louder than -12 dB will be compressed,
reducing the volume of these louder segments.
Noise Floor
The noise floor setting helps differentiate between the actual audio and background noise.
By adjusting this, you prevent the unintentional amplification of background noise during quieter parts
of the audio.
Ratio
The ratio controls the degree of compression applied.
A higher ratio means louder sounds are compressed more aggressively, leading to a more uniform volume
across the track.
Attack Time and Release Time
This determines how quickly the compressor reacts once the audio surpasses the threshold.
It dictates how soon the compressor stops acting after the audio drops below the threshold.
These times manage the responsiveness of compression, affecting the smoothness of volume changes.
Make-up Gain
It compensates for the volume lost due to compression.
After compressing, use make-up gain to amplify the overall audio, ensuring no part is too quiet.

Compress Based on Peaks

We can choose between peak or RMS (Root Mean Square) compression.
Peak compression focuses on the loudest points, while RMS offers a more averaged-out compression
often resulting in a more natural sound.

Result:
Thus performing audio compression using audacity is done successfully.

18
Ex. No. 6
Video Editing and Special Effects using OpenShot
Date :

Aim:
Install OpenShot to Edit and mix video content, create special effects, add captions. Then
Compress and convert video file format to other popular formats.

Procedure:
Download and Install OpenShot:
• Go to the OpenShot website (https://www.openshot.org/).

• Download and install OpenShot for your operating system (Windows, macOS, or Linux).

19
Import Your Video Clips:
• Open OpenShot.

• Click on "File" > "Import Files" and select the video clips you want to work with.

• You can also drag and drop them into the project files area.

20
Arrange Your Clips:
• Drag and drop your video clips onto the timeline at the bottom of the OpenShot window.
You can arrange them in the order you want them to appear in your final video.

Editing and Trimming:

• To trim a video clip, select it on the timeline.

• Use the handles at the beginning and end of the clip to cut or trim as needed.

21
Create Special Effects:
• Select a clip on the timeline.

• Go to the "Effects" tab and choose from various options, such as adding text, adjusting
speed, or applying video transitions.

22
Add Captions:
• To add captions or text to your video, go to the "Title" tab. Choose from the title
templates or create your own. Drag and drop the title template onto the timeline above
the video clip where you want the caption to appear.

Result :

Thus performing video editing , creating special effects and add caption done successfully using openshot.

23
Ex. No. 7
Conversion of Video File Formats
Date :

Aim :
Install OpenShot to Edit and mix video content, create special effects, add captions. Then
Compress and convert video file format to other popular formats.

Procedure:

Export Your Video:

• click the "Export" button.

•
•
•
•
•
•

24
• Choose the export settings, including video format, quality, and destination folder.

• You can click the "Advanced" button to further customize the export settings, such as the
video and audio codec, resolution, frame rate, and bitrate. These settings allow you to
control the video quality and file size.

25
o Click "Export Video" and wait for the process to finish.

Result:
Thus the video compression and conversion format done successfully.

26
Ex. No. 8

Date : Design Home page with Banners , Links

Aim:
To design simple Homepage and banners, logos, tables quick links etc using BlueGriffon.

Algorithm:
1. Start the program.
2. The code provided is HTML and CSS template for webpage.
3. To add the functionality, Add a ‘<script>’ tag within the ‘<head>’ or ‘<body>’ section of
your HTML to include JavaScript code.
4. Write a JavaScript functions to handle any interactive or dynamic behavior you want to
add.
5. For example, you can create functions to handle form submissions, perform client-side
validation, or update element on the page dynamically.
6. Use event listeners to trigger JavaScript functions when specific event occurs.
7. Common event include clicks, form submissions, and page load.
8. Stop the program.

Program:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Computer Science Department</title>
<style>
/* Reset some default styles for consistency */
body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */

27
body {
font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0;
padding: 0;
}
/* Header styles */

header {
background-color: #17252A; color: #fff;
padding: 20px; text-align: center;
}

header h1 {
font-size: 36px;
}

header p {
font-size: 18px;
}

/* Navigation styles */ nav {

background-color: #3AAFA9; color: #fff;

text-align: center;
}

nav a {
text-decoration: none; color: #fff;
margin: 0 10px;
}
/* Container styles */
.container {
max-width: 1200px; margin: 20px auto; padding: 20px; background-color:
#fff;
28
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }

/* Banner styles */
.banner { display: flex;
justify-content: space-between;
align-items: center; padding: 5px;
background-color: #f7f7f7;
}

.banner img {
max-width: 75%;
height: 5%;
}

/* Quick links styles */

.quick-links { margin-top: 20px; text-align: center;
}

.quick-links a { display: inline-block; text-decoration: none; color: #333;

margin: 10px; padding: 10px 20px; border: 1px solid #333; border-
radius:5px;
}

/* Table styles */
table {
width: 100%;
border-collapse: collapse; margin-top: 20px;
}
table, th, td {
border: 1px solid #ccc;
}

th, td {
29
 padding: 10px;
text-align: left;
}

</style>
</head>

<body>
<header>
<h1></h1>
<h1></h1>
<h1></h1>
<h1 style="text-align: left;"></h1>
<h1 style="text-align: left;"></h1>
<h1 style="text-align: left;"><br>
</h1>
<h1 style="text-align: center;">
<img src=file:///C:/Users/gnana/OneDrive/Desktop/logo.jpg alt="" style="width: 151px; height:
137px;"></h1>
<h1>Computer Science Department</h1>
<h1></h1>
<h1 style="text-align: left;"></h1>
<p>Welcome to the Computer Science Department at TPGIT</p>
<h1 style="text-align: left;"></h1>
</header>
<nav>
<h1></h1>
<a href="#">Home</a> <a href="#">About Us</a> <a href="#">Courses</a> <a

href="#">Faculty</a> <a href="#">Contact</a> </nav>

<div class="container">
<div class="quick-links">
<h1 style="text-align: left;"></h1>
<a href="#">Explore</a> <a href="#">Learn More</a> <a href="#">Get
Started</a> </div>
<h2>Courses Offered</h2>
<table>
<tbody>
<tr>
<th>Course Name</th>
<th>Course Code</th>
<th>Instructor</th>
</tr>
<tr>
<td>Multimedia and Animation</td>
<td>CS5101</td>
<td>Prof. Smith</td></tr>

30
 <tr>
<td>Web Development</td>
<td>CSCI202</td>
<td>Prof. Johnson</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Output:

Result:
Thus, the program to design simple Homepage with Banners, logos, tables quick links is
created and the output is verified successfully.

31
Ex. No. 9
Design simple navigation and search in Website
Date :

Aim:
To provide a search interface and simple navigation from the home page to the inside pages ofthe
website using BlueGriffon.
Algorithm:
a) Start the program.
b) Create HTML files for each webpage (index.html, about.html, courses.html, faculty.html,
contact.html).
c) Define the HTML structure :
a) In each HTML file, define the basic structure with ‘<html>’, ‘<head>’ and
‘<body>’ tags.
b) Include the necessary metadata within the ‘<head>’ section, such as charset and title.
c) Add internal CSS styles within ‘<style>’ tag for consistent styling across pages.
d) Create the header:
a) Inside the ‘<body>’ of each HTML file, create a ‘<header>’ element to displaythe
page title and brief description.
e) Create the navigation menu:
a) Below the header, include a `<nav>` element to create a navigation menu with linksto
other pages.
b) Use `<a>` tags for each menu item and set the `href` attribute to link to the
respective HTML files.
f) Create the main content container:
a) Add a `<div>` element with the class "container" to hold the main content of the
page.
b) Apply styling to this container for a consistent layout.
g) Populate the content:
a) Within the container, create a `<div>` with class "content" to hold the specific
content of each page.
Add appropriate headings and paragraphs to convey information about the ComputerScience
Department.

32
 c) For the "Courses" and "Faculty" pages, create tables to list course details and faculty
members.
8. Style the content:
a) Define CSS styles for various elements to achieve a consistent and visually
appealing design.
b) Customize styles for headers, links, navigation menu, tables, and other page elements.
c) Use CSS classes and IDs to target specific elements for styling.
9. Add images:
a) Include `<img>` tags to display images, such as the department logo and faculty
photos.
b) Set appropriate attributes for image sources, alt text, and dimensions.
10. Include contact information:
a) On the "Contact" page, list the department's address, email, and phone number in a
structured format.
11. Testing:
a) Ensure that all links within the navigation menu correctly point to the corresponding
HTML files.
b) Verify that the website's layout and styling are consistent and visually appealing.
c) Test the website on different browsers and devices to ensure compatibility.
12. Additional features (not present in the provided code):
a) Implement interactive features such as forms for user input or
JavaScript functionality.
b) Add more pages and content as needed for the website's specific requirements.
c) Consider optimizing the website for search engines (SEO) and improving
accessibility.

33
Program:

main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Computer Science Department</title>
<style>

/* Reset some default styles for consistency */ body, h1, h2, p {

margin: 0;
padding: 0;
}

/* Global styles */ body {

font-family: Arial, sans- serif; background-color: #f0f0f0; margin: 0;

padding: 0;
}

/* Header styles */ header {

background-color: #17252A; color: #fff;
padding: 20px; text-align: center;
}

header h1 {
font-size: 36px;
}

header p {
font-size: 18px;
}
34
/* Navigation styles */ nav {

background-color: #3AAFA9; color: #fff;

text-align: center;
}

nav a {

text-decoration: none; color: #fff;

margin: 0 10px;
}
/* Container styles */
.container {
max-width: 1200px; margin: 20px auto; padding: 20px; background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Banner styles */

.banner { display: flex;

justify-content: space-between; align-items: center;
padding: 5px;
background-color: #f7f7f7;
}

.banner img {
max-width: 75%;
height: 5%;
}

/* Quick links styles */

.quick-links { margin-top: 20px; text-align: center;
}

35
.quick-links a { display: inline-block; text-decoration: none; color: #333;
margin: 10px; padding: 10px 20px; border: 1px solid #333; border-radius: 5px;
}

/* Table styles */ table {

width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

table, th, td {

border: 1px solid #ccc;

}

th, td {
padding: 10px; text-align: left;
}

/* Search bar styles */

.search-container { text-align: center; margin-top: 20px;
}

.search-box { padding: 10px; border: 1px solid #ccc; border-radius: 5px;

}

.search-button { padding: 10px 20px;

background-color: #444; color: #fff;
border: none; border-radius: 5px; cursor: pointer;
}
</style>
</head>

36
<body>
<header> <img src="file:///D:/logo.jpg" alt="Department Logo"

style="width: 151px; height: 137px;">

<h1>Computer Science Department</h1>

<p>Welcome to the Computer Science Department SCET</p>
</header>
<nav> <a href="index.html">Home</a> <a href="About.html">About
Us</a> <a href="Courses.html"> Courses</a>
<a href="faculty.html">Faculty</a> <a href="Contact.html">Contact</a> </nav>
<div class="container">
<h2>Courses Offered</h2>
<table>
<tbody>
<tr>
<th>Course Name</th>
<th>Course Code</th>
<th>Instructor</th>
</tr>
<tr>
<td>Multimedia and Animation</td>
<td>CCS352</td>
<td>Prof. M.G.Lavakumar</td>
</tr>
<tr>
<td>Web Development</td>
<td>CCS353</td>
<td>Prof. M.Elumalai</td>
</tr>
</tbody>

</table>

37
</div>
<!-- Search Interface -->
<div class="search-container"> <input class="search-box" placeholder="Search..." type="text">
<button class="search-button">Search</button> </div>

</body>
</html>

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Computer Science Department</title>
<style>
/* Reset some default styles for consistency */ body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */ body {

font-family: Arial, sans- serif; background-color: #f0f0f0; margin: 0;
padding: 0;
}

/* Header styles */ header {

background-color: #17252A; color: #fff;

padding: 20px; text-align: center;
}

header h1 {
font-size: 36px;

38
}

header p {
font-size: 18px;
}

/* Navigation styles */ nav {

background-color: #3AAFA9; color: #fff;
text-align: center;
}

nav a {

text-decoration: none; color: #fff;

margin: 0 10px;
}

/* Container styles */

.container {
max-width: 1200px; margin: 20px auto; padding: 20px; background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Banner styles */
.banner { display: flex;
justify-content: space-between; align-items: center;

padding: 5px;
background-color: #f7f7f7;
}

.banner img {
max-width: 75%;

39
height: 5%;
}

/* Quick links styles */

.quick-links { margin-top: 20px; text-align: center;

}

.quick-links a { display: inline-block; text-decoration: none; color: #333;

margin: 10px; padding: 10px 20px; border: 1px solid #333;
border-radius: 5px;
}

/* Table styles */ table {

width: 100%;
border-collapse: collapse; margin-top: 20px;
}

table, th, td {
border: 1px solid #ccc;
}

th, td {

padding: 10px; text-align: left;

}

/* Search bar styles */

.search-container { text-align: center; margin-top: 20px;}
.search-box { padding: 10px; border: 1px solid #ccc; border-radius: 5px;}

.search-button { padding: 10px 20px; background-color: #444; color: #fff;

border: none; border-radius: 5px; cursor: pointer;

40
}
</style>
</head>
<body>
<header> <img src="file:///D:/logo.jpg" alt="Department Logo"
style="width: 151px; height: 137px;">
<h1>Computer Science Department</h1>
<p>Welcome to the Computer Science Department SCET</p>
</header>
<nav> <a href="index.html">Home</a>
<a href="about.html">About Us</a> <a href="courses.html">Courses</a> <a
href="faculty.html">Faculty</a> <a href="contact.html">Contact</a> </nav>
<div class="container">

<h2>Courses Offered</h2>
<table>

<tbody>
<tr>
<th>Course Name</th>
<th>Course Code</th>
<th>Instructor</th>
</tr>
<tr>
<td>Multimedia and Animation</td>
<td>CCS352</td>
<td>Prof. M.G.Lavakumar</td>
</tr>
<tr>
<td>Web Development</td>
<td>CCS353</td>
<td>Prof. M.Elumalai</td>

41
</tr>
</tbody>
</table>
</div>
<!-- Search Interface -->
<div class="search-container"> <input class="search-box" placeholder="Search..." type="text">
<button class="search-button">Search</button> </div>
</body>
</html>

about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About Us - Computer Science Department</title>
<style>
/* Reset some default styles for consistency */ body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */ body {

font-family: Arial, sans- serif; background-color: #f0f0f0; margin: 0;
padding: 0;
}

/* Header styles */ header {

background-color: #17252A; color: #fff;

padding: 20px; text-align: center;
}

42
header h1 {
font-size: 36px;
}

header p {

font-size: 18px;
}

/* Navigation styles */ nav {

background-color: #3AAFA9; color: #fff;

text-align: center;
}
nav a {
text-decoration: none; color: #fff;
margin: 0 10px;
}

/* Container styles */
.container {
max-width: 1200px; margin: 20px auto; padding: 20px; background-color: #fff;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

/* Content styles */
.content { padding: 20px;
}
</style>
</head>
<body>
<header>

43
<h1>About Us</h1>
</header>
<nav> <a href="index.html">Home</a> <a href="about.html">About Us</a> <a
href="courses.html">Courses</a> <a href="faculty.html">Faculty</a> <a
href="contact.html">Contact</a> </nav>

<div class="container">
<div class="content">
<h2>Welcome to the Computer Science Department</h2>

<p> The Computer Science Department at SCET is committed to providing high-quality education and
research opportunities in the field of computer science. Our dedicated faculty members and cutting-
edge curriculum ensure that students receive a well-rounded education in computer science. </p>

<p> We offer a wide range of courses, including multimedia and animation, web development, and
more. Our experienced instructors are passionate about teaching and mentoring students to help them
succeed in their academic and professional careers. </p>
</div>
</div>
</body>
</html>

courses.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Computer Science Department</title>
<style>
/* Reset some default styles for consistency */ body, h1, h2, p {
margin: 0;
padding: 0;
}
/* Global styles */ body {

font-family: Arial, sans- serif; background-color: #f0f0f0; margin: 0;

padding: 0;
44
}

/* Header styles */ header {

background-color: #17252A; color: #fff;
padding: 20px; text-align: center;
}

header h1 {
font-size: 36px;
}

header p {
font-size: 18px;
}
/* Navigation styles */ nav {
background-color: #3AAFA9; color: #fff;

text-align: center;
}

nav a {
text-decoration: none; color: #fff;
margin: 0 10px;
}

/* Container styles */

.container {
max-width: 1200px; margin: 20px auto; padding: 20px; background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Banner styles */

45
.banner { display: flex;
justify-content: space-between; align-items: center;
padding: 5px;
background-color: #f7f7f7;
}

.banner img {
max-width: 75%;
height: 5%;
}

/* Quick links styles */

.quick-links { margin-top: 20px; text-align: center;
}

.quick-links a { display: inline-block; text-decoration: none; color: #333;

margin: 10px; padding: 10px 20px; border: 1px solid #333; border-radius: 5px;
}

/* Table styles */ table {

width: 100%;
border-collapse: collapse; margin-top: 20px;
}

table, th, td {
border: 1px solid #ccc;
}

th, td {
padding: 10px; text-align: left;
}

46
/* Search bar styles */

.search-container { text-align: center; margin-top: 20px;

}

.search-box { padding: 10px; border: 1px solid #ccc; border-radius: 5px;

.search-button { padding: 10px 20px;

background-color: #444; color: #fff;
border: none;

border-radius: 5px; cursor: pointer;

}
</style>
</head>
<body>
<header> <img src="file:///D:/logo.jpg" alt="Department Logo"
style="width: 151px; height: 137px;">
<h1>Computer Science Department</h1>
<p>Welcome to the Computer Science Department SCET</p>
</header>
<nav> <a href="index.html">H ome</a>
<a href="about.html">About Us</a>
<a href="courses.html">Courses</a>
<a href="faculty.html">Faculty</a>
<a href="contact.html">Contact</a> </nav>
<div class="container">
<h2>Courses Offered</h2>
<table>
<tbody>
<tr>

47
<th>Course Name</th>
<th>Course Code</th>
<th>Instructor</th>
</tr>
<tr>
<td>Multimedia and Animation</td>
<td>CCS352</td>
<td>Prof. M.G.Lavakumar</td>
</tr>
<tr>
<td>Web Development</td>
<td>CCS353</td>
<td>Prof. Elumalaitd>
</tr>
</tbody>
</table>
</div>
<!-- Search Interface -->
<div class="search-container"> <input class="search-box" placeholder="Search..." type="text">
<button class="search-button">Search</button> </div>
</body>
</html>

faculty.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Faculty - Computer Science Department</title>
<style>
/* Reset some default styles for consistency */ body, h1, h2, p {
margin: 0;

48
padding: 0;
}

/* Global styles */ body {

font-family: Arial, sans- serif; background-color: #f0f0f0; margin: 0;

padding: 0;
}
/* Header styles */ header {
background-color: #17252A; color: #fff;
padding: 20px; text-align: center;
}
header h1 {
font-size: 36px;}

header p {
font-size: 18px;
}

/* Navigation styles */ nav {

background-color: #3AAFA9; color: #fff;
text-align: center;
}

nav a {
text-decoration: none; color: #fff;
margin: 0 10px;
}

/* Container styles */

.container {
max-width: 1200px; margin: 20px auto; padding: 20px; background-color: #fff;

49
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Content styles */
.content { padding: 20px;
}
/* Faculty list styles */
.faculty-list {
list-style-type: none; margin: 0;
padding: 0;
}

.faculty-item {

margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px;
}
/* Faculty image styles */
.faculty-image { max-width: 100%; height: auto;
}
</style>
</head>
<body>
<header>
<h1>Faculty</h1>
</header>
<nav> <a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="courses.html">Courses</a>
<a href="faculty.html">Faculty</a>
<a href="contact.html">Contact</a> </nav>
<div class="container">
<div class="content">
<h2>Our Faculty</h2>

50
<ul class="faculty-list">

<li class="faculty-item"> <img class="faculty-image" src="D:/assessment/2020-202one/lavakumar

photo.jpg"
alt="Prof. M.G.Lavakumar" style="width: 114px; height: 89px;">
<h3>Prof. M.G.Lavakumar</h3>
<p>Teaches Multimedia and Animation</p>
</li>
<li class="faculty-item"> <img class="faculty-image" src="" alt="Prof. M.Elumalai" style="width:
113px; height: 102px;">
<h3>Prof. M.Elumalai</h3>
<p>Teaches Web Development</p>
</li>
<!-- Add more faculty members as needed -->
</ul>
</div>
</div>
</body>
</html>

contact.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Contact - Computer Science Department</title>
<style>
/* Reset some default styles for consistency */ body, h1, h2, p {
margin: 0;
padding: 0;
}

/* Global styles */ body {

51
font-family: Arial, sans- serif; background-color: #f0f0f0; margin: 0;
padding: 0;
}

/* Header styles */ header {

background-color: #17252A; color: #fff;

padding: 20px; text-align: center;
}
header h1 {
font-size: 36px;
}

header p {
font-size: 18px;
}

/* Navigation styles */ nav {

background-color: #3AAFA9; color: #fff;
text-align: center;
}
nav a {
text-decoration: none; color: #fff;
margin: 0 10px;
}

/* Container styles */
.container {
max-width: 1200px; margin: 20px auto; padding: 20px; background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Content styles */
52
.content { padding: 20px;
}

/* Contact information styles */

.contact-info { margin-top: 20px;

}
.contact-info h3 { font-size: 24px;
margin-bottom: 10px;
}

.contact-info p { font-size: 18px;

}
</style>
</head>
<body>
<header>

<h1>Contact</h1>
</header>
<nav> <a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="courses.html">Courses</a>
<a href="faculty.html">Faculty</a>
<a href="contact.html">Contact</a> </nav>
<div class="container">
<div class="content">
<h2>Contact Information</h2>
<div class="contact-info">
<h3>College Address:</h3>
<p>Saraswathy College of Engineering and Technology,</p>
<p>Olakkur , Tindivanam TK,</p>
53
<p>Villupuram DT - 604305</p>
</div>
<div class="contact-info">
<h3>Email:</h3>
<p>[email protected]>
</div>
<div class="contact-info">
<h3>Phone:</h3>
<p>(04147) 290370</p>
</div>
</div>
</div>
</body>
</html>

54
Result:
Thus a website with links to navigate between pages ans with a search interface is designed
successfully
55
Ex. No. 10 Working with animation Tools – 2D Animation
Date :

Aim:

To perform a simple 2D animation with sprites using Wick Editor.

Procedure:

1. Open Wick Editor: Start by opening Wick Editor in your web browser or
after downloading and installing it.

2. Create a New Project: Click on "New Project" to start a new project.

3. Import Sprites: You'll need sprites for your animation. To import them:
• Click on the "Library" tab.

Click "Import" and select the image file(s) for your sprite(s).Common image
formats like PNG or JPEG are supported.

56
4. Add a New Scene: Scenes are like different sections of your animation. To add a scene:

• Click on the "Scenes" tab.

• Click the "+" button to create a new scene. Give it a name if you like.

5. Create a Sprite Layer: A sprite layer is where you'll place your sprites.
To add asprite layer:

• Click on the "Layers" tab.

• Click the "+" button to create a new layer and select "Sprite."

6. Place Sprites on the Stage: Go to your new sprite layer and drag your
importedsprites onto the canvas (stage). You can resize and reposition
them as needed.

57
7. Set Keyframes: Keyframes represent different points in your animation.
Tosetkeyframes:

• Go to the timeline at the bottom.

• Move the playhead to the frame where you want to create a “Addframe."

8. Animate the Sprites: For each keyframe, move the sprites to their new
positions ormake other changes. Wick Editor will automatically
interpolatebetween keyframes.
9. Preview Your Animation: Click the "Play" button to preview youranimation.

58
59
 10. Adjust Timing: In the timeline, you can adjust the duration
betweenkeyframesby stretching or compressing the frames.

11. Export Your Animation: Once you're satisfied with your animation, go to"File"
> "Export" to save your animation in the desired format.

12. Save Your Project: Don't forget to save your project for future editing.

Result:

Thus,we have performed simple 2D animation with sprites using Wick editor.

60
Ex. No. 11

Date : Simple 3D Animation with Keyframes and Kinematics

Aim:

To perform 3D animation with keyframes and kinematics using Blender.

Procedure:

Creating a 3D animation with keyframes and kinematics in Blender is a multi-stepprocess that

involves setting up your 3D scene, adding objects, setting keyframes, and using armatures and
constraints for kinematics. Here's a general guide to get you started:

1. Install Blender: If you haven't already, download and install Blender fromthe
official website (https://www.blender.org/download/).

2. Open Blender: Launch Blender and start with a new project.

61
3. Set up Your Scene: Create or import the 3D objects you want to animate.You
can add objects, lights, cameras, etc., to your scene.

4. Timeline and Keyframes:

• Ensure the timeline is visible in your workspace. You can usually findit at
the bottom of the interface.

• Select the object you want to animate by right-clicking on it in the 3Dview.

• Go to the frame where you want to set the first keyframe. You can usethe
timeline to move to a specific frame.

• Change the object's properties you want to animate (e.g.,

location,rotation, scale) in the Properties panel.

• Right-click on the property and choose "Insert Keyframe" (or press Ion the
keyboard). Select the property you want to keyframe (e.g., Location, Rotation,
or Scale).

62
5. Create the Animation:

• Move to different frames and make changes to the object's properties.

• Insert keyframes at each new frame by right-clicking on the propertyand

selecting "Insert Keyframe" or pressing I.

63
6. Adjust Timing and Easing:

• In the Graph Editor, you can adjust the interpolation and easing
foryour keyframes to control how the animation flows.

• Select keyframes and press T to bring up the Interpolation menu.

7. Kinematics and Armatures:

• If you want to create more complex animations, especially for characters or

objects with multiple parts, you can use armatures andconstraints.

• Add an armature object (a skeleton) to your scene.

64
 • Parent your 3D object to the armature. Select the 3D object, then Shift-select the
armature, and press Ctrl+P. Choose "With AutomaticWeights" if you're working
with a character.

8. Rendering:

• Set up your camera and lighting for the scene.

• Configure rendering settings in the Render tab.

• Choose an output format and render the animation by clicking

the"Render Animation" button.

65
9. Save and Export:

• Save your project using File > Save or Save As.

• Export the animation in the desired format (e.g., video or

imagesequence) using File > Export.

66
10. Preview Your Animation:

• Use the Play button in the timeline to preview your animation.

• You can also scrub through the timeline to view individual frames.

67
Result:

Thus we have performed simple 3D animation with keyframes and kinematics using Blender.

68
Ex. No. 12 a

Date : Working with E-Learning Authoring Tools

Aim:
Demonstrating screen recording and further editing for e-learning content using moovly
tool.

Procedure:
Step1: Open your web browser.visit the official moovly website at "https://www.moovly.com"for
installation.

Step 2: After opening the moovly website,look for and click in the “login”button,typicallylocated at
the top right corner of the webpage.

69
Step3: Once you’re on the login page,enter your email and password.Then,click the “log in”
button to access your account.

Step 4:Click the “get started for free” button to initiate the account creation process. fill in all the
requires details and then click the “create account” button .

Step 5:Once you’re created the account, it will open the dashboard and click “Generative AI”.

70
Step 6:Select “video generation”.

Step 7:Enter the topic of your video. Example :E-Learning and click “Generate script”.

Step 8:In the video generation, select how the text appear in the video (i.e. no text ,on screen text
and subtitles)and select visuals of your own.once you’re select click “select clip style”.

71
Step 9: Next, select your “onscreen text style”.And click “create video”.

Step 10:Now your video is ready.click “Have a look” and it will created a video about e-learing.

Step 11:For the screen recording,select Record and choose “Record”.

Step 12:Next,select “Screen” for start recording.

72
73
Step 13:Choose E-Learning to share with dashboard.moovly.com and click “share”button.

Step 14:Select audio also for the recording and click “Start Recording”

74
Step 15:It will start recording and if you finish your recording click “stop recording” or if
you’re pause the record click “pause recording”.

Result:
Thus the screen recording for E-Learning content has been done.

75
Ex. No. 12 b

Date : Create a simple E-Learning module

Aim:
To Create a simple e-learning module for add multimedia elements to a presentation
using PowerPoint and EdApp.

Procedure:
Step1: Go to the EdApp website

Step2: click “log in” button.

Step3: Enter all the required details and click on the "Get started for FREE" button.

76
77
Step4: Once you have logged in to your account, click on the "Course" button.

Step5: Click on the “create a course”.

Step6:Enter a topic name ,some key words or even a course summary and click on the “Generate
Course”.

78
 Step7: Adding a content related for the course name and click on the “publish” button.
Onceyou have added content to your course, you can preview it to see how it will look to your
learners.
Once you are satisfied with the course, you can publish it.

Step8:Select your lessons and click on the “Next”button.

Step9: Click on the “Publish course”

79
Step10: The publishing process may take some time, depending on the size and complexity
ofyour course.once its finished ,it shows “published”. The course is released and available to
learners.

Result:
Thus the Creating a simple e-learning module for adding multimedia elements to a
presentation using PowerPoint using EdApp has been done. .
80