Jump to content
GreenSock

Carl last won the day on December 31 2022

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,710
  • Joined

  • Last visited

  • Days Won

    541

Everything posted by Carl

  1. in my toying around I found it was great for -archaic 80's style video game animation -a killer blink! TweenMax.to(box_mc, .2, {tint:"0x3AB7D6", ease:SteppedEase.create(1), repeat:-1});
  2. Hello Dimitri, I don't think I have a solution for a snake, but your bubbles style of animation got me thinking. To create a bubble going up and zig zagging back and forth you create a tween along the y axis going from high number to a low number. Let's assume your bubbles start at the bottom of the stage. TweenMax.to(bubble_mc, 2, {y:-20}); // moves bubble from bottom to top in 2 seconds While it's going up it also has to zig and zag along the x axis so add a tween like so TweenMax.to(bubble_mc, 2, {x:"10"}); now that will only move 10 pixels to the right of where it started once over 2 seconds using a few greensock bells and whistles make it go back and forth by editing the x tween like this: TweenMax.to(bubble_mc, .5, {x:"10", repeat:2, yoyo:true}); so now as it is moving up, it it goes start > right : right > start : start > right with each zig and zag taking .5 seconds you are zig-zagging for 1.5 seconds while the bubble rises for 2 seconds. Now assuming you have your bachelor's degree in timelinemax take a look here: http://www.snorkl.tv/dev/bubbles/bubbles.html What's happening there is: 500 bubbles are being created Each bubble is placed in a timelinemax with a tween for vertical movement and a tween for horizontal movement The parameters of both tweens are randomized a few different ways. Each bubble's timelinemax container is then nested inside a main timelinemax This allows you to create a particle system that can: have its speed adjusted on the fly be played in reverse be repeated any number of times and more. I wrote this code very late at night and was experimenting and learning a lot along the way. It's my first time doing anything like this so it is pretty ugly import com.greensock.*; import com.greensock.easing.*; var tl:TimelineMax=new TimelineMax({paused:true, onComplete:done}); function createBubble() { //create a bubble (attach symbol in library with Class Bubble) var bubble:Bubble = new Bubble(); bubble.y=380; bubble.x=randomRange(25,610); bubble.alpha=0; bubble.visible=false; addChild(bubble); //how much wiggling / zig zagging var wiggle:Number=randomRange(25,50); //zig or zag? wiggle = randomRange(0,1) > .5 ? -wiggle : wiggle; //how fast and big var speed:Number=randomRange(.2,3); //create timeline for each bubble var nestedTl:TimelineMax = new TimelineMax(); //fade and grow nestedTl.insert(TweenMax.to(bubble, .5, {autoAlpha:randomRange(.5,1), scaleX:speed, scaleY:speed})); //go up nestedTl.insert(TweenMax.to(bubble,speed, {y:-40, ease:Quad.easeIn})); //zig zag by making duration of zig 25% of vertical speed and repeating random number of times between 1 and 3.. i think nestedTl.insert(TweenMax.to(bubble, speed*.25, {x:String(wiggle), repeat:Math.floor(randomRange(1,4)), yoyo:true, ease:Linear.easeNone})); //append new timeline very close to when the previous one started tl.append(nestedTl, -speed*.95); } stage.addEventListener(MouseEvent.CLICK, go); function go(e:MouseEvent):void { //click to begin TweenMax.to(clicker, .5, {alpha:0}); tl.currentProgress=0; tl.play(); } function done() { trace("done"); TweenMax.to(clicker, .5, {alpha:1}); } function randomRange(min:Number, max:Number):Number { return min + (Math.random() * (max - min)); } for (var count:Number = 0; count createBubble(); } I have attached CS4 source files if you want to play around with it I will most likely do an intro to particle systems with timelinemax on snorkl.tv soon with a much simpler example, thanks for the inspiration. Carl
  3. hi learner_7n, For future reference, a question like this would be better serviced in a more general flash forum (http://forums.adobe.com/community/flash/flash_general) as opposed to one dedicated to the greensock tweening platform. This tutorial here should do the trick for now: http://www.ilike2flash.com/2009/12/disp ... ipt-3.html Carl
  4. Hello Neuralism, Take a look at this: import com.greensock.*; import com.greensock.easing.*; import com.greensock.events.TweenEvent; var flashLetters:Array = new Array( f_mc, l_mc, a_mc, s_mc, h_mc ); TweenMax.allTo(flashLetters, 1, {rotationX:90, onCompleteListener:myListener}, .05); function myListener(event:TweenEvent):void { trace("completed tween of " + event.target.target.name); TweenMax.to(event.target.target, 0, {alpha:0}); } So the allTo starts the staggered rotation of each mc. When each one completes, myListener knows exactly who each clip is via event.target.target. Right now each mc is getting its alpha set to 0 when its tween is done. You can grab any property of the currently tweened clip you want when that event fires. You can also use onStartListener, and onUpdateListener and others http://www.greensock.com/as/docs/tween/ ... enMax.html also, be sure to import com.greensock.events.TweenEvent as shown above.
  5. you know, I have a ton of work I'm supposed to do today... and you go ahead and create something new for us to mess with. gimme a break already! this is super cool!
  6. YO Seasonss, Good news. I just read another thread in this board and Jack had a great tip on easing a segment of a TimelineMax. You can use my technique AND use easing! 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{ TweenLite.to(tl, 2, {currentTime:0, ease:Bounce.easeOut}); } btn2.addEventListener(MouseEvent.CLICK, goBtn2); function goBtn2(e:MouseEvent):void{ TweenLite.to(tl, 2, {currentTime:tl.duration*.25, ease:Bounce.easeOut}); } btn3.addEventListener(MouseEvent.CLICK, goBtn3); function goBtn3(e:MouseEvent):void{ TweenLite.to(tl, 2, {currentTime:tl.duration*.5, ease:Bounce.easeOut}); } btn4.addEventListener(MouseEvent.CLICK, goBtn4); function goBtn4(e:MouseEvent):void{ TweenLite.to(tl, 2, {currentTime:tl.duration*.75, ease:Bounce.easeOut}); } btn5.addEventListener(MouseEvent.CLICK, goBtn5); function goBtn5(e:MouseEvent):void{ //tl.tweenTo(tl.duration); TweenLite.to(tl, 2, {currentTime:tl.duration, ease:Bounce.easeOut}); } New example: http://snorkl.tv/dev/bezier/bezierExample2.html
  7. reverse() will play the tween backwards from where ever the tween is currently as demonstrated by my previous example. I am not so sure what myTween.reverse(TweenPoint); is expected to do. did you try just myTween.reverse() ? reverse is only equipped to accept a boolean argument of forceResume, as per the documentation: I also see that whether or not the tween plays is dependent on the boolean value of Dir. if the tween has not yet played, I don't think reverse is going to do anything. It seems the most recent code example is a bit more advanced than the original question, so I apologize if I'm not totally equipped to give a real good answer. as for your second question, I believe that once a tween is built, it is built. If you want it to do something different you will have to re-create it. I could be wrong. In general, if you want to have more control over tweens, look into TimelineLite/Max. There are an abundance of methods for controlling complex animation. Being that it appears that you want to control a tween between various points on a bezier curve, the answer and example that I provided in this discussion: viewtopic.php?f=1&t=3969#p15718 may be of some tangential use. I truly hope this may be of some help and you are able to find a solution that suits your needs. Carl
  8. reverse() will play a tween backwards. var FooterTween:TweenMax = new TweenMax(Content_mc.Introduction.Footer, 5, {y:410}); someButton.addEventListener(MouseEvent.CLICK, reverseIt) function reverseIt(e:MouseEvent):void{ FooterTween.reverse(); } i imagine you could also call an onComplete function that uses reverse as well... but that would give you the same things as yoyo, no?
  9. There is a lot of information available on loading external assets. after reading the link I suggested above, please read and watch: http://www.greensock.com/loadermax-tips/ http://www.greensock.com/loadermax-video/ http://www.greensock.com/as/docs/tween/ ... oader.html (see the section AS3 Code Example) loaderMax is well suited to load a series of external assets, pause the loading of those assets and unLoad the assets when they are no longer needed. I would start with understanding how to load a single asset with swfLoader, then experiment with loaderMax and creating a queue. Once you have a queue that loads a series of assets successfully, you could have a onChildComplete function that pauses the queue, waits 30 seconds, and then resumes the queue. The resources above are a great place to start. Once you get you attempt to get a loaderMax queue, you may find some additional invaluable resources in the loaderMax forum: viewforum.php?f=6 Carl
  10. your code: TweenLite.to(myMC,1,{x:500,rotation:myMc.x * 0.5}); is basing its END rotation off of the x valye of myMC when the tween starts. Let's say you are starting at an x of 0, your end rotation will be 0*0.5 which will be 0. I would suggest 2 things to try: 1: since you know the end x value is going to be 500 just use that value when you provide the end rotation: TweenLite.to(myMC,1,{x:500,rotation:500 * 0.5}); 2: you can apply your rotation calculation every time the tween is updated TweenLite.to(myMC,1,{x:500, onUpdate:calculateRotation}); function calculateRotation(){ myMc.rotation = myMyc.x *.5; } both methods will most likely give you the same end result.
  11. yeah, check out delayedCall(). TweenLite.delayedCall(3, someFunction); someFunction will run after 3 seconds. http://www.greensock.com/as/docs/tween/ ... layedCall()
  12. var FooterTween:TweenMax = new TweenMax(Content_mc.Introduction.Footer, 5, {y:410, repeat:1, yoyo:true}); this will play the tween forward once and then in reverse. to repeat indefinitely change the repeat to repeat:-1 learn more here: http://www.greensock.com/as/docs/tween/ ... enMax.html
  13. assuming the problem is with waiting a minute and not loading the swf, you can use TweenLite.delayedCall() delayed call allows you to set a delay in seconds and also specify what function to run. you could use it like this: TweenLite.delayedCall(60, loadSwf) function loadSwf(){ trace("time to load the swf"); //add loaderMax code here to load swf } if you need to learn about loading external content read this: http://www.greensock.com/loadermax/
  14. it's a pleasure to help. I hadn't used roundProps before. there is always something more to learn. very glad it worked for you! carl
  15. Yeah, that can be done. But just to clarify for others, you are going to be tweening a numeric variable / property that will displayed in a textfield. here is some sample code that will do that for you: import com.greensock.*; import com.greensock.easing.*; var score:Number = 0; //start value var targetScore:Number = 20; //end value TweenLite.to(this, 1, {score:targetScore, onUpdate:showScore, ease:Linear.easeNone}); function showScore(){ trace(score); score_mc.score_txt.text = int(score); //you could also use Math.round() } basically you can tween any property, in this case score just like you would tween the alpha of a movieclip. In order to visualize the change in value of the score property, you use an onUpdate callback to round your number and then place it in a textfield. here is a video and source files for more explanation: http://www.snorkl.tv/2010/09/how-to-tween-a-variable-with-flash-and-tweenlite/ here is a good reference for rounding to certain decimal places if you ever need it: http://kb2.adobe.com/cps/155/tn_15542.html Once you understand the basic concept check out the roundProps plugin for tweenlite/max in the plugin explorer: http://www.greensock.com/tweenmax/ if using tweenMax, the code above could look like this: TweenMax.to(this, 1, {score:targetScore, roundProps:["score"], onUpdate:showScore, ease:Linear.easeNone }); AND you wouldn't have to use int() or round() in the onUpdate function. If using TweenLite, the roundProps plugin would have to be activated import com.greensock.plugins.*; TweenPlugin.activate([RoundPropsPlugin]);
  16. Hi Benkyma, Good morning! TweenLite can handle your effect with its eyes closed and not miss a beat. If you attach a stripped-down fla with just the pertinent thumbnail functionality saved as CS4 or earlier I will take a look at it. Also if you post a snippet of the AS code you are using to apply your roll_over and roll_out effects that could help as well. here is a checklist of things I would look into: -are you using the latest version of tweenlite -do you have other complex enterframe events firing or loops running -what is the framerate of the fla -is there anything wonky with the images being used, like being super large and just sized-down in the IDE. Also, try previewing your swf in a browser, on my end, using a high-powered mac with CS4, the flash player used during a control > test movie runs swfs really poorly and is not a good reference of how swfs will run in a browser or the stand-alone player. As a reference here is a little experimental project I built that loads around 50 thumbnails and does just a simple scale and colortransform on rollover. It should run buttery smooth (regardless of how quickly you rollover/out) and give you a good idea the excellent performance you can expect from TweenLite: http://www.doyouhaveapen.com/extranet/puzzle/. there is nothing fancy going on beyond normal usage of tweenlite. I am sure your problem can be solved. Carl
  17. hello jrojas, I don't think there is an out of the box greensock solution for this. Your example shows that the image is not dropped but thrown. What is happening theoretically is that the speed of your mouse along the x and y axis is constantly being determined, when you release the mouse that speed is used used to propel the image in the proper direction and friction slows it down. a partial example of the code involved is available here: http://efreedom.com/Question/1-1941989/ ... op-Inertia the physics2d plugin might come in handy. its a club greensock benefit and you can see its power in the plugin explorer: http://www.greensock.com/tweenlite/ regardless of the solution you use, you are going to have to determine the direction and speed of the mouse movement. to determine how hard the object is thrown and in which direction. This is often achieved by continuously sampling the current mouse position (on an EnterFrame or MouseMove event) compared to the previous mouse position (both mouseY mouseX). Try googling: drag and throw smooth drag drag and drop easing drag and drop inertia unfortunately it isn't a quick answer. Carl
  18. hey, glad you got a solution. you can also use tl.resume(); carl
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
×