martis

Thanks for putting this together Jack! Got it implemented... On default android 2.3 browser I am getting WEIRD color shifts/outlines/rendering... works fine on everything else I tested. The performance of my canvas version is FAR slower than my SVG version on my iphone. SVG (Raph) still feels like the clear winner for tweening a small set of shape objects on mobile. (As long as it supports it) I am even cacheing/snapToPixel on all my shape objects. Anyone know why the drastic different in performance? (iphone4) I thought canvas was supposed to be the more modern technology

Here ya go! Can't wait to see the ColorProp plugin... <script src="lib/easeljs-0.4.2.min.js"></script> <script type="text/javascript" src="js/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/easing/EasePack.min.js"></script> <script type="text/javascript" src="js/TweenLite.min.js"></script> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> var canvas; var stage; var circle; var circleRadius = 94; function init() { TweenLite.ticker.addEventListener("tick", draw); canvas = document.getElementById('myCanvas'); width = canvas.width; height = canvas.height; stage = new Stage(canvas); stage.snapToPixelEnabled = true; circle = drawCircle(); circle.cache(-circleRadius, -circleRadius, circleRadius*2, circleRadius*2); circle.snapToPixel = true; circle.x = 200; circle.y = 200; stage.addChild(circle); stage.update(); TweenLite.to(circle, 1, {COLOR_PROP:"#FFFFFF", scaleX:.5, scaleY:.5, x:500, y:200, delay:1, ease:Power2.easeOut}); } function draw() { stage.update(); } function drawCircle() { var s = new Shape(); var g = s.graphics; g.beginFill(Graphics.getRGB(255, 0, 0)); g.drawCircle(0, 0, circleRadius) g.endFill(); return s; } </script>

Hey guys, I created a circle object using EaselJS, figured out how to easily tween the x, y, scaleX, scaleY, etc... but can't come up with a solution for tweening the FILL of the circle. Do I need to use ColorFilter and somehow tween that value? Thanks! p.s. I REALLY miss "tint" from AS version

Booyah! New version FTW! UPDATE: Using SVG + Raph plug was better performance over using CSS drawing (circles) + CSS tweens. Mostly saw the big difference on Iphone4. To see it visit on your mobile (desktop site has flash still) Circle and Line sections http://www.thegeminisociety.com

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

I guess the question is, what is faster from a process and animation standpoint: animating CSS properties or SVG attributes? ie.. CSS left, top VS SVG cx, cy

Yep, that worked... Do you guys think I could get better performance by drawing the circle in unique DIVs and animating the divs using CSS or animating the actual Raph circle object?

Nm, circles use cx, cy, not x, y

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}); }

Thank you Carl, Not getting the performance I want with CSS corners trick, gonna try Raph, then potentially canvas.

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!

My first round solution looks like this: sequence = [moveRight, moveDown, expand]; for(var i:uint = 0; i < sequence.length; i++) { var label : String = TimelineMax(sequence[i]).vars.name; MT.addLabel(label, MT.duration); MT.insert(sequence[i], label); } MT is my main timelinemax instance. moveRight, moveDown, and expand are TimelineMax instances. I gave those instances names in the var object and used that to create frame labels... It's working great so far, but any other methods are welcome. Thanks!

Hi guys, I want to create 1 Master Timeline (MT) with multiple timelines sequenced within that MT. I want to be able to jump between these nested timelines (skip forward and skip backward). My question is: How can I give each of them a label while still using insertMultiple to the MT so I can use getLabelAfter() and getLabelBefore()? I have tried getActive() on the MT and tried restart/complete on the active timeline, but have had wonky results with future timelines running. I think the gotoAndPlayLabel would be the safest bet? Thanks!

I do, thanks... I will try to ditch the transformAroundCenter, thanks for the quick reply!

I am only using transformAroundCenter for the rotation, not the x, y. Does this help?

Hey Jack, I am using TweenMax 10.12 (AS3). I have run into a problem where... if I tween something like so... TweenMax.to(thumb, slideTime, {transformAroundCenter:{rotation:this.layoutData[index].rotation}, x:this.layoutData[index].point.x, y:this.layoutData[index].point.y, ease:Back.easeOut, onComplete:thumbTweenComplete, onCompleteParams:[thumb] }); then later try to do something like... TweenMax.to(clickedThumb, slideTime, {transformAroundCenter:{rotation:this.layoutData[0].rotation}, bezierThrough:[{x:200, y:200}, {x:this.layoutData[0].point.x, y:this.layoutData[0].point.y}], ease:Quad.easeOut, onComplete:thumbTweenComplete, onCompleteParams:[clickedThumb] }); The x, y of the object will not tween. I tried using overwrite:1, that seemed to work, but it doesn't work in a browser?? Have you ran into any problems with do a normal x, y tween then later trying to do a bezier tween? Thanks