cerulean

I'd like to use LoaderMax to load an xml file that will contain references to other xml files, one of which will contain nodes representing imageloaders. I don't want to add these images to the display list immediately but instead have reference to them, perhaps in an array. What's the best way to grab references to these loaded images from layers down? Put a complete function on each image loaded? Is there a simpler way I imagine the pseudo-xml something like this: _myLoaderMax.load(mainXML, onComplete:getTheImages); function getTheImages():void { _myImageArray = getTheImagesFromLoaderSomehow(_myLoaderMax); } <mainxml> <xmlloader url='imagexml' load='true'/> </mainxml> <imagexml> <imageloader url='myimage1' load='true'/> <imageloader url='myimage2' load='true'/> </imagexml> Would it be using getContent() at the appropriate level -- i.e. pseudocode _myXMLLoader= _myLoaderMax.getLoader('myXML'); _myImageContent:Array = _myXMLLoader.getContent() On another related note — what's the best practice for making sure everything loaded via LoaderMax is garbage collected? That is, I can set the main LoaderMax to have autodispose='true', but will that also dispose of all sub-loaders? I realize that if I put listeners on any loaded assets, etc, that will affect garbage collection, but do the GS loaders hold on to loaded assets in any fashion? Is there anything I need to do to make sure GC works well? I see that there are references to unload() in LoaderCore, but how does one recursively unload everything? Thanks

Yes, thanks. Of course, the variable remains in scope! I don't know why I was making it so hard on myself — I will blame it on switching back to AS3 after several months of javascript (although it's the same thing in JS, no?). Yes, that must be it. :-> Oh, now I remember — it was that I didn't know _which_ class variable I would be modifying, so I wanted to pass that as a parameter to the function. That's why I couldn't simply assign it to the class variable. My convoluted question was about that -- how to pass a variable name as a parameter. In any case, the dictionary will work fine.

Is there anything to be aware of when creating many timelines as far as making sure they are disposed of properly? I've got TImelineMax's that, on completion, create other timelines (a sort of onComplete recursion) -- so that each timeline, although tweening the same objects, can have new random variables. I assume that the old timelines will be garbage collected. I call .kill() on them just to be sure, but of course they've already completed. While I'm at it, may I ask a probably stupid basic AS3 question? I've got several objects I'm tweening with my TimelineMax's. If I do something like this: private var _tl1:TimelineMax; private var _tl2:TimelineMax; and then I have a call like function makeANewTimlineMax($tl:TimelineMax,$tweenClip):void { var newTL = newTimelineMax.to($tweenClip,1,{onComplete:makeANewTimelineMax,onCompleteParams:["{self}"]}); // private variable referencing $tl = newTL ??? } is there any way to access the _variable_ to which the TimelineMax _was assigned_? That is, I don't know whether the timeline was assigned to _tl1 or _tl2 but I want to change the values in those variables to point to the newly created timeline. I think not -- I mean we're passing a reference to a timeline, which is, if this were C, a pointer to some memory, and _tl1 and _tl2 just hold the value of that pointer. But there's no way to change _tl1 and _tl2 then, because there's no non-kludgy way to track back from the reference passed to my function to any number of possible variables which _also_ hold that reference, right? I think I've answered my question, but it smacked my mind, trying to figure this out. — In the end I did something like this, which worked fine -- the reason I'm keeping a reference to the tl's somewhere is so that later I can stop them if I need to. private var _myClip1:MovieClip private var _myClip2:MovieClip function makeANewTimlineMax($tweenClip:MovieClip):void { var newTL = newTimelineMax.to($tweenClip,1,{onComplete:makeANewTimelineMax,onCompleteParams:[$tweenClip]}); $tweenClip.timeline = newTL; }

Thanks very much!

Thanks!

I'm making a first-person view game in which I'm driving, say, a car. I'd like to simulate hitting a bump, and my inclination is to tween the Z and X rotations of the scene, but I'd like to do it in that crazy, random way when you hit a bump — that is a lot to the left, say, back to the right, then a bit to the left, hard to the right, finally settling down and down back to center. Is there a good way to do this using TweenMax and its associated eases and libraries? I could build something by hand, generating all sorts of random dampened tweens at onCompletes, but wonder if there's a simpler way to do this. I have 'shockingly green' membership (through my client) — Also, this relates to my earlier post — most of these tweens would need a nice Quad on the way out, a bounce on the way back. How to change ease for yoyo'd tweens? Thanks!

I'd like to have a tween that going UP is a Quad.easeOut ease and then DOWN has a bounce on the end. I thought: do a TweenMax with ease:Quad.easeOut, yoyo:true, repeat:1, and set an onComplete function (to catch the tween at point it's changing directions) that would do myTween.updateTo({ease:Bounce.easeOut}) but I can't see that it's working. Is there a way or a better way to change a tween's ease on the fly? What I'm trying to do is simulate something being lifted up and dropped, and bounce on landing. Perhaps there's something in the Physics libraries? Thanks

Thanks — One question — is there an easy way to limit the tween or does it do it itself, since progress() can't be <0 or >1 ? Or just have to check beforehand?

I have a scrolling set of thumbnails that is fed from a backend — thus a varying amount of images. These are masked by a div with overflow:hidden. The thumbnails scroll left and right depending on where mouse is over them (left or right) and also with two external arrows: mouseOver over the arrows scrolls the thumbnails left and right. I set up the entire thing as a TimelineMax. Very nice -- play from 0 to 1 depending or reverse it, if I want to go the other way. The issue I'm running into is making this work on an iPad. The client doesn't want me to invest the time into setting it up for full touch responsiveness, which I recommend — so my only thought is to scroll based on the arrows. — MouseDown doesn't work — just asks if I want to download the arrow images — So I'm thinking: click — but given that I've got it all set up as a TImelineMax, how do I do this? I could of course just do a simple TweenMax a given number of pixels, but again, would like to tween, say, from TimelineMax progress 0 to, oh, 0.1 or something — I reckon I can calculate the appropriate amount given the total width of the images and the masking div — Anyway to move a TimelineMax in pieces like this? Would I do a TweenMax of the TimelineMax's progress() ?? Thanks for any help — and yes, I know I should do the touch interface, but the client needs to give the go ahead…

UPDATE: Arggh. I am tired. Pesky quotation marks! I may be just tired today, but this is throwing me -- I'm getting a syntax error on the following line. I'm trying to tween multiple objects returned by jQuery to 0px (this is the ubiquitous accordion menu — I'm trying to replace jQuery slideUp and slideToggle with GSAP equivalents) TweenMax.to($('#nav li ul'),0.25,{css:{height:0px}}); Can GS parse the return of a jQuery selector that returns multiple values? I had thought so -- I'm probably missing a parenthesis, and I apologize if I am, but I don't see it!

I have a question about this — hopefully this thread still somewhat active — Does an HTML element (such as DIV), have an inherent height right from the get-go? That is, if you set height to 0, and you to a tween.from(0), as in this example, it always knows the "original" height? (i.e. in Flash alpha terms, if you set a MC's alpha to 0, and then tween.from(0), you have to somehow let it know what it's tweening TO -- I know this is a simple conceptual issue transitioning from Flash, but I'm trying to get my head around the looser rules of the JS/DOM world, where one can take a few more things for granted. UPDATE: it seems that once you set a DIV's height to '0px" you can't simply "tween.from(0px) and expect it to "know" what the original height was. In Flash you save this in a separate variable, perhaps. Is there a way using jQuery/JS to find out the 'natural' height of an element whose height you've set to 0px, or is this not possible/reasonable?

I went back and restored some old code and while my overall thing isn't working in IE7, the Tweening isn't throwing errors. I'm not sure what I changed. The relevant section as correct (the handler is actually applied to a div, not an LI): function setupBotMenuRollovers() { $('#botMenu div').mouseenter(slideUp).mouseleave(slideDown).attr('sliding','false'); } function slideDown(event) { //var theLi = $(event.target).closest('li'); var theLi = this; var theJLi = $(this); TweenMax.to(theLi,1,{css:{top:-45},ease:Quad.easeOut,onUpdate:adjustHeight,onUpdateParams:["{self}"]}); } function slideUp(event) { var theLi = this; var theJLi = $(this); TweenMax.to(theLi,1,{css:{top:"-200"},ease:Quad.easeOut,onUpdate:adjustHeight,onUpdateParams:["{self}"]}); } function adjustHeight(theTween) { var slider = $(theTween.target); var newHeight = -parseInt((slider.css('top'))); var newHeightString = newHeight + "px"; slider.css('height',newHeightString); }

Thanks. I *finally* figured it out -- the two tricks I found are, when sliding from the bottom, that the tabs should be absolutely positioned, that their height MUST be undefined but their top should be set, that they need to have overflow:hidden (to hide any content), and that as they slide in you tween the height to fit how much they've tweened in, thus: function slideUp(event) { // what div was clicked? var myDiv = this; var myDivAsJQuery = $(this); // move it up, adjust height each update TweenMax.to(myDivAsJQuery,1,{css:{top:"-100"},ease:Quad.easeOut,onUpdate:fixHeight,onUpdateParams:["{self}"]}); } function fixHeight(theTween) { // what div is moving (div == "slider") var slider = $(theTween.target); // the height should be the current 'top' var newHeight = -parseInt((slider.css('top'))); var newHeightString = newHeight + "px"; slider.css('height',newHeightString); } But it won't work in IE7! (Perhaps this relates to my other post -- this is the code that's failing!)

Thanks. My bad, I'll go hunt down the proper files. As to uploading. I'm working for someone with strict non-disclosure, so let me see. It was a short in the dark -- I realize that it's impossible to say without seeing it in action. But GS JS should work with IE7 I take it, in general?

I'm having to develop a minisite which needs to be backwards compatible to IE7. I'm using jQuery and GS JS v12. I'm testing on browserstack.com -- a virtual IE7 running under a virtual Windows XP One of the errors I got is in CSSPlugin -- Invalid argument. I attach a picture at start of this message (click to see bigger). Two questions: 1) what might be going wrong? This code works fine in modern browsers. 2) is there a non-min version of the GS JS libraries to see things a little more clearly? obviously (1) depends on MY code, but I'm pretty sure there's nothing wrong with it as everything works with modern browser -- and it would be bloody hard to debug on this remote virtual machine, to see exactly which code of mine is being called — is there something with running v12 on IE7 that I should be aware of? I'm fine if it's not backwards-compatible, but just would like to know… Thanks

I'm new to JS/CSS (coming from AS3) -- I wonder if someone could help me figure out the following: I'd like to have tabs at the bottom of a page which, when rolled over (or clicked) slide up. The tabs will contain images of 45px height. I'd like, say, the extended tab to be something like 100px in height. I gather this has something to do with overflow, hidden, auto, etc -- I've seen solutions using jQuery slide, but I'm not sure how to do it with Greensock -- that is, I am well-versed in the GS engines, but putting it all together (CSS, DIVs, overflows, etc) is throwing me. Any help much appreciated!

As an erstwhile AS3 developer moving over to some JS, could someone clarify this for me? I was trying to move a div on screen and then (when invisible) set it back to where it started. Something like this (swapOut is a JQuery object): TweenMax.to(swapOut,0.4,{css:{x,opacity:0},onComplete:this.finishSwapImages,onCompleteParams:[swapOut,swapOut.css('x')]}); But I could never get it set back where I wanted? See the obvious error: I'm using 'x' instead of 'left'. When I inspected in Firebug I saw that my div's css had a transform-matrix set on it. When I went back and did this, all worked fine TweenMax.to(swapOut,0.4,{css:{left,opacity:0},onComplete:this.finishSwapImages,onCompleteParams:[swapOut,swapOut.css('left')]}); My question is: what's TweenMax doing for me with respect to x? Is this a proper CSS property? — or is TweenMax lending a helpful hand for us AS3 people and moving stuff in a tricky way when we (mistakenly) say 'x'? If so, what else is like this in the JS version? ("y" -> "top", etc?)

___ CORRECTION: one of the links doesn't have the code I was looking for, I'll look at other -- missed the first Thanks to all — the code looks cool but it doesn't seem to actually contain the <img> tags, either within the content or as background. Can someone point me to something that explicates that? (I copies the code from the link and tried it in my own doc -- can't get it to work as is -- the <li> dots are still there (I know how to get rid of them but wonder why they don't appear in the sample window on jsfiddle) and the js isn't working (yet)). I'll keep fiddling. But back to the first point -- it's the <imgs> themselves that are giving me headaches, I can tween the <li>'s ok, but want to swap <img>s gradually. Thanks!

I'm trying to figure out the best practice for an image swap. I'm coming from AS, new to JS, but I have a basic idea of what to do -- and nothing seems to work. I'm trying to use the old 'make a UL inline for a horizontal menu' trick -- I ran through all of these options but couldn't get any to work 1) loaded both images into the <li> with different z-indexes, thinking that I'd TweenMax the top image to 0 opacity on rollover -- even with float:left they sat next to each other not on top of each other. 2) I set the "over" image as the background with CSS and put the "out" image in the <li> and then tweened the "out" image to 0 opacity on rollover. Somehow this seemed to collapse the box -- the background image wasn't displayed when the front was invisible -- this seemed to be a result of the 'display:inline' The easiest thing is to simply swap 'src' on rollover -- but I'm looking for a gradual transition. Any suggestions? I know it's hard to talk about what I'm doing/not doing without my code, but in lieu of that, if someone could provide a sample, or a link, that would be helpful. Thanks!

When I add a delayedCall() to a TimelineLite/Max the duration of the delayedCall's delay is added to the duration of the timeline (and pushes everything subsequent back by that much). Other than calculating the length of the delayedCall's delay and inserting the delayCall() early enough that all works out automagically, is there a way to make it work? Specifically, I want to be able to insert a callback at any point in the timeline, easily, without having the delay of the callback, or the time it takes the callback to complete, added to length of timeline. Anyone know?

I have a situation where I set up a TweenMax/TweenLite on an object on stage. It's possible during the tween that another part of the program might remove or add that object (back) to the stage. Will this work correctly with the TweenMax/TweenLite? if not, what would be the workaround? There are many places in the program where this might happen, so I don't want to go to each one and add tween kills. (The reason I have this going on is it's a quick/dirty way to keep this object on top -- I have a number of screens that are being added to, removed from stage and I need to keep this object on top all the time, so every time a screen is added I simply (re) add this object, which places it on top. But it could be tweening at the time).

Solved it. Just set some init variables and all worked fine. Just confused as to addCallback -- it functions differently from a Tween in that the initial values aren't saved and thus can't be rolled back via Timeline.replay()?

Wrote a long animation with multiple nested timelines and many children (100 +/-). Then did timeline.replay() and it replayed magically! Amazing! But I ran into an instance where some things don't 'play nice' -- that is I need to perform some manipulations of graphics on screen and added callbacks like this private function positionBoxes():void { // add grey background to big box _superBigBox.addChild(_grey); // add 2b to big box _superBigBox.addChild(_box2b); // put 1a box offscreen left _box1a.x = -_box1a.width; _superBigBox.addChild(_box1a); } private function repositionBoxes():void { // now need to swap box 2a for 2b _box2a.x = _box2b.x; _box2a.y = _box2b.y; _superBigBox.addChild(_box2a); // put box2b below box2a _box2b.y += _box2a.height; } Works fine the first time through, but not on replay. I believe the answer is to position using 0 length tweens, with immediateRender == false, but how does one handle non-tweenable actions such as adding children, etc? That is, are some actions, even when added to the timeline through addCallback, not entirely PART of the timeline, and thus not reversable, replayable? What am I missing?

I need at certain points in my timeline to call various other functions/methods. It's simple to do something like this: tl.append(new TweenMax(something,1,{onStart:myMethod,someParams}); but what if I don't want to tween anything, simply add a callback at that point in the timeline? I find I'm doing kludges, tweening invisible things to be invisible, and the like, simply to put some tween in there to 'hold' the callback. Is there a better way? Thanks!

Let's say I have many nested timelines. First, in the root timeline can I reference a label in one of the child timelines? Second, if I pause the root timeline, all the little kid timelines also stop mid-stride? If both above are yes: is there a way to play TO that label and stop? That is, not jump to it, but continue playing from my paused state, up to it and stop? Thanks