vmedium

I always use this little trick, that simulates easing: private function onEnterFrame(e:Event) { var startRotationY = boxContainer.rotationY; var startRotationX = boxContainer.rotationX; var destRotationY = -boxContainer.mouseX/80; var destRotationX = boxContainer.mouseY/80; boxContainer.rotationY += (destRotationY - startRotationY)/2 boxContainer.rotationX += (destRotationX - startRotationX)/2 } What is the best way to achieve this effect with TweenMax? vmedium

So per your example in the docs, i've arrived at this: import com.greensock.*; import com.greensock.easing.*; import com.greensock.layout.*; import com.greensock.plugins.*; TweenPlugin.activate([LiquidPositionPlugin]); var w = 550; var h = 400; var ls = new LiquidStage(this.stage, w, h, w, h); var area = new LiquidArea(this, 0, 0, w, h); TweenMax.to(mc, 2, {liquidPosition:{pin:ls.TOP_CENTER}}); //tween to relative position ls.stage.addEventListener(Event.RESIZE, onSize); function onSize(e:Event=null):void{ trace("onSize: " + ls.stageBox.width); TweenMax.to(mc, 2, {liquidPosition:{pin:ls.BOTTOM_RIGHT}}); //tween to another relative position } What is left unanswered to me. Is that I want that pin point as defined in the {pin.ls:ls.TOP_CENTER} to be not exactly top center, but maybe an offset from the top of +300. Or maybe dynamically pinned by something that is growing/shrinking with the stage size itself. My main aim, is for building the intro to my navigation, where I use the normal techniques I'd use in TweenMax, TimelineMax, the ease of use of appendMultiple and allFrom, but do that in a way that if the stage is resized they still come in from the TOP_CENTER. I can achieve this partially with LiquidStage and my own onResize like in the above post, but I am wondering how I would accomplish that using just greensock, because it seems like you've thought of everything. Best, vmedium

Just thought I would share, this was very helpful in understanding, thanks to Jack. pinCorners is important: http://www.greensock.com/as/docs/tween/ ... inCorners() import com.greensock.layout.*; stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; var w:Number = 1920; //width of stage var h:Number = 1080; //height of stage var ls:LiquidStage = new LiquidStage(this.stage, w, h, 853, 480); var area:LiquidArea = new LiquidArea(this, w/3, 0, w/3, h, 0xEEEEEE); area.preview = true; var topLeftPin:PinPoint = new PinPoint(area.x, 0, this.stage); var bottomRightPin:PinPoint = new PinPoint(area.x + area.width, area.height, this.stage); area.pinCorners(topLeftPin, bottomRightPin); area.attach(mc, {vAlign:"bottom", hAlign:"center", scaleMode:"widthOnly"});

Going to give the plugin a try, and make sure i'm ls.update() ing in the right place. I'll post my results/example here. From the example code for the plugin, I'm not quite sure how - or if - you are supposed to use dynamic pin points with that? MAybe you can see more of what I'm doing with the following code. override public function transitionIn():void { stage.addEventListener(Event.RESIZE, onSize); onSize(); super.transitionIn(); TweenMax.to(this, 0.5, {alpha:1}) ls = LiquidStage.getByStage(stage); var area:LiquidArea = new LiquidArea(this, 0, 0, 1920, 1080, 0x0000ff); area.attach(bottom, ScaleMode.PROPORTIONAL_INSIDE, AlignMode.CENTER, AlignMode.BOTTOM); ls.update(); //get magic starter values var logoDestY = bottom.y-bottom.height/3; var navDestY = bottom.y+bottom.height/3; var destX = bottom.width/2; logo.x = nav.x = destX; logo.y = logoDestY; nav.y = navDestY; var t:TimelineMax = new TimelineMax({onComplete:transitionInComplete}); t.append(TweenMax.from(bottom, 0.5, {y:"400"})); t.append(TweenMax.from(logo, 0.6, {y:stage.stageHeight + 300, ease:Expo.easeOut}), -0.2); t.append(TweenMax.from(nav, 0.6, {y:stage.stageHeight + 300, ease:Expo.easeOut}),-0.2); } private function onSize(e:Event=null){ //Position Clips; nav.x = logo.x = bottom.width/2; logo.y = bottom.y - bottom.height/3; nav.y = bottom.y+bottom.height/3; //Scale Clips if(stage.stageWidth >853){ var ratio = (stage.stageWidth/3)/640; var newScale = Math.min(1, ratio*1.2); scaleBoth(logo, newScale); scaleBoth(nav, newScale); } } private function scaleBoth(mc:MovieClip, n:Number){ mc.scaleX = mc.scaleY = n; }

var t:TimelineMax = new TimelineMax({onComplete:transitionInComplete}); t.append(TweenMax.from(bottom, 0.5, {y:"400", onComplete:pinTheNav})); t.appendMultiple(TweenMax.allFrom([logo, nav, consoles], 0.5, {y:"400", ease:Strong.easeOut}, 0.1)); function pinTheNav() { pin = new DynamicPinPoint(bottom, getBottomCenter); pin.attach(logo); pin.attach(nav); function getBottomCenter():Point { var bounds:Rectangle = bottom.getBounds(bottom); return new Point(bounds.x + bounds.width / 2, bounds.y + 50); } } is this the best way to work with tweening and pins?

I've figured out that by tweening something, that I'm dynamically pinning - it changes where that pin is. ie: im tweening bottom, and trying to pin to bottom. I just want to be able to 1) put things in their right place 2) do a from tween 3) and have them pinned

var ls:LiquidStage = new LiquidStage(this.stage, 1920, 1080, 853, 480); var area:LiquidArea = new LiquidArea(this, 0, 0, 1920, 1080, 0x0000ff); area.attach(bottom, ScaleMode.PROPORTIONAL_INSIDE, AlignMode.CENTER, AlignMode.BOTTOM); var pin:DynamicPinPoint = new DynamicPinPoint(bottom, getLocation); pin.attach(logo); pin.attach(nav); function getLocation():Point { var bounds:Rectangle = bottom.getBounds(bottom); return new Point(bounds.x + bounds.width / 2, bounds.y + 50); } var p:Point = pin.toLocal(logo.parent); logo.x = nav.x = p.x; logo.y = nav.y = p.y; var t:TimelineMax = new TimelineMax({onComplete:transitionInComplete}); t.appendMultiple(TweenMax.allFrom([bottom, logo, nav], 0.5, {y:"400", ease:Strong.easeOut}, 0.1)); The tween works and doesn't break the 'bottom' clip... but the 'logo' and the 'nav' clips both end up in the wrong place... what is the proper order for putting something in it's place, then tweening it from soem relative value? Best, vmedium

I devised this method of sequencing tweens in a 40k banner that had so much **** in it I couldn't use timelineLite or even tweenLite... so i thought I would share. Anyone else do anything like this to simulate the flexibility of the 'append' method? http://snipt.net/vmedium/using-tween-na ... melinelite (check my snipt for other things you may want to CMD+C,V) import com.greensock.TweenNano; import com.greensock.easing.*; //cloud setup TweenNano.from(bg, 0.2, {_alpha:0}); TweenNano.to(cFront, 14, {_x:-100, ease:Linear.easeNone}); TweenNano.to(cMid, 14, {_x:150, ease:Linear.easeNone}); TweenNano.to(cBack, 14, {_x:100, ease:Linear.easeNone}); //f1 TweenNano.from(can, 0.8, {_y:"-200", ease:Strong.easeOut}); TweenNano.from(t1, 0.5, {_alpha:0, delay:0.5}); var durA = 2.5; //f2 TweenNano.to(t1, 0.5, {_alpha:0, delay:durA-0.5}); TweenNano.from(t2, 0.5, {_xscale:0, _yscale:0, _y:"50", delay:durA}); TweenNano.from(shield, 0.4, {_xscale:0, _yscale:0, delay:durA+0.2}); TweenNano.from(ll, 0.4, {_x:"50", _alpha:0, delay:durA+0.2}); TweenNano.from(lr, 0.4, {_x:"-50", _alpha:0, delay:durA+0.2}); TweenNano.from(banner, 0.4, {_alpha:0, delay:durA+0.8}); TweenNano.from(thumb, 0.5, {_alpha:0, delay:durA+1.2}); var durB = durA + 2.5; //f1 out f3 in TweenNano.to(ll, 0.4, {_alpha:0, delay:durB}); TweenNano.to(lr, 0.4, {_alpha:0, delay:durB}); TweenNano.to(shield, 0.4, {_xscale:150, _yscale:150, _y:"10", delay:durB}); TweenNano.from(cl, 0.4, {_x:"50", _alpha:0, delay:durB+0.2}); TweenNano.from(cr, 0.4, {_x:"-50", _alpha:0, delay:durB+0.2}); TweenNano.from(t3, 0.5, {_alpha:0, delay:durB}); var durC = durB + 2.5; //f4 out TweenNano.to(t2, 0.5, {_xscale:0, _yscale:0, _y:"50", delay:durC}); TweenNano.to(shield, 0.4, {_xscale:0, _yscale:0, delay:durC+0.2}); TweenNano.to(cl, 0.4, {_x:"50", _alpha:0, delay:durC+0.2}); TweenNano.to(cr, 0.4, {_x:"-50", _alpha:0, delay:durC+0.2}); TweenNano.to(banner, 0.2, {_alpha:0, delay:durC+0.4}); TweenNano.to(thumb, 0.2, {_alpha:0, delay:durC+0.4}); TweenNano.to(can, 0.8, {_y:"-200", delay:durC+0.4, ease:Strong.easeOut}); TweenNano.to(t3, 0.5, {_alpha:0, delay:durC}); var durD = durC + 1; //f5 in TweenNano.from(logo, 0.8, {_alpha:0, delay:durD}); TweenNano.from(t4, 0.5, {_alpha:0, delay:durD+0.2}); TweenNano.from(hr, 0.5, {_alpha:0, delay:durD+1.2}); TweenNano.from(t6, 0.5, {_alpha:0, delay:durD+1.4}); var durE = durD + 3; //f5 out TweenNano.to(t4, 0.3, {_alpha:0, delay:durE}); TweenNano.to(t6, 0.3, {_alpha:0, delay:durE+0.2}); var durF = durE + 0.5; //f6 in TweenNano.from(t7, 0.5, {_alpha:0, delay:durF});

Jack Replied this: "You must be using a stale version of the tweening platform in the subloaded or the parent swf. Republish them with the same version (I’d recommend the latest of course) and you should be fine. Either that or make sure you’re using a child or separate ApplicationDomain for your LoaderContext when you subload." Just posting for others. Thanks Jack

Warning: 'flash' has no property 'prototype' ReferenceError: Error #1069: Property cachedPauseTime not found on com.greensock.TweenMax and there is no default value. at com.greensock::TimelineLite/addChild() at com.greensock::TimelineLite/insert() at com.greensock::TimelineLite/append() at banner_game_demo/init() at banner_game_demo() When I have gotten around this error, I've ended up not knowing what I did. I'm not looking for a specific answer, just maybe a little theory as to what this is, and how to hunt down the error, or if it can be caused by several things. Thanks vmedium

Grrrrrrrr... sorry, my fault. Hopefully I'll post something worthwhile to make up for it.

Note: LoaderMax VERSION: 1.6 This trace statement trace("onImageLoad from _loader:" + event.target.name, event.target.content); Outputs: onImageLoad from _loader:theImage2 [object ContentDisplay] This line of code: _imageArray.push(event.target.name); and this: _imageArray.push(event.target); and this: _imageArray.push(event.target.content); Produces this error: TypeError: Error #1009: Cannot access a property or method of a null object reference. at LoaderMax_Image_Queue/onImageLoad() at flash.events::EventDispatcher/dispatchEventFunction() at flash.events::EventDispatcher/dispatchEvent() at com.greensock.loading.core::LoaderCore/_completeHandler() REDUCED CODE: package { import flash.display.*; import com.greensock.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.*; public class LoaderMax_Image_Queue extends MovieClip { private var _queue:LoaderMax; public var _imageArray:Array; public function LoaderMax_Image_Queue() { _queue = new LoaderMax({name:"mainQueue"}); _queue.append(new ImageLoader("assets/theImageBig2.jpg",{name:"theImage2",container:this,onComplete:onImageLoad,onProgress:onImageProgress, x:50})); _queue.append(new ImageLoader("assets/theImageBig3.jpg",{name:"theImage3",container:this,onComplete:onImageLoad,onProgress:onImageProgress, x:100})); _queue.append(new ImageLoader("assets/theImageBig4.jpg",{name:"theImage4",container:this,onComplete:onImageLoad,onProgress:onImageProgress, x:150})); _queue.load(); } private function onImageProgress(event:LoaderEvent):void { trace("onImageProgress from _loader: " + event.target.name, Math.round(event.target.progress*100)); } private function onImageLoad(event:LoaderEvent):void { trace("onImageLoad from _loader:" + event.target.name, event.target.content); _imageArray.push(event.target.name); } } }

Yes this makes perfect sense. I think I'm just unsure about the storing of references to things like the ImageLoader directly. I'll post my working code soon just for reference. Thanks again Jack.

So my question is. How do I store the loaded images, so that I can do things with them later? My _imageArray.push(event.target.content) doesn't work (which is probably obvious to everyone but me).. But in the example that is what Jack tweens in the handler event (which I understand is a ContentDisplay) Where am I going wrong here? package { import flash.display.MovieClip; import com.greensock.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.*; public class LoaderMax_Image_Queue extends MovieClip { private var _loader:ImageLoader; private var _queue:LoaderMax; private var _imageArray:Array; public function LoaderMax_Image_Queue() { _queue = new LoaderMax({name:"mainQueue",onProgress:progressHandler,onComplete:completeHandler,onError:errorHandler}); _loader = new ImageLoader("assets/theImageBig.jpg",{name:"theImage",container:this,onComplete:onImageLoad,onProgress:onImageProgress,x:0}); //_loader.load(); _queue.append(_loader); _queue.append(new ImageLoader("assets/theImageBig2.jpg",{name:"theImage2",container:this,onComplete:onImageLoad,onProgress:onImageProgress, x:50})); _queue.append(new ImageLoader("assets/theImageBig3.jpg",{name:"theImage3",container:this,onComplete:onImageLoad,onProgress:onImageProgress, x:100})); _queue.append(new ImageLoader("assets/theImageBig4.jpg",{name:"theImage4",container:this,onComplete:onImageLoad,onProgress:onImageProgress, x:150})); //_queue.append( new XMLLoader("xml/doc.xml", {name:"xmlDoc", estimatedBytes:425})); //_queue.append( new SWFLoader("swf/main.swf", {name:"mainClip", container:this, autoPlay:false})); _queue.load(); } private function onImageProgress(event:LoaderEvent):void { trace("onImageProgress from _loader: " + event.target.name, Math.round(event.target.progress*100)); //trace("onImageLoad: _loader onComplete Handler: " + this.target.progress); } private function onImageLoad(event:LoaderEvent):void { trace("onImageLoad from _loader:" + event.target.name, event.target.content); //trace(_imageArray); // HOW DO I STORE WHAT HAS LOADED INTO SOME FORM OF ARRAY SO THAT I CAN DO THINGS WITH THE LOADED ITEMS? // OR AM I TOTALLY MISSING SOMETHING? _imageArray.push(event.target.content); } private function progressHandler(event:LoaderEvent):void { trace("progressHandler from _queue: " + Math.round(event.target.progress*100)); } private function completeHandler(event:LoaderEvent):void { trace("completeHandler from _queue: " + + event.target.content); trace("here are the images that loaded: " + _imageArray); } function errorHandler(event:LoaderEvent):void { trace("error occured with " + event.target + ": " + event.text); } } }