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. hello kbat, In order for TweenLite/Max to work in your gallery you are missing a very important component and that is an eventListener that will run when the images complete loading. You can read about event.COMPLETE here: http://www.republicofcode.com/tutorials ... as3loader/ if you tween the imageLoader before the content loads, it won't work very well. So you will need to add an evenListener to each imageLoader. I'm reluctant to provide a complete code solution as it isn't possible for me to test your existing code. If you post a zip of your gallery working I can take a look at it. Please try to keep it small with just a few images. Carl
  2. you should watch this video: http://tv.adobe.com/watch/actionscript- ... pisode-13/ I think you will find that after watching the majority of these: http://tv.adobe.com/show/actionscript-1 ... ug-winnie/ you will have a good solid base for doing more with greensock. happy flashing Carl
  3. an array in its simplest terms allows you to create a list of items. see: http://www.republicofcode.com/tutorials ... as3arrays/ the code you gave implies that you have an array that stores the names of all the movie clips you want to animate. so you would do something like this: var lettersArray:Array = new Array(a_mc, b_mc, c_mc, d_mc); you would also have to have movie clips on the stage with instance names a_mc, b_mc, c_mc now when you call timeline.insertMultiple( TweenMax.allFrom(lettersArray, 1, {y:"-30", alpha:0, ease:Elastic.easeOut}, 0.04), 1.4); each movie clip that is referenced in lettersArray will tween you could literally tween 100s of movie clips in this fashion
  4. the one thing that jumps out is onComplete: rollOverListen_global2(), should be onComplete: rollOverListen_global2, kill the parens()
  5. TweenMax has an isTweening() method that can check if an object is tweening or not. in the example below, the roll over listener checks the isTweening value of box_mc. If isTweening = true, the tween will not restart box_mc.addEventListener(MouseEvent.ROLL_OVER, boxOver); function boxOver(e:MouseEvent) { if (!TweenMax.isTweening(box_mc)) { TweenMax.fromTo(box_mc, 5, {scaleX:1}, {scaleX:5}); } }
  6. yeah, i'm a little lost in the explanation, but i think the problem is that you are mistaking how flash handles 3D. (not your fault) It isn't true 3d, its a pseudo 3d. when you do z-axis transformations it scales and moves objects so that they appear to be farther or closer, but it doesn't handle the layering of foreground and background elements. if in your flipper you have your back and front cards positioned on top of each other, try doing a 3d rotationX/Y rotation on the timeline with a motion tween... you'll see that the front card is always on front... there really is no back regardless of the z settings or even if they are in different layers, there is no top card or bottom card. I imagine you were trying to account for this by toggling the visibility. what you were hoping to have happen definitely makes sense in the real world... but not the flash ide what you want to do is have both front and back in your flipper clip with the instance names font and back. do a series of tweens like this import com.greensock.*; import com.greensock.easing.*; //hide the back flipper.back.alpha=0; //flip the font 90 TweenMax.to(flipper.front, .5, {rotationY:90, ease:Linear.easeNone}); //hide the front when it reaches 90 TweenMax.to(flipper.front, 0, {alpha:0, delay:.5}); //show the back as the front hides TweenMax.to(flipper.back, 0, {alpha:1, delay:.5}); //flip the back from 90 to 180 TweenMax.fromTo(flipper.back, 1, {rotationY:90}, {rotationY:180, ease:Linear.easeNone, delay:.5}) there are probably more elegant ways of doing this with timelinemax and callback functions or listeners, but this simple approach will do the trick. Carl
  7. ok, so if you want to tween back and forth along the x and also want a specific destination x you can put your bubbles in a container. zig zag them in the container, and then tell the container exactly where it should end. image in you create a movie clip in flash called box_mc. inside of it create motion tween of a ball moving back and forth. on the stage create a tween of the box_mc moving up and down. it will give you wormy, snake like action. with timelinemax you can do the same thing. take a look here: http://www.snorkl.tv/dev/bubbles/dimitri-bubbles.html each bubble is placed in a bubble holder. the bubble moves back and forth (random wiggle amount) as the holder is told a specific x/y ending position. in my example the end point is random... but it is specific. function createBubble() { //create a bubble (attach symbol in library with Class Bubble) var bubbleHolder:MovieClip = new MovieClip(); var bubble:Bubble = new Bubble(); bubbleHolder.y=20; bubbleHolder.x=20; bubbleHolder.alpha=0; bubbleHolder.visible=false; addChild(bubbleHolder); bubbleHolder.addChild(bubble); //create timeline for each bubble var nestedTl:TimelineMax = new TimelineMax(); //how much wiggling / zig zagging var wiggle:Number=randomRange(10,100); //how fast and big var speed:Number=2.5; //fade and grow nestedTl.insert(TweenMax.to(bubbleHolder, .5, {autoAlpha:randomRange(.5,1), scaleX:speed, scaleY:speed})); //go up nestedTl.insert(TweenMax.to(bubbleHolder, speed, {y:350, x:randomRange(250, 500), ease:Quad.easeIn})); //zig zag nestedTl.insert(TweenMax.to(bubble, speed*.15, {x:String(wiggle), repeat:5, yoyo:true, ease:Linear.easeNone})); //append new timeline very close to when the previous one started //don't even ask about the offset...k? var offset:Number = -speed*.5 trace(offset) tl.append(nestedTl, offset) } while playing around with a few parameters (having each bubble follow the same wiggle and speed parameters but starting just slightly after the previous... you get something that LOOKS LIKE A SNAKE! http://www.snorkl.tv/dev/bubbles/dimitri-snake.html I've zipped up the files if you want to mess with them. I think if you threw in a custom ease like jack suggested, you could get some interesting effects Carl
  8. 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});
  9. 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
  10. 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
  11. 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.
  12. 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!
  13. 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
  14. 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
  15. 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?
  16. 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
  17. 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.
  18. yeah, check out delayedCall(). TweenLite.delayedCall(3, someFunction); someFunction will run after 3 seconds. http://www.greensock.com/as/docs/tween/ ... layedCall()
  19. 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
  20. 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/
  21. 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
  22. 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]);
  23. 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
  24. 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
  25. hey, glad you got a solution. you can also use tl.resume(); carl
×