CCS352 – MULTIMEDIA AND ANIMATION LABORATORY

NAME :

REG.NO. :

YEAR /SEM :
CAPE INSTITUTE OF TECHNOLOGY
BONAFIDE CERTIFICATE
NAME :

REG.NO. :

PROGRAMME :

SUBJECT CODE AND NAME :

DEPARTMENT :

SEMESTER :

Certified that this is the Bona-fide Record of work done by

Mr/Ms of semester

in the Department of of this

College for the laboratory CCS352 - MULTIMEDIA AND

ANIMATION during the academic year ____________.

Signature of Lecturer In-Charge Signature of HOD

Submitted for Practical Examination held on

Internal Examiner External Examiner

 lOMoARcPSD|439 767 71

TABLE OF CONTENT

PAGE.
S.NO. DATE EXPERIMENT TITLE NO MARKS SIGN.
 lOMoARcPSD|439 767 71

Ex. No 1.a USE DIFFERENT SELECTION AND TRANSFORM TOOL

Date: TO MODIFY OR IMPROVE AN IMAGE.

Aim:
To use different selection and transform tool to modify or improve the
image using InkScape Software.

Procedure:
1. Go to the browser and paste the link
https://inkscape.org/release/inkscape-
1.3/
2. Download the Inkscape software based on your OS.
3. Don’t use app image if you are using Linux or Debian based OS, use
app instead.
4. Once you install the software, it shows the below image as a welcome
screen.

Working with InkScape:

Step 1: Click on the Time to Draw Option on the Welcome Screen.

 lOMoARcPSD|439 767 71

Step 2: Click on the New Document, once you done it shows like this.

Step 3: Download any image of your choice from the internet

Step 4: Import the image using File menu in the navigation or click on the
icon as shown below

Step 5: After importing the screen looks like this

 lOMoARcPSD|439 767 71

Step 6: Click R to use the rectangle tool and make a frame as in the image.

Step 7: Hold Shift button and select the image and the rectangle then press
ctrl+G to group the both layers.

Step 8: Adjust the grouped layer to the full frame as shown in the image
 lOMoARcPSD|439 767 71

Step 9: Now we are able to use selection and transform tool to make changes
in the image.

RESULT

Thus the selection and transform tools to modify or improve an image

using image editing tools was implemented and verified successfully.
 lOMoARcPSD|439 767 71

Ex. No 1.b CREATE LOGOS AND BANNERS FOR HOME PAGES OF

Date: WEBSITES

Aim:
To Create Logos and banners for home pages of websites using InkScape
Software.

Procedure:
1. Go to the browser and paste the link
https://inkscape.org/release/inkscape-
1.3/
2. Download the Inkscape software based on your OS.
3. Don’t use app image if you are using Linux or Debian based OS, use
app instead.
4. Once you install the software, it shows the below image as a welcome
screen.
 lOMoARcPSD|439 767 71

Working with InkScape:

Step 1: Click on the Time to Draw Option on the Welcome Screen.

Step 2: Click on the New Document, once you done it shows like this.

Step 3: Press on the Ctrl+Alt+N, then click on the screen and choose your
desktop resolution as shown in the picture.
 lOMoARcPSD|439 767 71

Step 4: Click on the R button and place the rectangle on the top of the screen
as shown below

Step 5: Press T to add the Text button and edit the text as shown below
 lOMoARcPSD|439 767 71

Step 6: Add Home, About Us and Contact text in the Banner as shown below

RESULT
Thus, the logos and banners for home pages of websites was created
successfully by using inkscape
 lOMoARcPSD|439 767 71

Ex. No 2.a WORKING WITH AUDIO EDITING TOOL AUDACITY

FOR SOUND MIXING AND SPECIAL EFFECTS LIKE
Date: FADE IN OR FADE OUT

Aim:
To create sound mixing and special effects like fade in or fade out
using Audacity Software.

Procedure:
1. Go to the browser and paste the link https://www.audacityteam.org/
2. Install the Software based on your OS.
3. Once you have done it, the welcome screen looks like this.
 lOMoARcPSD|439 767 71

Working with Audacity Software:

Step 1: Click on the File menu and Import the audio file then the screen looks
like this

Step 2: Select the Starting and end point as shown in the image
 lOMoARcPSD|439 767 71

Step 3: Click on the Effect option in the navigation bar.

Step 4: Click on the Fadding.
Step 5: Click on the Fade in option for the starting region and Fade out option
for the ending region.

Result:
Thus, the expected fade in and fade out sound mixing using Audacity
software was executed successfully.
 lOMoARcPSD|439 767 71

Ex. No 2.b WORKING WITH AUDIO EDITING TOOL AUDACITY

TO PERFORM AUDIO COMPRESSION BY CHOOSING A
Date: PROPER CODEC

Aim:
To perform audio compression by choosing a proper codec using
Audacity Software.

Procedure:
1. Go to the browser and paste the link https://www.audacityteam.org/
2. Install the Software based on your OS.
3. Once you have done it, the welcome screen looks like this.
 lOMoARcPSD|439 767 71

Working with Audacity Software:

Step 1: Click on the File menu and Import the audio file then the screen looks
like this

Step 2: Click on the effect in the Navigation Bar and click on the volume and
compression then adjust the volume as shown in the image.
 lOMoARcPSD|439 767 71

RESULT
Thus, the expected audio compressing using Audacity software was
executed successfully.
 lOMoARcPSD|439 767 71

Ex. No 3.a WORKING WITH VIDEO EDITING TOOL OPEN SHOT

TO EDIT AND MIX VIDEO CONTENT, REMOVE NOISE,
Date: CREATE SPECIAL EFFECTS, ADD
CAPTIONS

Aim:
To edit and mix video content, remove noise, create special effects and
to add captions using Openshot software.

Procedure:
1. Go to the browser and paste the link https://www.openshot.org/
2. Install the software based on your OS.
3. Once done, the welcome screen looks like this

Working with Open shot Software:

Step 1: Click on the File menu in the navigation bar and then import required
files for editing.
 lOMoARcPSD|439 767 71

Step 2: Drag and Drop the video to the track then the screen looks like this

Step 3: Right click on the Video, then click on the slice option and click on
the keep both sides
Step 4: Click on the first part of the video then click on the Transitions which was in
the upper side of the track.
Step 5: Drag and drop the transition effect between the sliced video part, and the
screen looks like this.
 lOMoARcPSD|439 767 71

Result:
Thus, the expected output after adding transitions and simple effects
using Open shot software was achieved successfully.
 lOMoARcPSD|439 767 71

Ex. No 3.b WORKING WITH VIDEO EDITING TOOL OPEN SHOT

TO COMPRESS AND CONVERT VIDEO FILE FORMAT
Date: TO OTHER POPULAR FORMATS

Aim:
To compress and convert video file format to other popular formats
using Open shot software.

Procedure:
1. Go to the browser and paste the link https://www.openshot.org/
2. Install the software based on your OS.
3. Once done, the welcome screen looks like this

Working with Openshot Software:

Step 1: Click on the File menu in the navigation bar and then import required
files for editing.
Step 2: Drag and Drop the video to the track then the screen looks like this
 lOMoARcPSD|439 767 71

Step 3: Press ctrl+E then the screen looks like this

Step 4: Click on the target then choose any of the other format except mp4.
Step 5: Click on the Video Profile and choose your resolution.
Step 6: Click on the quality and then choose the quality of the video.
Step 7: Once finished all the settings, click on the export video button, then
the screen looks like this
 lOMoARcPSD|439 767 71

RESULT
Thus, the expected output after converting the video to various formats
using Open shot software was achieved successfully
 lOMoARcPSD|439 767 71

Ex. No 4.a WORKING WITH WEB AND MOBILE AUTHORING

Date: TOOL WORD PRESS TO
DESIGN SIMPLE HOMEPAGE WITH BANNERS,
LOGOS, TABLES AND QUICK LINKS

Aim:
To design simple homepage with banners, logos, tables and quick links
using Word press.

Working with Word press Online:

1. Go to the browser and paste the link https://wordpress.com/
2. Click on the get started and create a account.
3. Choose free plan as shown in the picture.
 lOMoARcPSD|439 767 71

4. Click on the third option choose a design as shown in the image.

5. Choose any of the design as shown in the image and start editing.
 lOMoARcPSD|439 767 71

6. Once done, your site looks similar to the image as shown.

 lOMoARcPSD|439 767 71

Result:
Thus, the expected design using word press was achieved successfully.
 lOMoARcPSD|439 767 71

Ex. No 4.b WORKING WITH WEB AND MOBILE AUTHORING

TOOL WORDPRESS TO PROVIDE A SEARCH
Date:
INTERFACE AND SIMPLE NAVIGATION FROM THE
HOME PAGES OF THE WEBSITES

Aim:
To provide a search interface and simple navigation from the home
pages of the websites using Wordpress.

Working with Wordpress Online:

1. Go to the browser and paste the link https://wordpress.com/
2. Click on the get started and create a account.
3. Choose free plan as shown in the picture.
lOMoARcPSD|439 767 71
 lOMoARcPSD|439 767 71

4. Click on the third option choose a design as shown in the image.

5. Choose any of the design which has a search bar as shown in the image
and start editing.
 lOMoARcPSD|439 767 71

6. Once done, your site looks similar to the image as shown.

 lOMoARcPSD|439 767 71

RESULT
Thus, the expected design using word press was achieved successfully.
 lOMoARcPSD|439 767 71

Ex. No 4.c WORKING WITH WEB AND MOBILE AUTHORING

TOOL WORD PRESS TO DESIGN RESPONSIVE
Date: WEBPAGE FOR USE ON BOTH WEB AND MOBILE
INTERFACE

Aim:
To design responsive webpage for use on both web and mobile interface
using Wordpress.

Working with Wordpress Online:

1. Go to the browser and paste the link https://wordpress.com/
2. Click on the get started and create a account.
3. Choose free plan as shown in the picture.
lOMoARcPSD|439 767 71
 lOMoARcPSD|439 767 71

4. Click on the third option choose a design as shown in the image.

5. Choose any of the design as shown in the image and start editing.
 lOMoARcPSD|439 767 71

6. Once done, your site looks similar to the image as shown.

7. In the above image you can see in the upper side as Desktop view,
Tablet view and Mobile View.
8. Thus, We Created a Responsive website.

RESULT
Thus, the expected design using word press was achieved successfully.
 lOMoARcPSD|439 767 71

Ex. No 5.a
PERFORM A SIMPLE 2D ANIMATION WITH SPRITES
Date:

Aim:
To perform a simple 2D animation with sprites in Blender.

Procedure:
1. Go to the browser and paste the link https://www.blender.org/download/
2. Open Blender: Launch Blender and make sure you are in the 2D
Animation workspace.
3. Import Sprites: You'll need your 2D sprites in a format that Blender can
use (such as PNG). To import them, go to File > Import > Images as
Planes. Select the images you want to use as sprites.
 lOMoARcPSD|439 767 71

4. Click on the new Sprite Frames resource and you'll see a new panel
appear at the bottom of the editor window

5. File System dock on the left side, drag the 8 individual images into the
center part of the Sprite Frames panel. On the left side, change the name
of the animation from "default" to "run".
 lOMoARcPSD|439 767 71

6. Next, select the frames from the sprite sheet that you want to include in
your animation. We will select the top four, then click "Add 4 frames"
to create the animation.
 lOMoARcPSD|439 767 71

7. You will now see your animation under the list of animations in the
bottom panel. Double click on default to change the name of the
animation to jump.

8. Finally, check the play button on the Sprite Frames editor to see your frog
jump.
 lOMoARcPSD|439 767 71

RESULT
Thus, the expected design using a simple 3D animation with key frames
kinematics in krita was created successful
 lOMoARcPSD|439 767 71

Ex. No 5.b PERFORM SIMPLE 3D ANIMATION WITH KEY

Date: FRAMES, KINEMATICS

Aim:
To perform simple 3D animation with key frames, kinematics in Blender.

Procedure:
1. Go to the browser and paste the link
https://krita.org/en/download/kritadesktop/
2. Open Krita and Create a New Document You can specify the canvas
size and resolution as per your preference.
3. Go to Settings > Switch Workspace > Animation. This will switch
Krita to

4. In the timeline panel at the bottom, click the "+" button to add a new
animation layer.
 lOMoARcPSD|439 767 71

5. On the first frame of the animation layer, draw the initial state of your
object or character.

6. Use the "Transform Mask" tool to manipulate the object.

 lOMoARcPSD|439 767 71

7. To draw the two extremes of the walk cycle.

8. Click the "Record Animation" button (the red dot in the timeline
panel) to start recording your key frames.
9. Move, rotate, or scale the object as desired, and Krita will
automatically create key frames for you.
 lOMoARcPSD|439 767 71

10. Use the timeline to adjust the timing of your animation. You can
drag the keyframes to change their position in time.
11 Select all frames in the timeline docker by dragging-selecting them.

12. Use the play button in the timeline panel to preview your animation

13. Once you're satisfied with your animation, you can export it as a
GIF or video file by going to File > Render Animation.
 lOMoARcPSD|439 767 71

Result:
Thus, the expected design using a simple 3D animation with key frames
kinematics in krita was created successfully.
 lOMoARcPSD|439 767 71

Ex. No 6 WORKING WITH E-LEARNING AUTHORING TOOL

EDAPP TO
Date: DEMONSTRATE SCREEN RECORDING AND FURTHER
EDITING FOR E-LEARNING CONTENT

Aim:
To demonstrate screen recording and further editing for e-learning
content using EdApp.

Procedure:
1. Go to the browser and paste the link https://www.edapp.com/
2. Click on the get started for free as shown below

3. Enter the required details and create a free account in the platform as
shown in the image.
 lOMoARcPSD|439 767 71

4. Give sample company details as your own as shown in the image

5. Click on the get started button.

6. Click on the Create course with blank as shown in the image.

 lOMoARcPSD|439 767 71

7. Click on the plus icon on the left navigation bar

8. In the right of the navigation you can add the audio or any other media
files and then you can edit it as per your needs as shown.
RESULT
Thus, we executed screen recording and we also know how to edit
E-learning content in the EdApp platform.
 Ex. No 7 CREATING VR AND AR APPLICATIONS

Date:

Aim:

To create any affordable VR and AR viewer like Google

Cardboard and any development platform like openspace 3D/ARCore
etc

Procedure for creating VR application

• Open unity .

• Create new project and choose template 3d.

• Download GVR SDK for unity from github.and drag and drop
downloaded plugin in project scene folder then click import.
• Then click file -> build settings then click add open scenes
option and switch to android platform.

• Then click player settings and choose player then tick the
virtual reality support which is located under the XR
SETTINGS also add cardboar feature by pressing the
+symbol. Right click on the hierarchy window and create
a plane and a cube then adjust the camera.

• In project window search for emulator then there is a file

called GvrEditorEmulator then drag the file into the
hierarchy window.

• Then create a empty object and rename it yourself and drag

the main camera into the newly created empty object and
reset its position and finally adjust the camera to get a
perfect view.
• In the project windows search for GvrRecticle and drag the
file in the main camera then look for GvrEventSystem
drag this file alsoin the main camera.

• In the inspector window click add component and search

for gvrpointer then choose gvr pointer raycaster.

• After creating the project to build the app.

• Click file tab then choose build settings then click build and run.
Procedure for creating AR application

*First open the unity hub app, then click new project and
choose 3D core then click create project.

*Then click files tab choose build settings then in the platform
section click the android and choose switch platform.
Then click player setting which is in the same window and click the
other settings and search for color space then change the colorspace to
gamma then search for scripting backend and change to ill2cpp and
turn on the arm64 option and also untick the auto graphics .
• Then click the window tab and choose package manager
then click the packages and switch to unity registry then
search for AR foundation and google arcore and install those
two plugins.

• In the hierarchy windows there is a main camera delete the

camera then right click and choose XR->XR ORIGIN then
right click choose XR-
>AR session

• Then drag and drop the 3d model in the hierarchy window.

After completing the scene then go to file tab choose build setting
Then click the add open scenes to get build the app.

Then go to player setting click XR Plug-in Management then right

side tick the google arcore then close the windowsthen build ,After
building install the app in android mobile ...

Result:

Thus AR and VR viewer like Google Cardboard and and

development platformlike openspace 3D/ARCore etc are created.