How does' Starling 'eliminate the color added by' Tween '?

1

How does’ Starling ‘eliminate the color added by’ Tween '?

Hello everyone, I need “mc” to gradually change to red and then gradually eliminate the red color. This back and forth color change effect, but I found that “mc” has turned black? Looking for help? Thank you all.

private function toggleColor(mc:MovieClip, isFadingIn:Bool = true):Void {

    var tween:Tween = new Tween(mc, 0.5);

    if (isFadingIn) {

        tween.animate("color", 0xFF0000);

    } else {

        tween.animate("color", 0x00000000);

    }

    tween.onComplete = function():Void {

        toggleColor(mc, !isFadingIn);

    };

    Starling.current.juggler.add(tween);

}
2

default color is white :

if (isFadingIn) {

    tween.animate("color", 0xFF0000);

} else {

    tween.animate("color", 0xffffff);

}
4

You are right.
Can I set the red color to “50%”?

Actuate also includes shortcuts for some special types of animation. Here is how you might apply a 50% tint using a color transform

Actuate.transform (MySprite, 1).color (0xFF0000, 0.5);
5

Does’ Starling Tween ‘support methods like’ 0.5 'mentioned above?

6

No, you can use the Color class to achieve the same thing :

juggler.tween(mySprite, 1, {color:Color.multiply(0xff0000, 0.5)})
1 Like
7

It doesn’t seem right! MC "turned black ..

8

Both ‘as3 GreenSock’ and ‘openfl Activate’ can implement this method, but I haven’t found such a method yet when it comes to ‘starling’?

9

Actually, I have discussed with @ Bink before that the current perfect method is to use ColorMatrixFilter.

However, is the consumption of ‘ColorMatrixFilter’ a bit high?

private function toggleColor(mc:MovieClip):Void {

    var myFilter:ColorMatrixFilter = new ColorMatrixFilter();

    var tintObject = {value: 0.0};



    mc.filter = myFilter;

    Starling.current.juggler.tween(tintObject, 1, {

        value: 0.5,

        reverse: true,

        repeatCount: 0,

        repeatDelay: 0.2,

        // repeatReverseDelay:1,

        onUpdate: function() {

            myFilter.reset();

            myFilter.tint(0xFF0000, tintObject.value);

        }

    });

}
10

Maybe we can ‘stop tweeng’ before ‘tweeng’ is completed. I think this is a folk remedy

May I ask if there is a better implementation method?
If you know, please let me know. Thank you for your contribution

11

“createJS”

gsap.to(mc, {

                yoyo: true,

                repeat: -1,

                duration: 1,

                easel: { tint: "#0000FF", tintAmount: 0.5 },

                delay: 1,

            });
12

Starling Framework Reference (v2.8)

ColorMatrixFilter

tint () method

public function tint(color:uint, amount:Number = 1.0):void

Tints the image in a certain color, analog to what can be done in Adobe Animate.

Parameters

color:uint — the RGB color with which the image should be tinted.
amount:Number (default = 1.0) — the intensity with which tinting should be applied. Range (0, 1).
13
14

You should really stop spamming non-sense messages like you do : what do you expect from us by posting all that without any question or context ?
Take your time, explain what you want to do and what the problem is, edit your post instead of adding multiple posts… this is not Skype or discord

It does work, I tested it

Again, Color.multiply does exactly the same thing

var myColor:Int = 0xff0000;
myColor = Color.multiply(color, 0.5); // 0x7f0000
15

@Matse

No, I tested it and it turned black. You can change it to “0.2” to make it more noticeable!

var myColor:Int = 0xff0000;

        myColor = Color.multiply(0xff0000, 0.2); // 0x7f0000

        Starling.current.juggler.tween(mc, 2, {

            color: myColor

        });

01
01166×155 15.1 KB

private function toggleColor(mc:MovieClip):Void {

        var myFilter:ColorMatrixFilter = new ColorMatrixFilter();

        var tintObject = {value: 0.0};



        mc.filter = myFilter;

        Starling.current.juggler.tween(tintObject, 1, {

            value: 0.2,

            reverse: true,

            repeatCount: 1,

            repeatDelay: 0.2,

            // repeatReverseDelay:1,

            onUpdate: function() {

                myFilter.reset();

                myFilter.tint(0xFF0000, tintObject.value);

            }

        });

    }

02
02160×152 28.9 KB

16

You asked for this :

I answered with

and I’m telling you : that works, it achieves the same result as the code you had in the post I replied to.

Now does it achieve the result you’re looking for is an entirely different subject : you need a ColorMatrix ? Fine, but we’re not talking about the same thing anymore.

17

@Matse

No, it has always been one thing.
I need to change the color of “mc” with “tween”. “0.5” is just one variable I mentioned, or it could be “0.2 0.3 0.5 1”. This is just one variable. “as3 openfl creatjs” has such a method. In “starling”, I saw that “ColorMatrix” can achieve the same effect, but it consumes a lot. I am asking if there is a better method!

The code ‘mc’ above you has turned black! Has the translation meaning changed?

18

juggler.tween(mySprite, 1, {color:Color.multiply(0xff0000, 0.5)})

If you change “0.5” to “0.2”, will the test turn black!

Do you understand what I mean?
This is an intensity parameter!

01
011063×357 22.2 KB

19

Ok I get it : you were talking about non-starling DisplayObject with Actuate

Starling DisplayObjects don’t have a color transform so no. There are other ways with a dedicated meshstyle (explained in the starling handbook https://manual.starling-framework.org/en/\_advanced_topics.html#\_custom_styles )

edit : forgot to mention but Massive can achieve that too, by using a red value > 1 and lowering green and blue values