This tutorial shows you how to add a fade effect to the basic clock in Clock.
In this tutorial, I won't rewrite things in the code segments, so assume you are just continung on. And, if you find an easier way to do this, don't hesitate to tell me.

  You can re-use most of the code from Clock, but this time, use 2 different text nodes, because the fade will toggle between the two. DEF both the Text nodes so that you can manipulate their string field, and also DEF their material node, so you can change their transparency.

  To successfully complete this tutorial, you have to understand what it is doing. Once a second, the script is called by the TimeSensor. The script checks to see which text is to fade out, and which is to fade in. This value is stored in the BOOLEAN toggle field/variable. It updates the transparent text with the new time, then tells the two ScalarInterpolators, each being solely responsible for their text, to fade out, or fade in, depending on the position of the toggle. Lastly, it swithing the toggle so that the next time the script is called (in roughly a second), when the text's have finished fading in the last call, it knows which one's turn it is.

Set up the file with 2 text nodes this time, and DEF their material.

#VRML V2.0 utf8 NavigationInfo {
  type "NONE"
}
Shape {
  geometry DEF time1 Text {
      fontStyle FontStyle {
      justify "MIDDLE"
      size 2.8
    }
  }
  appearance Appearance {
    material DEF time1material Material {}
  }
}
Shape {
  geometry DEF time2 Text {
      fontStyle FontStyle {
      justify "MIDDLE"
      size 2.8
    }
  }
  appearance Appearance {
    material DEF time2material Material {}
  }
}

Now, use a timesensor to tell the script to update.

DEF count TimeSensor {
  loop TRUE
  cycleInterval 1
}

There will be a scalar interpolator node for each text. They will handle the transparency. They do not need a starting keyValue, because the Script will assign them one.

DEF text1 ScalarInterpolator{
  key [ 0, 1 ]
}
DEF text2 ScalarInterpolator{
  key [ 0, 1 ]
}

  Next, make a TimeSensor node. It will be in charge of calling the script node every 1 second for updating. Sounds simple enough. Make sure you DEF it, because you will have to ROUTE its output later.

DEF count TimeSensor {
  loop TRUE
  cycleInterval 1
}

  Now that the text node is ready, make the script node. You do not need to DEF the script node or give it any eventIn's because it will not be receiveing any information. Also, it is best to give the script node direct access to the exposedField's of the "time" node. To do this, use the directOutput TRUE property and reference the field to the "time" node in the script.
  Now, for the function. Make a clock function, it will be in charge of all of the processing.
And BTW, I use 0.7 as full transparency in stead of 1 because it makes the fade look really smooth.

DEF timeScript Script {
  eventIn SFTime clock
  directOutput TRUE
  field SFNode timeOut1 USE time1
  field SFNode timeOut2 USE time2
  field SFNode transOut1 USE text1
  field SFNode transOut2 USE text2
  field SFBool toggle TRUE
   url "javascript:
    function clock(){
    var Digital=new Date()
    var hours=Digital.getHours()
    var minutes=Digital.getMinutes()
    var seconds=Digital.getSeconds()
    var ending='AM'
    if (hours>12){
      ending='PM'
      hours=hours-12
    }
    if (hours==0)
      hours=12
    if (minutes<=9)
      minutes='0'+minutes
    if (seconds<=9)
      seconds='0'+seconds
    var ctime=hours+':'+minutes+':'+seconds+' '+ending
    textString = new MFString();
    textString[0] = ctime
    if (toggle){
      transOut1.set_keyValue[0]=0.7
      transOut1.set_keyValue[1]=0
      transOut2.set_keyValue[0]=0
      transOut2.set_keyValue[1]=0.7
      timeOut1.set_string = textString;
      toggle=FALSE
    }
    else {
      transOut1.set_keyValue[0]=0
      transOut1.set_keyValue[1]=0.7
      transOut2.set_keyValue[0]=0.7
      transOut2.set_keyValue[1]=0
      timeOut2.set_string = textString;
      toggle=TRUE
    }
  }
"
}

  Route up everything that ins't directly changed by the script, and now you have a working clock that fades.

ROUTE count.cycleTime TO timeScript.clock
ROUTE count.fraction_changed TO text1.set_fraction
ROUTE count.fraction_changed TO text2.set_fraction
ROUTE text1.value_changed TO time1material.set_transparency
ROUTE text2.value_changed TO time2material.set_transparency

And there you have it. [ View The Source ] [ View The World ]