Question

I am stuck with something that I am sure should be fairly straightforward. I declare two vertical lines from the library, then pass each in turn to a function which operates on the line it has been passed. The code executes without error, but apparently is overwriting the first line when the function is called the second time, presumably because of the use of the term “myLine” in the function header. Can anyone inform me how to pass each line to the same function but have the function operate on that line only?

The code is:

//declare new lines from library
var myLine1:letterLine = new letterLine();
var myLine2:letterLine = new letterLine();

//call function and pass each line in turn
VerticalLine(myLine1, lineX = stage.stageWidth/2 - lineOffset, lineY, lineLength, lineThickness, lineColour, lineTweenSpeed);
VerticalLine(myLine2, lineX = stage.stageWidth/2 - lineOffset, lineY, lineLength, lineThickness, lineColour, lineTweenSpeed);

//operate on the line passed to the function
function verticalLine(myLine, lineX:int, lineY:int, lineLength:Number, lineThickness:int, lineColour, lineTweenSpeed:Number):void {
    //draw line
    myLine.height = 0;
    myLine.x = lineX;
    myLine.y = lineY;
    myLine.width = lineThickness;

    var myColour:ColorTransform = myLine.transform.colorTransform;
    myColour.color = lineColour;
    myLine.transform.colorTransform = myColour;
    addChild(myLine);

    //set mask properties for line
    var maskW:uint = lineThickness;
    var maskH:uint = lineLength;

    //set gradient properties for mask
    var gradientFillType:String = GradientType.LINEAR;
    var gradientColours:Array = [0x123456, 0x654321, 0x123456, 0x654321];
    var gradientAlphas:Array = [0.4, 1, 1, 0.4];
    var gradientRatios:Array = [0, 100, 155, 255];
    var gradientMatrix:Matrix = new Matrix;

    var maskRotation:Number = Math.PI/2;
    var maskX:int = lineX;
    var maskY:int = myLine.y - lineLength/2;;
    gradientMatrix.createGradientBox(maskW, maskH, maskRotation, maskX, maskY);
    var spreadMethod:String = SpreadMethod.PAD;

    myLine.cacheAsBitmap = true;

    //draw mask shape
    var myMask = new Shape ;
    myMask.graphics.beginGradientFill(gradientFillType, gradientColours, gradientAlphas, gradientRatios, gradientMatrix, spreadMethod);
    myMask.graphics.drawRect(maskX, maskY, maskW, maskH);
    myMask.cacheAsBitmap = true;
    addChild(myMask);

    //mask line
    myLine.mask = myMask;

    TweenLite.to(myLine, lineTweenSpeed,{height:lineLength, ease:Linear.easeIn});
}

Answer 1

The trick is, you are sending equal values for both lines, so they strictly overlap, and you see this as an overwriting. When you call your function, you need to provide actual values for corresponding lines. Like this:

verticalLine(myLine1, stage.stageWidth/2 - 100, 10, 125, 1, 0xff0000, 0.2);
verticalLine(myLine2, stage.stageWidth/2 - 2, 300, 40, 2, 0x0000ff, 0.3);

Also check if you have proper casing when declaring the function and when calling it.