Bits & Bytes

Posts Tagged ‘flash’

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.

Creating a Timed Callback Function in Actionscript 3.0

Below, we have an example program, which creates a timer callback function. This program draws a circle that flashes in the middle of the screen at a rate that is specified by the timer that we create. The code sets a timer to call a function that, alternatively, adds and removes a circle from the objects that are to be displayed.

The first three lines of active code initialize the Timer. The first line creates an instance of a Timer that creates a TIMER event every 1000 milliseconds, which equals 1 second. The second line sets the function FlashCircle() to get called every time a TIMER event occurs. The third line starts the Timer so that it generates events every second.

// Create a 1 second timer
var qMyTimer:Timer = new Timer(1000);
qMyTimer.addEventListener(TimerEvent.TIMER, FlashCircle);
qMyTimer.start();

var bDrawCircle:Boolean = true;

// Create a sprite with a circle drawn on it.
var qCircle:Sprite = new Sprite();
var uiColor:uint = 0x00800000;
qCircle.graphics.beginFill(uiColor);
    qCircle.graphics.drawCircle(160, 120, 100);
qCircle.graphics.endFill();

function FlashCircle(e:TimerEvent):void {
    // Add or remove the circle from the stage
    if (bDrawCircle) {
        addChild(qCircle);
    } else {
        removeChild(qCircle);
    }
    // Alternate the drawing
    bDrawCircle = !bDrawCircle;
}

Once the timer is initialized, we have a Boolean, bDrawCircle, that is used to toggle the display of the circle. Below this, we create a Sprite and draw a dark red circle on it. The circle is located at (160, 120) and has a radius of 100.

Finally, we have the callback function FlashCircle(). This function is called every second via a TIMER event. Inside the function, we add or remove the Sprite with the circle drawn on it from the list of items to be displayed. The last line reverses the value of the Boolean, bDrawCircle, to alternate it value between true and false and toggle the drawing of qCircle.

var qMyTimer:Timer = new Timer(1000, 3);

The timer in the program runs continuously. We could set the second argument in the constructor to 3, as shown in the line above. With this constructor call, the timer only runs 3 seconds and generates 3 events. When we don’t specify a second argument, the default value of 0 is used, which sets the timer to run indefinitely.

When we have a finite number of events coming from the timer, we can set an event callback to run when the timer is completely finished. The event TimerEvent.TIMER_COMPLETE can be used instead of TimerEvent.TIMER for a callback that runs when the timer is completely finished.

Categories

Recent Posts

Bits & Bytes

Posts Tagged ‘flash’

Creating a 3D Animation in Actionscript 3.0

Creating a Simple Animation in Actionscript 3.0

Creating a Timed Callback Function in Actionscript 3.0