lOMoARcPSD|52763762

Ccs352 - multimedia lab manual

Multimedia and animation (Anna University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Students ([email protected])
 lOMoARcPSD|52763762

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
Downloaded by Students ([email protected])
 lOMoARcPSD|52763762

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
Downloaded by Students ([email protected])
 lOMoARcPSD|52763762

ExerciseNo.1
TO DESIGN ALOGO BY USING INKSCAPE SOFTWARE

Aim:
Todesign alogobyusing inkscape software.

Procedure:
Step1-openinkscape softwareandcreateanewproject

Step2-selectthecircleshapetoolto designthebelowelement

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Step3-selectthesamecircleshapetoolto design thebelow elementwith different sizes

Step4-selectthebelowdesignedelementandgroupthat

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Step5-selectthedesignedelementandmakeacopy orduplicateandpaste it.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Step6-select the circleshapetool todesigna circle.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Step7-Change thecolorforcircle shape

Step8-placethecircleshape inthecenter ofthedesignedelement.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Step9-drawthetriangle shapeusing startool

Step10-Change thecolor oftriangle andplaceitinthe centerofthe circle.

Result:
Thusthegivenlogodesignwascompletedsuccessfullyusinginkscape software.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

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
Linuxsystems. Itisdeveloped byTheAudacity Team. Itwasinitially 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 voicego to thehome pageof Audacity softwareNavigate 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.

Adjusttherecording level to edittherecording volumeofaudio.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Once you've adjusted your volume, go ahead and hit that big red Record button. As you
start speaking, you'll beable toseethewaveform changein real-time. When you'redone, 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. Importingaudiotracks:
To import audio tracks click on theproject tab in the upper left corner of the screen.Then
click on import audio.Select the file you want to open. And Click open.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

3. Selectingaudiotracks
Toselectalloftheaudioclick onthe edittab,thenclick onselect, thenclick onselectall, 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. Splittingaudiotracks
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)

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

5. Exportingaudio
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
soundisever messedupafter youexportitasWAVorMP3tryexporting it astheotherfile type than you
used the first time)

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

6. SoundMixinginAudacity
To mix two tracks together, you can use the time shift tool to move the tracks up and
down thetimeline. Youmight need totweak thedBlevels tomake sureit’snicely mixedand not
distorting.

7. Addingspecialeffectstoouraudio
Wecan applyeffects toeither theentire audio file, orselectively totracks andportionsof
audio. Both are easily achieved with Audacity. To apply an effect, first select the track by
draggingovertheportionofaudio.Then,navigate tothe"Effect"tabinthemenubarandchoose the effect
you want to apply.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

FadingInandOutinAudacityFadin
gIn
"Fadingin"inAudacityreferstotheaudioeditingprocessofgraduallyincreasingthe volume at
the beginning of an audio clip or track.
ToapplythiseffectselectasectionintheaudioandClickonEffects>>FadeIn.Overthe selected
length, the audio will now gradually fade in.

FadingOut
"Fadingout"inAudacityistheoppositeoffadingin. Itreferstotheaudioeditingprocess of
gradually reducing the volume at the end of an audio clip or track.
Goto Effects andselect Fade Out. Over theselected length, theaudiowill now gradually
fade out to silence over.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

2.2.Performaudiocompressionbychoosingapropercodec:
AudioCompression:
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
forvarious applications, frommusicstreaming to voice calls. Popular audiocompression codecs,
like MP3, AAC, and OGG, are commonly used for achieving this balance between file size and
sound fidelity.

Codec:
Codecs (shortforcompressor-decompressor) arealgorithms orsoftwaretools 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.

TypesofCodec
Therearevarioustypesofaudiocodecsusedforcompressingandencodingaudiodata.
Someofthecommonlyusedaudiocodecs 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.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

AudiocompressionusingtheMP3(MPEG-1AudioLayer3)codeconAudacity:
YoucancompressanaudiofileintoMP3inAudacityby simplyexportingitasanMP3
format
Steps:
1. InAudacity,click"File"atthetop ofthescreen.
2. Inthedrop-downmenu,click"Export" andthenchoose"Exportas MP3."
3. Atthebottom ofthedialog boxintheFormatOptionssection, 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 bitrate options. Choose the bitrate from the "Quality" drop-
down menu (if in doubt, choose 192 kbps or higher) and then save your file.

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

Result:
Thusworking withaudioediting toolslikeaudacity isdonesuccessfully.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

ExerciseNo.3
WORKING WITH VIDEO EDITING AND CONVERSION TOOLS

Aim:
InstallOpenShottoEditandmixvideocontent,createspecialeffects,addcaptions.Then
Compress and convert video file format to other popular formats.

Procedure:
DownloadandInstallOpenShot:
• GototheOpenShotwebsite(https://www.openshot.org/).

• DownloadandinstallOpenShotforyouroperatingsystem (Windows,macOS,or Linux).

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

ImportYourVideoClips:
• Open OpenShot.

• Clickon"File">"ImportFiles"andselectthevideoclipsyouwanttoworkwith. You can

also drag and drop them into the project files area.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

ArrangeYourClips:
• DraganddropyourvideoclipsontothetimelineatthebottomoftheOpenShotwindow. You can
arrange them in the order you want them to appear in your final video.

EditingandTrimming:
• Totrima videoclip, selectiton the timeline.

• Usethe handles atthe beginningandendofthe cliptocut ortrim asneeded.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

CreateSpecialEffects:
• Selectacliponthe timeline.

• Gotothe"Effects"tabandchoosefromvariousoptions,suchasaddingtext,adjusting speed,
or applying video transitions.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

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.

ExportYourVideo:
• Onceyou'veeditedandaddedalltheelementsyouwant,clickthe"Export" button.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

• 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.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

• .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.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

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. Startthe program.
2. ThecodeprovidedisHTML andCSStemplateforwebpage.
3. Toaddthefunctionality,Adda‘<script>’tagwithinthe‘<head>’or‘<body>’sectionof your
HTML to include JavaScript code.
4. WriteaJavaScriptfunctionstohandleanyinteractiveordynamicbehavioryouwantto add.
5. Forexample,youcancreatefunctionstohandleformsubmissions,performclient-side
validation, or update element on the page dynamically.
6. UseeventlistenerstotriggerJavaScriptfunctionswhenspecific event occurs.
7. Commoneventincludeclicks,formsubmissions,andpageload.
8. Stopthe 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;
}

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

/*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:flex;
justify-content:space-between;

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

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>

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

<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>

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

<td>WebDevelopment</td>
<td>CSCI202</td>
<td>Prof.Johnson</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

OUTPUT:

RESULT:
Thus,theprogramtodesignsimpleHomepagewithBanners,logos,tablesquicklinks,etcis created and
the output is verified successfully.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

ExerciseNo.4b
SEARCH INTERFACE AND SIMPLE NAVIGATION USING BLUE GRIFFON

AIM:
Toprovideasearchinterfaceandsimplenavigationfromthehomepagetotheinsidepagesof the website
using BlueGriffon.
ALGORITHM:
a) Startthe program.
b) CreateHTMLfilesforeachwebpage(index.html,about.html,courses.html,faculty.html,
contact.html).
c) DefinetheHTMLstructure:
a) IneachHTMLfile,definethebasicstructurewith‘<html>’,‘<head>’and
‘<body>’ tags.
b) Includethenecessarymetadata withinthe‘<head>’section,suchascharsetandtitle.
c) Addinternal CSSstyleswithin‘<style>’tagforconsistentstylingacrosspages.
d) Createtheheader:
a) Insidethe‘<body>’ofeachHTMLfile,createa‘<header>’elementtodisplay the
page title and brief description.
e) Createthenavigation menu:
a) Belowtheheader,includea`<nav>`elementtocreateanavigationmenuwithlinks to
other pages.
b) Use`<a>`tagsforeachmenuitemandsetthe`href`attributetolinktothe
respective HTML files.
f) Createthemaincontentcontainer:
a) Adda`<div>`elementwiththeclass"container"toholdthemaincontentofthe page.
b) Applystylingtothis containerforaconsistentlayout.
g) Populatethecontent:
a) Withinthecontainer,createa`<div>`withclass"content"toholdthespecific
content of each page.
b) AddappropriateheadingsandparagraphstoconveyinformationabouttheComputer
Science Department.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

c) Forthe"Courses"and"Faculty"pages,createtablestolistcoursedetails andfaculty
members.
8. Stylethe content:
a) DefineCSSstylesforvariouselementstoachieveaconsistentandvisually
appealing design.
b) Customizestylesforheaders,links,navigationmenu,tables,andotherpageelements.
c) UseCSSclassesandIDstotargetspecific elementsfor styling.
9. Addimages:
a) Include`<img>`tagstodisplayimages,suchasthedepartmentlogoandfaculty
photos.
b) Setappropriateattributesforimagesources,alttext,anddimensions.
10. Includecontact information:
a) Onthe"Contact"page,listthedepartment'saddress,email,andphonenumberina
structured format.
11. Testing:
a) Ensurethatalllinkswithinthenavigationmenucorrectlypointtothecorresponding
HTML files.
b) Verifythatthewebsite's layoutandstylingareconsistentandvisually appealing.
c) Testthewebsiteondifferentbrowsersanddevicestoensurecompatibility.
12. Additionalfeatures (notpresentin theprovided code):
a) Implementinteractivefeaturessuchasformsforuserinputor
JavaScript functionality.
b) Addmorepagesandcontentasneededforthewebsite'sspecificrequirements.
c) Consideroptimizingthewebsiteforsearchengines(SEO)andimproving
accessibility.

PROGRAM:
Maincode:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>ComputerScienceDepartment</title>
<style>

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

/*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;
}

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

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

/*Bannerstyles */
.banner {
display:flex;
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;

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

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>

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

<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>

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

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;
}

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

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:flex;
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;

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

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>

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

<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>

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

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;
}

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

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:20px;
}
</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>

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

</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;
}

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

/*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:flex;
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;
}

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

.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;

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

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>

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

<!--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{

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

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:20px;
}

/*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;
}

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

/*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>

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

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;
}

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

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:20px;
}

/*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

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

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:

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

RESULT:
Thus,theprogramtoprovideasearchinterface andsimplenavigation fromthehomepagetothe inside
pages of the website using BlueGriffon was created and the output was verified successfully.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

ExerciseNo.5a
WORKING WITH ANIMATION TOOLS

Aim:

Toperformasimple2D animation withspritesusingWickEditor.

Procedure:

1. OpenWickEditor:StartbyopeningWickEditorinyourwebbrowserorafter
downloading and installing it.

2. CreateaNewProject:Click on"NewProject" to startanew project.

3. ImportSprites:You'llneedspritesforyouranimation. Toimportthem:
• Clickonthe"Library"tab.

• Click"Import"andselecttheimagefile(s)foryoursprite(s).
Commonimage formats like PNG or JPEG are supported.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

4. AddaNewScene:Scenesarelikedifferentsections ofyouranimation.Toaddascene:
• Clickonthe"Scenes"tab.

• Clickthe"+"buttontocreatea newscene.Giveitaname ifyoulike.

5. CreateaSpriteLayer:Aspritelayeriswhereyou'llplaceyoursprites.Toadda sprite
layer:

• Clickonthe"Layers"tab.

• Clickthe"+" buttonto createanewlayerandselect"Sprite."

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

6. PlaceSpritesontheStage:Gotoyournewspritelayeranddragyourimported sprites
onto the canvas (stage). You can resize and reposition themas needed.

7. SetKeyframes:Keyframesrepresentdifferentpointsinyouranimation.Toset
keyframes:

• Goto thetimelineatthebottom.

• Movetheplayhead to theframe whereyouwant tocreatea “Addframe."

8. AnimatetheSprites:Foreachkeyframe,movethespritestotheirnewpositionsor
makeother changes.WickEditor willautomatically interpolatebetween keyframes.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

9. PreviewYourAnimation:Clickthe"Play"buttontopreviewyouranimation.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

10. AdjustTiming:Inthetimeline,youcanadjustthedurationbetweenkeyframes by
stretching or compressing the frames.

11. ExportYourAnimation:Onceyou'resatisfiedwithyouranimation, go to"File"

>"Export" tosaveyouranimationinthedesiredformat.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

12. SaveYourProject:Don't forgetto saveyourprojectforfuture editing.

Result:

Thus,wehaveperformedsimple2Danimation withsprites usingWickeditor.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

ExerciseNo.5b
SIMPLE 3D ANIMATION WITH KEY FRAMES AND KINEMATICS

Aim:

Toperform3Danimation withkeyframesandkinematicsusingBlender.

Procedure:

Creatinga3DanimationwithkeyframesandkinematicsinBlenderisamulti-stepprocessthat
involvessettingupyour3Dscene,addingobjects,settingkeyframes,andusingarmaturesand
constraints for kinematics. Here's a general guide to get you started:

1. InstallBlender:Ifyouhaven'talready,downloadandinstallBlenderfromthe
official website (https://www.blender.org/download/).

2. OpenBlender:LaunchBlenderandstartwith anew project.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

3. SetupYourScene:Createorimportthe3Dobjects youwanttoanimate.You can

add objects, lights, cameras, etc., to your scene.

4. TimelineandKeyframes:

• Ensurethetimelineisvisibleinyourworkspace.Youcanusuallyfinditat the
bottom of the interface.

• Selecttheobjectyouwant toanimate byright-clickingonitinthe3Dview.

• Gototheframewhereyouwanttosetthefirstkeyframe.Youcanusethe
timeline to move to a specific frame.

• Changetheobject'spropertiesyouwanttoanimate(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).

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

5. CreatetheAnimation:

• Movetodifferentframes andmakechanges totheobject's properties.

• Insertkeyframesateachnewframebyright-clickingonthepropertyand
selecting "Insert Keyframe" or pressing I.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

6. AdjustTimingandEasing:

• IntheGraphEditor,youcanadjusttheinterpolationandeasing
foryour keyframes to control how the animation flows.

• Selectkeyframes andpressTtobringuptheInterpolationmenu.

7. KinematicsandArmatures:

• Ifyouwanttocreatemorecomplexanimations,especiallyforcharactersor
objects with multiple parts, you can use armatures andconstraints.

• Addanarmatureobject(askeleton)to your scene.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

• Parentyour3Dobjecttothearmature.Selectthe3Dobject,thenShift-selectthe
armature,andpressCtrl+P.Choose"WithAutomaticWeights"ifyou'reworking with
a character.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

8. Rendering:

• Setupyourcamera andlighting forthe scene.

• ConfigurerenderingsettingsintheRendertab.

• Chooseanoutputformatandrendertheanimationbyclicking
the"Render Animation" button.

9. SaveandExport:

• Saveyourproject using File >SaveorSaveAs.

• Exporttheanimationinthedesiredformat(e.g.,videoor
imagesequence) using File > Export.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

10. PreviewYourAnimation:

• UsethePlaybutton inthetimelinetopreview youranimation.

• Youcanalsoscrubthrough thetimeline to viewindividualframes.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Result:

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

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

ExerciseNo.6a
WORKING WITH E-LEARNING AUTHORING TOOLS

AIM:
Demonstratingscreenrecordingandfurtherediting fore-learningcontentusingmoovly
tool.

PROCEDURE:
Step1:Openyourwebbrowser.visittheofficialmoovlywebsiteat"https://www.moovly.com" for
installation.

Step2:Afteropeningthemoovlywebsite,lookforandclickinthe“login”button,typically located at the

top right corner of the webpage.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Step3:Onceyou’reontheloginpage,enter youremailandpassword.Then,click the“login” button to

access your account.

Step4:Clickthe“getstartedforfree”buttontoinitiatetheaccountcreationprocess.fillinallthe requires
details and then click the “create account” button .

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Step5:Onceyou’recreatedtheaccount,itwillopenthedashboardandclick“GenerativeAI”.

Step6:Select“video generation”.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Step7:Enterthetopicofyourvideo.Example:E-Learningandclick “Generatescript”.

Step8:Inthevideogeneration, selecthowthetextappearinthevideo(i.e.notext,onscreentext and

subtitles)and select visuals of your own.once you’re select click “select clip style”.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Step9:Next,selectyour“onscreentextstyle”.Andclick“create video”.

Step10:Nowyour videoisready.click“Havealook” anditwillcreatedavideoaboute-learing.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Step11:Forthescreenrecording,selectRecordandchoose“Record”.

Step12:Next,select “Screen”forstartrecording.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Step13:ChooseE-Learningtosharewithdashboard.moovly.comandclick“share”button.

Step14:Selectaudioalsofortherecordingandclick“StartRecording”

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

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.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

ExerciseNo. 6b
CREATE A SIMPLE E-LEARNING MODULE FOR A TOPIC OF YOUR CHOICE

AIM:
Creatingasimplee-learningmoduleforaddmultimediaelementstoapresentationusing PowerPoint
using EdApp.

PROCEDURE:
Step1:Goto theEdAppwebsite

Step2:click“login”button.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Step3:Enter alltherequireddetails andclickonthe"Getstarted forFREE"button.

Step4:Onceyouhave loggedin toyouraccount,click onthe"Course"button.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Step5:Click onthe“createa course”.

Step6:Enter atopicname,somekeywordsoreven acoursesummary andclickonthe“Generate

Course”.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Step7:Addingacontentrelatedforthecoursenameandclickonthe“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 lessonsandclickonthe“Next”button.

Downloaded by Students ([email protected])

 lOMoARcPSD|52763762

Step9:Clickonthe“Publish course”

Step10:Thepublishingprocessmaytakesometime,dependingonthesizeandcomplexityof your
course.once its finished ,it shows “published”. The course is released and available to learners.

RESULT:
ThustheCreatingasimplee-learningmoduleforaddmultimediaelementstoapresentation using
PowerPoint using EdApp has been done. .

Downloaded by Students ([email protected])