Tweening Flex Styles? [SOLVED]

[viatropos]

I would like to be able to tween things like "backgroundColor" in Flex, which can only be changed via "setStyle".

 

I thought about making a TweenPlugin to do this, but I need to intercept the setting of the properties on all the other TweenPlugins which I am unsure of how to do. Could you please point me in the right direction?

 

I'm running into this same problem when I want to bezier tween methods, because I'd have to intercept 5 or 10 tween plugins that use methods and allow them to receive bezier values.

 

Something like this for tweening styles;

 

TweenMax.to(target, 1, {x:100, style:{hexColors:{backgroundColor:0xff0000}}});

 

Any ideas?

 

Thanks!

[GreenSock]

I'm not quite sure what you meant by "intercept the setting of the properties". Why would you need to do that and what exactly is it that you mean?

 

You could always just use an onUpdate to apply whatever values you want in whatever way you want, and just tween a generic object with whatever properties you need, like:

 

var myStyle:Object = {backgroundColor:0x0000FF};
TweenMax.to(myStyle, 1, {hexColors:{backgroundColor:0xff0000}, onUpdate:updateStyle});
function updateStyle():void {
   myObject.setStyle("backgroundColor", myStyle.backgroundColor);
}

 

Does that help?

[viatropos]

Hey Jack,

 

That method does work, thanks, but I would like to make it a plugin. By "intercept the setting of the properties", I mean I need a layer in between the HexColorPlugin/BezierPlugin/SetActualSizePlugin/[OtherPluginsThatUseMethods]Plugin. So if I do {style:{hexColors:{backgroundColor:red}}}, it would build something like this:

 

TweenMax
   StylePlugin
       HexColorPlugin

 

Instead of...

 

TweenMax
   HexColorPlugin

 

That way, in the StylePlugin, I could just create a new HexColorPlugin if I saw "hexColors" in the "style" Object, and it would do what it's supposed to do.

 

The issue is, that logic is in the TweenLite.init() method, where the Plugin is actually created, so the architecture only allows you to go one layer deep. By "one layer", I mean the tree above. So what if I wanted to bezier-tween the "setStyle" for "backgroundColor". Instead of using the "onUpdate" function and re-creating the BezierPlugin and HexColorPlugin logic, I could just do this:

 

TweenMax
   BezierPlugin
       StylePlugin
           HexColorPlugin

 

... from this object:

 

TweenMax.to(target, 1, {bezier:{style:{hexColors:{backgroundColor:red}}}});

 

So the first layer, BezierPlugin, would see "style", so it would create a StylePlugin. Then the StylePlugin would see "hexColors", and would create the HexColorPlugin, and so on, infinitely. That way I could re-use the existing plugins without reverting to "onUpdate". That's what I mean by "intercept the setting of the properties".

 

If there was a logic like that built in, I could do a ton with reusing the existing plugins, and having plugins invoke other plugins.

 

Is that possible? What would it take?

 

Thanks,

Lance

 

P.S. While that bezier example can probably be done differently, I'm just looking to create a more flexible TweenPlugin system that allows Plugins to use/instantiate other Plugins

[GreenSock]

Sure, you can use other plugins within your plugin. In fact, I do that in several of mine. Feel free to create Plugin instances to do whatever you want inside your plugin. So you'd write code that would look for whatever properties you want (like hexColors or bezier) and then create those instances directly and update their changeFactor inside your plugin's changeFactor setter. Vwalla!

[viatropos]

Perfect. That works.