The Visual Lounge lets you find out about TechSmith behind-the-scenes. Watch screencasts and videos from other customers, meet up with your fellow TechSmith users and staff, and get more tips and tricks!

It's Thursday and that means it's time for another Dev Corner post. This week one of our Camtasia Studio software engineers, Kevin Mojek, shares a couple ideas he experimented with for Camtasia Studio 7's sketch motion callouts. Enjoy!

With Camtasia Studio 7, we introduced sketch motion callouts and updated most of the others to use path-based shapes. For the sketch motion callouts, the path is the callout... it's gradually drawn in by default to mimic the way a person might draw the shape. For the other callouts, the use of paths is not as obvious. As a result of the switch, we were able to make the default shading look nicer and allow some limited adjustment of the shapes; but other than that, it's not immediately obvious that the image-based callouts have been replaced by shapes. I spent a little time looking into how else we could use the path data for non-sketch motion callouts. I came up with a couple of ideas.

The first thing I tried out was animating the border-drawing and then fading in the fill. This was simple to implement and doesn't seem to slow things down too much. But unlike the sketch motion callouts, there's not really an obvious way a person might 'draw' a non-sketch motion callout, so it's debatable whether this adds visual interest or is just annoying:

Another possibility might be blending from one shape to another. When one callout is immediately followed by another, it might be nice to transition between the two, or it might be nice to have a callout that slowly cycles between two shapes. This is easy to do if we temporarily switch from the 'real' shapes to a less accurate piecewise-linear representation. With this code, things started to slow down. Calculating the intermediate shapes on-the-fly was too slow, so I pre-calculated and cached them... 100 intermediate shapes is likely excessive for a short animation though. To do this, I used Qt's QPointF class with linear interpolation between the points.

 for ( int i = 0; i < 100; ++i )
{
  qreal t   = 0.01 * i;
  qreal t_1 = 1 - t;
  for ( int ii = 0; ii <= 400; ++ii )
  {
    qreal step = 0.0025 * ii;
    QPointF p1( m_p1.pointAtPercent( step ) );
    QPointF p2( m_p2.pointAtPercent( step ) );
    QPointF p( t * p1 + t_1 * p2 );
    if ( ii )
      m_paths[i].lineTo( p );
    else
      m_paths[i].moveTo( p );
  }
}
 

Finally, since path data for fonts is readily available, I tried doing the same thing for a few of those shapes.

Kevin Mojek has worked for TechSmith since 2008 as a software engineer on Camtasia Studio. Prior to joining TechSmith, he graduated from Michigan State University with a degree in electrical engineering and worked in the auto industry developing customizations and extensions to computer-aided-design software.