Jump to content
Search Community

tint an object?

martis test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey guys,

 

I want to have a circle (with transparent background) that I can tint the FILL.

 

In AS3 I would of just made a vector circle and used tint:color...

 

There is no "tint" for TweenLite JS (not that I know of?) and "color" doesn't affect PNG color values.

 

in JS/CSS I created a circle using CSS (background fill with radius corners).

 

I have ALOT of these circles, and want to try to use a circle PNG as my displayObject to test performance.

 

My question is:

 

Is there a widely supported method that will allow me to use a PNG, either as a mask or background element, that I can tween its fill color?

 

Thanks!

Link to comment
Share on other sites

i got a nice chuckle out of this as today I was using Flash and tweening the colors of a lot of circles. I was hoping to be able to port the work over to js eventually I realized that something as simple as colorizing a circle like you described really isn't supported "out of the box".

 

the way I see it your options are:

 

-your css corners trick

-use the canvas

-raphael.js which apparently provides a fairly robust system for using SVG across major browsers. GreenSock recently released a raphael plugin to make combining GSAP and raphael fairly straight-forward.

 

raphael.js supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+. http://raphaeljs.com/

  • Like 1
Link to comment
Share on other sites

I created an example using Raph to draw my circles, got the circles drawing, etc... I tried this code and the fill tweens, but the x, y do NOT tween.

 

Anyone have advice? Thanks...

 

function drawCircles() {

 var paper = Raphael('circleTouch', 1000, 648);

 var circ = paper.circle(200, 200, 96);

 circ.attr("fill", "#000");

 TweenLite.to(circ, 3, {raphael:{fill:"#00f", x:300, y:300}, ease:Power1.easeInOut, delay:3});
}

Link to comment
Share on other sites

Will do,

 

In the meantime what might this error be attributed to?

 

Note: Works fine on the first call to tween its fill, any additional calls throw the error...

 

TweenLite.to(circle, 1, { raphael:{fill:"#FF0000", cx:point.x, cy:point.y, r:scale}, ease:Power2.easeOut})

 

Error: _numExp is not defined

file:///Users/martis/dev/soz/flash_v2/deploy/js/plugins/RaphaelPlugin.min.js

Line 14

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...