Having trouble understanding HexColors tweening

[bunner bob]

I'm trying to tween the color of an object I created, but I keep getting an error (undefined property: fillColor) and obviously I'm not getting it. I'm having trouble reconciling the following example from this forum - specifically how fillColor and outlineColor properties get hooked up to the actual colors of a drawn object...

 

2. HexColors: “It must be an OBJECT with properties named the same as your object's hex color properties.”

I just could not figure out how this property is tweened, so it would be great if you gave little example...

 

Let's say you have a "CustomButton" class that creates buttons with a fill color and an outline color (get/set with fillColor and outlineColor properties). How will you tween those colors? It's simple with TweenMax's hexColors special property. Here's a quick example:

 

Code: Select all

var myButton:CustomButton = new CustomButton();

TweenMax.to(myButton, 2, {hexColors:{fillColor:0xFF0000, outlineColor:0x00FF00}, ease:Strong.easeOut});

 

...with my class - here's my nonfunctioning attempt:

 

package src.components
{
import flash.display.*;
import flash.text.*;
import flash.events.*;
import flash.utils.*;

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([HexColorsPlugin]);

public class Hexagon extends Sprite
{
	private var startColor:uint;
	private var endColor: uint;
	private var fillColor: uint;

	public function Hexagon(radius:Number, hexOrient:int, startColor:uint, endColor:uint):void
	{
		this.startColor = startColor;
		this.endColor = endColor;

		var sides:Number = 6;

		this.graphics.beginFill(startColor);
		this.graphics.moveTo (radius, 0);
		for (var i:Number = 0; i <= 360; i += 360 / sides)
		{
			var radians:Number = i * Math.PI / 180;
			var x:Number = Math.cos (radians) * radius;
			var y:Number = Math.sin (radians) * radius;
			this.graphics.lineTo (x, y);
		}
		this.graphics.endFill();

		this.blendMode = BlendMode.MULTIPLY;

		if (hexOrient == 1)
		{
			this.rotation = 90;
		}

		tweenTo();
	}

	private function tweenTo():void
	{
		TweenLite.to(this, 20, {hexColors: {fillColor:0xff0000}, onComplete: tweenFro});
	}

	private function tweenFro():void
	{
		TweenLite.to(this, 20, {hexColors: {fillColor:0x00ff00}, onComplete: tweenTo});
	}
}
}

 

Can someone set me straight?

 

Thanks!

 

- Bob

[Carl]

it may be because fillColor is a private var and TweenLite doesn't have access to it.

 

---

 

also to note, once you get the fillColor to tween, at that point you are really just changing a numeric value. You will need to re-apply fillColor to your shape as its tweening in order to see it change color.

 

take a look at the hexColors example code inside the plugin exlorer: http://www.tweenmax.com

[bunner bob]

Yep - private var was it.

 

Also thanks for the info on updating - redrawing - my shape onUpdate. Also needed to add a graphics.clear() call to get rid of the previous shape (otherwise they tend to build up).