Bits & Bytes

Posts Tagged ‘animation’

Creating a Simple Javascript Animation Using Recursion

The animation that we create in this example is a simple progress bar. Above, you can see a light gray rectangle with a darker gray rectangle inside it. The darker gray bar is the progress bar that moves from left to right across the screen.

The code for this animation is below. You can copy code into an empty file with a .html extension or just download the HTML file using this link. Just right-click that link and left-click “Save Link As…” and select a location to save it to. Then double-click the file to open it with a browser.

As you can see in the code below, we define two styles: animbkgd and animbar. These are used to create div elements for the background and the progress bar, respectively. The div elements are created inside the body tag near the bottom of the file.

At the bottom of the head section, we have script tags to define the Javascript code section. We begin by defining three variables: qpBkdg, qpBar, and iWidth. The first two are used to refer to background and progress bar div sections and are set inside the Initialize() function. The third variable keeps track of the width of the progress bar.

The animation is started after the page is loaded with code

window.onload = Initialize;

that sets the Initialize() function to be the callback function for when the page loads.

When Initialize() is called, is initializes the two variables and then calls the animation loop function Loop(). The Loop() function updates the width variables and then sets itself to be called again in 20 milliseconds. That is the effect of the call

setTimeout(Loop,20);

The setTimeout() function calls a function after a specified period of time. Here, it is set to call Loop() after 20 milliseconds. So, the code creates a recursive loop where Loop() is called every 20 milliseconds to create the animation.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>XoaX.net's Javascript Recusive Animation Example</title>

<style type="text/css">
#animbkgd {
    position:absolute;
    width: 480px;
    height: 50px;
    background:#aaaaaa;
    margin: 30px;
}

#animbar {
    position:absolute;
    width: 0px;
    height: 20px;
    background:#000000;
    left: 0px;
    top: 20px;
}
</style>

<script type="text/javascript">
/*<![CDATA[*/
var qpBkdg = null;
var qpBar = null;
var iWidth = 0;

function Loop() {
    qpBar.style.width = iWidth+'px';
    iWidth = ((iWidth + 1) % 480);
    setTimeout(Loop,20);
}

function Initialize() {
    qpBkdg = document.getElementById('animbkgd');
    qpBar = document.getElementById('animbar');
    Loop();
}

window.onload = Initialize;
/*]]>*/
</script>
</head>

<body>

<div id="animbkgd">
    <div id="animbar">
    </div>
</div>

</body>
</html>

Creating a 3D Animation in Actionscript 3.0

In this example, I create a 3D box with a ball bouncing around inside it. To do this, I create an animation using the ENTER_FRAME event that I used in the previous animation. The entire program is below at the end of this post.

The first line of code sets the callback for each frame of animation via a call to addEventListener() with ENTER_FRAME as the event and the function NextFrame() as the callback. After this, we use the stage’s graphics object to paint the entire screen black; this will be the background.

The next four sections of code each draw a rectangle in various shades of red and rotate them to make them to be perpendicular to the view. These are the four sides of our box. They are assigned a z-value of 25 to move them slightly away from the view plane at z = 0. Finally, the back to the box is created at z = 325 with a “XoaX.net” logo Bitmap. The dimensions of the box are 320x240x300.

After the walls of the box are created, we have three sets of variables for each dimension of movement for the ball inside the box. After this, we have Bitmap that represents the ball. This ball will be moved around by our animation callback function. Lastly, we have the callback function, which reflects the ball in each coordinate, similar to what we did in the last animation with the x-coordinate. Using these reflections, we get a ball that bounces around the box as we see in window above. Note that the projection is created via the default perspective projection, which we have not discussed yet.

addEventListener(Event.ENTER_FRAME, NextFrame);

// Paint the stage black 
var uiColorBack:uint = 0x00000000;
graphics.beginFill(uiColorBack);
    graphics.drawRect(0, 0, 320, 240);
graphics.endFill();

// Top
// Create rect for sprite and add to stage
var qTop:Sprite = new Sprite();
var uiColor:uint = 0x00900000;
qTop.graphics.beginFill(uiColor);
    qTop.graphics.drawRect(0, 0, 320, 300);
qTop.graphics.endFill();
qTop.rotationX = 90;
qTop.z = 25;
addChild(qTop);

// Left
var qLeft:Sprite = new Sprite();
var uiColor2:uint = 0x00B00000;
qLeft.graphics.beginFill(uiColor2);
    qLeft.graphics.drawRect(0, 0, 300, 240);
qLeft.graphics.endFill();
qLeft.rotationY = -90;
qLeft.z = 25;
addChild(qLeft);

// Right
var qRight:Sprite = new Sprite();
var uiColor3:uint = 0x00D00000;
qRight.graphics.beginFill(uiColor3);
    qRight.graphics.drawRect(0, 0, 300, 240);
qRight.graphics.endFill();
qRight.rotationY = -90;
qRight.x = 320;
qRight.z = 25;
addChild(qRight);

// Bottom
var qBottom:Sprite = new Sprite();
var uiColor4:uint = 0x00F00000;
qBottom.graphics.beginFill(uiColor4);
    qBottom.graphics.drawRect(0, 0, 320, 300);
qBottom.graphics.endFill();
qBottom.rotationX = 90;
qBottom.y = 240;
qBottom.z = 25;
addChild(qBottom);

// Back
// Use a logo image to create a bitmap
var qLogo:Bitmap = new Bitmap(new Logo(320, 240), "never", true);
qLogo.z = 325;
addChild(qLogo);

// Variables for motion control
var uiX:uint = 0;
var uiDeltaX:uint = 4;
var kuiMaxX:uint = 260;

var uiY:uint = 0;
var uiDeltaY:uint = 3;
var kuiMaxY:uint = 180;

var uiZ:uint = 0;
var uiDeltaZ:uint = 3;
var kuiMaxZ:uint = 240;

// Use a ball image to create a bitmap
var qBall:Bitmap = new Bitmap(new Ball(60, 60), "never", true);
addChild(qBall);

// Animation callback
function NextFrame(e:Event) : void {
	uiX = ((uiX + uiDeltaX) % (kuiMaxX + 1));
	qBall.x = uiX;
	if (uiX == kuiMaxX || uiX == 0) {
		uiDeltaX = (kuiMaxX - uiDeltaX);
	}
	
	uiY = ((uiY + uiDeltaY) % (kuiMaxY + 1));
	qBall.y = uiY;
	if (uiY == kuiMaxY || uiY == 0) {
		uiDeltaY = (kuiMaxY - uiDeltaY);
	}
	
	uiZ = ((uiZ + uiDeltaZ) % (kuiMaxZ + 1));
	qBall.z = uiZ + 30 + 25;
	if (uiZ == kuiMaxZ || uiZ == 0) {
		uiDeltaZ = (kuiMaxZ - uiDeltaZ);
	}
}

Creating a Simple Animation in Actionscript 3.0

In this example, I create a red rectangle the moves back and forth across the screen. The primary purpose of this example is to show how to create a callback function for animation. So, I will not bother to explain too much about the coordinate calculations that are used for motion.

To create an animation, I could use a Timer object to set an time interval for the animation speed. However, it is better to use the frame rate of the application for controlling the animation. In this manner, the speed of the animation can be altered via the “Properties” window, and should be set to a level that is appropriate for the complexity of the program. The typical setting that is currently used for Flash is 24 frames per second. In order to set a callback that is called every frame, we can use the event ENTER_FRAME, as shown below.

addEventListener(Event.ENTER_FRAME, NextFrame);

// Create rect for sprite and add to stage
var qRect:Sprite = new Sprite();
var uiColor:uint = 0x00c00000;
qRect.graphics.beginFill(uiColor);
    qRect.graphics.drawRect(0, 0, 100, 75);
qRect.graphics.endFill();
addChild(qRect);

// Variables for motion control
var uiX:uint = 0;
var uiDeltaX:uint = 4;
var kuiMaxX:uint = 220;

// Animation callback
function NextFrame(e:Event) : void {
	uiX = ((uiX + uiDeltaX) % (kuiMaxX + 1));
	qRect.x = uiX;
	if (uiX == kuiMaxX || uiX == 0) {
		uiDeltaX = (kuiMaxX - uiDeltaX);
	}
}

Here, we have the code to move a rectangle back and forth across the screen. The first line of code sets the function NextFrame() as a callback that responds to the event that is generated at the start of a frame. After this, we have some code that creates a Sprite, draws a red rectangle on it, and adds the Sprite to the stage so that it will be displayed. In the next, three lines, we initialize the variables that will control the motion of the rectangle. Finally, we define the callback function, NextFrame(), which may seem confusing. We want to focus on the fact that this function sets the x-coordinate of the Sprite, qRect.x, to control the motion, while the rest of the code is just used for calculating the value of x.