Bits & Bytes

Posts Tagged ‘loop’

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>

Looping Music or Sounds in Actionscript 3.0

For the second example, we demonstrate how to loop a music file using a separate class file. We start with the sound file “XoaxTheme.mp3” in our project and its associated class, XoaxTheme, that we had from our previous post.

To begin, we add an ActionScript code file to the project by selecting File->New from the menubar. This opens the “New Document” dialog shown below, where we left-click “ActionScript File” to select it and left-click the “OK” button to create a new code file.

Next, we paste this code into the new file:

package {

    import flash.media.SoundChannel;
    import flash.events.Event;
	
    public class CMyClass {
		
        var mqMusic:XoaxTheme;
        var mqSoundChannel:SoundChannel;

        public function CMyClass() {
            mqMusic = new XoaxTheme();
        }
		
        public function StartMusic(e:Event):void {
            mqSoundChannel = mqMusic.play();
            mqSoundChannel.addEventListener(Event.SOUND_COMPLETE,
                StartMusic);
        }
    }
}

and then change the code in the main code file to this:

var qMyClass:CMyClass = new CMyClass();
qMyClass.StartMusic(null);

The new code file needs to be saved. So, we select File->Save As… from the menubar and save the file as “CMyClass.as” in the project folder. Finally, we can compile and execute the code, and it will play the music repeatedly.

Let’s review the code above. In our class file, we use an unnamed package and import the SoundChannel and Event files. Inside the class, we have two members: mqMusic and mqSoundChannel, which are used to control the music. The class XoaxTheme is the sound class that we created in the library. We instantiate this class in the constructor.

The function StartMusic() does all of the real work in the program. When we call play(), the music starts playing and a SoundChannel object is created and returned. The SoundChannel controls the sound as it plays. We register a SOUND_COMPLETE event on the SoundChannel to call the function StartMusic() recursively when the music finishes playing. In this manner, we create the loop for repeatedly playing the music.

In the main program, we create an instance of a CMyClass object and then call StartMusic() on it to begin the music loop.

Categories

Recent Posts

Bits & Bytes

Posts Tagged ‘loop’

Creating a Simple Javascript Animation Using Recursion

Looping Music or Sounds in Actionscript 3.0