Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Carl last won the day on April 4 2019

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,152
  • Joined

  • Last visited

  • Days Won

    532

Everything posted by Carl

  1. check out this thread here. viewtopic.php?f=1&t=3853 basically you have to figure out the duration based on distance prior to setting up the tween. carl
  2. hey seasonss, That is a very intriguing effect you are going for. I don't have the best answer, but hopefully this simplified approach might spark some ideas that you can implement. check this out: http://snorkl.tv/dev/bezier/ This is my first time working with the bezier plugin so I wanted to keep it real simple. Basically there is ONE tween in a TimelineMax instance. Each button is set up to have the TimelineMax play to 25% intervals along the timeline. btn 1 goes to 0% btn 2 goes to 25% btn 3 goes to 75% btn4 goes to 100% here is the code: import com.greensock.*; import com.greensock.easing.*; var tl:TimelineMax = new TimelineMax({paused:true}); tl.insert(TweenMax.to(floater_mc, 2, {bezierThrough:[{x:400, y:300}, {x:700, y:150}], orientToBezier:true, ease:Linear.easeNone})) btn1.addEventListener(MouseEvent.CLICK, goBtn1); function goBtn1(e:MouseEvent):void{ tl.tweenTo(0); //tween to beginning of timeline } btn2.addEventListener(MouseEvent.CLICK, goBtn2); function goBtn2(e:MouseEvent):void{ tl.tweenTo(tl.duration *.25); // tween to 25% the duration of the timeline } btn3.addEventListener(MouseEvent.CLICK, goBtn3); function goBtn3(e:MouseEvent):void{ tl.tweenTo(tl.duration *.5); // } btn4.addEventListener(MouseEvent.CLICK, goBtn4); function goBtn4(e:MouseEvent):void{ tl.tweenTo(tl.duration *.75); } btn5.addEventListener(MouseEvent.CLICK, goBtn5); function goBtn5(e:MouseEvent):void{ tl.tweenTo(tl.duration); } Benefits once you figure out your bezier control points its really easy to get working. the amount of code is ridiculously insignificant. Drawbacks does not support easing since there is constant speed, there is a direct 1:1 relationship between amount of time elapsed and amount of distance travelled. this makes it real easy to figure out what point in time each button should tween to. Another approach might be to make a movie clip with the triangle tweening along a motion guide. you could then add framelabels to the movie clip and use tweenlite to tween to various frames on that timeline. you would gain the ability to use easing. your buttons would call functions that would do things like: TweenLite.to(nav_mc, 1, {frameLabel:"tutorials", ease:Cubic.easeOut}); TweenLite.to(nav_mc, 1, {frameLabel:"game", ease:Cubic.easeOut}); hopefully one of these options suits you. let us know how it goes. Carl
  3. There were a few syntax errors in there. The following code will not throw any errors and if you have movieclips called object1, and object2 on the stage. they will appear to grow once. import com.greensock.*; import com.greensock.easing.*; var timeline1:TimelineLite; var timeline2:TimelineLite; var timeline3:TimelineLite; var timeline4:TimelineLite; var timeline5:TimelineLite; var timeline6:TimelineLite; var timeline7:TimelineLite; var timeline8:TimelineLite; var timelineArray:Array; timelineArray = new Array(timeline1,timeline2,timeline3,timeline4,timeline5,timeline6,timeline7,timeline8); for(var i = 0; i myFunction(i); } function myFunction(number){ timelineArray[number] = new TimelineLite(); timelineArray[number].insertMultiple([ TweenMax.to(object1,1, {scaleY:2,ease:Back.easeOut}), TweenMax.to(object2,1,{scaleX:2,ease:Back.easeOut}) ], 0, TweenAlign.START, 0.3); } What you are doing here is creating 8 timelines that all tell the same 2 objects to change the same property on each clip all at the same time. here are some of the thing i fixed: function myFunction(number){ var number; doesn't do anything timelineArray[number]:TimelineLite kill that = new TimelineLite(); timelineArray[number].insertMultiple([ TweenMax.to(object1,1{scale there is no scale property, use scaleX and or scaleY :1,ease:Back.easeOut}), TweenMax.to(object2,1,{scale:1,ease:Back.easeOut}), ] hard bracket ] in the wrong place (see my code), 0, TweenAlign.START, 0.3); } It is a little tricky keeping track of the ()[] when using insertMultiple. But once you do it right a few times it comes natural. since you are using a loop, you could probably avoid declaring all the timelines at the top and manually inserting them into your array. Perhaps you can explain what you are trying to accomplish and someone can help you optimize your code. Keep at it. Carl
  4. Very cool. Hey, sometimes we are forced to stick with what works for the moment. I am absolutely certain your experimentation will pay off. Thanks for sharing the final product! -Carl
  5. Hey Jamie, well I just couldn't let this rest...had to give it a shot. the finished product can be viewed here: http://www.snorkl.tv/dev/seriesBackAndForth/ THE CODE: import com.greensock.*; import com.greensock.easing.*; //create TimelineMax instance and set to repeat infinitely var timeline:TimelineMax = new TimelineMax({repeat:-1}); //speed vars var inOutDuration:Number = .5; var slideDuration:Number = 3; //array of all clips //note: since clips are named chronologically they don't need to be an array, but its nice:) //we could just loop through them by name "t" + i var boxes_arr:Array=new Array(t1,t2,t3,t4,t5,t6); //loop through each item in the array for (var key:String in boxes_arr) { //create reference to each individual clip var mc:MovieClip=MovieClip(boxes_arr[key]); //detect clips with index of 0,2,4,6... //by checking if the current index divided by 2 has a reminder aka modulo operation if ((Number(key)%2)==0) { trace(key + " even"); //create left -> right sequence timeline.append(TweenMax.to(mc, 0, {x:-200, y:12, blurFilter:{blurX:20}})); timeline.append(TweenMax.to(mc, inOutDuration, {x:20, blurFilter:{blurX:0}, delay:.5})); timeline.append(TweenMax.to(mc, slideDuration, {x:440, ease:Linear.easeNone})); timeline.append(TweenMax.to(mc, inOutDuration, {x:660, blurFilter:{blurX:20}})); } else { //create right -> left sequence timeline.append(TweenMax.to(mc, 0, {x:660, y:12, blurFilter:{blurX:20}})); timeline.append(TweenMax.to(mc, inOutDuration, {x:440, blurFilter:{blurX:0}, delay:.5})); timeline.append(TweenMax.to(mc, slideDuration, {x:20, ease:Linear.easeNone})); timeline.append(TweenMax.to(mc, inOutDuration, {x:-200, blurFilter:{blurX:20}})); } } Note the first append() in each sequence. I'm using this to initialize all the start values, instead of doing the .from() like you. I only took this approach as it allows me to have my movie clips arranged however I want, fully visible off-stage (see image below). Makes it real easy for myself and clients to select and edit symbols without having to have them all on top of each other in separate layers or whatever. No real difference in the way the swf runs. I axed my idea of making each sequence its own timeline as I didn't see any advantage in that. Perhaps if each sequence needed to yoyo or have callbacks added it would make sense. If you need any help deciphering the code just let me know. I'm really impressed with your ability to watch my vid and jump right in and try to build something like this. I can make videos til you turn blue, but unless you challenge yourself like this... its pointless. Great job! Honestly, it helped get my brain into gear this morning and revived my love for TimelineMax ! This was an excellent example of showing where TimelineMax really shines. Doing this on the flash timeline would have been a nightmare to setup or make global edits to. I regret that I'm still not quite seeing your point: " to change the array I would do one of the following: edit the array by hand in code programmatically reverse the array : array.reverse() The array simply lets you dictate the exact order the clips are added to the timeline. Its up to us to put them in their in the desired order. Does this help? If i'm totally misunderstanding, let me know. I hope my code and examples help. I'll attach a zip of the all the source for you and anyone else. Carl
  6. Hi Jamie, I gotta say I really appreciate the clarity of your question and the effort that went in to explaining a fairly complex issue. I've looked at your swfs (a huge help) and definitely know the results the solution should produce. There are a few ways to tackle this and I'll probably come up with a solution somewhere right between the best and worst;) I think where I'm headed with this is that each sequence will be converted to a new timeline with the following tweens: 1:clip slides on screen quickly 2:clip slides across screen a bit slower 3:clip zips out then I will add all these sub timelines, to a main timeline. most likely I will put all your clips into one array. then i'll loop through the array and all the odd numbered clips will be placed in a timeline that handles left > right movement, and even numbered clips will move right > left. this is definitely a good exercise for me to get some real-world timelineMax experience! I'll let you know when this is done. Would love for it to be today, but can't promise. Best, Carl
  7. oh snap. I didn't think of that. although by passing in the y property as a string "50", all icons will move 50pixels from where they are, so if you have a clever way of placing them initially 50 pixels away from where they are going too... ahhh probably won't get you away from the loop anyway. hmmm. (i'm just using 50 x pixels as an example). Well since you have a loop already in place, you can append all your tweens into a TimelineLite/Max instance and then at least when the timeline is done you can fire an onComplete function. as far as the amount of code needed it will probably be a touch more than your existing loop, but it may get you a few personal neatness points
  8. Yeah, if you put all your icons in an array you can use TweenMax.allFrom or TweenMax.allTo like so: var icons:Array = new Array(icon1, icon2, icon3); TweenMax.allTo(icons, 1, {y:"50"}, 0, done); function done(){ trace("done"); } //0: delay / stagger between tweens running //done: name of function to call when all tweens are complete
  9. Hey Alaricoffir, TimelineMax instances start playing immediately. Since you tl instance has nothing in it is completes instantly. try this import com.greensock.TimelineMax; var tl:TimelineMax = new TimelineMax({onComplete:complete, paused:true}); tl.insert(new TweenLite(movieClipInstanceName, 2, {alpha:0})); tl.play(); function complete():void { trace('completed'); } note the paused:true in the constructor. this tells the timeline not to play instantly. also note the addition on tweenlite instance and the tl.play() method... that gets it going. once you experiment with timelinemax a bit you will be in love. Carl
  10. Thanks wjt. I appreciate your kind comments and support. I'm just getting rolling.
  11. Jack, Wow. I'm totally grateful to you. I had no idea about the promotion / contest. The concept of YOU giving something to ME is difficult to comprehend. TweenMax has saved my butt on soooo many occasions. Just recently on a project I was dying to get my hands on the customEase classes as I needed something just slightly snappier than a Back.easeOut. I've always been really eager to dig into splitTextfield as well. I made something that works similarly for myself awhile ago but it isn't very flexible and I know it is complete garbage compared to what you have made. I look forward to getting into these premium features. When I started making Flash tutorials I wanted to focus on things that are easy to comprehend and help beginners add big value to their workflow and end results. Your tweening platform has so many little nuggets to explore that meet that criteria. Whenever I consider what to tutorialize, TweenMax is so much more fun to talk about than generic AS3. I will gladly keep churning them out. Again, thanks so much for allowing me to post here, your kind comments, and generous reward. Carl
  12. Hey Guys and the Exalted Greensock, I've been using greensock code for quite awhile and wanted to share a few quick video tutorials I've done that highlight some awesome features of the platform. Hopefully these videos will get you excited about using this tool and open your eyes to the fact that its much more than just making things move from point A to B. I've gained so much from using this platform and from the flash community as a whole. Its time to give a little back: Random Color Tweens http://www.snorkl.tv/2010/08/flash-cs4-actionscript-3-0-and-tweenmax-random-tint-color-tween/ How to Tween A Variable / What the heck is onUpdate for? http://www.snorkl.tv/2010/09/how-to-tween-a-variable-with-flash-and-tweenlite/ Random Perpetual Motion with TweenMax http://www.snorkl.tv/2010/08/tweenmax-and-actionscript-random-perpetual-motion-tutorial/ Easiest way to pause A Flash timeline for any amount of time without adding tons of frames http://www.snorkl.tv/2010/09/how-to-pause-a-flash-timeline-without-adding-frames-or-using-a-clunky-timer/ Love, Carl
×