Scribd
Upload
11 views

VND Openxmlformats-Officedocument Wordprocessingml Document&rendition 1-9

good to understanding

Uploaded by

Keerthi bolimera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views

VND Openxmlformats-Officedocument Wordprocessingml Document&rendition 1-9

good to understanding

Uploaded by

Keerthi bolimera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

MAD LAB MANUAL EXP-5TO12

MULTIMEDIA PROGRAMS DEVELOPED USING


FLASH
EXPERIMENT-5:
WRITE A PROGRAM TO PERFROM MOTION TWEENING OPERATION
USING FLASH
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multimedia Programs Developed Using FLASH</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
.content {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin: auto;
width: 80%;
}
#animationArea {
border: 2px dashed #333;
width: 400px;
height: 300px;
position: relative;
overflow: hidden;
margin: 20px auto;
background-color: #eaeaea;
}
.tweenObject {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 175px; /* Center vertically */
}
</style>
</head>
<body>

<div class="content">
<h1>Multimedia Programs Developed Using FLASH</h1>
<h2>5. Motion Tweening Operation</h2>
<div id="animationArea">
<div id="tweenObject" class="tweenObject"></div>
</div>
<button onclick="startTween()">Start Motion Tweening</button>
</div>

<script>
function startTween() {
const tweenObject = document.getElementById('tweenObject');
const duration = 2000; // Duration in milliseconds
const startPos = 0; // Starting position (left)
const endPos = 550; // Ending position (right)
const startTime = performance.now();

function animate(currentTime) {
const elapsedTime = currentTime - startTime;
const progress = Math.min(elapsedTime / duration, 1); // Clamp
progress to 0-1
const currentPos = startPos + (endPos - startPos) * progress;

tweenObject.style.left = currentPos + 'px';


if (progress < 1) {
requestAnimationFrame(animate);
}
}

requestAnimationFrame(animate);
}
</script>

</body>
</html>
OUTPUT:

EXPERIMENT-6:
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>24 Spokes Wheel</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="wheelCanvas" width="550" height="500"></canvas>
<script>
const canvas = document.getElementById('wheelCanvas');
const ctx = canvas.getContext('2d');
const x = canvas.width / 2;
const y = canvas.height / 2;
const radius = 200;
const numSpokes = 24;

function drawWheel() {
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the outer circle


ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.stroke();

// Draw spokes with different colors


for (let i = 0; i < numSpokes; i++) {
const angle = (2 * Math.PI * i) / numSpokes;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + radius * Math.cos(angle), y + radius *
Math.sin(angle));

// Set a different color for each spoke


ctx.strokeStyle = `hsl(${(i * 360) / numSpokes}, 100%, 50%)`;
ctx.lineWidth = 3;
ctx.stroke();

// Label each spoke


ctx.fillStyle = '#000';
ctx.font = '12px Arial';
ctx.fillText(`Spoke ${i + 1}`, x + (radius + 20) * Math.cos(angle), y +
(radius + 20) * Math.sin(angle));
}

// Draw a small circle in the center


ctx.beginPath();
ctx.arc(x, y, 10, 0, 2 * Math.PI);
ctx.fillStyle = '#000';
ctx.fill();
}

drawWheel();
</script>
</body>
</html>

OUTPUT:
EXPERIMENT-7:
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Shape Tweening: Circle to Triangle</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="tweenCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('tweenCanvas');
const ctx = canvas.getContext('2d');

let frame = 0;
const totalFrames = 60; // Total frames for the animation

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
const t = frame / totalFrames; // Normalize frame to a value between 0
and 1

const x = canvas.width / 2;
const y = canvas.height / 2;
const size = 100; // Size of the shapes
ctx.beginPath();

if (t < 0.5) {
// Draw a circle for the first half of the animation
const radius = size * (1 - t * 2); // Decrease radius
ctx.arc(x, y, radius, 0, Math.PI * 2);
} else {
// Draw a triangle for the second half of the animation
const progress = t * 2 - 1; // Normalize for triangle
ctx.moveTo(x, y - size); // Top vertex
ctx.lineTo(x - size * progress, y + size); // Bottom left vertex
ctx.lineTo(x + size * progress, y + size); // Bottom right vertex
ctx.closePath();
}

ctx.fillStyle = 'green';
ctx.fill();

frame++;
if (frame <= totalFrames) {
requestAnimationFrame(draw); // Continue the animation
}
}

draw(); // Start the animation


</script>
</body>
</html>
OUTPUT:
EXPERIMENT-8:
SOURCE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated E-Card</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.ecard {
width: 400px;
height: 300px;
border: 2px solid #333;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #ffcc00;
position: relative;
overflow: hidden;
transition: background-color 0.5s ease;
}
h1 {
font-size: 2.5em;
color: #fff;
opacity: 0;
animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="ecard" id="ecard">
<h1 id="message">Happy Birthday!</h1>
</div>

<script>
const ecard = document.getElementById('ecard');

// Change background color when clicked


ecard.addEventListener('click', function() {
const randomColor = '#' +
Math.floor(Math.random()*16777215).toString(16);
ecard.style.backgroundColor = randomColor;
changeMessage();
});

// Function to change the message randomly


function changeMessage() {
const messages = [
'Happy Birthday!',
'Congratulations!',
'Best Wishes!',
'Have a Great Day!',
'You Are Awesome!'
];
const randomIndex = Math.floor(Math.random() * messages.length);
document.getElementById('message').textContent =
messages[randomIndex];
}
</script>
</body>
</html>
OUTPUT:

EXPERIMENT-9:
SOURCE CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Growing Moon Animation</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #003366, #66ccff); /* Blue sky
gradient */
overflow: hidden;
}
.moon {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
position: relative;
animation: grow 3s infinite alternate;
}

.moon::before {
content: '';
position: absolute;
top: 0;
left: 25%;
width: 100%;
height: 100%;
background-color: #003366; /* Shadow for crescent effect */
border-radius: 50%;
}

@keyframes grow {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); } /* Maximum size */
}

.star {
position: absolute;
background-color: white;
border-radius: 50%;
opacity: 0.8;
}
</style>
</head>
<body>
<div class="moon"></div>
<script>
const numStars = 100;
const body = document.body;

// Create stars
for (let i = 0; i < numStars; i++) {
const star = document.createElement('div');
star.classList.add('star');
const size = Math.random() * 3 + 2; // Size between 2 and 5
star.style.width = `${size}px`;
star.style.height = `${size}px`;
star.style.top = `${Math.random() * 100}vh`;
star.style.left = `${Math.random() * 100}vw`;
body.appendChild(star);
}
</script>
</body>
</html>

OUTPUT:

You might also like