Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 1 SECTION A Program No.1: Program to Design LOG IN Form in Html. Login Page

Student Login Form

username:
password:

Remember me
Forgot password?
Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 2 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 3 Program No.2: Program for Creating animation of “Bouncing Cloud” using HTML and CSS. Bouncing cloud
Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 5 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 6 Program No.3: Program to demonstrate a keyframe animation.

MULTIMEDIA AND ANIMATION

Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 8 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 9 Program No.4: Program to demonstrate A Font style, font weight and font size properties using CSS.

the font property

Multi Media

Animation

Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 10 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 11 Program No.5: Program to demonstrate multiple animations.

MULTIPLE ANIMATION

note: when animation is finished, it goes back to its original style.

Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 12 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 13 Program No.6: Program to use table tag to format web page. Also create the Time Table of your class using table tag.

TIME TABLE

Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 15

Day/Period
 I
9:00-9:55 		II
9:55-10:50
10:50-10:55 		III
10:55-11:50 		IV
11:50-12:45 		12:45-1:30 V
1:30-2:25 		VI
2:25-3:20 		Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 14 VII
3:20-4:15
Monday Pyt OS

S
H
O
R
T
B
R
E
A
K
E

 M&A Eng

L
U
N
C
H

 LAB OEC
Tuesday Pyt Kan OS SPORTS LAB M&A
Wednesday M&A pyt LAB Eng OST OS
Thursday LAB Pyt Eng OST M&A OEC
Friday LAB M&A Eng Kan Pyt OS
Saturday Eng OS M&A OEC Pyt
Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 16 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 17 Program No.7: Program to Demonstrate Longhand properties in CSS.

Welcome To Multimedia And Animation

Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 18 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 19 Program No.8: Program to Demonstrate shorthand properties in CSS.

Welcome to Multimedia and Animation

Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 20 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 21 Program No.9: Program to Demonstrate animation in reverse direction or alternate cycles. CSS |animation-direction Property

Multimedia And Animation

animation-direction property

Animation ....

Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 22 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 23 Program No.10: Write JavaScript Program to show light ON/OFF Demo. LIGHT ON AND OFF

Light ON And OFF

Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 24 Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 25 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 26 SECTION B Program No.1: Program to Demonstrate SVG (Scalable Vector Graphics) Circle.

Welcome To Multimedia And Animation

Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 27 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 28 Program No.2: Program to Demonstrate SVG (Scalable Vector Graphics) Ellipse. SVG Ellipse

Sample SVG Ellipse Image

Ellipse #1: without opacity. Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 29 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 30 Program No.3: Program to Demonstrate SVG (Scalable Vector Graphics) Star. SVG

SVG STAR

Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 31 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 32 Program No.4: Program to demonstrate “StrokeText()” method using HTML Canvas. your browser does not support the HTML canvas tag. Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 33 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 34 Program No.5: Program to demonstrate BezierCurveTo() method using HTML canvas. your browser does not support the HTMLs canvas tag. Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 35 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 36 Program No.6: Program to demonstrate different line patterns with different colors using Canvas. Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 38 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 39 Program No.7: Program to Demonstrate Gradients using HTML canvas.

Gradient

Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 40 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 41 Program No.8: Program Demonstrate Text Shadows using HTML Canvas.
Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 42 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 43 Program No.9: Program to Demonstrate Source-over, Source-in, Source-out Properties for composition using HTML Canvas.



Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 44 OUTPUT: Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 45 Program No.10: Program to create rectangle and animate increase and decrease the size of rectangle. Multimedia And Animation SNJPSNMS Trust’s Degree College Nidasoshi Page 47 OUTPUT: