<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 { letter-spacing:-1px; /* zomg web x.0! ;) */ } 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].id; 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; _id('overlay').onmouseup = this.mouseup; document.onmousemove = this.mousemove; } var cursor = null; var sounds = []; 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.setup({ preferFlash: true, flashVersion: 9, url: '../../swf/', useHighPerformance: true, wmode: 'transparent', debugMode: false, onready: 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>