DEPARTMENT OF

COMPUTER SCIENCE AND

ENGINEERING

ACADEMIC YEAR: 2023-2024

CCS35 MULTIMEDIA AND ANIMATION

LABORATORY

NAME: ___________________________________________________________

ROLLNO:____________________________________________________________

BRANCH:________________ SEM:_________________________________
 Certified that this is the bonafide record of work done

by Mr./Ms….…………………………………………………………………..in

theCCS35 MULTIMEDIAAND ANIMATION LABORATORYof this

institution, as prescribed by the Anna University, Chennai for the Sixth

Semester Computer Science and Engineering, during the year 2023-2024.

Staff - In charge Head of the Department

Submitted for the University Practical Examination held on

……………………at Sree Sakthi Engineering College, Coimbatore –
641 104.

Internal Examiner External Examiner

 INDEX
S.N DATE NAME OF THE EXPERIMENT PAGE NO FACULTY
O SIGNATURE

1.WORKING WITH IMAGE EDITING TOOLS

1. 1. USE DIFFERENT SELECTION
AND TRANSFORM TOOLS TO
MODIFY OR IMPROVE AN
IMAGE.
2. 2. CREATE LOGOS AND
BANNERS FOR HOME PAGES OF
WEBSITES.
2.WORKING WITH AUDIO EDITING TOOLS
3 1.INSTALL TOOLS LIKE,
AUDACITY / ARDOUR FOR
AUDIO EDITING, SOUND MIXING
AND SPECIAL EFFECTS LIKE
FADE-IN OR FADE-OUT ETC
4 2. PERFORM AUDIO
COMPRESSION BY CHOOSING A
PROPER CODEC
3.WORKING WITH VIDEO EDITING AND CONVERSION TOOLS:
INSTALL TOOLS LIKE OPEN SHOT / CINE LERRA / HAND BRAKE FOR EDITING
VIDEO CONTENT
5. 1. EDIT AND MIX VIDEO
CONTENT, REMOVE NOISE,
CREATE SPECIAL EFFECTS, ADD
CAPTIONS.
6. 2. COMPRESS AND CONVERT
VIDEO FILE FORMAT TO OTHER
POPULAR FORMATS.
4.WORKING WITH WEB/MOBILE AUTHORING TOOLS:
ADAPT / KOMPOZER/ BLUEGRIFFON / BLUEFISH / APTANA STUDIO/
NETBEANS / WORDPRESS /EXPRESSION WEB
7. 1.DESIGN SIMPLE HOME PAGE
WITH BANNERS, LOGOS, TABLES
QUICK LINKS ETC
8. 2. PROVIDE A SEARCH
INTERFACE AND SIMPLE
NAVIGATION FROM THE HOME
PAGE TO THE INSIDE PAGES OF
THEWEBSITE.
9. 3. DESIGN RESPONSIVE WEB
PAGES FOR USE ON BOTH WEB
AND MOBILE INTERFACES.
5.WORKING WITH ANIMATION TOOLS:INSTALL TOOLS LIKE, KRITA, WICK
EDITOR, BLENDER
10. 1.PERFORM A SIMPLE 2D
ANIMATION WITH SPRITES
11. 2.PERFORM SIMPLE 3D
ANIMATION WITH KEYFRAMES,
 KINEMATICS
6.WORKING WITH E-LEARNING AUTHORING TOOLS:
INSTALL TOOLS LIKE EDAPP / MOOVLY / COURSELAB/ ISEAZY AND
CAMSTUDIO/AMPACHE, VIDEOLAN
12. 1. DEMONSTRATE SCREEN
RECORDING AND FURTHER
EDITING FOR E-LEARNING
CONTENT.
13 2. CREATE A SIMPLE E-
LEARNING MODULE FOR A
TOPIC OF YOUR CHOICE.
7.CREATING VR AND AR APPLICATIONS
14 1.ANY AFFORDABLE VR VIEWER
LIKE GOOGLE CARDBOARD AND
ANY DEVELOPMENT PLATFORM
LIKE OPENSPACE 3D / ARCORE
ETC.
EXP NO:1

DATE: 1. WORKING WITH IMAGE EDITING TOOLS:

1.USE DIFFERENT SELECTION AND TRANSFORM TOOLS TO MODIFY OR

IMPROVE AN IMAGE

AIM:

To Use different selection and transform tools to modify or improve an image using Krita
tools.

PROCEDURE:

STEP 1: Start the process

STEP 2: Open KRITA tools for transforming and selecting and to modify or improve an image.

STEP 3: FILE NEW the working screen will be open.

STEP 4: Click FILE OPEN and choose an image.

STEP 5: SELECTION TOOLS - Use different selection and modify the image

Selections allow you to pick a specific area of your artwork to change. This is useful
when you want to move a section of the painting, transform it, or paint on it without affecting the
other sections. There are many selection tools available that select in different ways.
 Magnetic
selection tool

Path
RECTANGULAR Elliptical Polygonal Freehand Contiguous Similar colour selection
SELECTION TOOL Selection Selection Tool Selection Tool Selection Tool selection tool tool
Tool

RECTANGULAR SELECTION TOOL

It allows you to make Selections in a rectangular shape. To create a rectangular
selection Use the tool or shortcut (CTRL+R).And make select a rectangle shape and cut the image
in rectangle using tool transform a layer or selection (CTR+T).

ELLIPTICAL SELECTION TOOL

This tool, represented by an ellipse allows you to make Selections of a elliptical area. To
create aElliptical selection Use the tool or shortcut (J).And make select a circle shape and cut the
image in circle using tool transform a layer or selection (CTR+T).
POLYGONAL SELECTION TOOL
This tool, represented by a polygon with a dashed border, allows you to make Selections
in a polygonal shape.And make select a polygon shape and cut the image using tool transform a
layer or selection (CTR+T).

FREEHAND SELECTION TOOL

Make Selections by freely drawing the selection outline around the canvas. Click and drag to draw
a border around the section you wish to select. And make select a polygon shape and cut the
image using tool transform a layer or selection (CTR+T).
SIMILAR COLOR SELECTION TOOL
This tool, represented by a dropper over an area with a dashed border, allows you to make
Selections by selecting a point of color. It will select any areas of a similar color to the one you
selected. You can adjust the “fuzziness” of the tool in the tool options dock. A lower number will
select colors closer to the color that you chose in the first place. And make select a circle shape
and cut the image in circle using tool transform a layer or selection (CTR+T).

CONTIGUOUS SELECTION TOOL

This tool, represented by a magic wand, allows you to make Selections by selecting a point of
color. It will select any contiguous areas of a similar color to the one you selected. You can adjust
the “fuzziness” of the tool in the tool options dock. A lower number will select colors closer to the
color that you chose in the first place.
PATH SELECTION TOOL
This tool, represented by an ellipse with a dashed border and a curve control, allows you to make
a Selections of an area by drawing a path around it. Click where you want each point of the path
to be. Click and drag to curve the line between points. Finally click on the first point you created
to close your path.

MAGNETIC SELECTION TOOL

This tool, represented by a magnet over a selection border, allows you to make freeform
Selections, but unlike the Polygonal Selection Tool or the Freehand Selection Tool, it will try to
magnetically snap to sharp contrasts in your image, simplifying the creation of selection
drastically.
TRANSFORM TOOLS: To Use different transform tools to modify or improve an image using
Krita tools.

The Transform tool lets you quickly transform the current selection or layer. Basic
transformation options include resize, rotate and skew. In addition, you have the option to apply
advanced transforms such as Perspective, Warp, Cage and Liquid. These are all powerful options
and will give you complete control over your selections/layers.
You can fine-tune the transform tool parameters using tool options docker. The parameters are
split between five tabs: Free Transform, Warp, Perspective, Cage and Liquify,Mesh.

MESH
FREE TRANSFORM PERSPECTIVE
WARP CAGE LIQUIFY

FREE TRANSFORM
This allows you to do basic rotation, resizing, flipping, and even perspective skewing if you
hold the Ctrl key. Holding the Shift key will maintain your aspect ratio throughout the transform.
When you move the center pivot point, pressing Alt will allow you to limit it to the transformation
bounds.
PERSPECTIVE
While free transform has some perspective options, the perspective transform allows for
maximum control. You can drag the corner points, or even the designated vanishing point.
You can also change the size, shear and position transform while remaining in perspective with
the tool-options.

WARP
Warp allows you to deform the image by dragging from a grid or choosing the dragging points
yourself.

CAGE
Create a cage around an image, and when it’s closed, you can use it to deform the image. If
you have at least 3 points on the canvas, you can choose to switch between deforming and editing
the existing points.
LIQUIFY
Like our deform brush, the liquify brush allows you to draw the deformations straight on the
canvas.

Mesh
The mesh transform is similar to the warp and the cage transform, except that its interface uses
patches comprised of Bezier curve segments. This transform mode is particularly useful for
placing images and textures on curved surfaces:
Exp No:2

Date: 1. WORKING WITH IMAGE EDITING TOOLS:

2. CREATE LOGOS AND BANNERS FOR HOME PAGES OF WEBSITES.

AIM:
To Use different tools and create logos and banners for home pages of websites
using Krita tools.
PROCEDURE:
1. Understand the Requirements:
 Gather information about the website's theme, target audience, and branding guidelines.
 Determine the dimensions required for the logo and banner.
2. Launch Krita:
 Open the Krita application on your computer.
3. Create a New Document:
 Go to File > New.
 Set the canvas size appropriately. For logos, a square canvas works well (e.g., 800x800
pixels), while banners may require larger dimensions.
4. Sketch Your Design:
 Use the sketching tools (e.g., Pencil, Brush) to create a rough sketch of your logo or
banner.
 Focus on layout, composition, and overall concept.
5. Refine the Sketch:
 Use the eraser tool or brush tool to refine the sketch, adding details and cleaning up rough
areas.
 Ensure clarity and coherence in the design.
6. Add Colors and Effects:
 Choose suitable colors from the color palette.
 Apply colors to your design using the brush tool or fill tool.
 Experiment with gradients, textures, and effects to enhance the visual appeal.
7. Typography (for banners):
 Select appropriate fonts that align with the website's branding.
 Use the text tool to add text layers.
 Ensure readability and alignment of text elements.
8. Finalize Your Design:
 Review the design carefully, making any necessary adjustments.
 Ensure consistency with the website's branding and overall theme.
9. Export Your Design:
 Once satisfied, go to File > Export.
 Choose the desired file format (e.g., PNG, JPEG).
 Specify the location to save the file.
10. Implement the Design:
 Upload the logo and banner to the website's homepage.
 Follow the platform's guidelines for image placement and sizing.
 Test the design on different devices to ensure responsiveness and visual consistency.

Output:
The output will be the finalized logo and banner design files saved in the specified location on
your computer. You can view the output files using any image viewer or upload them directly to
your website's homepage.
 Exp No:3

Date: 2.WORKING WITH AUDIO EDITING TOOLS:

1.INSTALL TOOLS LIKE, AUDACITY / ARDOUR FOR AUDIO EDITING, SOUND MIXING
AND SPECIAL EFFECTS LIKE FADE-IN OR FADE-OUT ETC.,

AIM:
Install tools like, Audacity / Ardour for audio editing, sound mixing and special effects like fade-
in or fade-out etc.,
PROCEDURE:
To install Audacity for audio editing, sound mixing, and applying special effects like fade-in or
fade-out, you can follow these general steps:
1. Download Audacity:
 Visit the official Audacity website at https://www.audacityteam.org/.
 Navigate to the "Download" section.
 Choose the appropriate version for your operating system (Windows, macOS, or
Linux) and click on the download link.
2. Install Audacity:
 Once the download is complete, locate the downloaded installer file on your
computer.
 Double-click the installer file to start the installation process.
 Follow the on-screen instructions to install Audacity on your computer. Make sure
to review and accept the terms of the license agreement.
3. Launch Audacity:
 After installation, you can launch Audacity by double-clicking its icon on your
desktop or finding it in your applications menu.
4. Optional: Install Additional Plugins:
 Audacity supports plugins that can extend its functionality. You may consider
installing additional plugins for special effects or enhanced editing capabilities.
 To install plugins, visit the Audacity Plugin Library at
https://wiki.audacityteam.org/wiki/Download_Nyquist_Plug-ins.
 Download the desired plugins and follow the installation instructions provided.
5. Start Editing:
 Once Audacity is launched, you can start importing audio files for editing.
 Use the various editing tools and effects available in Audacity to manipulate the
audio, such as fade-in, fade-out, equalization, noise reduction, and more.
 6. Export Your Audio:
 After editing your audio, you can export it in the desired format.
 Go to File > Export and choose the format and settings for your exported audio
file.
7. Save Your Project:
 If you want to save your project to work on it later, go to File > Save Project or
Save Project As and choose a location on your computer to save the project file
(.aup).
FADE IN:

FADE OUT:
Exp No:4

Date: 2.WORKING WITH AUDIO EDITING TOOLS:

2. PERFORM AUDIO COMPRESSION BY CHOOSING A PROPER CODEC.

AIM:

To Perform audio compression by choosing a proper codec.

PROCEDURE:

1. Open Audacity: Launch Audacity on your computer.

2. Import Audio File: If your audio file isn't already open in Audacity, import it by going to
File > Import > Audio and selecting the desired file.

3. Edit and Prepare Audio: Edit your audio file as needed. You can apply effects, adjust
volume levels, or make any other modifications before compressing the audio.

4. Select the Section to Export (Optional): If you only want to compress a specific section
of your audio, select it by clicking and dragging over the waveform.

5. Export Audio: Go to File > Export > Export Selected Audio or Export Audio, depending
on whether you've selected a portion of the audio or not.

6. Choose File Format: In the export dialog box, choose the file format you want to use. For
compressed audio, common formats include MP3, AAC, or OGG. Click on the "Options"
button next to the selected format to adjust compression settings.

7. Configure Compression Settings: In the options menu, you'll find various settings
depending on the chosen format. For example, when exporting to MP3, you can adjust the
bitrate, which affects the level of compression. Lower bitrates result in smaller file sizes
but may sacrifice audio quality. Higher bitrates preserve more audio detail but result in
larger file sizes.

8. Choose Codec: Select the appropriate codec from the dropdown menu if available.
Different codecs offer different trade-offs between audio quality and file size. For
example, for MP3, you might choose between LAME, FFMPEG, or other installed codecs.

9. Adjust Other Settings (Optional): Depending on the chosen codec, you may have
additional options to adjust, such as quality settings or stereo mode.

10. Preview and Export: Before exporting, you can preview the exported audio by clicking
the "Preview" button. Once satisfied, click "OK" or "Export" to save the compressed audio
file to your desired location on your computer.

11. Save Metadata (Optional): If desired, you can add metadata such as artist name, track
title, and album information before exporting.

12. Finish: After exporting, you'll have a compressed audio file ready for use.
Exp No:5

Date: 3.WORKING WITH VIDEO EDITING AND CONVERSION TOOLS

INSTALL TOOLS LIKE OPENSHOT / CINELERRA / HANDBRAKE FOR EDITING VIDEO

CONTENT.

1. EDIT AND MIX VIDEO CONTENT, REMOVE NOISE, CREATE SPECIAL

EFFECTS, ADD CAPTIONS.

AIM:

To Edit and mix video content, remove noise, create special effects, add captions using openshot.

PROCEDURE:

1. Download OpenShot:

 Visit the official OpenShot website at https://www.openshot.org/.

 Navigate to the "Download" section.

 Choose the appropriate version for your operating system (Windows, macOS, or Linux)
and click on the download link.

2. Install OpenShot:

 Once the download is complete, locate the downloaded installer file on your computer.

 Follow the installation instructions provided on the OpenShot website or included with
the installer.

 On macOS and Linux, you may need to give permission to execute the downloaded file.

3. Launch OpenShot:

 After installation, you can launch OpenShot by finding it in your applications menu or
by searching for it in the system launcher.

4. Import Video Content:

 Once OpenShot is launched, import the video files you want to edit into the software.

 You can do this by dragging and dropping the video files into the OpenShot interface or
by using the import feature.

5. Edit Video Content:

 Arrange the imported video clips on the timeline to create your desired sequence.

 Use the editing tools provided in OpenShot to trim, cut, split, and merge video clips as
needed.

6. Mix Video Content:

  Adjust the audio levels of individual video clips or add background music to enhance
your video content.

 OpenShot provides audio mixing features to help you achieve the desired audio
balance.

7. Remove Noise:

 If your video has background noise or unwanted audio, you can use OpenShot's audio
editing tools to remove or reduce noise.

 Apply noise reduction filters or adjust audio levels to improve audio quality.

8. Create Special Effects:

 OpenShot offers a variety of built-in video effects and transitions that you can apply to
your video clips.

 Experiment with effects like fade-ins, fade-outs, transitions, filters, and overlays to add
visual interest to your video content.

9. Add Captions:

 Use OpenShot's text tool to add captions, titles, and subtitles to your video.

 Customize the text appearance, position, and timing to ensure readability and
alignment.

10. Preview and Export:

 Preview your edited video to ensure everything looks and sounds as expected.

 Once satisfied, export your video by selecting the desired export settings (resolution, format,
bitrate, etc.).

 Choose a location on your computer to save the exported video file and click "Export" to start
the process.
Exp No:6

Date: 3. WORKING WITH VIDEO EDITING AND CONVERSION TOOLS

2. COMPRESS AND CONVERT VIDEO FILE FORMAT TO OTHER POPULAR FORMATS.

AIM:

To Compress and convert video file format to other popular formats.

PROCEDURE:

OpenShot primarily serves as a video editor and does not have native capabilities to compress or convert
video files directly within the software. However, you can use OpenShot to edit your video content, and then
export the edited project to the desired format with specific compression settings. Here's how you can do it:

1. Edit Your Video:

 Launch OpenShot and import the video file you want to edit.

 Arrange the video clips on the timeline and apply any desired edits, effects, transitions,
or text overlays.

2. Preview Your Edited Video:

 Play through your project to ensure all edits and effects are applied correctly and that
the video looks as desired.

3. Export Your Video:

 Once you're satisfied with the edits, navigate to the "File" menu and select "Export
Video."

 In the export dialog box, choose the export format and compression settings that best
suit your needs.

 OpenShot offers several export presets for popular formats like MP4, AVI, and MOV,
as well as options for customizing resolution, bitrate, and other settings.

4. Choose Compression Settings:

 When selecting the export format, consider the compression options available for each
format.

 Lower bitrate settings will result in smaller file sizes but may sacrifice some video
quality, while higher bitrates will preserve more detail but result in larger files.

5. Export Your Video:

 After choosing the desired format and compression settings, specify the output location
and filename for your exported video.

 Click "Export" to begin the export process. Depending on the length and complexity of
your video, this process may take some time.
6. Monitor Export Progress:

 OpenShot will display a progress bar indicating the status of the export process.

 Once the export is complete, you'll receive a notification, and the exported video will be
saved to the specified location on your computer.
Exp No:7

Date: 4. WORKING WITH WEB/MOBILE AUTHORING TOOLS

2. DESIGN SIMPLE HOME PAGE WITH BANNERS, LOGOS, TABLES QUICK

LINKS etc

AIM:

To Design simple home page with banners, logos, tables quick links etc

PROCEDURE:

1. Set Up Your Project:

 Open NetBeans and create a new project.

 Choose "Web Application" as the project type.

 Specify a project name and location, then click "Finish" to create the project.

2. Create HTML File:

 Right-click on the "Web Pages" folder in your project.

 Choose "New > HTML" to create a new HTML file.

 Name the file "index.html" or "home.html".

3. Design Your Homepage:

 Open the HTML file in the editor.

 Write the HTML code to structure your homepage.

 Use HTML elements such as <header>, <nav>, <section>, <article>, <footer>, etc., to
organize your content.

4. Add Banners and Logos:

 Use <img> tags to insert images for banners and logos.

 Specify the source (src) attribute with the path to your image file.

 You can use CSS to style the images as needed, such as setting width, height, margins,
etc.

5. Create Tables for Content:

 Use <table>, <tr>, <td>, and <th> tags to create tables for organizing content.

 Populate the tables with relevant data, such as lists of quick links, product features, or
any other information you want to display.

6. Styling with CSS:

 Create a CSS file (e.g., styles.css) in your project to add styling.

  Link the CSS file to your HTML file using the <link> tag in the <head> section.

 Use CSS rules to style your banners, logos, tables, text, and other elements to achieve
the desired appearance.

7. Add Quick Links:

 Create hyperlinks (<a> tags) for quick links to other pages or external websites.

 Use CSS to style the links to make them stand out, such as changing the color, font, or
adding hover effects.

8. Preview and Test:

 Right-click on your HTML file and choose "Run File" to preview your homepage in a
web browser.

 Test the functionality and appearance of your homepage, making any necessary
adjustments.

9. Refine and Iterate:

 Continuously refine and improve your homepage design based on feedback and testing.

 Experiment with different layouts, colors, fonts, and content arrangements to create an
engaging and user-friendly experience.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Homepage</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<imgsrc="banner.jpg" alt="Banner Image">
<imgsrc="logo.png" alt="Logo Image" class="logo">
</header>

<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<section id="about">
<h2>About Us</h2>
<p>Welcome to our website. We provide quality services to our clients.</p>
</section>
<section id="services">
<h2>Our Services</h2>
<table>
<tr>
<th>Service</th>
<th>Description</th>
</tr>
<tr>
<td>Web Design</td>
<td>We design beautiful and responsive websites.</td>
</tr>
<tr>
<td>Graphic Design</td>
<td>We create stunning graphics for your brand.</td>
</tr>
</table>
</section>

<footer>
<p>&copy; 2024 Simple Homepage. All rights reserved.</p>
</footer>
</body>
</html>
CSS (styles.css):
css
Copy code
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
background-color: #f0f0f0;
padding: 10px;
}

.logo {
display: block;
margin: auto;
max-width: 200px;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}

nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
text-decoration: none;
color: #333;
}

nav ul li a:hover {
color: #007bff;
}

section {
padding: 20px;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

th {
background-color: #f2f2f2;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}

Output:
Exp No:8

Date: 4. WORKING WITH WEB/MOBILE AUTHORING TOOLS

3. PROVIDE A SEARCH INTERFACE AND SIMPLE NAVIGATION FROM THE

HOME PAGE TO THE INSIDE PAGES OF THE WEBSITE.

AIM:

To Provide a search interface and simple navigation from the home page to the inside pages of the
website.

PROCEDURE:

Search Interface:

Create a search form using the <form> tag.

Use the <input> tag with the type="text" attribute for the search box.

Optionally, add a <button> tag with the type="submit" attribute for the search button.

Specify the action attribute of the form to determine where the search query should be submitted (e.g.,
a search results page).

html

Copy code

<form action="search-results.html" method="get">

<input type="text" name="q" placeholder="Search...">

<button type="submit">Search</button>

</form>

Navigation Links:

Create navigation links using the <a> tag.

Specify the href attribute with the URL of the destination page.

Place the navigation links within appropriate containers like <nav> or <ul> for semantic structure.

Html

<nav>

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="services.html">Services</a></li>

<li><a href="contact.html">Contact</a></li>
</ul>

</nav>

Combining Search Interface and Navigation:

Integrate the search form and navigation links into your homepage's HTML structure.

Place the search form within the header section for easy access.

Include the navigation links either in the header, footer, or both, depending on your website's design.

html

Copy code

<header>

<!-- Search Interface -->

<form action="search-results.html" method="get">

<input type="text" name="q" placeholder="Search...">

<button type="submit">Search</button>

</form>

<!-- Navigation Links -->

<nav>

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="services.html">Services</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

</header>

Page Structure and Linking:

Ensure that each page (home page and inside pages) includes the same navigation structure.

Link each navigation link to the corresponding HTML file using relative URLs.
Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Homepage</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<imgsrc="banner.jpg" alt="Banner Image">
<imgsrc="logo.png" alt="Logo Image" class="logo">
<form action="search-results.html" method="get">
<input type="text" name="q" placeholder="Search...">
<button type="submit">Search</button>
</form>
</header>

<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<section id="about">
<h2>About Us</h2>
<p>Welcome to our website. We provide quality services to our clients.</p>
</section>

<section id="services">
<h2>Our Services</h2>
<table>
<tr>
<th>Service</th>
<th>Description</th>
</tr>
<tr>
<td>Web Design</td>
<td>We design beautiful and responsive websites.</td>
</tr>
<tr>
<td>Graphic Design</td>
<td>We create stunning graphics for your brand.</td>
</tr>
</table>
</section>

<footer>
<p>&copy; 2024 Simple Homepage. All rights reserved.</p>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</footer>
</body>
</html>

Output:
Exp No:9

Date: 4. WORKING WITH WEB/MOBILE AUTHORING TOOLS

4. DESIGN RESPONSIVE WEB PAGES FOR USE ON BOTH WEB AND

MOBILE INTERFACES.

AIM:

To Design Responsive web pages for use on both web and mobile interfaces.

PROCEDURE:

1. Set Up Your Project:

 Open NetBeans and create a new project.

 Choose "Web Application" as the project type.

 Specify a project name and location, then click "Finish" to create the project.

2. Create HTML Files:

 Right-click on the "Web Pages" folder in your project.

 Choose "New > HTML" to create a new HTML file for each page of your website (e.g.,
index.html, about.html, contact.html).

3. Write HTML Code:

 Open the HTML files in the editor.

 Write the HTML code to structure each page of your website.

 Use semantic HTML elements like <header>, <nav>, <section>, <article>, and
<footer> for better accessibility and SEO.

4. Add CSS Files:

 Right-click on the "Web Pages" folder.

 Choose "New > CSS" to create a new CSS file (e.g., styles.css) for styling your web
pages.

5. Write CSS Code:

 Open the CSS file in the editor.

 Write the CSS code to style your web pages.

 Use media queries to apply different styles based on the viewport width, making your
pages responsive.

 Consider using CSS frameworks like Bootstrap or Foundation for pre-built responsive
components and grids.
 6. Test and Preview:

 Right-click on the HTML files and choose "Run File" to preview your web pages in a
web browser.

 Test your pages on different devices and screen sizes to ensure responsiveness.

7. Iterate and Refine:

 Continuously refine your HTML and CSS code based on testing and feedback.

 Make adjustments to improve the layout and styling for different screen sizes.

 Use browser developer tools to inspect and debug your code as needed.

8. Optional: Add JavaScript for Interactivity:

 If your website requires interactivity, you can add JavaScript code to handle user
interactions and dynamic content.

 Write JavaScript code in separate .js files and link them to your HTML files using
<script> tags.

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Page</title>
<style>
/* CSS for styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

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

nav {
background-color: #007bff;
color: #fff;
text-align: center;
padding: 10px;
}

nav a {
color: #fff;

text-decoration: none;
padding: 10px;
}

section {
padding: 20px;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}

@media only screen and (max-width: 600px) {

/* CSS for mobile devices */
nav {
flex-direction: column;
}

nav a {
display: block;
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<header>
<h1>Responsive Web Page</h1>
</header>

<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>

<section>
<h2>Main Content Section</h2>
<p>This is the main content section of your webpage. It will contain your text, images, and other
content.</p>
</section>

<footer>
<p>&copy; 2024 Responsive Web Page. All rights reserved.</p>
</footer>
</body>
</html>
Output:
Exp No:10

Date: 5. WORKING WITH ANIMATION TOOLS

1.PERFORM A SIMPLE 2D ANIMATION WITH SPRITES

AIM:

To Perform a simple 2D animation with sprites

PROCEDURE:

1. Prepare Your Assets:

 Create or gather the sprites you want to use for your animation. Sprites are typically
images that represent characters, objects, or other elements of your animation.

2. Open Krita:

 Launch Krita on your computer.

3. Create a New Animation File:

 Go to File > New to create a new file.

 Choose the dimensions and resolution for your animation. You may want to set it to the
same size as your sprites.

4. Import Your Sprites:

 Go to File > Import Animation Frames or use the keyboard shortcut Ctrl+Shift+I.

 Select the sprite images you want to import and click "Open."

5. Arrange the Sprites:

 Krita will import each sprite as a separate frame in the animation timeline. Arrange the
frames in the desired order by dragging and dropping them.

6. Set Animation Settings:

 Go to Settings > Configure Krita > Animation to access the animation settings.

 Adjust the frame rate, duration, and other animation settings as needed.

7. Preview Your Animation:

 Use the animation timeline at the bottom of the screen to play back your animation.

 Make any necessary adjustments to timing or frame order.

8. Export Your Animation:

 Once you're satisfied with your animation, go to File > Export Animation.

 Choose the file format and export settings for your animation.

 Click "Export" to save your animation to your computer.

9. Optional: Add Effects or Additional Frames:

 You can add effects, transitions, or additional frames to your animation to enhance it
further.

 Experiment with Krita's drawing and animation tools to create unique effects or
movements.

10. Save Your Project:

 Before closing Krita, make sure to save your project file (.kra) so you can easily come
back and make changes later if needed.
Exp No:11

Date: 5. WORKING WITH ANIMATION TOOLS

1. PERFORM SIMPLE 3D ANIMATION WITH KEYFRAMES, KINEMATICS

AIM:

To Perform simple 3D animation with keyframes, kinematics

PROCEDURE:

1. Create Your 3D Object Layers:

 Open Krita and create a new document.

 Use the various drawing tools to create the different parts of your 3D object on separate
layers. For example, you could create a cube using rectangles and adjust their
perspective to simulate depth.

2. Animate Your Object:

 Once you've created your layers, you can animate them by adjusting their position,
rotation, and scale over time.

 Open the Animation workspace by going to the top menu and selecting Workspace >
Animation.

 Create a new frame in the timeline for each keyframe of your animation.

 Use the Transform tool (Ctrl+T) to manipulate the position, rotation, and scale of your
object layers in each frame to simulate movement in 3D space.

3. Apply Kinematics (Optional):

 While Krita doesn't have built-in kinematics tools like dedicated 3D animation
software, you can manually animate pseudo-kinematic movements by adjusting the
position and rotation of your object layers over time.

 Experiment with layer transformations and interpolation to create smooth and

believable movement.

4. Preview and Refine:

 Use the playback controls in the animation timeline to preview your animation.

 Refine the timing and movement of your object by adjusting keyframes and
interpolation curves as needed.

5. Export Your Animation:

 Once you're satisfied with your animation, you can export it as a video file or image
sequence.

 Go to File > Render Animation to access export options.

 Choose your desired export settings and file format, then click "Render" to export your
animation.
Exp No:12

Date: 6. WORKING WITH E-LEARNING AUTHORING TOOLS

INSTALL TOOLS LIKE EDAPP / MOOVLY / COURSELAB/ ISEAZYAND

CAMSTUDIO/AMPACHE, VIDEOLAN:

1. DEMONSTRATE SCREEN RECORDING AND FURTHER EDITING FOR

E- LEARNING CONTENT.

AIM:

To Demonstrate screen recording and further editing for e-learning content.

PROCEDURE:

To install VideoLAN (VLC Media Player):

 Go to the VideoLAN website: https://www.videolan.org/.

 Download the installer for your operating system.

 Run the installer and follow the on-screen instructions to complete the installation.

For E-Learning Content Creation:

EdApp:

 Go to the EdApp website: https://www.edapp.com/.

 Sign up for an account and follow the instructions provided to access the platform.

2. Demonstrate Screen Recording and Editing:

Using VideoLAN:

1. Open VLC Media Player on your computer.

2. Go to Media > Open Capture Device.

3. In the "Capture Device" tab, select "Desktop" as the capture mode.

4. Configure other settings such as frame rate and format.

5. Click "Play" to start recording your screen.

6. When finished, click "Stop" to end the recording.

7. Open the recorded video in a video editing software for further editing.

3. Editing E-Learning Content:

1. Import the recorded videos into a video editing software (e.g., Adobe Premiere Pro, Final Cut
Pro, etc.).
2. Trim, cut, add overlays, captions, or any other enhancements needed for your e-learning
content.

3. Export the edited videos in your desired format and quality settings.

OUTPUT:

Using VideoLAN:

Editing E-Learning Content:

 Exp No:13

Date: 6. WORKING WITH E-LEARNING AUTHORING TOOLS

INSTALL TOOLS LIKE EDAPP / MOOVLY / COURSELAB/ ISEAZY AND

CAMSTUDIO/AMPACHE, VIDEOLAN

2. CREATE A SIMPLE E-LEARNING MODULE FOR A TOPIC OF YOUR CHOICE.

AIM:

To Create a simple E-Learning module for a topic of your choice.

PROCEDURE:

Here's a step-by-step guide to creating a simple e-learning module on a topic of your

choice using EdApp:

1. Sign up and Log in:

 Go to the EdApp website: https://www.edapp.com/ and sign up for an account.

 Log in to your EdApp account.

2. Create a New Course:

 Once logged in, navigate to the dashboard or course creation area.

 Click on the "Create New Course" or similar option to start creating a new course.

3. Define Course Details:

 Enter the title and description of your course.

 Set the course duration and other relevant details.

4. Add Modules:

 Break down your course into modules based on the topics you want to cover.

 Click on the "Add Module" button to create a new module for each topic.

5. Create Content:

 Within each module, add content such as text, images, videos, quizzes, and interactive
elements.

 Use the built-in content creation tools provided by EdApp to design engaging and
interactive learning materials.

6. Design Assessments:

 Include quizzes or assessments to test learners' understanding of the material.

 Choose from various question types such as multiple-choice, true/false, fill-in-the-

blank, etc.
 7. Preview and Test:

 Before publishing your course, preview each module to ensure everything looks and
functions as intended.

 Test the assessments to verify they provide accurate feedback and grading.

8. Publish Your Course:

 Once you're satisfied with your course content, click on the "Publish" or "Finish" button
to make your course available to learners.

9. Assign and Distribute:

 Assign the course to your learners by sharing the course link or inviting them via email.

 Monitor learners' progress and track their performance through the EdApp dashboard.

10. Collect Feedback and Iterate:

 Encourage learners to provide feedback on the course content and structure.

 Use feedback to improve and iterate on your e-learning module for future iterations.

Editing E-Learning Content:

Exp No:14

Date: 7. CREATING VR AND AR APPLICATIONS

ANY AFFORDABLE VR VIEWER LIKE GOOGLE CARDBOARD AND ANY

DEVELOPMENT PLATFORM LIKE OPENSPACE 3D / ARCORE etc.

AIM:

To Creating VrAndAr Applications to Any affordable VR viewer like Google Cardboard and
any development platform like Openspace 3D / ARCore etc.

PROCEDURE:

1. Google Cardboard:

 Google Cardboard is one of the most well-known and affordable VR viewers available.

 It consists of a simple cardboard viewer with lenses that works with a smartphone to
provide a VR experience.

 Prices for Google Cardboard vary but are generally very affordable.

2. Merge VR Goggles:

 Merge VR Goggles are made of durable and flexible foam material, making them
comfortable to wear.

 They are compatible with most smartphones and offer an immersive VR experience.

 Prices for Merge VR Goggles are relatively affordable compared to higher-end VR

headsets.

3. Samsung Gear VR:

 Samsung Gear VR is a VR headset designed to work with select Samsung Galaxy

smartphones.

 While not as cheap as Google Cardboard, Gear VR offers a more robust VR experience
at an affordable price.

4. Xiaomi Mi VR Play:

 Xiaomi Mi VR Play is another budget-friendly VR headset that offers a simple and

comfortable design.

 It works with a wide range of smartphones and provides an immersive VR experience.

Development Platforms for VR/AR:

1. OpenSpace 3D:

 OpenSpace 3D is a platform for creating immersive 3D experiences, including VR

applications.

 It provides tools for designing interactive environments and experiences for various VR
devices.
  OpenSpace 3D supports integration with popular game engines like Unity and Unreal
Engine.

2. ARCore:

 ARCore is Google's platform for building augmented reality (AR) applications for
Android devices.

 It enables developers to create AR experiences that blend digital content with the real
world.

 ARCore supports features like motion tracking, environmental understanding, and light
estimation.

3. Unity 3D:

 Unity 3D is a popular game engine that supports VR and AR development.

 It provides a comprehensive set of tools for creating interactive 3D content and

experiences.

 Unity supports integration with various VR and AR devices and platforms, including
Oculus Rift, HTC Vive, and HoloLens.

4. Unreal Engine:

 Unreal Engine is another powerful game engine used for VR and AR development.

 It offers advanced rendering capabilities and tools for creating realistic virtual
environments.

 Unreal Engine supports VR devices like Oculus Rift, HTC Vive, and Windows Mixed
Reality headsets.