Jump to content
Search Community

DynamicPinPoint and an allFrom

vmedium test
Moderator Tag

Recommended Posts

		

		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

Link to comment
Share on other sites

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

Link to comment
Share on other sites



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?

Link to comment
Share on other sites

Tweening objects from/to pins (which may move at any time because the stage gets resized) is a bit tricky and that's why I created the LiquidPositionPlugin. Check out the docs at http://www.greensock.com/as/docs/tween/ ... lugin.html

 

Also, make sure that the LiquidStage is updated (you can call update()) BEFORE you do your allFrom() because allFrom() will IMMEDIATELY reposition things, so if they aren't in their end positions yet, your allFrom() will be off.

 

Does that clear things up?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Sure, if you want to have total control over the positioning like that, you can use a DynamicPinPoint which simply points at a method that you choose that spits back a Point (you define that however you want). For example, if you want the DynamicPinPoint to always be exactly 300 pixels to the right of the top center, you could do:

 

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); 
this.stage.align = "TL";

//create a DynamicPinPoint that uses the getCustomPosition() method to figure out the position.
var dynamicPin:DynamicPinPoint = new DynamicPinPoint(this, getCustomPosition, ls);
function getCustomPosition():Point {
return new Point(this.stage.stageWidth / 2 + 300, 0);
}

TweenMax.to(mc, 2, {liquidPosition:{pin:dynamicPin}}); //tween to relative position 

ls.stage.addEventListener(Event.RESIZE, onSize); 
function onSize(e:Event=null):void{
TweenMax.to(mc, 2, {liquidPosition:{pin:dynamicPin}}); //tween to another relative position 
}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...