Tag Archives: animating

Keyframe animation in Maya

This tutorial video explains how to animate a shape in Maya using keyframe animation on the timeline.

Tip: To change the frame rate (frames per second) of your animation go to Maya > Preferences > Settings. Under ‘Working units‘, you can change the frame rate in the drop-down box next to Time. The default frame rate is Film (24fps).

Animating an image using JavaScript

This tutorial shows how to animate (move) an image across the screen. You can combine the code with other code from previous tutorials such as the one on timed image swapping to also get images to swap while they are moving (eg. you could use two images for a character with legs in different positions, so as the images swap it looks like the character is running).

You will need an image to use in your animation. Keep the image file in the same folder as your HTML file. In the sample code below, the image’s file name is image.png (a PNG image file). Start and stop buttons have also been added to start/stop the animation. This is what the animation will look like:

imageanimated

Refer to the comments in the code below to find out what is happening on each line.

<html>
<head>
<title>JavaScript Image Animation</title>
<script type="text/javascript">
<!--
var imgObj ;
var animate ;
function init(){
 imgObj = document.getElementById('myImage');
 imgObj.style.position= 'relative'; 
 imgObj.style.left = '0px'; 
}
function moveRight(){
 imgObj.style.left = parseInt(imgObj.style.left) + 5 + 'px'; // move from the left 5 pixels
 animate = setTimeout(moveRight,20); // call moveRight in 20 milliseconds
}
function stop(){
 clearTimeout(animate); // stops the animation
 // add imgObj.style.left = '0px'; if you want to reset the image back to the left side of screen
}
window.onload =init; // starts animation when page loads
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="image.png" width="100" height="100"/>
<p>Click the buttons below to start and stop the animation.</p>
<input type="button" value="Play" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>
</html>

Next tutorial: Keyboard events in JavaScript

Simple animations using JavaScript

This tutorial explains how to use the HTML5 canvas element and JavaScript to animate a div in a webpage. Below is a preview of what the animation will look like. Scroll down to see the code.

animdiv

Refer to the comments in the code below to find out what is happening on each line.

<html>
<head>
<title>My animation</title>
<style type="text/css">
 
#animatedBox{
 /* simple box */
 position:absolute; /* The element is positioned relative to its first positioned (not static) ancestor element */
 top:30px; /* This is the position of the box from the top */
 width:200px; /* This is the width of the box */
 line-height:20px; /* This is the height of the box */
 background:#58FA82; /* This is the background colour of the box */
 border:1px solid #0B610B; /* This is the border thickness and border colour of the box */
 padding:10px; /* This is the padding amount around the text in the box */
 
 /* Hint: Get colour codes from http://html-color-codes.info/ */
}
 
</style>
<script type="text/javascript">
 
var box ; // create the variable we will use as the object to animate
 
function doMove() {
 box.style.left = parseInt(box.style.left)+1+'px'; // parseInt parses a string and returns an integer, moves 1 pixel from left
 setTimeout(doMove,20); // call doMove in 20 milliseconds
}
 
function init() {
 box = document.getElementById('animatedBox'); // get the "box" object
 box.style.left = '0px'; // set its initial position to 0px
 doMove(); // call the doMove function to start animating!
}
 
 
window.onload = init; // load the init function when the page loads
 
</script>
</head>
 
<body>
 
<div id="animatedBox">
 <b>My animation</b>
</div>
 
</body>
</html>

Next tutorial: Animating (moving) an image using JavaScript

How to create a motion tween effect in Adobe Flash CS6

This video tutorial explains how to animate/move an object such as a soccer ball or a character in Adobe Flash CS6. This effect is called motion tweening (short for in-betweening, where frames are inserted in between two keyframes). You can view the video below or on YouTube by clicking here.