Menu
Hi everybody, ?
for a fade effect of a vector element i wrote this little prototpye, that you will find in code at the end of this post. It is nearly complete and last only an error, as i suppose, in the settings for access of the methodes.
The methode for timing “tween()” has to be accessed from the outside once, so it has to be public and that is working fine. Second it has to call it self over and over to animate the fading, that is in fact not working at all, because the methode can’t find it self. The error console tells me that tween() is not a function. ?
Anybody got a clue what’s the error may be?
Greets ?
Jens
By the way, i would most appreciate hints on javascript sources that hold good description on oo programming.
[CODE]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Fading Test</title>
<style type=”text/css”>
h1 {color: rgb(125,125,125); background-color: rgb(255,255,255);}
</style>
<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript”>
Event.observe(window, ‘load’, function() {
var sRgb = new Array (125,125,125);
var tRgb = new Array (255,255,255);
Event.observe(‘button’, ‘click’, function() {
var nooo = new fadingVectorObject (sRgb, tRgb, ‘toFade’);
nooo.tween();
} );
} );
function fadingVectorObject (startColor, targetColor, id, steps, waitTime ) {
feedback(‘fadingVectorObject (startColor, targetColor, id, steps, time )’, ‘obj’);
var self = this;
this.startColor = startColor;
this.targetColor = targetColor;
this.id = id;
feedback(‘self(‘+self+’)’, ‘fix’);
feedback(‘startColor(‘+startColor+’)’, ‘input’);
feedback(‘targetColor(‘+targetColor+’)’, ‘input’);
feedback(‘id: ‘+id, ‘input’);
if(!steps) {
var steps = 25; feedback(‘steps: ‘+steps, ‘default’);
} else { this.steps = steps; feedback(‘steps: ‘+steps, ‘input’);
}
if(!time) {
var time = 28; feedback(‘time: ‘+time, ‘default’);
} else { this.time = waitTime; feedback(‘time: ‘+time, ‘input’);
}
var step = stepping();
feedback(‘step(‘+step+’)’, ‘proz’);
function stepping () {
feedback(‘fadingVectorObject.stepping ()’, ‘innerFunc’);
var diff = new Array (0,0,0);
var s = new Array (0,0,0);
for (var i=0; i < diff.length; i++) {
diff[i] = Math.abs(startColor[i]-targetColor[i]);
s[i] = diff[i] / steps;
}
return s;
}
var outputColor = new Array(0,0,0);
var betweenColor = startColor;
function nextStep () {
feedback(‘fadingVectorObject.nextStep ()’, ‘funcfunc’);
for(var i=0; i < startColor.length; i++) {
betweenColor[i] = betweenColor[i] + step[i];
outputColor[i] = Math.round(betweenColor[i]);
}
}
this.tween = function () {
feedback(‘fadingVectorObject.tween ()’, ‘func’);
s = steps;
nextStep();
dokument.getElementbyId(id).style.color = ‘rgb(‘+outputColor+’ )’;
feedback(‘tween() outputColor: ‘+’rgb(‘+outputColor+’ ) steps left:’+s, ‘ctrl’);
if (s != 0) {
s = s-1;
setTimeout(‘tween()’, 30);
}
}
}
function feedback(strMsg, format) {
var t = document.getElementById(“feedback”);
switch (format) {
case ‘func’:
t.innerHTML = t.innerHTML +
‘<h3 style=”color: green; color: green”>Call of function: ‘ +
‘<span style=”color:#50B450″>’ + strMsg + ‘</span></h3>’;
break;
case ‘funcfunc’:
t.innerHTML = t.innerHTML +
‘<h3 style=”color: green; padding-left: 0.8em; margin-top:1.6em ; color: green”>Function calls function: ‘ +
‘<span style=”color:#50B450″>’ + strMsg + ‘</span></h3>’;
break;
case ‘obj’:
t.innerHTML = t.innerHTML +
‘<h3 style=”color: green; color: green”>New Object: ‘ +
‘<span style=”color:#50B450″>’ + strMsg + ‘</span></h3>’;
break;
case ‘innerFunc’:
t.innerHTML = t.innerHTML +
‘<h3 style=”color: green; padding-left: 0.8em; margin-top:1.6em ; color: green”>Object calls function: ‘ +
‘<span style=”color:#50B450″>’ + strMsg + ‘</span></h3>’;
break;
case ‘input’:
t.innerHTML = t.innerHTML +
‘<p style=”color: #0c710c; padding-left: 1em; margin-bottom: -0.2em”> Input: ‘ +
‘<span style=”color:#229f22″>’ + strMsg + ‘</span></p>’;
break;
case ‘default’:
t.innerHTML = t.innerHTML +
‘<p style=”color: #0c710c; padding-left: 1em; margin-bottom: -0.2em”> default: ‘ +
‘<span style=”color:#229f22″>’ + strMsg + ‘</span></p>’;
break;
case ‘fix’:
t.innerHTML = t.innerHTML +
‘<p style=”color: #0c710c; padding-left: 1em; margin-bottom: -0.2em”> fix: ‘ +
‘<span style=”color:#229f22″>’ + strMsg + ‘</span></p>’;
break;
case ‘output’:
t.innerHTML = t.innerHTML +
‘<p style=”color: green; padding-left: 1em; margin-bottom: -0.2em”> Input: ‘ +
‘<span style=”color:#50B450″>’ + strMsg + ‘</span></p>’;
break;
case ‘proz’:
t.innerHTML = t.innerHTML +
‘<p style=”color: green; padding-left: 1em; margin-bottom: -0.2em”>prozessed: ‘ +
‘<span style=”color:#50B450″>’ + strMsg + ‘</span></p>’;
break;
case ‘ctrl’:
t.innerHTML = t.innerHTML +
‘<p style=”color: green; font-size: 0.8em; padding-left: 1em; margin-top: 2em; margin-bottom: -1.5em”>prozess control: ‘ +
‘<span style=”color:#50B450″>’ + strMsg + ‘</span></p>’;
break;
}
}
</script>
</head>
<body>
<h1 id=”toFade”>Uh Oh I’m fading… NOOOOOOOOO</h1>
<h2 id=”button”>Fade into nothing. Now!</h2>
<div id=”feedback”></div>
</body>
</html>