Archive

Posts Tagged ‘AS3 code’

Text Along Spline Code Part I

October 20, 2008 4 comments

Although this work is not finished, I don’t have time to write a full TechNote on the subject, so I’m going to post the ‘basic’ code for this algorithm and deconstruct it over several posts.  This will provide an introduction to the method before it gets too complicated with production details.  The Flex driver is not yet ready for general posting and download, so here is the code from the handler that renders the text along the spline.  It is currently a two-pass algorithm,

__spline.draw(1.0);

__myText = __input__.text;

// first pass - get total width of displayed text (using
// uniform spacing - punctuation taken into account later)
var totalWidth:Number = 0;
for( var i:uint=0; i<__myText.length; ++i )
{
  var tf:TextField = __createLetter(__myText.charAt(i));
  totalWidth      += tf.textWidth + __tracking;
  __letters[i]     = tf;
}

var arcLength:Number = __spline.arcLength();
var aInverse:Number  = 1/arcLength;
var maxS:Number      = totalWidth*aInverse;

// second pass - place text along spline
var s:Number              = 0;
var m:Number              = -1;
var endX:Number           = __spline.getX(1);
var endY:Number           = __spline.getY(1);
var cacheRotation:Boolean = true;
var rotation:Number       = 0;

for( i=0; i<__myText.length; ++i )
{
  tf = __letters[i];

  if( s <= 1 )
  {
    var myX:Number = __spline.getX(s);
    var myY:Number = __spline.getY(s);
    if( s < 0.95 )
    {
      var dX:Number  = __spline.getX(s+0.05) - myX;
      var dY:Number  = __spline.getY(s+0.05) - myY;
    }
    else
    {
      dX = endX - __spline.getX(0.94);
      dY = endY - __spline.getY(0.94);
    }

    // normalize
    var d:Number  = Math.sqrt(dX*dX + dY*dY);
    var uX:Number = dX/d;
    var uY:Number = dY/d;

    tf.rotation         = Math.atan2(dY, dX)*Consts.RAD_TO_DEG;
    var myWidth:Number  = tf.textWidth;
    var myHeight:Number = tf.textHeight;

    tf.x = myX + myHeight*uY;
    tf.y = myY - myHeight*uX;
  }
  else
  {
    // text extends beyond end of spline - slope estimate towards
    // end of spline to continue along in a straight line
    if( cacheRotation )
    {
      dX            = endX - __spline.getX(0.92);
      dY            = endY - __spline.getY(0.92);
      d             = Math.sqrt(dX*dX + dY*dY);
      uX            = dX/d;
      uY            = dY/d;
      rotation      = Math.atan2(dY, dX)*Consts.RAD_TO_DEG;
      cacheRotation = false;
    }

    tf.rotation  = rotation;
    myWidth      = tf.textWidth;
    myHeight     = tf.textHeight;

    // distance along line from end of of spline to current
    // text starting position
    d    = (s-1)*arcLength;
    myX  = endX + d*uX;
    myY  = endY + d*uY;
    tf.x = myX + uY*myHeight;
    tf.y = myY - uX*myHeight;
  }

  _textContainer.addChild(tf);
  s += (myWidth + __tracking)*aInverse;
}

Flash and Math

October 17, 2008 Comments off

I’m occasionally asked about resources for learning Math that use Flash, especially those oriented towards the upper high school and college level.  One of my favorite resource sites is Flash and Math.  Some sites use Flash for instruction.  Some sites offer tutorials.  Flash and Math has a nice mathlets section as well as a tutorials section that offers source code through MathDL.