Minor demo improvements

lannymcnie · lannymcnie · commit e10a583bfdcd · 2017-09-18T10:10:08.000-06:00
diff --git a/examples/04_SoundTween.html b/examples/04_SoundTween.html
@@ -14,7 +14,7 @@
 <header  class="SoundJS">
 	<h1>Sound Tween</h1>
 
-	<p>This example shows how to tween volume and pan. Note that HTML audio does not support panning.</p>
+	<p>This example shows how to tween volume and pan. <b>Note that HTML audio does not support panning</b>.</p>
 </header>
 
 <div class="content" id="content">
@@ -129,29 +129,33 @@ <h2>Sorry!</h2>
 
 	function initSoundTween() {
 		setMessage("Volume Down: 0.0");
-		tween = createjs.Tween.get(soundInstance, {loop: true})
+		tween = createjs.Tween.get(soundInstance, {loop: true, onChange:handleSoundChange})
 				.to({volume: 0.0}, 3 * baseTime)
-				.wait(baseTime).call(setMessage, ["Volume Up: 0.5"])
+				.wait(baseTime)
 				.to({volume: 0.5}, 3 * baseTime)
-				.wait(baseTime).call(setMessage, ["Volume Up: 1.0"])
+				.wait(baseTime)
 				.to({volume: 1.0}, 3 * baseTime)
-				.wait(baseTime).call(setMessage, ["Volume Down: 0.5"])
+				.wait(baseTime)
 				.to({volume: 0.5}, 3 * baseTime)
-				.wait(baseTime).call(setMessage, ["Pan Right: 1.0"])
+				.wait(baseTime)
 				.to({pan: 1}, 3 * baseTime)
-				.wait(baseTime).call(setMessage, ["Pan Center: 0.0"])
+				.wait(baseTime)
 				.to({pan: 0}, 3 * baseTime)
-				.wait(baseTime).call(setMessage, ["Pan Left: -1.0"])
+				.wait(baseTime)
 				.to({pan: -1}, 3 * baseTime)
-				.wait(baseTime).call(setMessage, ["Pan Center: 0.0"])
+				.wait(baseTime)
 				.to({pan: 0}, 3 * baseTime)
-				.wait(baseTime).call(setMessage, ["Volume Down: 0.0, Pan Left: -1.0"])
+				.wait(baseTime)
 				.to({pan: -1, volume: 0.0}, 3 * baseTime)
-				.wait(baseTime).call(setMessage, ["Volume Up: 1.0, Pan Right: 1.0"])
+				.wait(baseTime)
 				.to({pan: 1, volume: 1}, 6 * baseTime)
-				.wait(baseTime).call(setMessage, ["Volume Down: 0.5, Pan Center: 0.0"])
+				.wait(baseTime)
 				.to({pan: 0, volume: 0.5}, 3 * baseTime)
-				.wait(baseTime).call(setMessage, ["Volume Down: 0.0"]);
+				.wait(baseTime)
+	}
+
+	function handleSoundChange() {
+        setMessage("<b>Volume Up:" + soundInstance.volume.toFixed(2) +" Pan Right:" + soundInstance.pan.toFixed(2)) + "</b>";
 	}
 
 	function setMessage(message) {
diff --git a/examples/05_AudioSprite.html b/examples/05_AudioSprite.html
@@ -33,6 +33,21 @@ <h2>Sorry!</h2>
 <!-- We also provide hosted minified versions of all CreateJS libraries.
 	http://code.createjs.com -->
 
+<style>
+	.red {
+		color:red;
+		font-size:large;
+	}
+	.blue {
+		color:#0b93d5;
+		font-size:small;
+	}
+	.orange {
+		color:orange;
+		font-size:xx-large;
+
+	}
+</style>
 <script id="editable">
 	var displayMessage;		// the HTML element we use to display messages to the user
 
@@ -95,7 +110,11 @@ <h2>Sorry!</h2>
 					return;
 				}
 
-				this.sprite = ["pew", "hit", "explode"];	// this code is not needed for sprites, it is used for the looping effect
+				this.sprite = [
+				    {id:"pew", class:"blue"},
+					{id:"hit", class:"red"},
+					{id:"explode", class:"orange"}
+				];	// this code is not needed for sprites, it is used for the looping effect
 				var assetsPath = "../_assets/audio/";
 				var sounds = [
 					// This is an audio sprite.  The sprite property tells SoundJS what ids to use for playback, with time to start playback and length of playback
@@ -133,15 +152,18 @@ <h2>Sorry!</h2>
 				this.currentStep = 0;
 				this.loops = Math.floor((Math.random() * this.MAX_LOOPS));	// random between 0 and MAX_LOOPS -1
 
-				this.soundInstance = createjs.Sound.play(this.sprite[this.currentStep], {loop: this.loops});
+				var spriteData = this.sprite[this.currentStep];
+
+				this.soundInstance = createjs.Sound.play(spriteData.id, {loop: this.loops});
 				this.soundInstance.addEventListener("loop", this.loopProxy);
 				this.soundInstance.addEventListener("complete", createjs.proxy(this.nextAudioRelay, this));
-				this.displayStatus.innerHTML = this.sprite[this.currentStep];
+				this.displayStatus.innerHTML = '<div class='+spriteData.class+'>'+spriteData.id+'</div>';
 			},
 
 			// update display text
 			handleLoop: function () {
-				this.displayStatus.innerHTML = this.displayStatus.innerHTML + " " + this.sprite[this.currentStep];
+			    var spriteData = this.sprite[this.currentStep];
+				this.displayStatus.innerHTML = this.displayStatus.innerHTML + " " + '<div id="effect" class='+spriteData.class+'>'+spriteData.id+'</div>';
 			},
 
 			// kick off delayed next step of audio loop
@@ -152,16 +174,19 @@ <h2>Sorry!</h2>
 
 			delayedNextAudio: function () {
 				this.currentStep++;
-				this.soundInstance = createjs.Sound.play(this.sprite[this.currentStep], {loop: this.loops});
+
+				var spriteData = this.sprite[this.currentStep];
+
+				this.soundInstance = createjs.Sound.play(spriteData.id, {loop: this.loops});
 				this.soundInstance.addEventListener("loop", this.loopProxy);
 				this.soundInstance.addEventListener("complete", createjs.proxy(this.handleFinalAudio, this));
-				this.displayStatus.innerHTML = this.sprite[this.currentStep];
+				this.displayStatus.innerHTML = '<div class='+spriteData.class+'>'+spriteData.id+'</div>';
 			},
 
 			// final step of audio loop
 			handleFinalAudio: function () {
 				this.currentStep++;
-				this.soundInstance = createjs.Sound.play(this.sprite[this.currentStep]);
+				this.soundInstance = createjs.Sound.play(this.sprite[this.currentStep].id);
 				this.soundInstance.addEventListener("complete", createjs.proxy(this.nextAudioRelay, this));
 				this.handleLoop();
 
