opentransmission » Animation http://opentransmission.com Interactive Design, Development and Animation by Eric Cohen Thu, 29 Apr 2010 01:29:02 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Tweener Text Swap Animation http://opentransmission.com/2010/01/tweener-text-swap-animation/ http://opentransmission.com/2010/01/tweener-text-swap-animation/#comments 01/10 Eric Cohen http://escohen.com/?p=17 /* 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, [...]]]>*/ 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"});
 
		}
	}
}
]]> http://opentransmission.com/2010/01/tweener-text-swap-animation/feed/ 4