Carl

Damian, Glad to help. Yeah, your final code is great and I like the switch on the navClick. As for best practices and classes v timeline code. It can be a divisive issue. The way things are going I would encourage you to experiment more with breaking things into classes as that is the way things are going and you will learn good habits that will pay off as your skills increase and the scope of your projects increase. I find with my audience and the style of tutorials I do it is just easier to keep everything in one file and focus on very basic concepts. Also I'm no master of the class-based approach as I am still learning and sorting it all out. There is a time and a place for everything. There is plenty of cool stuff you can do on frame 1 of a timeline but it can get messy fast. The main problem is that most people (with no programming experience) struggle just to understand how to "click the button and go to a url"... when you throw in... create a new AS file... import these 12 classes... make this a private function... this protected... extend that... I feel it is a huge barrier to people who just want to make a circle bounce and change color every 5 seconds;) If you are just starting out, continue to read as much about OOP as you can... it will pay off! You should be very pleased with yourself for getting your project to work as you did. If you can get that far you have what it takes to keep learning more and it will get progressively easier. Carl

Hey iceKomo, I'm flying a bit blind here but what I'll take a stab. what happens if you remove this.mouseChildren = false. does this class define the behavior of a menu that contains individual buttons or does it define the behavior of an individual button? the best thing to do is run a trace(event.target.name) in your mouse event handler functions. I'm thinking that killing the mouseChildren is preventing subclips from being the target of mouse events. Carl

Hello, First, off congratulations on getting your buttons to work and your effort to implement the greensock classes. There are so many cool things to play with. There are many ways to get things done with AS3 in general and greensock. As for the efficiency aspect of your code. I don't see that there is much benefit to using TimelineLite in your particular case as TweenLite on its own can handle the simple fade. TimelineLite comes into play more when you are dealing with sequencing tweens. I notice you are using the timeScale property which is cool, but if you just have one tween, changing the duration is just as easy as setting a timeScale. your event handler functions code could simply be: function navBtnRollOver(evt:MouseEvent):void { TweenLite.to(this.deco_mc, .4, {alpha:1, ease:Sine.easeIn}); } function navBtnRollOut(evt:MouseEvent):void { TweenLite.to(this.deco_mc, .4, {alpha:0, ease:Sine.easeOut}); } I guess having timelineLites built could help for extending the animation effects in the future, but for a fade-in it is a bit overkill. Below are a few video tutorials I made that show a few different ways of efficiently having multiple MovieClip buttons share similar functionality. They are not class-based but pretty much hammer home the concepts of using target vs currentTarget properties of event objects. If anything download the sample files and take a look at them. They may serve as a good starting point for projects in the future. http://www.snorkl.tv/2010/08/assign-eve ... enttarget/ http://www.snorkl.tv/2010/11/create-a-s ... y-clicked/ http://www.snorkl.tv/2010/11/part-1-bui ... flash-as3/ http://www.snorkl.tv/2010/09/tweenmax-t ... wn-by-now/ of greater importance: http://www.greensock.com/tweening-tips/ read the api docs often! spend time reading through the posts on this forum. there is so much good stuff hidden in here. enjoy Carl

hey artguy, first, and it's probably just a typo or you forgot to uncomment something you were testing: mc_play.addEventListener(MouseEvent.ROLL_OVER, forward); mc_play.addEventListener(MouseEvent.ROLL_OVER, reverse); you are overwriting the first ROLL_OVER on mc_play with the second. next, reverse() is a method that gets applied to a tween and not a movie clip directly. here is a basic implementation: import com.greensock.*; import com.greensock.easing.*; btn.addEventListener(MouseEvent.ROLL_OVER, btnOver); btn.addEventListener(MouseEvent.ROLL_OUT, btnOut); var playMovie:TweenMax ; function btnOver(e:MouseEvent):void{ playMovie = TweenMax.to(play_mc, 1, {frameLabel:"end"}); } function btnOut(e:MouseEvent):void{ playMovie.reverse(); } so you are telling the tween to reverse and not the movie clip. have fun Carl

from what i'm getting of your situation (and i could be wrong)... i think the solution could be much simpler. I would suggest taking the use of the duration of the video as a delay / offset out of the equation completely. add an onComplete callback to the arrow tween that does a timeline.pause(). Or whenever it is that the video starts playing when the video is done playing fire an event that will trigger the timeline to resume or play. when the user clicks "skip" do the same. it appears you are already using an onComplete and have a solid knowledge of greensocky stuff so it should be pretty easy for you to whip up. its my impression that when the video is playing, the timeline isn't tweening any other objects so pausing it shouldn't hurt. when you resume... everything just tweens out as scheduled. hope this helps -Carl

add the imports import com.greensock.*; import com.greensock.easing.*; assuming your button is starting with a y of 0: btn.tween = TweenLite.to(btn, 3, {y:2-*(btn.height + 10), ease:Elastic.easeOut}; take a look at the interactive tweening demo here: http://www.greensock.com/tweenlite/ enjoy greensock. Carl

fixed fla attached here is the code import flash.display.MovieClip; import com.greensock.*; import com.greensock.plugins.*; import com.greensock.TweenMax; import flash.events.MouseEvent; import fl.transitions.*; import fl.transitions.easing.*; var imageLoader:Loader; var xml:XML; var xmlList:XMLList; var xmlLoader:URLLoader = new URLLoader(); var numClips:int=6; var columns:int=2; xmlLoader.load(new URLRequest("data/images.xml")); xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded); function xmlLoaded(event:Event):void { xml=XML(event.target.data); xmlList=xml.children(); for (var i:int = 0; i imageLoader = new Loader(); imageLoader.load(new URLRequest(xmlList[i].attribute("thumb"))); imageLoader.x = 6 +( i % columns )*600; imageLoader.y = 6 +(Math.floor(i/columns)*106); imageLoader.name=xmlList[i].attribute("source"); imageLoader.addEventListener(MouseEvent.CLICK, showPicture); //Carl did this: imageLoader.alpha=0; imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, startListener) //addChild(imageLoader); } } function showPicture(event:MouseEvent):void { imageLoader = new Loader(); imageLoader.load(new URLRequest(event.target.name)); imageLoader.x=165 imageLoader.y=6; //Carl did this imageLoader.alpha=0; imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, startListener) //addChild(imageLoader); } //this is where the fade happens function startListener(e:Event):void{ trace("loaded"+ e.target); var thisClip = e.target.loader; addChild(thisClip); TweenMax.to(thisClip, 1, {alpha:1}) } each imageLoader now has the ON_COMPLETE listener added to its contentLoaderInfo. one thing to watch out for in the future... you are literally re-creating A NEW loader over and over each time you click on a thumbnail and adding it to the stage. if you click the first thumb 10 times... the large image will load 10 times and you will have 10 instances of that image on the stage. in a larger gallery this could become problematic. for now, it works Carl

you can just attach it to this thread / post. just hit "post reply" and use the upload attachment tab under the submit button.

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

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

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

the one thing that jumps out is onComplete: rollOverListen_global2(), should be onComplete: rollOverListen_global2, kill the parens()

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}); } }

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

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

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});

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

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

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.

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!

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

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

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?

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

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.