Gradient RGB oparty na procentowym załadowaniu pliku

Question

Pracuję nad moim pierwszym projektem Flash, a dla mojego preloadera chciałbym zrobić naprawdę prosty gradient w oparciu o załadowany procent. Preloader mówi "77% załadowane ...", gdzie numer 77 jest dynamiczną instancją tekstową o nazwie percentLoaded. Chciałbym, aby wartość textColor of percentLoaded zmieniła się na gradiencie z # 000000 na #FFFFFF, w skali szarości.

Dlatego, nie mogę po prostu zrobić:

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

To właśnie konwertuje textColor do wielokrotności FFFFFF, ale wyprowadza kolor, ponieważ jest to nie trzy oddzielne komponenty. Obecnie, oto co mam:

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

Gdzie „rgb2hex” to funkcja zdefiniowana w klasie jako takie:

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

To nie wygląda to rzeczywiście się zmienia kolor czcionka. Zaimportowałem flash.text.TextField i flash.display.MovieClip, ale nie jestem pewien, czy brakuje mi czegoś innego. Czy byłoby to łatwiejsze w przypadku łączenia ciągów? Czy może coś się dzieje z currentValue/100 i przekazujesz to jako numer?

Jeśli ciekawi, znalazłem kod dla rgb2hex here.

Dzięki!

Answer 1

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

Jest blisko.

Aby uzyskać skali szarości, to rzeczywiście trzeba mieć każdy komponent, ale to może być nadal wykonywane przez podobną metodę do Ciebie:

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

Answer 2

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

Rzut na int przed pomnożeniem przez 0x010101 jest koniecznością. 8-bitowe wartości kolorów mogą być wyłącznie liczbami całkowitymi z zakresu od 0 do 255. Jeśli nie mieści się w tych granicach, mnożenie przez 0x010101 może spowodować przepełnienie liczb od jednego składnika koloru (RR, GG, BB) do drugiego (B-> G, G-> R). Ale mogą również przenosić w drugą stronę, jeśli nie jest liczbą całkowitą (R-> G, G-> B). Zakładam, że currentValue to dowolna liczba z zakresu od 0 do 100.

Rozważ to, że z każdej cyfry własnego składowej koloru (w systemie dziesiętnym):

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

Answer 3

Jeśli to działa dla Ciebie

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

Wtedy mogłem po prostu zrobić

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

Answer 4

Masz szczęście, zdarzyło mi się, że zrobiłem to bardzo niedawno w projekcie, tylko z różnicą kolory nt. Oto funkcja, która zwróci wartość koloru między dwoma innymi kolorami, w oparciu o zakres od 0 do 1. Myślę, że kod jest dość wymowny, ale daj mi znać, jeśli napotkasz jakiekolwiek problemy.

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.