基于文件加载百分比的RGB渐变

Question

我正在进行我的第一个Flash项目，对于我的预加载器，我想根据加载百分比做一个非常简单的渐变。 预加载器显示“77％已加载...”，其中数字77是称为percentLoaded的动态文本实例。 我想让percentLoaded的textColor在从#000000到#FFFFFF的灰度渐变中改变。

因此，我不能简单地这样做：

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

这只是将textColor转换为FFFFFF的倍数，但输出的是一种颜色，因为它不是三个单独的组件。目前，这是我所拥有的：

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

“rgb2hex”是在该类中定义的函数，如下所示：

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

看起来似乎并没有改变字体颜色。我已经导入了flash.text.TextField和flash.display.MovieClip，但不确定是否还缺少其他内容。使用字符串连接可能更容易吗？或者是currentValue/100有什么问题，传递为数字？

如果好奇的话，我在这里找到了rgb2hex的代码。

谢谢！

- Rockmaninoff

Answer 1

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

这很接近了。

要得到灰度图像，确实需要每个组件，但是可以通过类似于您的方法来完成：

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

- LiraNuna

---

这个不行。尝试将currentValue设置为1。你得到了0x28f5c。在乘以0x010101之前，你需要将((currentValue / 100) * 0xFF)强制转换为int类型。 - Ponkadoodle

没错，我忘了那个，已经修复了；谢谢你指出来！实际上需要将强制类型转换应用于除法结果，因为这就是它发生的原因 - Flash的“Number”类是一个IEE浮点数。将其转换为uint应该解决这个问题。 - LiraNuna

不，当前值在0-100之间。如果你在除以0xFF之后但乘以之前进行强制类型转换，你将得到0或1。他想要完整的灰度，而不仅仅是黑白。问题并不是由于浮点数不准确造成的。这是因为你的格式（0x010101）本质上是三个字段（01、01、01）。它不希望一个字段中的某些内容受到另一个字段的影响。但是使用大于255的值允许低位影响高位，而介于两个整数之间的值允许高位影响低位。尝试1.50x010101，你就会明白我的意思。 - Ponkadoodle

我的错，今天编码太多了 :P - LiraNuna

谢谢大家的回复。一开始它没有起作用，我不想发表评论，因为我不太确定发生了什么事。现在我明白了，这是一个特别优美的解决方案！编辑：我稍后会在我的代码中实现这个解决方案，并在确保它可行之后将其标记为答案。 - Rockmaninoff

Answer 2

你很幸运，我最近在一个项目中做了类似的事情，只是使用了不同的颜色。这里有一个函数，它将返回两种颜色之间的颜色值，基于0-1的范围。我认为代码已经相当清晰易懂了，但如果你遇到任何问题，请告诉我。

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 Egeto

---

谢谢Tyler，这实际上有可能在一段时间后会有用；例如我可能会选择让预加载文本在红色和白色之间变化。 - Rockmaninoff

Answer 3

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

将int强制转换为0x010101后再进行乘法运算是必须的。8位颜色值只能是介于0-255之间的整数。如果不在这些范围内，则0x010101的乘法可能会导致数字从一个颜色分量（RR，GG，BB）溢出到另一个颜色分量（B->G，G->R）。但如果不是整数，它们也可以反向传递（R->G，G->B）。我假设currentValue是介于0-100之间的任意数字。
考虑一下，每个数字都是自己的颜色分量（以十进制表示）：

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

- Ponkadoodle

Answer 4

如果这对你有效

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

那么你就可以这样做

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

- sberry

---

这个不行。尝试将currentValue设置为1。你得到了0x28f5c。在乘以0x010101之前，你需要将其转换为int类型。 - Ponkadoodle

@wallacoloo：没错，已修复。 - sberry