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

Carl had the most liked content!

# Carl

Moderators

9,152

532

1. ## Tween on same velocity

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. ## BezierPlugin

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. ## create TimelineLite objects with a for loop

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. ## Advanced Animation with TimelineMax

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. ## Advanced Animation with TimelineMax

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. ## Advanced Animation with TimelineMax

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. ## onComplete and for loops

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. ## onComplete and for loops

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. ## Thanks and Quick Question

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