metamaps--metamaps/app/assets/javascripts/librariesForAllPages/soundmanagerv297a-20131201/demo/animation-2a/index.html

361 lines
8.7 KiB
HTML
Executable file

<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, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
}
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>