362 lines
8.4 KiB
HTML
362 lines
8.4 KiB
HTML
|
<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>
|