Custom dashed border

Question

Hello everyone.
For a custom project I've created a PhotoViewer, that simply shows images and fades them in and out along with a title and some text. I wanted to create a dashed border to put around these images and created my own implementation of a UIComponent. I found a fantastic example here:
http://cookbooks.adobe.com/post_Creating_a_dashed_line_custom_border_with_dash_and-13286.h tml
I modified it a bit, as I only wanted the border to be on top and bottom sides.
(see at the bottom of this post for source code)
The problem first shows itself when I put the variables "dashLen" and "dashGap" to 1. I only want the dashes to be one pixel wide and one pixel apart from each other. The border at the top of the images shows up exactly as I expected. The border at the bottom does not. The dashes seem 'fatter' somehow, almost as if a couple of lines are drawn right on each other. I want the bottom border to be exactly the same as the top border, of course.
The code for drawing these lines seems to be exactly the same, so I don't know what's causing this problem.
Can any of you give me a hand?
Thanks in advance
Full source code is here:
<mx:Canvas>
    <mx:Dissolve alphaFrom="1" alphaTo="0" id="fadeOut" duration="1000" targets="{[imageToShow, title, text]}"  />
    <mx:Dissolve alphaFrom="0" alphaTo="1" id="fadeIn" duration="1000" targets="{[imageToShow, title, text]}" />
    <mx:HBox borderSkin="photoViewer.Dashborder" styleName="tightDashBorder" paddingTop="1" paddingBottom="1" borderColor="#6666CC" borderThickness="1" id="container" width="95%">
        <mx:VBox verticalAlign="middle" verticalGap="0" height="90%" width="255">
            <mx:TextArea color="#6666CC" paddingTop="35" height="20%" width="255" id="title"/>
            <mx:TextArea color="#333333" height="80%" width="255" id="text"/>
        </mx:VBox>
        <mx:Image width="510" height="299" id="imageToShow" maintainAspectRatio="true" />
    </mx:HBox>
</mx:Canvas>
The dashBorder class:
    import flash.display.LineScaleMode;   
    import mx.core.UIComponent;
  public class Dashborder extends UIComponent {
    private var dashlen:Number = 5;
    private var gaplen:Number = 5;
    public function Dashborder(){
      super();
    override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number):void{
      super.updateDisplayList(unscaledWidth, unscaledHeight);
      var borderThickness:int = getStyle("borderThickness");
      var borderColor:int = getStyle("borderColor");
      graphics.clear();
      graphics.lineStyle(borderThickness, borderColor, 1, false, LineScaleMode.NONE)
      if (getStyle("dashlen")) {
           this.dashlen = getStyle("dashlen");
      if (getStyle("gaplen")) {
           this.gaplen = getStyle("gaplen");
      drawBorder(this.x, this.y, unscaledWidth, unscaledHeight, this.dashlen, this.gaplen);
    public function drawLine(x1:Number, y1:Number, x2:Number, y2:Number, dashlen:Number, gaplen:Number): void {   
      if((x1 != x2) || (y1 != y2)){
        var incrlen:Number = dashlen + gaplen;
        var len:Number = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
        var angle:Number = Math.atan((y2 - y1) / (x2 - x1));
        var steps:uint = len / (dashlen + gaplen);
        var dashstepx:Number = dashlen * Math.cos(angle);
        if (x2 < x1) dashstepx *= -1;
        var dashstepy:Number = dashlen * Math.sin(angle);
        var gapstepx:Number = gaplen * Math.cos(angle);
        if (x2 < x1) gapstepx *= -1;
        var gapstepy:Number = gaplen * Math.sin(angle);
        var stepcount:uint = 0;
        while ((stepcount++) < steps) {    
          var dashstartx:Number;
          var dashstarty:Number;
          var dashendx:Number;
          var dashendy:Number;
          if(x1 == x2 && y1 != y2){
            dashstartx = dashendx = x1;
            if(y2 > y1){
              dashstarty = y1 + ((stepcount-1) * (dashlen + gaplen));            
              dashendy = dashstarty + dashlen;
            }else{
              dashstarty = y1 - ((stepcount-1) * (dashlen + gaplen));            
              dashendy = dashstarty - dashlen;
          }else if(y1 == y2 && x1 != x2){
            dashstarty = dashendy = y1;
            if(x2 > x1){
              dashstartx = x1 + ((stepcount-1) * (dashlen + gaplen));
              dashendx = dashstartx + dashlen;
            }else{
              dashstartx = x1 - ((stepcount-1) * (dashlen + gaplen));
              dashendx = dashstartx - dashlen;
          graphics.moveTo(dashstartx, dashstarty);
          graphics.lineTo(dashendx, dashendy);
    private function drawBorder(x1:Number, y1:Number, width:Number, height:Number, dashlen:Number, gaplen:Number) : void {
      drawLine(x1, y1, x1 + width, y1, dashlen, gaplen); //top border
      drawLine(x1 + width, y1 + height, x1, y1 + height, dashlen, gaplen); //bottom border

Answer 1

Sorry for the bump, but does anyone have an idea for how to solve this issue? I'm really stuck with this.
Thanks