Rounded Textfield


/ Published in: ActionScript 3
Save to your folder(s)

Returns a circle filled with textfields with your text. fully customizable. See the actionscript comments for usage


Copy this code and paste it in your HTML
  1. /*
  2. Usage from other .as file:
  3.  
  4. public var inputText:String = "Lorem ipsum dolor sit amet%newline%, consectetur adipiscing elit. Donec hendrerit adipiscing quam, eu suscipit arcu mattis eget. Curabitur consectetur eleifend magna id scelerisque. Etiam congue condimentum leo ac lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed aliquet justo. Nunc dapibus massa ut justo elementum et vestibulum justo suscipit.";
  5. roundTextField = new RoundedTextField(inputText);
  6. addChild(roundTextField);
  7. */
  8.  
  9. package
  10. {
  11. import caurina.transitions.Tweener;
  12.  
  13. import flash.display.BlendMode;
  14. import flash.display.Sprite;
  15. import flash.text.TextField;
  16. import flash.text.TextFieldAutoSize;
  17. import flash.text.TextFormat;
  18. import flash.text.TextFormatAlign;
  19.  
  20. /**
  21. * @author mparzinski (twitter: @withinmedianl)
  22. * INSTRUCTIONS
  23. * - parameters (input, circleSize, margin, startY, endY, font, fontSize, lineHeight, backgroundColor, backgroundAlpha)
  24. * - input: The text that should be placed in the roundedtextfield
  25. * - circlesize: The size of the circle (from center to side, so 75 gives a circle of 150px)
  26. * - margin: The margin in px from the sides of the circle to the text
  27. * - startY: topmargin (snaps to textfield's height)
  28. * - endY: bottomMargin (snaps to textfield's height)
  29. * - font: font used in the textfield
  30. * - fontSize: size of the font in px
  31. * - lineHeight: height of a line of text
  32. * - backgroundColor: color of the circle (0xRRGGBB)
  33. * - backgroundAlpha: alpha of the circle (0 - 1)
  34. * - animate (boolean) should the clip animate in?
  35. * //////////////////////////////////////////////////////////////
  36. * SPECIALS
  37. * - %newline% in input for a linebreak (dont work on autosize)
  38. * - circlesize to "-1" for autoSize
  39. * //////////////////////////////////////////////////////////////
  40. */
  41. public class RoundedTextField extends Sprite
  42. {
  43. public var defaultCircleSize:Number;
  44. public var defaultMargin:Number;
  45. public var defaultStartY:Number;
  46. public var defaultEndY:Number;
  47. public var defaultFont:String;
  48. public var defaultFontSize:Number;
  49. public var defaultLineHeight:Number;
  50. public var defaultBackgroundColor:Number;
  51. public var defaultBackgroundAlpha:Number;
  52. public var defaultAnimate:Boolean;
  53.  
  54. private var autoSize:Boolean;
  55.  
  56. public var currentTargetIndex:Number;
  57. public var currentTargetNextY:Number;
  58. public var placedChars:Number;
  59. public var difference:Number;
  60.  
  61. public var circleSprite:Sprite;
  62. public var squareSprite:Sprite;
  63. public var textFieldSize:Sprite;
  64.  
  65. public var textFormat:TextFormat;
  66. public var currentTarget:TextField;
  67. public var textFields:Array;
  68.  
  69. // Constructor
  70. public function RoundedTextField(
  71. input:String,
  72. circleSize:Number = 210,
  73. margin:Number = 15,
  74. startY:Number = 10,
  75. endY:Number = 30,
  76. font:String = "Arial",
  77. fontSize:Number = 13,
  78. lineHeight:Number = 17,
  79. backgroundColor:uint = 0xB3E7FB,
  80. backGroundAlpha:Number = 1,
  81. animate:Boolean = true
  82. ):void
  83. {
  84. if(circleSize != -1)
  85. {
  86. defaultCircleSize = circleSize;
  87. autoSize = false;
  88. }
  89. else
  90. {
  91. defaultCircleSize = 50;
  92. autoSize = true;
  93. }
  94. defaultMargin = margin;
  95. defaultStartY = startY;
  96. defaultEndY = endY;
  97. defaultFont = font;
  98. defaultFontSize = fontSize;
  99. defaultLineHeight = lineHeight;
  100. defaultBackgroundColor = backgroundColor;
  101. defaultBackgroundAlpha = backGroundAlpha;
  102. defaultAnimate = animate;
  103.  
  104. textFormat = new TextFormat();
  105. textFormat.font = defaultFont;
  106. textFormat.size = defaultFontSize;
  107. textFormat.align = TextFormatAlign.CENTER;
  108.  
  109. init(input);
  110. }
  111. public function init(input:String):void
  112. {
  113. currentTargetNextY = (-defaultCircleSize) + defaultStartY + defaultLineHeight;
  114. currentTargetIndex = 0;
  115. placedChars = 0;
  116. textFields = new Array();
  117.  
  118. // draw the background circle
  119. circleSprite = new Sprite;
  120. circleSprite.graphics.beginFill(defaultBackgroundColor, defaultBackgroundAlpha);
  121. circleSprite.graphics.drawCircle(0, 0, defaultCircleSize);
  122. circleSprite.graphics.endFill();
  123. addChild(circleSprite);
  124.  
  125. addTextFields();
  126.  
  127. trace("input length; " + input.length);
  128. enterText(input);
  129. }
  130. private function addTextFields():void
  131. {
  132. trace("adding Textfields");
  133. while(currentTargetNextY < defaultCircleSize - (defaultLineHeight + defaultEndY))
  134. {
  135. var tf:TextField = new TextField();
  136. tf.defaultTextFormat = textFormat;
  137. tf.wordWrap = true;
  138. tf.multiline = false;
  139. tf.autoSize = TextFieldAutoSize.LEFT;
  140.  
  141. tf.y = currentTargetNextY;
  142. var futureTextFieldW:Number;
  143. var tfy:Number;
  144. if(currentTargetNextY < 0)
  145. {
  146. tfy = Math.abs(tf.y);
  147. futureTextFieldW= Math.sqrt((defaultCircleSize * defaultCircleSize) - (tfy * tfy));
  148. }
  149. else
  150. {
  151. tfy = Math.abs(tf.y + defaultLineHeight);
  152. futureTextFieldW= Math.sqrt((defaultCircleSize * defaultCircleSize) - (tfy * tfy));
  153. }
  154.  
  155. tf.width = (futureTextFieldW * 2) - defaultMargin;
  156. tf.x = -tf.width / 2; // centers the textfield (x)
  157. tf.name = tf.name + Math.floor(tf.width);
  158.  
  159. addChild(tf);
  160.  
  161. currentTargetNextY += defaultLineHeight;
  162. textFields.push(tf);
  163. }
  164. }
  165. private function enterText(input:String):void
  166. {
  167. currentTarget = textFields[currentTargetIndex] as TextField;
  168. for(var i:Number = 0; i < input.length; i += 1)
  169. {
  170. if(currentTarget.textWidth + (defaultMargin * 5) > currentTarget.width )
  171. {
  172. if(input.substring(i, i + 1) == " ")
  173. {
  174. if(currentTargetIndex < textFields.length - 1)
  175. {
  176. currentTargetIndex += 1;
  177. currentTarget = textFields[currentTargetIndex] as TextField;
  178. }
  179. else
  180. {
  181. if(autoSize == true)
  182. {
  183. trace("Restarting, not enough space");
  184. restart(input);
  185. }
  186. else
  187. {
  188. currentTarget.appendText("...");
  189. }
  190. difference = input.length - placedChars;
  191.  
  192. if(defaultAnimate == true)
  193. {
  194. animate();
  195. }
  196. return;
  197. }
  198. }
  199. }
  200. // look for a line break, add a new textfield and delete the %newline% from the inputtext
  201. if(input.substring(i, i + 9) == "%newline%")
  202. {
  203. trace("found newline");
  204. currentTargetIndex += 1;
  205. currentTarget = textFields[currentTargetIndex] as TextField;
  206. input = input.substring(0, i) + input.substring(i + 9, input.length);
  207. }
  208. if(i == input.length)
  209. {
  210. for(var x:Number = 0; i < textFields.length; i +=1)
  211. {
  212. if(textFields[x].text.length == 1)
  213. {
  214. removeChildAt(x + 1);
  215. }
  216. }
  217. }
  218. currentTarget.appendText(input.substring(i, i + 1)); // add 1 character to the textfield
  219. placedChars += 1;
  220. currentTarget.multiline = false;
  221. }
  222. }
  223.  
  224. private function restart(input:String):void
  225. {
  226. while(numChildren)
  227. {
  228. removeChildAt(0);
  229. }
  230. defaultCircleSize += defaultMargin;
  231. init(input);
  232. }
  233.  
  234. private function animate():void
  235. {
  236. trace("starting animation");
  237. circleSprite.scaleY = .8;
  238. circleSprite.scaleX = .8;
  239.  
  240. for(var i:Number = 0; i < textFields.length + 1; i += 1)
  241. {
  242. var target:Object = getChildAt(i);
  243. target.alpha = 0;
  244.  
  245. Tweener.addTween(target, {
  246. alpha: 1,
  247. delay: .5 / i,
  248. time: 1.5 / i,
  249. transition: "easeInBack" });
  250. }
  251. Tweener.addTween(circleSprite, {
  252. alpha: defaultBackgroundAlpha, delay: .2, time: .5, transition: "easeOutBack" });
  253. Tweener.addTween(circleSprite, {
  254. scaleX: 1, delay: .2, time: .5, transition: "easeOutBack" });
  255. Tweener.addTween(circleSprite, {
  256. scaleY: 1, delay: .19, time: .49, transition: "easeInBack" });
  257. }
  258. }
  259. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.