Tweener Text Swap Animation

Posted: January 31st, 2010 | Filed under: AS3, Animation | 3 Comments » I came across this little trick and think it’s a great way to swap out copy in an easy and unique way. Using one of Tweener’s Textshortcut properties, you can change the copy in a textfield by tweening between strings. Typically I try to use native Flash tweening in these prototypes, but Tweener has this transition not found in Flash’s framework.

Here, an event listener waits for a button to be clicked. Depending on which button is clicked, it sets the string to new copy and changes the size of the sprite behind it. For this to work, download the newest Tweener AS3 classes from http://code.google.com/p/tweener/ and include it in your project with the import statements in the first few lines of the TweenerSwap class.

Download Source

Main.as
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
package
{
	import caurina.transitions.Tweener;
	import caurina.transitions.properties.TextShortcuts;
	TextShortcuts.init();
 
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
	import flash.text.AntiAliasType;
 
	import fl.controls.Button;
 
	public class TweenerSwap extends Sprite
	{
		private var btn1:Button;
		private var btn2:Button;
		private var btn3:Button;
		private var squContainer:Sprite;
		private var square:Sprite;
		private var tF:TextField;
 
		private var textStr:String;
		private var squWidth:Number;
		private var squHeight:Number;
 
		public function TweenerSwap()
		{
			init();
			format();
		}
 
		private function init():void
		{
			squContainer = new Sprite();
			addChild(squContainer);
			squContainer.alpha = 0;
 
			square = new Sprite();
			squContainer.addChild(square);
			square.graphics.beginFill(0xFF0000, 1);
			square.graphics.drawRect(0,0,100,100);
			square.graphics.endFill();
 
			var fmt:TextFormat = new TextFormat();
			fmt.font="Arial";
			fmt.size=12;
			fmt.color= 0xCCCCCC;
			fmt.leading=4;
			fmt.align = TextFormatAlign.CENTER;
 
			tF = new TextField();
			tF.multiline=true;
			tF.wordWrap=true;
			tF.width=300;
			tF.selectable=false;
			tF.defaultTextFormat=fmt;
			tF.antiAliasType = AntiAliasType.ADVANCED;
			tF.mouseEnabled = false;
			squContainer.addChild(tF);
 
			var container:Sprite = new Sprite();
			addChild(container);
			container.addEventListener(MouseEvent.MOUSE_DOWN, swapText, false, 0, true);
 
			btn1 = new Button();
			btn1.label = "String 1";
			container.addChild(btn1).name = "btn1";
 
			btn2 = new Button();
			btn2.label = "String 2";
			container.addChild(btn2).name = "btn2";
 
			btn3 = new Button();
			btn3.label = "String 3";
			container.addChild(btn3).name = "btn3";
		}
 
		private function format():void
		{
			btn1.y = 0;
			btn2.y = 24;
			btn3.y = 48;
 
			squContainer.x = stage.stageWidth/2;
		}
 
		private function swapText(e:MouseEvent):void
		{
			switch(e.target.name)
			{
				case "btn3":
				textStr = "As we must account for every idle word, so must we account for every idle silence.";
				squWidth = 180;
				squHeight = 60;
				break;
				case "btn2":
				textStr = "If you would not be forgotten as soon as you are dead, either write something worth reading or do things worth writing.";
				squWidth = 350;
				squHeight = 40;
				break;
				case "btn1":
				textStr = "A great empire, like a great cake, is most easily diminished at the edges.";
				squWidth = 410;
				squHeight = 20;
				break;
				default:
				break;
			}
 
			Tweener.addTween(squContainer, {x:stage.stageWidth/2 - squWidth/2 + 50, y:stage.stageHeight/2 - squHeight/2, alpha:1, time:1, delay:0, transition:"easeInOutQuart"});
			Tweener.addTween(square, {width:squWidth, height:squHeight, time:1, delay:0, transition:"easeInOutQuart"});
			Tweener.addTween(tF, {_text:textStr, width:squWidth, height:squHeight, time:1, delay:0, transition:"easeInOutQuart"});
 
		}
	}
}

3 Comments on “Tweener Text Swap Animation”

  1. 1 WP Themes said at 11:02 am on July 1st, 2010:

    Good post and this mail helped me alot in my college assignement. Thank you as your information.

  2. 2 STUART said at 12:28 pm on July 15th, 2010:


    Pillspot.org. Canadian Health&Care.Best quality drugs.Special Internet Prices.No prescription online pharmacy. Online Pharmacy. Buy pills online

    Buy:Lumigan.Petcam (Metacam) Oral Suspension.100% Pure Okinawan Coral Calcium.Mega Hoodia.Actos.Zyban.Arimidex.Prevacid.Synthroid.Retin-A.Accutane.Prednisolone.Human Growth Hormone.Nexium.Valtrex.Zovirax….

  3. 3 Rustic said at 6:23 pm on August 29th, 2010:

    Pendant http://jvanityfzvdg.BEDROOMPROPERTY.INFO/tag/Rustic+Lamps+Pendant+light/ : Pendant…

    Pendant…


Leave a Reply