<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:geom="components.*"
    layout="absolute"
    width="600" height="500" 
    pageTitle="Parametric Equation of a Line"
    applicationComplete="test()" viewSourceURL="srcview/index.html">
    
  <mx:Style source="assets/style/style.css"/>
  <mx:Canvas id="background" x="50" y="90" width="500" height="320" backgroundColor="#FFFFFF" />
  <mx:Label text="Line Segments" x="250" y="30" width="300" styleName="title"/>
  
  <mx:Canvas id="myCanvas" />
  <geom:InteractivePoint id="pointA" x="90" y="250" pointLabel="A" radius="5" color="0x00ff00" width="100" height="20" />
  <geom:InteractivePoint id="pointB" x="250" y="230" pointLabel="B" radius="5" color="0x00ff00" width="100" height="20" />
  <mx:Canvas id="thePoint" />
  
  <mx:HSlider x="60" y="380" width="200" id="__mySlider__" allowTrackClick="false" value="0" minimum="-2" maximum="2" enabled="true" change="updateParam(event)" liveDragging="true"/>
    
   <mx:Script>
    <![CDATA[
      import flash.events.MouseEvent;
      import mx.events.PropertyChangeEvent;
      import mx.events.SliderEvent;
      
      // parameter or multiplier along line segment
      private var __t:Number = 0;
        
      private function test():void
      { 
        updateDrawing(null);
        
        // restrict dragging for each point
        var bounds:Rectangle = new Rectangle(background.x, background.y, background.width, background.height);
        pointA.restrict      = bounds;
        pointB.restrict      = bounds;
          
        pointA.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, onPropertyChanged);
        pointB.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, onPropertyChanged);
      }
      
      private function onPropertyChanged(_e:PropertyChangeEvent):void
      {
        switch( _e.property )
        {
          case InteractivePoint.MOUSE_DOWN:
            addEventListener(Event.ENTER_FRAME, updateDrawing);
          break;
            
          case InteractivePoint.MOUSE_UP:
            removeEventListener(Event.ENTER_FRAME, updateDrawing);
          break;
        }
      }
      
      private function updateParam(_e:SliderEvent):void
         {
           __t = __mySlider__.value;
           updateDrawing(null);
         }
      
      private function updateDrawing(_e:Event=null):void
      {
        var myX:Number = (1-__t)*pointA.x + __t*pointB.x;
        var myY:Number = (1-__t)*pointA.y + __t*pointB.y;
        
        var g:Graphics = myCanvas.graphics;
        g.clear();
        g.lineStyle(2,0x0000ff);
        g.moveTo(pointA.x, pointA.y);
        g.lineTo(pointB.x, pointB.y);
        
        g = thePoint.graphics;
        g.clear();
        g.beginFill(0xff0000);
        g.drawCircle(myX, myY, 4);
      }
      
     ]]>
   </mx:Script>
        
</mx:Application>