RGB -Gradienten basierend auf Prozentsatz der geladenen Datei

Question

Ich arbeite an meinem ersten Flash -Projekt, und für meinen Vorlader würde ich gerne einen wirklich einfachen Gradienten durchführen, der auf dem prozentualen Laden basiert. Der Voroader sagt "77% geladen ...", wobei die Zahl 77 eine dynamische Textinstanz bezeichnet wird, die als prozentuell bezeichnet wird. Ich möchte, dass das TextColor von prozentual geladen wird, um einen Gradienten von #000000 auf #ffffff in grauem Maßstab zu ändern.

Deshalb kann ich nicht einfach:

percentLoaded.textColor=(currentValue/100)*0xFFFFFF;

Dies konvertiert nur das TextColor in ein Vielfaches von FFFFFF, gibt jedoch eine Farbe aus, da es nicht drei separate Komponenten sind. Derzeit habe ich hier, was ich habe:

percentLoaded.text=currentValue.toString();
percentLoaded.textColor=rgb2hex((currentValue/100)*255, (currentValue/100)*255, (currentValue/100)*255);

Wobei "rgb2hex" eine Funktion ist, die innerhalb der Klasse als solche definiert ist:

public function rgb2hex(r:Number, g:Number, b:Number) {
    return '0x'+(r << 16 | g << 8 | b).toString(16).toUpperCase();
}

Es sieht jedoch nicht so aus, als ob dies tatsächlich die Farbe der Schriftart verändert. Ich habe flash.text.textfield und flash.display.movieclip importiert, bin mir aber nicht sicher, ob mir etwas anderes fehlt. Wäre dies einfacher mit einer String -Verkettung? Oder gibt es vielleicht etwas mit CurrentValue/100 und als eine Zahl?

Wenn neugierig, habe ich den Code für RGB2hex gefunden hier.

Vielen Dank!

Answer 1

percentLoaded.textColor=(currentValue/100)*0xFFFFFF;

Das ist nah.

Um eine Graustufe zu erhalten, müssen Sie tatsächlich jede Komponente haben, aber dies kann immer noch mit einer ähnlichen Methode erfolgen:

percentLoaded.textColor = uint((currentValue / 100) * 0xFF) * 0x010101;

Answer 2

Sie haben Glück, ich habe dies in jüngster Zeit in einem Projekt nur mit unterschiedlichen Farben gemacht. Hier ist eine Funktion, die einen Farbwert zwischen zwei anderen Farben zurückgibt, basierend auf einem Bereich von 0-1. Ich denke, der Code ist ziemlich selbsterklärend, aber lassen Sie mich wissen, wenn Sie auf Probleme stoßen.

private function getBetweenColourByPercent(value:Number = 0.5 /* 0-1 */, highColor:uint = 0xFFFFFF, lowColor:uint = 0x000000):uint {
    var r:uint = highColor >> 16;
    var g:uint = highColor >> 8 & 0xFF;
    var b:uint = highColor & 0xFF;

    r += ((lowColor >> 16) - r) * value;
    g += ((lowColor >> 8 & 0xFF) - g) * value;
    b += ((lowColor & 0xFF) - b) * value;

    return (r << 16 | g << 8 | b);
}

Tyler.

Answer 3

percentLoaded.textColor = int((currentValue / 100) * 0xFF) * 0x010101;

Der Guss zu einem int vor dem Multiplizieren mit 0x010101 ist ein Muss. 8 Bit-Farbwerte können nur Zahlen zwischen 0-255 sein. Wenn es nicht innerhalb dieser Grenzen liegt, kann die Multiplikation mit 0x010101 dazu führen, dass Zahlen von einer Farbkomponente (RR, GG, BB) zu einem anderen (B-> G, G-> R) überfließen. Sie können aber auch in die andere Richtung, wenn nicht eine Ganzzahl (r-> g, g-> b) tragen. Ich habe angenommen, dass CurrentValue zwischen 0 und 100 eine Zahl ist.

Betrachten Sie dies mit jeder Ziffer der eigenen Farbkomponente (in Dezimal):

5.0 * 111 = 555 = 5R, 5G, 5B
5.5 * 111 = 610.5 = 6R, 1G, 0.5B

Answer 4

Wenn dies für Sie funktioniert

percentLoaded.textColor=(currentValue/100)*0xFFFFFF;

Dann könntest du einfach tun

var percent = currentValue / 100;
percentLoaded.textColor = Math.floor(percent*0xFF) * 0x010101;