pattofield

yeah... Axure seems to render native shapes as png images. Just tried importing an svg into Axure and running that. So I'm seeing a .svg file rendered in the browser debug....but still not able to set the fill on this object. Not in code and not directly in the browser css definitions... Looks like I'm gonna be trying filters next! Thanks for your input anyway!

Hey man and thanks for replying! Yeah - I know it would be easier with a working demo but it's an Axure project as I said, so I can't really embed it. Anyway... I have tried drilling into the widget object itself....targeting children & children's children etc but not really getting anywhere. Pretty sure I'm targeting the correct element... as I said I can set the opacity using: var tweenableWidget = widget.$().children(); TweenMax.to(tweenableWidget, 2, { css: {opacity: 0} }); And debugging in the browser I can set the backgroundColor css property manually (for the widget and all it's children) but again it sets the surrounding area of the circle with color....if at all. The circle element is rendering with transparency as you can see from the debug elements screenshot above but there doesn't appear to be a css (or object) attribute for changing the fill color of the circle... the backgroundColor property fills the transparent areas. I can achieve what I want using different methods (built into Axure) but it seems such a fundamental thing to be able to do in js / css...and I want to use some more advanced tweening effects which is why I'm using GSAP....and this is only a tiny part of the overall prototype.

Wow!! This is driving me crazy! I am designing a prototype in Axure, which I'm linking to an external javascript file and manipulating elements with TweenLite. All good except the simplest of things....animating a fill color change on a circle - pink to blue. . pink circle that I want to color blue...: The closest I have got changes the bounding box...not the circle fill: I've tried all kinds of approaches..... tweening css properties, color, backgroundColor, fill etc... I'm passing the widget to the javascript function correctly (I can set opacity for example) but I'm not able to change the circle's inner color. The function looks like this...: (this changes the bounding box as shown above...) function tweenColor (widget, speed, delay, color) { var tweenableWidget = widget.$().children(); TweenMax.to(tweenableWidget, speed, { delay: delay, css: {backgroundColor: '#00CCFF'} }); } What am I missing...?

Hello... Been dev'ing in Flash for years and using the greensock library extensively, however I want to port some projects over to html5 using EaselJS/CreateJS and, as this is new territory for me, I'm running into some hurdles with color transformations. One aspect I need to port is a color transform of an animation. So my animation is now exported as a spritesheet and I'm trying to find a way to perform a color change of the animation as it plays. (think of a bottle of water where the water changes color as it fills in the bottle) The lack of info I've been able to find would imply that it's not as easy as it sounds (and certainly not as easy as in Flash with TweenMax). Any ideas on how to approach this....?