change color on every loop

[karimn74647191]

Is there a way to change the color of a symbol every time the timeline loops?

The color need to be selected randomly out a list of colors.

[robdillon]

Have a look at the color transform class in AS3. Here’s a tutorial that may help: AS3: Changing Colors

[JoãoCésar · Accepted solution]

Hi.

Here is one way of achieving this.

Notice that you can change the variable allowRepetition to true to simply get random colors from the vector or you can set it to false so the colors won't repeat until all colors from the vector are used.

AS3 code:

import flash.geom.ColorTransform;
import flash.display.MovieClip;
function setColors():void
{
    if (!allowRepetition && count % colors.length == 0)
    {
          colors.sort(function(a:*, b:*)
          {
              if (Math.random() < 0.5)
                    return -1;
              else
                    return 1;
          });
    }
    colorTransform.color = allowRepetition ? colors[Math.floor(Math.random() * colors.length)] : colors[count % colors.length];
    target.transform.colorTransform = colorTransform;
    count++;
}
if (!this.hasStarted)
{
    var colors:Vector.<uint> = new <uint> // you can use a simple array here if you wish
    [
          0x871F75,
          0x1F3F87,
          0x37871F,
          0x877A1F,
          0x87351F
    ];
    var target:MovieClip = rec; // name of the target Movie Clip
    var allowRepetition:Boolean = false; // change here to allow repetition or not
    var count:uint = 0;
    var colorTransform:ColorTransform = new ColorTransform();
    this.hasStarted = true;
}
setColors();

FLA download:
animate_cc_as3_random_colors.zip - Google Drive

I hope this helps.

Regards,

JC

[karimn74647191]

thanks,

this works perfect in AS3 but i am trying te make it work on html5/canvas (javascript).

Is this possible ?

Regards,

KN

edit:

because this is a AS3 discussion,

i asked the question here again: Random color movieclip html5/canvas

[JoãoCésar]

[I'm answering here too in case someone else needs]

Re: Random color movieclip html5/canvas

Please keep in mind that there are issues when using filters in HTML5 Canvas:

Color effects are published as a filter and subject to the same limitations. (2)

Filters are very expensive and are not updated once applied. Cache as bitmap is automatically enabled when a filter is applied. This can prevent animations from updating.

Applying "cache as bitmap" to an animated instance will prevent the animation from updating.

I recommend you to consider presetting the styles/colors in different frames and then pick them randomly.

JavaScript code:

this.setColors = function()
{
    var w = exportRoot.target.nominalBounds.width * exportRoot.target.scaleX;
    var h = exportRoot.target.nominalBounds.height * exportRoot.target.scaleY;
    var index = exportRoot.allowRepetition ? Math.floor(Math.random() * exportRoot.colors.length) : exportRoot.count %      exportRoot.colors.length;
    var r = exportRoot.colors[index].r;
    var g = exportRoot.colors[index].g;
    var b = exportRoot.colors[index].b;
if (!exportRoot.allowRepetition && exportRoot.count % exportRoot.colors.length == 0)
{
    exportRoot.colors.sort(function(a, b)
    {
          if (Math.random() < 0.5)
              return -1;
          else
              return 1;
    });
}
exportRoot.target.filters = [new createjs.ColorFilter(0, 0, 0, 1, r, g, b, 1)];
exportRoot.target.cache(-w * 0.5, -h * 0.5, w, h);
exportRoot.count++;
}
if (!this.hasStarted)
{
    this.colors =
    [
          {r:180, g:35,  b:11},
          {r:212, g:192, b:26},
          {r:29,  g:221, b:34},
          {r:33,  g:124, b:237},
          {r:131, g:12,  b:199}
    ];
    this.target = this.rec;
    this.allowRepetition = false;
    this.count = 0;
    this.hasStarted = true;
}
this.setColors();

FLA download:

animate_cc_html5_random_colors.zip - Google Drive

Regards,

JC