Unity3D for iOS: UIToolkit Text & Buttons Animation Example

UIToolkit animation methods like scaleTo(), moveFrom() & alphaFrom() are defined inside a class called UIObjectAnimationExtensions.cs, which is usually located in Plugins/UIToolkit/Support/.

For screenshots of Project and Inspector settings for the buttons & text boxes below, see here and here.

The below code animates in the headline text along the Y axis and fades in the body copy and the two buttons.

...
var textToolkit:UIToolkit;
var textToolkit2:UIToolkit;
var buttonToolkit:UIToolkit;
var txt1:UITextInstance;
var txt2:UITextInstance;
var ytgt2:float;
var center:Vector2;

var newGameBtn:UIButton;
var continueBtn:UIButton;
var ani2:UIAnimation; 
var ani3:UIAnimation;

...

function Start() {

...
  	instructionHdr = 'INSTRUCTIONS';
	instructionText = 'Tilt your phone left \nor right to move the \nship. Touch the \nscreen to fire.';		
	
	StartCoroutine( animateIn() );	
}		

function animateIn() {

	/* moveFrom(), alphaFrom(), etc defined in UIObjectAnimationExtensions */

	yield new WaitForSeconds( 0.2f );

	//FONT 1
	var font1 = new UIText( textToolkit, "gunplay", "gunplay.png" ); //UIText(obj, "nameo of .fnt (.txt) file in Resources folder", 'line 3 in  .fnt file')										
	var textSize = font1.sizeForText( instructionHdr );
	center = UIRelative.center( textSize.x, textSize.y );
	var ytrgt1 = UIRelative.yPercentFrom( UIyAnchor.Top, 0.15f );
	var ystart1 = UIRelative.yPercentFrom( UIyAnchor.Top, 4.0f );		
	txt1 = font1.addTextInstance( instructionHdr, center.x, ytrgt1, 1f, 4, Color.white, UITextAlignMode.Left, UITextVerticalAlignMode.Top );					
	txt1.positionFrom( 1.0f, new Vector3( center.x, ystart1, 0 ), Easing.Quintic.easeOut );			
				
	yield new WaitForSeconds( 0.7f );	
	
	//FONT 2: have to create a new material for each UIToolkit object, so for FONT 2, I duplicated "UIToolkitMaterial (for multiple scene)" and renamed it.
	var font2 = new UIText( textToolkit2, "prototype", "prototype.png" ); 		
	var textSize2 = font2.sizeForText( instructionText );
	var y2 = UIRelative.yPercentFrom( UIyAnchor.Top, .3f ); //.31f
	txt2 = font2.addTextInstance( instructionText, center.x, y2, 0.7f, 4, Color.white, UITextAlignMode.Left, UITextVerticalAlignMode.Top );
	ani2 = txt2.alphaFrom( 0.7f, 0.0f, Easing.Linear.easeIn ); //(duration, target, ease)			

	yield new WaitForSeconds( 0.2f );		
	
	newGameBtn = UIButton.create( buttonToolkit, "newgameUp.png", "newgameDown.png", 0, 0 );	
	newGameBtn.positionFromTopLeft(.55f, .215f); 	
	newGameBtn.highlightedTouchOffsets = new UIEdgeOffsets( 20 );	
	newGameBtn.onTouchUpInside += newGameBtnHandler;	
	newGameBtn.alphaFrom( 1.0f, 0.0f, Easing.Quintic.easeOut );
	
	yield new WaitForSeconds( 0.2f );	
	
	continueBtn = UIButton.create( buttonToolkit, "continueUp.png", "continueDown.png", 0, 0 );
	continueBtn.positionFromTopLeft(.74f, .215f); 	
	continueBtn.highlightedTouchOffsets = new UIEdgeOffsets( 20 );			
	continueBtn.onTouchUpInside += continueBtnHandler;	
	continueBtn.alphaFrom( 1.0f, 0.0f, Easing.Quintic.easeOut );
}

function newGameBtnHandler( sender:UIButton ) {	
		
	//start new game		
}

function continueBtnHandler( sender:UIButton ) { 	
	
	//continue previous game			
}

AS3 & AS2: Using filters in TweenLite v.11.1

AS2 and AS3 – Most other engines are only developed for AS2 or AS3 but not both. — http://blog.greensock.com/tweenlite/

This is an overview of how to use filters via the popular animation engine TweenLite. For the purposes of this tutorial I’m simply using the “delay” property to time the overall animation flow. Check out the relevant forum for info on how to manage animation sequences using TimeLineLite. Here’s a Zip with the .fla.

The AS3 code:

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;

TweenPlugin.activate([BlurFilterPlugin]);

/*
 * assumes you have graphic assets named couple1, couple2 on the stage
 * for pure AS3 apps, use the embed Flex meta tag to embed the asset
 * and wrap this code in a class file
 */

var _tweenSpeed1:Number = 0.55;
var _tweenSpeed2:Number = 1;
var _tweenSpeed3:Number = 0.33;
var _blurYamount1:uint = 60;
var _noBlur:uint = 0;

//init blur filter & position on hidden assets, using TweenLite
TweenLite.to(couple1, 0.33, {delay:0, y:200, blurFilter:{blurY:_blurYamount1}});
TweenLite.to(couple2, 0.33, {delay:0, y:200, blurFilter:{blurY:_blurYamount1}});

//remove blur as the hidden asset animates onto the stage
TweenLite.to(couple1, _tweenSpeed3, {delay:1, blurFilter:{blurY:_noBlur}, y:0, ease:Sine.easeOut, overwrite:false});

//move the asset off stage, as per storyboard, blur it again, as you move it
TweenLite.to(couple1, _tweenSpeed2, {delay:3, blurFilter:{blurY:_blurYamount1}, y:200, ease:Elastic.easeOut, overwrite:false});

//remove blur as the hidden asset animates onto the stage
TweenLite.to(couple2, _tweenSpeed1, {delay:3.5, blurFilter:{blurY:_noBlur}, y:10, overwrite:false});

//move the asset off stage, as per storyboard, blur it again, as you move it
TweenLite.to(couple2, _tweenSpeed2, {delay:6, blurFilter:{blurY:_blurYamount1}, y:200, ease:Elastic.easeOut, overwrite:false});

For Flash banners, for example, it’s often easier to use AS2, because a) Designers don’t know AS3, b) you’ll get that extra 1% or so of users who don’t have Flash Player 9 or 10 yet and c) some versions of Flash 9 player had an AS3 preload bug on IE on Windows that didn’t allow a file to preload itself properly. Why not just do the AS3 workaround with an empty wrapper SWF that preloads the main SWF? Depending on the situation, sometimes, for smaller files like banners, it’s easier to send the client 1 SWF with everything in it, than saying, “hey, do you have an external assets server that I can upload the extra SWFs to so the banner can load it in at run-time?” I’ve had cases where a client uses an Ad Server that they either don’t quite know how to fully use or that’s weirdly set to only accept 1 SWF. I’ve read about server load-balancing issues forcing Flash guys to dump everything into 1 SWF as well. Basically, if your client has those restrictions, as a Flash Developer, you’re stuck with these limitations and, usually, no amount of “hey, but look at how much more elegant my code is if i break the SWF up into several pieces” will help .

Anyways, here’s the AS2 code:

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;

TweenPlugin.activate([BlurFilterPlugin]);

var tweenSpeed1:Number = 2;
var blurYamount1:Number = 60;
var noBlur:Number = 0;

//init blur filter & position on hidden asset
TweenLite.to(couple1, 0, {delay:0, _y:200, blurFilter:{blurY:blurYamount1}});
TweenLite.to(couple2, 0, {delay:0, _y:200, blurFilter:{blurY:blurYamount1}});

//remove blur as the hidden asset animates onto the stage
TweenLite.to(couple1, tweenSpeed1-1, {delay:2, blurFilter:{blurY:noBlur}, _y:0, overwrite:false});

//move the asset off stage, as per storyboard, blur it again, as you move it
TweenLite.to(couple1, tweenSpeed1, {delay:4, blurFilter:{blurY:blurYamount1}, _y:200, ease:Elastic.easeOut, overwrite:false});

//remove blur as the hidden asset animates onto the stage
TweenLite.to(couple2, tweenSpeed1-1.25, {delay:4.5, blurFilter:{blurY:noBlur}, _y:10, overwrite:false});

//move the asset off stage, as per storyboard, blur it again, as you move it
TweenLite.to(couple2, tweenSpeed1, {delay:7, blurFilter:{blurY:blurYamount1},_y:200, ease:Elastic.easeOut, overwrite:false});