Jump to content
Search Community

mattsm

Members
  • Posts

    7
  • Joined

  • Last visited

mattsm's Achievements

0

Reputation

  1. 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?
  2. mattsm

    Using Timelines

    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>
  3. 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); }
  4. 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); }
  5. On your demo page I'm wanting to tween the line itself (rather than the ball). So for example, tweening one of the bezier anchors from {x:200, y:400} to {x:300, y:500}. You think I have to use a drawing API for that?
  6. Does anyone know how to tween a curved line? I'm trying to figure out how to get a small wave in a line.
×
×
  • Create New...