CHENDHURAN COLLEGE OF

ENGINEERING AND TECHNOLOGY

Lena Vilakku, Pilivalam (Po), Thirumayam (Tk),
Pudukkottai (Dist.) – 622 507.

Department of Computer Science & Engineering

CCS352- MULTIMEDIA AND

ANIMATION

1
 LIST OF EXPERIMENTS:
Working with Image Editing tools:
Install tools like GIMP/ InkScape / Krita / Pencil and perform editing operations:
Ø Use different selection and transform tools to modify or improve an image
Ø Create logos and banners for home pages of websites.
Working with Audio Editing tools:
Ø Install tools like, Audacity / Ardour for audio editing, sound mixing and special effects like
fade-in or fade-out etc.,
Ø Perform audio compression by choosing a proper codec.
Working with Video Editing and conversion tools:
Install tools like OpenShot / Cinelerra / HandBrake for editing video content.
Ø Edit and mix video content, remove noise, create special effects, add captions.
Ø Compress and convert video file format to other popular formats.
Working with web/mobile authoring tools:
Adapt / KompoZer/ BlueGriffon / BlueFish / Aptana Studio/ NetBeans / WordPress
/Expression Web:
Ø Design simple Home page with banners, logos, tables quick links etc
Ø Provide a search interface and simple navigation from the home page to the inside pages of the
website.
Ø Design Responsive web pages for use on both web and mobile interfaces.
Working with Animation tools:
Install tools like, Krita, Wick Editor, Blender:
Ø Perform a simple 2D animation with sprites
Ø Perform simple 3D animation with keyframes, kinematics
 Working with Mobile UI animation tools: Origami studio / Lottie / Framer etc.,
Working with E-Learning authoring tools:
Install tools like EdApp / Moovly / CourseLab/ IsEazy and CamStudio/Ampache,
VideoLAN:
Ø Demonstrate screen recording and further editing for e-learning content.
Ø Create a simple E-Learning module for a topic of your choice.
Creating VR and AR applications:
Ø Any affordable VR viewer like Google Cardboard and any development platform like
Openspace 3D / ARCore etc.

2
ExerciseNo.1
TO DESIGN ALOGO BY USING INKSCAPE SOFTWARE

Aim:
To design a logo by using inkscape software.

Procedure:
Step1-open inkscape software and create a new project.

Step2-select the circle shape tool to design the below element.

Step3-select the same circle shape tool to design the below element with different sizes.

Step4-select the below designed element and group that.

Step5-select the designed element and make a copy or duplicate and paste it.
Step6-select the circle shape tool to design a circle.
Step7-Change the color for circle shape.

Step8-place the circle shape in the center of the designed element.

Step9-draw the triangle shape using star tool.

Step10-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.
ExerciseNo.2
WORKING WITH AUDIO EDITING TOOLS(AUDACITY)

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 onMay28,2000.
After installing this nifty little package, you’ll find everything you need to record, edit, and
enhance the sound files.

2.1AudioeditingwithAudacity:
1.VoicerecordinginAudacity:
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've adjusted your volume, go ahead and hit that big red Record button. As you
start speaking, you'll be able to see the waveform change in real-time. When you're done, just hit
Stop.

If you want to hear how 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. And Click open.
3. Selecting audio tracks
To select all of the audio click on the edit tab, then click onselect, then click onselect 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
separate track)
5. 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 youexportitasWAVorMP3tryexporting it as the other file type than
you used the first time)
6. 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 dBlevels to make sure it’s nicely mixed and not
distorting.

7. 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.
FadingIn and Out in Audacity
"Fadingin" 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.

FadingOut
"Fadingout" in Audacity is the opposite of fadingin. It refers to the audio editing process
of gradually reducing the volume at the end of an audio clip or track.
Goto Effects and select Fade Out. Over the selected length, the audio will now gradually
fade out to silence over.
2.2.Perform audio compression by choosing a propercodec:
Audio Compression:
Audio compression is the process of reducing the size of audio files while maintaining
acceptable sound quality. It involves using algorithms to remove redundant or less perceptible
audio data. Compressed audio files are easier to store, transmit, and stream, making them ideal
for various applications, from music streaming to voice calls. Popular audio compression codecs,
like MP3, AAC, and OGG, are commonly used for achieving this balance between file size and
sound fidelity.

Codec:
Codecs (shortforcompressor-decompressor) are algorithms or software tools that encode
audio data in a way that reduces its file size. The choice of codec can significantly impact the
resulting audio quality and file size. By selecting the right codec, you can strike a balance
between file size and audio quality based on your specific needs, such as for streaming, storage,
or distribution purposes.

Types of Codec
There are various types of audio codecs used for compressing and encoding audio data.
Some of the commonly used audio codecs include:
MP3 (MPEG-1 Audio Layer 3): MP3 is one of the most popular and widely supported audio
codecs.Itoffersgoodcompressionwhilemaintainingreasonableaudioquality.It'softenusedfor music
streaming and portable audio players.
AAC (Advanced Audio Coding): AAC is known for its superior audio quality compared to MP3
at similar bitrates. It's commonly used in applications like iTunes and various streaming
platforms.
FLAC (Free Lossless Audio Codec): Unlike the previous codecs, FLAC is a lossless codec,
which means it compresses audio without any loss of quality. It's popular for archiving high-
quality audio and is used by audiophiles.
OGG Vorbis: OGG is an open-source and patent-free codec known for its high-quality
compression. It's often used for streaming and gaming applications.
WAV (Waveform Audio File Format): WAV is an uncompressed audio format, so it doesn't use
traditional codecs for compression. It maintains the highest audio quality but results in large file
sizes.
Audio compression using theMP3(MPEG-1AudioLayer3)codec on Audacity:
You can compress an audio file intoMP3 in Audacity by simply exporting it as anMP3
Format.
Steps:
1. In Audacity, click "File" at the top of the screen.
2. In the drop-down menu, click "Export" and then choose "Export as MP3."
3. At the bottom of the dialog box in the Format Options section, chooseyourMP3settings.
As a general rule, you'll get the best results by choosing "Constant" for the "Bit Rate
Mode" rather than one of the variable bit rate options. Choose the bit rate from the
"Quality" drop- down menu (if in doubt, choose 192 kbps or higher) and then save your
file.

In similar way you can compress your audio files into other codec forms such as
OGG,AAC,WAV.

Result:
Thus working with audio editing tools like audacity is done successfully.
ExerciseNo.3
WORKING WITH VIDEO EDITING AND CONVERSION TOOLS

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 operatingsystem (Windows,macOS,or Linux).

Import Your VideoClips:
• Open OpenShot.

• Clickon"File">"ImportFiles"and select the videoclips you want to work with.

You can also drag and drop them into the project files area.
Arrange Your Clips:
• Drag and drop your videoclips 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 trima videoclip, select it on the timeline.

• Use the handles at the beginning and end of the clip to cut or trim as needed.
Create Special Effects:
• Select a clip on the timeline.

• Gotothe"Effects"tabandchoosefromvariousoptions,suchasaddingtext,adjusting speed,
or applying video transitions.
AddCaptions:
• To add captions or text to your video, go to the "Title" tab. Choose from the title
templatesorcreateyourown.Draganddropthetitletemplateontothetimelineabove the
video clip where you want the caption to appear.

Export Your Video:

• Once you've edited and added all the elements you want,click the"Export" button.
• Choose the export settings, including video format, quality, and destination folder.

• Youcanclickthe"Advanced"buttontofurthercustomizetheexportsettings,such asthe video

and audio codec, resolution, frame rate, and bitrate. These settings allow you to control
the video quality and file size.
 • .Click "ExportVideo" and wait for the process to finish.

Result:
Thus the Installation of Open Shot video editor to Edit and mix video content and working
with its Features is done successfully.
ExerciseNo.4a
WORKING WITH WEB/MOBILE AUTHORING TOOLS

AIM:
To design simple Homepage and banners,logos,tables quick links etc using Blue Griffon.
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. WriteaJavaScriptfunctionstohandleanyinteractiveordynamicbehavioryouwantto add.
5. For example,you can create functions to handle form submissions,performclient-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,formsubmissions,andpageload.
8. Stop the program.
PROGRAM:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>ComputerScienceDepartment</title>
<style>
/*Resetsomedefaultstylesforconsistency*/ body,
h1, h2, p {
margin:0;
padding:0;
}

/*Globalstyles*/ body
{
font-family:Arial,sans-serif;
background-color: #f0f0f0;
margin: 0;
padding:0;
}
/*Headerstyles*/
header {
background-color:#17252A;
color: #fff;
padding: 20px;
text-align:center;
}

headerh1{
font-size: 36px;
}

headerp{
font-size: 18px;
}

/*Navigationstyles*/
nav {
background-color:#3AAFA9;
color: #fff;
text-align:center;
}

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

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

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

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

/*Quicklinksstyles*/
.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:1pxsolid#333;
border-radius: 5px;
}

/*Tablestyles*/
table {
width:100%;
border-collapse:collapse;
margin-top: 20px;
}

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

th,td{
padding:10px;
text-align:left;
}
</style>
</head>
 <body>
<header>
<h1></h1>
<h1></h1>
<h1></h1>
<h1style="text-align:left;"></h1>
<h1style="text-align:left;"></h1>
<h1style="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>ComputerScienceDepartment</h1>
<h1></h1>
<h1style="text-align:left;"></h1>
<p>WelcometotheComputerScienceDepartment atTPGIT</p>
<h1style="text-align:left;"></h1>
</header>
<nav>
<h1></h1>
<ahref="#">Home</a><ahref="#">AboutUs</a><ahref="#">Courses</a><a

href="#">Faculty</a><ahref="#">Contact</a></nav>
<divclass="container">
<divclass="quick-links">
<h1style="text-align:left;"></h1>
<ahref="#">Explore</a><ahref="#">LearnMore</a><ahref="#">Get
Started</a></div>
<h2>CoursesOffered</h2>
<table>
<tbody>
<tr>
<th>CourseName</th>
<th>CourseCode</th>
<th>Instructor</th>
</tr>
<tr>
<td>MultimediaandAnimation</td>
<td>CS5101</td>
<td>Prof.Smith</td>
</tr>
<tr>
 <td>WebDevelopment</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 quicklinks,etc is created
and the output is verified successfully.
ExerciseNo.4b
SEARCH INTERFACE AND SIMPLE NAVIGATION USING BLUE GRIFFON

AIM:
To provide a search interface and simple navigation from the homepage to the inside pages of
the website using BlueGriffon.
ALGORITHM:
a) Start the program.
b) CreateHTMLfilesforeachwebpage(index.html,about.html,courses.html,faculty.html,
contact.html).
c) Define the HTMLstructure:
a) In each HTMLfile,define the basic structure with‘<html>’,‘<head>’and
‘<body>’ tags.
b) Include the necessary metadata within the‘<head>’section,suchas charset and title.
c) Addinternal CSSstyleswithin‘<style>’tag for consistent styling across pages.
d) Create the header:
a) Insidethe‘<body>’ofeachHTMLfile,createa‘<header>’elementtodisplay the
page title and brief description.
e) Create the navigation menu:
a) Belowtheheader,includea`<nav>`elementtocreateanavigationmenuwithlinks to
other pages.
b) Use`<a>`tagsforeachmenuitemandsetthe`href`attributetolinktothe
respective HTML files.
f) Create the main content container:
a) Adda`<div>`elementwiththeclass"container"toholdthemaincontentofthe page.
b) Apply styling to this container for a consistent layout.
g) Populate the content:
a) Withinthecontainer,createa`<div>`withclass"content"toholdthespecific
content of each page.
b) Add appropriate headings and paragraphs to convey information about the Computer
Science Department.
 c) For the"Courses"and"Faculty"pages,create tables to list course details and faculty
members.
8. Style the content:
a) Define CSSstyles for various elements to achieve a consistent and visually
appealing design.
b) Customize styles for headers,links,navigationmenu,tables,and other page elements.
c) Use CSS classes and IDs to targe specific elements for styling.
9. Add images:
a) Include`<img>`tags to display images,suchas the department logo and faculty
photos.
b) Set appropriate attributes for image sources,alttext,and dimensions.
10. Include contact information:
a) On the"Contact"page,list the department'saddress,email,and phonenumber in a
structured format.
11. Testing:
a) Ensure that all links within the navigationmenu 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.

PROGRAM:
Maincode:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>ComputerScienceDepartment</title>
<style>
/*Resetsomedefaultstylesforconsistency*/ body,
h1, h2, p {
margin:0;
padding:0;
}

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

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

headerh1{
font-size: 36px;
}

headerp{
font-size: 18px;
}

/*Navigationstyles*/
nav {
background-color:#3AAFA9;
color: #fff;
text-align:center;
}

nav a{
text-decoration:none;
color: #fff;
margin:010px;
}
/*Containerstyles*/
.container{
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color:#fff;
box-shadow:0010pxrgba(0,0,0,0.1);
}

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

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

/*Quicklinksstyles*/
.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:1pxsolid#333;
border-radius: 5px;
}

/*Tablestyles*/
table {
width:100%;
border-collapse:collapse;
 margin-top:20px;
}

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

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

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

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

.search-button
{ padding:10px20px;
background-color:#444;
color: #fff;
border: none;
border-radius:5px;
cursor: pointer;
}
</style>
</head>
<body>
<header><imgsrc="file:///C:/Users/gnana/OneDrive/Desktop/logo.jpg"alt="Department
Logo"

style="width:151px;height: 137px;">
<h1>ComputerScienceDepartment</h1>
<p>WelcometotheComputerScienceDepartment atTPGIT</p>
</header>
 <nav><ahref="index.html">Home</a><ahref="C:%5CUsers%5Cgnana%5COneDrive
%5CDesktop%5Cmma%20lab%5CAbout.html">About
Us</a><ahref="C:%5CUsers%5Cgnana%5COneDrive%5CDesktop%5Cmma%20lab
%5CCourses.html">Courses</a>
<ahref="C:\Users\gnana\OneDrive\Desktop\mmalab\faculty.html">Faculty</a><ahref="C:\Users\
gnana\OneDrive\Desktop\mma lab\Contact.html">Contact</a></nav>
<divclass="container">
<divclass="quick-links"><ahref="#">Explore</a><ahref="#">LearnMore</a>
<ahref="#">GetStarted</a></div>
<h2>CoursesOffered</h2>
<table>
<tbody>
<tr>
<th>CourseName</th>
<th>CourseCode</th>
<th>Instructor</th>
</tr>
<tr>
<td>MultimediaandAnimation</td>
<td>CS5101</td>
<td>Prof.Smith</td>
</tr>
<tr>
<td>WebDevelopment</td>
<td>CSCI202</td>
<td>Prof.Johnson</td>
</tr>
</tbody>
</table>
</div>
<!--SearchInterface -->
<divclass="search-container"><inputclass="search-box"placeholder="Search..."

type="text"><button class="search-button">Search</button></div>

</body>
</html>
INDEX.HTML:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>ComputerScienceDepartment</title>
<style>
/*Resetsomedefaultstylesforconsistency*/ body,
h1, h2, p {
margin:0;
padding:0;
}

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

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

headerh1{
font-size: 36px;
}

headerp{
font-size: 18px;
}

/*Navigationstyles*/
nav {
background-color:#3AAFA9;
color: #fff;
text-align:center;
}
nav a{
text-decoration:none;
color: #fff;
margin:010px;
}

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

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

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

/*Quicklinksstyles*/
.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:1pxsolid#333;
 border-radius:5px;
}

/*Tablestyles*/
table {
width:100%;
border-collapse:collapse;
margin-top: 20px;
}

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

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

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

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

.search-button
{ padding:10px20px;
background-color:#444;
color: #fff;
border: none;
border-radius:5px;
cursor: pointer;
}
</style>
</head>
<body>
 <header><imgsrc="file:///C:/Users/gnana/OneDrive/Desktop/logo.jpg"alt="Department
Logo"

style="width:151px;height: 137px;">
<h1>ComputerScienceDepartment</h1>
<p>WelcometotheComputerScienceDepartment atTPGIT</p>
</header>
<nav><a href="C:%5CUsers%5Cgnana%5COneDrive%5CDesktop%5Cmma%20lab
%5Cindex.html">Home</a>
<ahref="about.html">AboutUs</a><ahref="courses.html">Courses</a><a

href="faculty.html">Faculty</a><ahref="contact.html">Contact</a></nav>
<divclass="container">
<divclass="quick-links"><ahref="#">Explore</a><ahref="#">LearnMore</a>
<ahref="#">GetStarted</a></div>
<h2>CoursesOffered</h2>
<table>
<tbody>
<tr>
<th>CourseName</th>
<th>CourseCode</th>
<th>Instructor</th>
</tr>
<tr>
<td>MultimediaandAnimation</td>
<td>CS5101</td>
<td>Prof.Smith</td>
</tr>
<tr>
<td>WebDevelopment</td>
<td>CSCI202</td>
<td>Prof.Johnson</td>
</tr>
</tbody>
</table>
</div>
<!--SearchInterface -->
<divclass="search-container"><inputclass="search-box"placeholder="Search..."
type="text"><button class="search-button">Search</button></div>
</body>
</html>
ABOUT.HTML:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>AboutUs-ComputerScience Department</title>
<style>
/*Resetsomedefaultstylesforconsistency*/ body,
h1, h2, p {
margin:0;
padding:0;
}

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

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

headerh1{
font-size: 36px;
}

headerp{
font-size: 18px;
}

/*Navigationstyles*/
nav {
background-color:#3AAFA9;
color: #fff;
text-align:center;
}
 nav a{
text-decoration:none;
color: #fff;
margin:010px;
}

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

/*Contentstyles*/
.content
{ padding:20p
x;
}
</style>
</head>
<body>
<header>
<h1>AboutUs</h1>
</header>
<nav><ahref="index.html">Home</a><ahref="about.html">AboutUs</a><a

href="courses.html">Courses</a><ahref="faculty.html">Faculty</a><a

href="contact.html">Contact</a></nav>
<divclass="container">
<divclass="content">
<h2>WelcometotheComputerScience Department</h2>
<p>TheComputerScienceDepartmentatTPGITiscommittedtoproviding high-
quality education and research opportunities in the field of
computerscience.Ourdedicatedfacultymembersandcutting-edge
curriculumensurethatstudentsreceiveawell-roundededucationin
computer science. </p>
<p> We offer a wide range of courses, including multimedia and
animation,webdevelopment,andmore.Ourexperiencedinstructorsare
passionate about teaching and mentoring students to help them succeed
in their academic and professional careers. </p>
 </div>
</div>

</body>
</html>

COURSES.HTML:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>ComputerScienceDepartment</title>
<style>
/*Resetsomedefaultstylesforconsistency*/ body,
h1, h2, p {
margin:0;
padding:0;
}

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

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

headerh1{
font-size: 36px;
}

headerp{
font-size: 18px;
}
/*Navigationstyles*/
nav {
background-color:#3AAFA9;
color: #fff;
text-align:center;
}

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

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

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

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

/*Quicklinksstyles*/
.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:1pxsolid#333;
border-radius: 5px;
}

/*Tablestyles*/
table {
width:100%;
border-collapse:collapse;
margin-top: 20px;
}

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

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

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

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

.search-button
{ padding:10px20px;
background-color:#444;
color: #fff;
border: none;
 border-radius:5px;
cursor: pointer;
}
</style>
</head>
<body>
<header><imgsrc="file:///C:/Users/gnana/OneDrive/Desktop/logo.jpg"alt="Department
Logo"

style="width:151px;height: 137px;">
<h1>ComputerScienceDepartment</h1>
<p>WelcometotheComputerScienceDepartment atTPGIT</p>
</header>
<nav><a href="C:%5CUsers%5Cgnana%5COneDrive%5CDesktop%5Cmma%20lab
%5Cindex.html">Home</a>
<ahref="about.html">AboutUs</a><ahref="courses.html">Courses</a><a

href="faculty.html">Faculty</a><ahref="contact.html">Contact</a></nav>
<divclass="container">
<divclass="quick-links"><ahref="#">Explore</a><ahref="#">LearnMore</a>
<ahref="#">GetStarted</a></div>
<h2>CoursesOffered</h2>
<table>
<tbody>
<tr>
<th>CourseName</th>
<th>CourseCode</th>
<th>Instructor</th>
</tr>
<tr>
<td>MultimediaandAnimation</td>
<td>CS5101</td>
<td>Prof.Smith</td>
</tr>
<tr>
<td>WebDevelopment</td>
<td>CSCI202</td>
<td>Prof.Johnson</td>
</tr>
</tbody>
</table>
</div>
 <!--SearchInterface -->
<divclass="search-container"><inputclass="search-box"placeholder="Search..."

type="text"><button class="search-button">Search</button></div>

</body>
</html>

FACULTY.HTML:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Faculty-ComputerScienceDepartment</title>
<style>
/*Resetsomedefaultstylesforconsistency*/ body,
h1, h2, p {
margin:0;
padding:0;
}

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

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

headerh1{
font-size: 36px;
}

headerp{
 font-size: 18px;
}

/*Navigationstyles*/
nav {
background-color:#3AAFA9;
color: #fff;
text-align:center;
}

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

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

/*Contentstyles*/
.content
{ padding:20p
x;
}

/*Facultyliststyles */
.faculty-list{
list-style-type:none;
margin: 0;
padding:0;
}

.faculty-item{
margin-bottom:20px;
padding: 10px;
border: 1px solid
#ccc; border-radius:
5px;
}
 /*Facultyimagestyles*/
.faculty-image
{ max-
width:100%;
height: auto;
}
</style>
</head>
<body>
<header>
<h1>Faculty</h1>
</header>
<nav><ahref="index.html">Home</a><ahref="about.html">AboutUs</a><a

href="courses.html">Courses</a><a href="faculty.html">Faculty</a><a

href="contact.html">Contact</a></nav>
<divclass="container">
<divclass="content">
<h2>Our Faculty</h2>
<ulclass="faculty-list">
<liclass="faculty-item"><imgclass="faculty-image"src="file:///C:/Users/gnana/
Downloads/male.jpg"

alt="Prof.JohnDoe"style="width:114px;height: 89px;">
<h3>Prof.John Doe</h3>
<p>TeachesComputerScience</p>
</li>
<liclass="faculty-item"><imgclass="faculty-image"src="file:///C:/Users/gnana/
Downloads/male.jpg"

alt="Prof.JaneSmith"style="width:113px;height: 102px;">
<h3>Prof.Jane Smith</h3>
<p>TeachesWebDevelopment</p>
</li>
<!--Add morefacultymembersasneeded-->
</ul>
</div>
</div>
</body>
</html>
CONTACT.HTML:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Contact-ComputerScienceDepartment</title>
<style>
/*Resetsomedefaultstylesforconsistency*/ body,
h1, h2, p {
margin:0;
padding:0;
}

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

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

headerh1{
font-size: 36px;
}

headerp{
font-size: 18px;
}

/*Navigationstyles*/
nav {
background-color:#3AAFA9;
color: #fff;
text-align:center;
}
 nav a{
text-decoration:none;
color: #fff;
margin:010px;
}

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

/*Contentstyles*/
.content
{ padding:20p
x;
}

/*Contactinformationstyles*/
.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><ahref="index.html">Home</a><ahref="about.html">AboutUs</a><a

href="courses.html">Courses</a><a href="faculty.html">Faculty</a><a
 href="contact.html">Contact</a></nav>
<divclass="container">
<divclass="content">
<h2>ContactInformation</h2>
<divclass="contact-info">
<h3>DepartmentAddress:</h3>
<p>ThanthaiPeriyargovtinstituteof technology,</p>
<p>Bagayam,</p>
<p>Vellore-02.</p>
</div>
<divclass="contact-info">
<h3>Email:</h3>
<p>[email protected]</p>
</div>
<divclass="contact-info">
<h3>Phone:</h3>
<p>+1(123)456-7890</p>
</div>
</div>
</div>
</body>
</html>

OUTPUT:
RESULT:
Thus, the program to provide a search interface and simple navigation from the homepage to the
inside pages of the website using BlueGriffon was created and the output was verified
successfully.
ExerciseNo.5a
WORKING WITH ANIMATION TOOLS

Aim:

To perform a simple2D animation with sprites using WickEditor.

Procedure:

1. Open WickEditor:Start by opening WickEditor inyour webbrowser or after

downloading and installing it.

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

3. ImportSprites: You'll need sprites for your animation. To import them:

• Click on the "Library" tab.

• Click "Import" and select the imagefile(s)for your sprite(s).

Common image formats like PNG or JPEG are supported.
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 newscene. Give it a name if you like.

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

• Click on the "Layers" tab.

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

6. Place Sprites on the Stage:Goto your new sprite layer and drag your imported
sprites onto the canvas (stage). You can resize and reposition themas needed.

7. Set Keyframes:Keyframes represent different points in your animation.To set

keyframes:

• Goto the time line at the bottom.

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

8. Animate the Sprites:For each keyframe,move the sprites to their new positions or
make other changes. WickEditor will automatically interpolate between
keyframes.
9. Preview Your Animation:Click the "Play" button to preview your animation.
10. Adjust Timing:In the timeline, you can adjust the duration between keyframes
by 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 Wickeditor.

ExerciseNo.5b
SIMPLE 3D ANIMATION WITH KEY FRAMES 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-step process

that involves settingup your 3Dscene,addingobjects,setting keyframes,and using armatures
and constraints for kinematics. Here's a general guide to get you started:

1. InstallBlender:If you haven't already,download and install Blende rfrom the

official website (https://www.blender.org/download/).

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

3. SetupYourScene:Createorimportthe3Dobjects youwanttoanimate.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 find it at

the bottom of the interface.

• Select the object you want to animate byright-clickingonitinthe3Dview.

• Goto the frame where you want to set the first keyframe.Youcanusethe
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).Selectthepropertyyouwanttokeyframe(e.g.,Location,Rotation, or
Scale).
5. Create the Animation:

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

• Insert keyframes at each newframe byright-clickingon the property and

selecting "Insert Keyframe" or pressing I.
6. Adjust Timing and Easing:

• In the GraphEditor,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(askeleton)to your scene.

• Parent your 3D object to the armature.Select the3Dobject,then Shift-select the
armature,and press Ctrl+P .Choose "WithAutomaticWeights "if you're working
with a character.
8. Rendering:

• Setup your camera and lighting for the scene.

• Configure rendering settings in the Rendertab.

• Choose an output format and render the animation by clicking

the "Render Animation" button.

9. Save and Export:

• Save your project using File >SaveorSaveAs.

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

image sequence) using File > Export.
10. Preview Your Animation:

• Use the Playbutton in the timeline to preview your animation.

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

Thus we have performed simple 3D animation with key frames and kinematics using Blender.
ExerciseNo.6a
WORKING WITH E-LEARNING AUTHORING TOOLS

AIM:
Demonstrating screen recording and further editing fore-learning conten tusing moovly
tool.

PROCEDURE:
Step1:Openyour webbrowser.visit the official moovly website at"https://www.moovly.com" for
installation.

Step2:After opening the moovly website,look for and click in the“login”button,typically

located at the top right corner of the webpage.
Step3:Onceyou’reontheloginpage,enter youremailandpassword.Then,click the“login” button to
access your account.

Step4:Clickthe“getstartedforfree”button to initiate the account creation process. Fill in all the

requires details and then click the “create account” button .
Step5:Once you’re created the account,it will open the dashboard and click“GenerativeAI”.

Step6:Select“video generation”.
Step7:Enter the topic of your video.Example:E-Learning and click “Generate script”.

Step8:In the video generation, select how the text appear in the video(i.e.notext,onscreentext and
subtitles)and select visuals of your own.once you’re select click “select clip style”.
Step9:Next,select your“onscreentextstyle”.And click“create video”.

Step10:Now your video is ready.click“Havealook” and it will created a video about e-learing.
Step11:Forthescreenrecording,selectRecordandchoose“Record”.

Step12:Next,select “Screen”forstartrecording.
Step13:ChooseE-Learningtosharewithdashboard.moovly.comandclick“share”button.

Step14:Selectaudioalsofortherecordingandclick“StartRecording”
 Step15:Itwillstartrecordingandif youfinishyourrecordingclick“stoprecording”orif you’re pause
the record click “pause recording”.

RESULT:
Thus the screen recording for E-Learning content as been done.
ExerciseNo. 6b
CREATE A SIMPLE E-LEARNING MODULE FOR A TOPIC OF YOUR CHOICE

AIM:
Creating a simple e-learning module for add multimedia elements to a presentation using
PowerPoint using EdApp.

PROCEDURE:
Step1:Goto theEdAppwebsite

Step2:click“login”button.
Step3:Enter all the required details and click on the"Getstarted forFREE"button.

Step4:Once you have logged in to your account,click onthe"Course"button.

Step5:Click onthe“create a course”.

Step6:Enter a topicname,some keywords or even a course summary and clickon the“Generate

Course”.
Step7:Adding a content related for the coursename and clickon the“publish”button.Once you
have added content to your course, you can preview it to see how it will look to your learners.
Once youaresatisfiedwiththecourse, youcanpublishit.

Step8:Selectyour lessons and clickon the“Next”button.

Step9:Clickonthe“Publish course”

Step10:The publishing process may take sometime,depending on the size and complexity of your
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 add multimedia elements to a presentation
using PowerPoint using EdApp has been done. .