<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- saved from url=(0025)http://www.techsmith.com/ -->
<title>Created by Camtasia Studio 3</title>
<style>
a:link {font-size:small;text-decoration:none;padding-top:5px;padding-bottom:5px;padding-left:2px;padding-right:5px;color:black;display:block;margin-top:0px;margin-bottom:0px;}
a:visited {font-size:small;text-decoration:none;padding-top:5px;padding-bottom:5px;padding-left:2px;padding-right:5px;display:block;margin-top:0px;margin-bottom:0px;}
a:hover {
	font-size:small;
	text-decoration:none;
	padding-top:4px;padding-bottom:4px;padding-left:2px;padding-right:5px;	
	border-top:1px solid #666666;
	border-bottom:1px solid #666666;
	background-color:white;
	margin-top:0px;margin-bottom:0px;
}

a.notdisplayed:link {
      font-size: small;
      text-decoration: underline;
      padding: 3px; 
      border: 0;     
      display:inline
}

a.notdisplayed:visited{
      font-size: small;
      text-decoration: underline;
      padding: 3px; 
      border: 0;     
      display:inline
}


a.notdisplayed:hover {
      font-size: small;
      text-decoration: underline;
      padding: 3px;   
      border: 0;
      background-color: transparent;
      display:inline
}

p{margin-top:-1px;margin-bottom:0px;vertical-align:middle;font-size:small;}
.title{text-indent:6px;padding-bottom:3px;margin-top:-15px;vertical-align:middle;font-size:small;font-weight:bold;color:#444444;}

BODY {
   BORDER-TOP-WIDTH: 0px;
   PADDING-RIGHT: 0px;
   PADDING-LEFT: 0px;
   BORDER-LEFT-WIDTH: 0px;
   BORDER-BOTTOM-WIDTH: 0px;
   PADDING-BOTTOM: 0px;
   MARGIN: 0px;
   PADDING-TOP: 0px;
   BORDER-RIGHT-WIDTH: 0px;
   vertical-align: top;
}
BODY {
padding-top:2%;
   PADDING-BOTTOM: 0px;
   COLOR: #000000;
   FONT-FAMILY: "Arial", san-serif;
   BACKGROUND-COLOR: #cccccc;
   background-repeat: repeat-x;
   background-position: center top;
   background-image: url(mylar-demo-04_media/images/background_darker.gif);
}</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script language=javascript type="text/javascript">
function OnLoad()
{
   timerInit();
}
</script>

<Script language=javascript type="text/javascript" >
function SeekTime( Time )
{
    var FrameRate        = 10;
    var Frame            = Math.floor(Time * FrameRate);
    var swfMovie;
    
        if( eval( document.embeds["EmbedflashMovie"] ) != undefined ) 
    {
	  swfMovie = document.embeds["EmbedflashMovie"];
	} 
	else 
	{
	  swfMovie = window.document.flashMovie;
	}
		    
	
    var TotalFrames = swfMovie.TGetProperty("/movieLoader_csmovie/movie_mc", 5);
    if ( Frame > TotalFrames-1 ) Frame = TotalFrames-1;

    swfMovie.TGotoFrame("/movieLoader_csmovie/movie_mc", Frame);
    swfMovie.TPlay("/movieLoader_csmovie/movie_mc");
    swfMovie.TCallFrame("/movieLoader_csmovie/movie_mc", Frame);
}
</Script>


<script language=javascript type="text/javascript">

function ScrollToIndex( DivID, destIndex ) 
{
   var nDestYCoord = destIndex.offsetTop; 
   var thisNode    = destIndex; 
   
   while ( thisNode.offsetParent && ( thisNode.offsetParent !=  document.body) ) 
   { 
      thisNode     = thisNode.offsetParent; 
      nDestYCoord += thisNode.offsetTop; 
   }

   nCurWindowYPos = GetCurrentScrollYPos( DivID.id );

   //Only scroll if it's needed..
   if( destIndex.offsetTop + destIndex.offsetHeight > DivID.clientHeight )
   {      
      nDestYCoord -= DivID.clientHeight;
      
      if( nDestYCoord > DivID.scrollTop )
      {
         DivID.scrollTop = nDestYCoord;
      }
   }
}

function GetCurrentScrollYPos( DivID ) 
{ 
   var aDivs = document.body.getElementsByTagName("DIV");

   for ( var i=0; i < aDivs.length; i++ ) 
   { 
      var Div = aDivs[i]; 

   if ( Div.id == DivID ) 
      { 
         return Div.scrollTop
      }
   }

   return 0;
}

</script>

<script language=javascript type="text/javascript">
var g_LastFrame = 0;

function timerInit() 
{
   //Sets the timer to check every .1 second
   window.setInterval("timer()", 100);
}

function timer() 
{    
   var destIndex = null;
   
      var FrameRate = 10;
      var swfMovie;
    if( eval( document.embeds["EmbedflashMovie"] ) != undefined ) 
    {
	  swfMovie = document.embeds["EmbedflashMovie"];
	} 
	else 
	{
	  swfMovie = window.document.flashMovie;
	}
		
      var CurFrame = swfMovie.TCurrentFrame("/movieLoader_csmovie/movie_mc");
      var curTime  = (CurFrame+1) / FrameRate;
      if( curTime >= 0.000000 && curTime < 2.000000 )
      {
         document.getElementById('Index0').style.backgroundColor = '#ffffcc';
         destIndex = document.getElementById('Index0');
      }
      else
      {
         document.getElementById('Index0').style.backgroundColor = '';
      }
      if( curTime >= 2.000000 && curTime < 21.211001 )
      {
         document.getElementById('Index1').style.backgroundColor = '#ffffcc';
         destIndex = document.getElementById('Index1');
      }
      else
      {
         document.getElementById('Index1').style.backgroundColor = '';
      }
      if( curTime >= 21.211001 && curTime < 75.130004 )
      {
         document.getElementById('Index2').style.backgroundColor = '#ffffcc';
         destIndex = document.getElementById('Index2');
      }
      else
      {
         document.getElementById('Index2').style.backgroundColor = '';
      }
      if( curTime >= 75.130004 && curTime < 112.745005 )
      {
         document.getElementById('Index3').style.backgroundColor = '#ffffcc';
         destIndex = document.getElementById('Index3');
      }
      else
      {
         document.getElementById('Index3').style.backgroundColor = '';
      }
      if( curTime >= 112.745005 && curTime < 133.934006 )
      {
         document.getElementById('Index4').style.backgroundColor = '#ffffcc';
         destIndex = document.getElementById('Index4');
      }
      else
      {
         document.getElementById('Index4').style.backgroundColor = '';
      }
      if( curTime >= 133.934006 && curTime < 157.382007 )
      {
         document.getElementById('Index5').style.backgroundColor = '#ffffcc';
         destIndex = document.getElementById('Index5');
      }
      else
      {
         document.getElementById('Index5').style.backgroundColor = '';
      }
      if( curTime >= 157.382007 && curTime < 197.638009 )
      {
         document.getElementById('Index6').style.backgroundColor = '#ffffcc';
         destIndex = document.getElementById('Index6');
      }
      else
      {
         document.getElementById('Index6').style.backgroundColor = '';
      }

 
   if( destIndex != null && g_LastFrame != CurFrame )
   {
      g_LastFrame = CurFrame;
      ScrollToIndex( document.getElementById('IndexLinksDiv'), destIndex );
   }
}
</script>   
</head>
<body onload="OnLoad()"> 
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td valign="top">
<table border="0" cellspacing="0" cellpadding="0" style="width:185px;">
<tr>
<td style="border-bottom:2px #669933 solid;"><img src="mylar-demo-04_media/images/border_top.gif" /><div id="IndexLinksDiv" style="overflow:auto;height:685px;width:183px;margin-top:-3px;vertical-align:top;background-image:url(mylar-demo-04_media/images/bg_table_light.gif);border-left:2px solid #669933;border-top:2px solid #669933;padding:0px;">
  <br /><p class="title">
    
            </p>
    <p class="border" id="Index0"><a href="javascript:SeekTime(0.000000);">1. Start</a></p>
<p class="border" id="Index1"><a href="javascript:SeekTime(2.000000);">2. Create Task</a></p>
<p class="border" id="Index2"><a href="javascript:SeekTime(21.211001);">3. Apply Mylar</a></p>
<p class="border" id="Index3"><a href="javascript:SeekTime(75.130004);">4. Highlighting</a></p>
<p class="border" id="Index4"><a href="javascript:SeekTime(112.745005);">5. Open Type</a></p>
<p class="border" id="Index5"><a href="javascript:SeekTime(133.934006);">6. Manipulation</a></p>
<p class="border" id="Index6"><a href="javascript:SeekTime(157.382007);">7. Switching</a></p>

      </div></td>
    </tr>
    <tr>
      <td style="width:185px;height:15px;border-top:2px #669933 solid;"><img src="mylar-demo-04_media/images/border_bottom.gif" style="margin-top:-3px;"/></td>
    </tr>
  </table></td>
  <td valign="top">
  <table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td style="border-top:2px solid #669933;background-color:#cccccc;"><img src="mylar-demo-04_media/images/spacer.gif" width="20" height="15" /></td>
      <td style="border-top:2px solid #669933;background-color:#cccccc;"><img src="mylar-demo-04_media/images/spacer.gif" width="15" height="15" /></td>
      <td style="background-image:url(mylar-demo-04_media/images/border_top_right.gif);"><img src="mylar-demo-04_media/images/spacer.gif" width="15" height="15" /></td>
    </tr>
    <tr>
      <td style="border-left:2px solid #669933;background-color:#cccccc;">&nbsp;</td>
      <td style="background-color:#cccccc;"><object id  ="flashMovie" 
   codeBase ="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" 
   height   ="785" 
   width    ="1024 "
   classid  ="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" VIEWASTEXT>
   <PARAM NAME="_cx"                VALUE="26">
   <PARAM NAME="_cy"                VALUE="26">
   <PARAM NAME="FlashVars"          VALUE="csConfigFile=mylar-demo-04_media/mylar-demo-04_config.xml">
   <PARAM NAME="Movie"              VALUE="mylar-demo-04_media/mylar-demo-04_controller.swf?csConfigFile=mylar-demo-04_media/mylar-demo-04_config.xml">   
   <PARAM NAME="Src"                VALUE="mylar-demo-04_media/mylar-demo-04_controller.swf?csConfigFile=mylar-demo-04_media/mylar-demo-04_config.xml">
   <PARAM NAME="WMode"              VALUE="Window">
   <PARAM NAME="Quality"            VALUE="high">
   <PARAM NAME="SAlign"             VALUE="">
   <PARAM NAME="Menu"               VALUE="-1">
   <PARAM NAME="Base"               VALUE="">
   <PARAM NAME="AllowScriptAccess"  VALUE="always">
   <PARAM NAME="DeviceFont"         VALUE="0">
   <PARAM NAME="EmbedMovie"         VALUE="0">
   <PARAM NAME="BGColor"            VALUE="#FFFFFF">
   <PARAM NAME="SWRemote"           VALUE="">
   <PARAM NAME="MovieData"          VALUE="">
   <PARAM NAME="SeamlessTabbing"    VALUE="1">
									
   <EMBED id          ="EmbedflashMovie"
          src         ="mylar-demo-04_media/mylar-demo-04_controller.swf?csConfigFile=mylar-demo-04_media/mylar-demo-04_config.xml" 
          flashvars   ="csConfigFile=mylar-demo-04_config.xml" 
          quality     ="high" 
          bgcolor     ="#FFFFFF" 
          width       ="1024" 
          height      ="785" 
          type        ="application/x-shockwave-flash" 
          pluginspace ="http://www.macromedia.com/go/getflashplayer">	
   </EMBED>
</OBJECT> <br> </td>
      <td style="border-right:2px solid #669933;background-color:#cccccc;"><img src="mylar-demo-04_media/images/spacer.gif" /></td>
    </tr>
    <tr>
      <td><img src="mylar-demo-04_media/images/border_bottom_left.gif" width="20" height="20" /></td><td><img src="mylar-demo-04_media/images/bottom.gif" width="100%" height="20"/></td>
      <td><img src="mylar-demo-04_media/images/border_bottom_right.gif" width="20" height="20" /></td></tr></table></td></tr></table>
</body></html> 