2011-02-13 12:28:40 +00:00
< html >
< head >
< title > SoundManager Demo< / title >
< meta name = "robots" content = "noindex" / >
< style type = "text/css" >
html, body {
margin:0px;
padding:0px;
}
body {
color:#fff;
font-size:75%;
text-shadow:0 0 0 #fff; /* Safari nonsense */
font-family:verdana,arial,tahoma,"sans serif";
}
h1, h2, h3 {
font:300 3em "Helvetica Neue",georgia,"times new roman","Arial Rounded MT Bold",helvetica,verdana,tahoma,arial,"sans serif";
font-weight:normal;
margin-bottom:0px;
}
h1 {
margin-top:0px;
}
h1, h2 {
2011-12-19 20:46:06 +00:00
letter-spacing:-1px; /* zomg web x.0! ;) */
2011-02-13 12:28:40 +00:00
}
h2 {
font-size:2em;
margin-top:0px;
color:#fff;
}
h2 span {
text-indent:1em;
font-family:verdana,tahoma,arial;
font-size:small;
}
p {
position:absolute;
left:1em;
bottom:0px;
font-size:x-small;
opacity:0.5;
}
#instructions {
position:absolute;
left:1em;
top:0px;
}
#canvas {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
overflow:hidden;
}
#horizon {
position:relative;
height:50%;
background:transparent url(bg-sky.png) 0px 0px repeat-x;
}
#land {
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:50%;
border-top:1px solid #339933;
margin-bottom:0px;
background:#669966 url(bg-land.png) 0px 0px repeat-x;
}
#content {
position:relative;
border-top:1px solid #ccc;
}
#cursor-shade {
position:absolute;
left:-100px;
top:-100px;
margin:0px 0px 0px -2px;
width:20px;
height:24px;
opacity:0.75;
}
#sun {
position:absolute;
top:50%;
width:100%;
height:128px;
margin-top:-66px;
background:transparent url(sun-test.png) 50% 0px no-repeat;
display:none;
}
.dot {
position:absolute;
width:32px;
height:32px;
}
#overlay {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
cursor:url(cursor-11.cur),default;
}
< / style >
< script type = "text/javascript" src = "../../script/soundmanager2-nodebug-jsmin.js" > < / script >
< script type = "text/javascript" >
function _id(sID) {return document.getElementById(sID);}
function Cursor() {
var self = this;
this.o = null;
this.offX = 20;
this.offY = 40;
this.screenX = null;
this.screenY = null;
this.screenXHalf = null;
this.screenYHalf = null;
this.lastCursor = null;
this.cursorRange = 9;
this.oDots = _id('dots');
this.painting = 0;
this.sounds = [];
this.soundIndex = 0;
this.soundTimer = null;
this.oDot = document.createElement('img');
this.oDot.className = 'dot';
this.oDot.src = 'dot.png';
this.refreshCoords = function() {
self.screenX = (window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth);
self.screenY = (window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight);
self.screenXHalf = parseInt(self.screenX/2);
self.screenYHalf = parseInt(self.screenY/2);
}
this.mousedown = function(e) {
self.painting = true;
return false;
}
this.mouseup = function(e) {
self.painting = false;
return false;
}
this.mousemove = function(e) {
var evt = e?e:event;
var x = evt.clientX;
var y = evt.clientY;
var xHalf = self.screenXHalf;
var yHalf = self.screenYHalf;
var scaleX = (x>xHalf?(x-xHalf)/xHalf:-((xHalf-x)/xHalf));
var scaleY = (y>yHalf?(y-yHalf)/yHalf:0);
var xScale = (self.offX*scaleY)*scaleX;
var yScale = self.offY*scaleY;
var cursor = parseInt(self.cursorRange*scaleY);
if (cursor != self.lastCursor) {
var curString = 'cursor-'+(Math.min(11,cursor+3))+'.cur';
document.documentElement.style.cursor = 'url("'+curString+'"),default';
_id('overlay').style.cursor = 'url("'+curString+'"),default';
self.lastCursor = cursor;
}
var xDiff = (x+xScale);
self.o.style.left = (xDiff)+'px';
self.o.style.top = (y+yScale)+'px';
self.o.style.width = ((20*scaleY)+'px');
self.o.style.height = ((24*scaleY)+'px');
self.o.style.opacity = Math.max((scaleY-0.33),0.33);
if (self.painting & & scaleY>0) self.paint(x,y,scaleX,scaleY);
return false;
}
this.paint = function(x,y,scaleX,scaleY) {
var oD = self.oDot.cloneNode(false);
var size = 32*scaleY;
oD.style.left = (x-size)+'px';
oD.style.top = (y-size)+'px';
oD.style.width = (size+'px');
oD.style.height = (size+'px');
oD.style.opacity = Math.min(1,Math.max(scaleY*1.5,0.1));
self.oDots.appendChild(oD);
// var sID = self.sounds[0].sID;
if (!self.soundTimer) {
// self.soundTimer = window.setTimeout(function(){soundManager.play(sID,{volume:100*scaleY,pan:100*scaleX});self.soundTimer=null;},20);
self.sounds[Math.random()>0.5?1:0].play({pan:100*scaleX,volume:100*scaleY});
}
// if (self.soundIndex++>=self.sounds.length-1) self.soundIndex = 0;
}
this.createSounds = function() {
self.sounds[0] = soundManager.createSound('paint','../animation/audio/fingerplop.mp3');
self.sounds[1] = soundManager.createSound('paint2','../animation/audio/fingerplop2.mp3');
}
this.createSounds();
this.o = _id('cursor-shade');
this.refreshCoords();
window.onresize = this.refreshCoords;
_id('overlay').onmousedown = this.mousedown;
2011-12-19 20:46:06 +00:00
_id('overlay').onmouseup = this.mouseup;
2011-02-13 12:28:40 +00:00
document.onmousemove = this.mousemove;
}
var cursor = null;
var sounds = [];
soundManager.allowPolling = false;
function doEvil() {
// HIGHLY EXPERIMENTAL (and dangerous) optimation testing - attempting to override Flash's ExternalInterface JS. :D - The below may have only been relevant to Flash 8.
if (typeof window.__flash__argumentsToXML !== 'undefined') {
window.__flash__argumentsToXML = function(obj,index) {
var s = ["< arguments > "];
for (var i=index, j=obj.length; i< j ; i + + ) {
s[s.length] = __flash__toXML(obj[i]);
}
s[s.length] = "< / arguments > ";
// console.log('argumentsToXML: '+s.length+' items');
return s.join('');
}
window.__flash__arrayToXML = function(obj) {
var s = ["< array > "];
for (var i=0,j=obj.length; i< j ; i + + ) {
s[s.length] = "< property id = \"" + i + " \ " > " + __flash__toXML(obj[i]) + "< / property > ";
}
s[s.length] = "< / array > ";
// console.log('arrayToXML: '+s.length+' items');
return s.join('');
}
window.__flash__escapeXML = function(s) {
// console.log('escapeXML'); // '+s.length);
return s; // s.replace(/& /g, "& ").replace(/< /g, "< ").replace(/>/g, "> ").replace(/"/g, "" ").replace(/'/g, "' ");
}
window.__flash__objectToXML = function(obj) {
console.log('objectToXML');
var s = ["< object > "];
for (var prop in obj) {
s[s.length] = "< property id = \"" + prop + " \ " > " + __flash__toXML(obj[prop]) + "< / property > ";
}
s[s.length] = "< / object > ";
return s.join('');
}
window.__flash__toXML = function(value) {
// console.log('toXML');
var type = typeof(value);
if (type == "string") {
return "< string > " + __flash__escapeXML(value) + "< / string > ";
} else if (type == "undefined") {
return "< undefined / > ";
} else if (type == "number") {
return "< number > " + value + "< / number > ";
} else if (value == null) {
return "< null / > ";
} else if (type == "boolean") {
return value ? "< true / > " : "< false / > ";
} else if (value instanceof Date) {
return "< date > " + value.getTime() + "< / date > ";
} else if (value instanceof Array) {
return __flash__arrayToXML(value);
} else if (type == "object") {
return __flash__objectToXML(value);
} else {
return "< null / > "; //???
}
}
// this one non-IE, only?
if (!navigator.userAgent.match(/MSIE/i)) {
window.__flash__request.prototype = function(name) {
return "< invoke name = \"" + name + " \ " returntype = \"javascript\" > " + __flash__argumentstoXML(arguments, 1) + "< / invoke > ";
}
}
}
}
function doInit() {
doEvil(); // NOTE: highly experimental, only a performance test; probably doesn't apply to Flash 9, and/or does nothing, or bad things.
cursor = new Cursor();
}
soundManager.flashVersion = 9;
soundManager.url = '../../swf/';
soundManager.useHighPerformance = true;
soundManager.wmode = 'transparent';
soundManager.debugMode = false;
soundManager.onload = doInit;
< / script >
< / head >
< body >
< div >
< div id = "canvas" >
< div id = "horizon" > < / div >
< div id = "land" >
< div id = "content" >
< / div >
< / div >
< div id = "sun" > < / div >
< div id = "dots" > < / div >
< img id = "cursor-shade" src = "cursor-shadow.png" alt = "" / >
< / div >
< div id = "instructions" >
< h1 > SoundManager 2: JS/DOM + Sound Demo< / h1 >
< h2 > Heavy DOM manipulation + Javascript Sound < span > (see code for experimental ideas)< / code > < / h2 >
< / div >
< p > Click and drag to draw.. Noisily.< / p >
< div id = "overlay" > < / div >
< / div >
< / body >
< / html >
