Custom timing technique and optimization with setInterval

If you are making your logo that will be incorporated in many different flash games, or if you want to optimize your flash game or movie, setInterval function is your friend. Not only can you play your clips independent of the given frame rate, you also can optimize which objects on screen are more important so you can give them more processor time than unimportant ones. Let’s begin.

Imagine we made a logo and created a little animation method that dims our logo every frame so it disappears and reappears at different place. You would use this actionscript code.

initGame();

function initGame() {
	alphaDirection = false;
	attachMovie("logoMC","logo",1);
	// call every frame
	onEnterFrame = changeLogo;
}

// method for changing our logo
function changeLogo() {
	// change alpha value
	if(alphaDirection == false)
		logo._alpha -= 10;
	else
		logo._alpha += 10;
		
	// change position
	if(logo._alpha <= 0) {
		logo._x = Math.random()*(200 - logo._width);
		logo._y = Math.random()*(200 - logo._height);
		alphaDirection = !alphaDirection;
	} else if (logo._alpha >= 100)
		alphaDirection = !alphaDirection;
}

We want it to be visible just enough so the user can click on the logo (I used our ArtCode Games logo :).

But in the second example imagine developer used 60 fps so the user can’t click on the logo because it’s too fast. What to do then? Do we tell the developers at what fps to make their game? No the solution is in setInterval function.

What is this setInterval function?

intervalID = setInterval( method_to_execute, milliseconds );

Basically it works like execute method_to_execute every n milliseconds. It returns ID of the interval which we can remember or not. If we remember it we can remove this interval using clearInterval method.

clearInterval( intervalID );

And that is enough to fix our previous example. Using setInterval function we can separate display of our logo from frame rate or the game. The code goes like this.

initGame();

function initGame() {
	alphaDirection = false;
	attachMovie("logoMC","logo",1);
	// call every 40 milliseconds
	setInterval(changeLogo,40);
}

// method for changing our logo
function changeLogo() {
	// change alpha value
	if(alphaDirection == false)
		logo._alpha -= 10;
	else
		logo._alpha += 10;
		
	// change position
	if(logo._alpha <= 0) {
		logo._x = Math.random()*(200 - logo._width);
		logo._y = Math.random()*(200 - logo._height);
		alphaDirection = !alphaDirection;
	} else if (logo._alpha >= 100)
		alphaDirection = !alphaDirection;
}

If you check the frame rate it is the same as before, but the logo changes the same speed. That is because the function in both movies is called every 40 milliseconds, that is 25 times every second. So that means our logo constantly has frame rate of 25 fps.