Tweening SplitTextField from the bottom

[JE.T]

Hi ,

 

Im trying to tween all letters from a dynamic created textfield from the bottom using 'transformAroundPoint" plugin.

Something like this wich is Tweening the letters from the Top a nice classy way

 

tl1.appendMultiple(TweenMax.allFromTo(stf_ann.textFields,1, {autoAlpha:0,rotationX: -90},{autoAlpha:1, rotationX: 0, ease:Back.easeOut},0.1));

But from the bottom of the letters. ( simulating the Register point is Bottom )

 

So i tried this in a for loop and noticed that both trace() will not give me the same height from the original textField and for the SplitTextField, Also, it seems that the calculated bottom is lower then the real bottom of the letter

annonceContainer.txt_annonce.text = _annonce.toUpperCase();			
annonceContainer.txt_annonce.embedFonts = true;
annonceContainer.txt_annonce.multiline = false;
annonceContainer.txt_annonce.setTextFormat(annonceFormat);
annonceContainer.txt_annonce.autoSize = TextFieldAutoSize.LEFT;
trace("txt height: " + annonceContainer.txt_annonce.height);                                     //First Trace
var stf_ann:SplitTextField = new SplitTextField(annonceContainer.txt_annonce);
for ( var f:int = 0 ; f <= stf_ann.textFields.length-1 ; f++ ){
			trace("SplitText height: " + stf_ann.textFields[f].height);//added a trace to notice if something had changed  and it Had                  //Second Trace
			var myBottom = new Point(stf_ann.textFields[f].width/2,stf_ann.textFields[f].height);                                                                        //bottom  point for transformAroundPlugin  
			tl1.append(TweenMax.fromTo(stf_ann.textFields[f],1,{autoAlpha:0,transformAroundPoint:{point:myBottom,rotationX: -90}},{autoAlpha:1, transformAroundPoint:{point:myBottom,rotationX:0}, ease:Circ.easeIn}),-0.9);
		}

 

I'm am doing something wrong from the creation of my textfield, or in the "myBottom" calculation ..?.

Please bring some green light on this.

[Carl]

I have used this in the past for the 3D rotation from bottom effect

 

var snorkl_stf:SplitTextField = new SplitTextField(snorkl_txt, "characters");

for(var i:Number = 0; i	var currentLetter:TextField = snorkl_stf.textFields[i]

TweenMax.from(currentLetter, .5, {transformAroundPoint:{point:new Point(currentLetter.x, currentLetter.y + (currentLetter.height*.8)), rotationX:-90}, alpha:0, ease:Linear.easeNone, delay:i*.5})
}

 

I have found getting 80% of a textfield's height gives you a point right at the bottom of the character.

[JE.T]

Thank you for the Tip,

i tried different values , beetween 0.6 and 0.8, it gives almost the effect wanted. Your Tut about the NbC text animation is a more representative result about the dynimic i wanted to use, pretty much the like the letter is raising from a flat position to the front raise position. The transformAroundPoint position seem to givea slight translation that is unWanted, my bet is there is something weird about the difference of height from the letter in the SplitTextFeild object and the original textfeild it Self. Am im imaginating things here ?

 

Il try something with the TweenProxy...

Thanks again

[Carl]

thanks for watching the tutorial. yeah, for that I manually set the reg point on bottom and positioned the element where they would look good.

 

as far as the "slight translation"... what I've found with working with the 3D-ish stuff in flash is that you get drastically different results depending on where your object is in relation to the virtual camera. if you have an object laying down flat at rotx -90.... you may be looking UP at it if the camera is below it. unless the object is dead center to the virtual camera you are going to see some artifacts. Also as the object tweens... its transformation / skew / distortion whatever will be more enhanced the farther it is from the camera center.

[JE.T]

Your so right on the spot , there is defenitly a kind of a persepective distortion here, i should a tough of that. Any brain managed to take a work around this ?

[JE.T]

Hi carl,

here is a part of solution to inverse the skew distortion.

for ( var f:int = 0 ; f <= stf_ann.textFields.length-1 ; f++ ){
               var myProxy:TweenProxy3D = TweenProxy3D.create(stf_ann.textFields[f]);
myProxy.localRegistration = new Vector3D(-stf_ann.textFields[f].x,stf_ann.textFields[f].y+stf_ann.textFields[f].height,0);
//Skew value is for the lest side of the virtual camera
tl1.append(TweenMax.fromTo(myProxy,0.5,{autoAlpha:0,shortRotation:{rotationX:-90},skewX:-35},{autoAlpha:1, rotationX:0, skewX:0,ease:Linear.easeOut}),-0.45);
}

 

THow i think the skew Value should be calculated with some trigo by something like "pseudo : skewValue = ( Math.asin ( - (xDistanceFromMidStage) / CameraDistanceFromStage ) "

Thanks for sending me on the right clues.

 

Jerry

[Carl]

Jerry,

 

Thanks a bunch for sharing that. I will have to dig into the TweenProxy and TweenProxy3D stuff a bit. I have never used them, but they seem to be a good fit in this situation.

 

Carl