Gradient Box

[TigerFox]

Hallo,

ich möchte mit createEmptyMovieClip und lineTo eine Box erstellen und diese mit einem Farbverlauf versehen. von zb. rot auf blau geht das auch ganz gut. Nun möchte ich aber einen verlauf von rot auf blau und zurück auf rot.

Ich hab zwar einen Workaround gefunden, indem ich 2 boxen zeichnen lasse. eine von rot auf blau, und die 2. von blau auf rot.

Hätte aber gerne eine elegantere Lösung.

Kann mir jemand weiterhelfen?

Hier mein workaround

PHP-Code:

MovieClip.prototype.drawGradientLine = function(col1,col2) {
    var mc = this.createEmptyMovieClip("balken1", 1);
    colors = [col1, col2];
    alphas = [100, 30];
    ratios = [100, 250];
    matrix = {matrixType:"box", x:-160, y:0, w:160, h:2, r:(0 / 180) * Math.PI};
    with (mc) {
        beginGradientFill("linear", colors, alphas, ratios, matrix);
        moveTo(0, -1);
        lineTo(-160, -1);
        lineTo(-160, 1);
        lineTo(0, 1);
        lineTo(0, -1);
        endFill();
    }
    var mc = this.createEmptyMovieClip("balken2", 3);
    colors = [col1, col2];
    alphas = [100, 30];
    ratios = [100, 250];
    matrix = {matrixType:"box", x:0, y:0, w:160, h:2, r:(180 / 180) * Math.PI};
    with (mc) {
        beginGradientFill("linear", colors, alphas, ratios, matrix);
        moveTo(0, -1);
        lineTo(160, -1);
        lineTo(160, 1);
        lineTo(0, 1);
        lineTo(0, -1);
        endFill();
    }
};
drawGradientLine(0xff6600,0x00ff00);//zeichnet eine 320px lange linie 


thx
TF

[Alois]

wenn es, wie im Beispiel, nur um einer 'Verlaufslinie' geht, kannst Du ja mit dem radialen Verlauf tricksen:

PHP-Code:

MovieClip.prototype.drawGradientLine = function(col1,col2) { 

    var mc = this.createEmptyMovieClip("balken1", 3); 
    colors = [col1, col2]; 
    alphas = [100, 30]; 
    ratios = [100, 250]; 
    matrix = {matrixType:"box", x:0, y:-1000, w:160, h:2000, r:0}; 
    with (mc) { 
        beginGradientFill("radial", colors, alphas, ratios, matrix); 
        moveTo(0, -1); 
        lineTo(160, -1); 
        lineTo(160, 1); 
        lineTo(0, 1); 
        lineTo(0, -1); 
        endFill(); 
    } 
}; 
drawGradientLine(0xff6600,0x00ff00); 


Gruß

Alois

[TigerFox]

Super, vielen Dank!
hab noch ein bisschen mit den parametern rumspielen müssen, aber jetzt klappt es wunderbar.

thx
TF