Jump to content
Search Community

mattsm

Members

  • Posts

    7

  • Joined

  • Last visited

 Content Type 

Posts posted by mattsm

    Illustrator Paths

    in GSAP (Flash)

    Posted

    This path comes from an SVG exported from Illustrator.

     

    <path fill="none" stroke="#231F20" d="M66,81.25c156.25,3,269-76,70.5-46.25"/>

    </svg>

     

    So I want to extract values I can use with the Bezier plugin.

     

    bezier:[{x:66, y:81.25}....]

     

    Is there anything that would make this process easier? Maybe something other than Illustrator?

    Using Timelines

    in GSAP

    Posted

    There's probably something obvious I'm missing here, but I can't get this timeline to run. If I do the tween outside of the timeline it works.

     

    <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tween</title>
<script src="TweenMax.min.js" type="text/javascript"></script>
<script type="text/javascript">
function init() {
var title = document.getElementsByTagName('h1')[0];
var t1 = new TimelineLite();
tl.to(title, 1, {css:{color:"purple"}});
//TweenLite.to(title, 1, {css:{color:"green"}});
}
</script>
</head>
<body onLoad="init()">
<h1>The Title</h1>
</body>
</html>

    Tween Curved Line

    in GSAP (Flash)

    Posted

    I got something working by binding the curve controls to an invisible movie clip. Then the movie clip can be tweened using the easing etc.

     

    import flash.display.Shape;
import flash.events.Event;
import com.greensock.*;
import com.greensock.easing.*;
import flash.display.MovieClip;

var curve:Shape = new Shape();
addChild(curve);

var ctrl:MovieClip = new MovieClip;
ctrl.x = 0;
ctrl.y = 100;

var tl:TimelineMax = new TimelineMax();
tl.append(new TweenMax(ctrl,10,{x:300,y:30,onUpdate:drawCurve,ease:Bounce.easeOut}));

function drawCurve():void
{
curve.graphics.clear();
curve.graphics.lineStyle(4, 0);
curve.graphics.moveTo(100, 100);
curve.graphics.curveTo(ctrl.x, ctrl.y, 200, 200);
}

    Tween Curved Line

    in GSAP (Flash)

    Posted

    I figured out how to Tween a curve just using ENTER_FRAME. Am I missing something in GreenSock that does this?

     

    import flash.display.Shape;
import flash.events.Event;

var newMoon:Shape = new Shape();
var controlX:int = 30;
var controlY:int = 150;
var anchorX:int = 100;
var anchorY:int = 200;

newMoon.graphics.lineStyle(1, 0);
newMoon.graphics.moveTo(100, 100);
newMoon.graphics.curveTo(controlX, controlY, anchorX, anchorY);

addChild(newMoon);

addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(e:Event):void
{
controlX++;
newMoon.graphics.clear();
newMoon.graphics.lineStyle(1, 0);
newMoon.graphics.moveTo(100, 100);
newMoon.graphics.curveTo(controlX, controlY, anchorX, anchorY);
}

×
×
  • Create New...