Revision: 39883
Updated Code
at February 19, 2011 04:11 by withinmedianl
Updated Code
/*
Usage from other .as file:
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.";
roundTextField = new RoundedTextField(inputText);
addChild(roundTextField);
*/
package
{
import caurina.transitions.Tweener;
import flash.display.BlendMode;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
/**
* @author mparzinski (twitter: @withinmedianl)
* INSTRUCTIONS
* - parameters (input, circleSize, margin, startY, endY, font, fontSize, lineHeight, backgroundColor, backgroundAlpha)
* - input: The text that should be placed in the roundedtextfield
* - circlesize: The size of the circle (from center to side, so 75 gives a circle of 150px)
* - margin: The margin in px from the sides of the circle to the text
* - startY: topmargin (snaps to textfield's height)
* - endY: bottomMargin (snaps to textfield's height)
* - font: font used in the textfield
* - fontSize: size of the font in px
* - lineHeight: height of a line of text
* - backgroundColor: color of the circle (0xRRGGBB)
* - backgroundAlpha: alpha of the circle (0 - 1)
* - animate (boolean) should the clip animate in?
* //////////////////////////////////////////////////////////////
* SPECIALS
* - %newline% in input for a linebreak (dont work on autosize)
* - circlesize to "-1" for autoSize
* //////////////////////////////////////////////////////////////
*/
public class RoundedTextField extends Sprite
{
public var defaultCircleSize:Number;
public var defaultMargin:Number;
public var defaultStartY:Number;
public var defaultEndY:Number;
public var defaultFont:String;
public var defaultFontSize:Number;
public var defaultLineHeight:Number;
public var defaultBackgroundColor:Number;
public var defaultBackgroundAlpha:Number;
public var defaultAnimate:Boolean;
private var autoSize:Boolean;
public var currentTargetIndex:Number;
public var currentTargetNextY:Number;
public var placedChars:Number;
public var difference:Number;
public var circleSprite:Sprite;
public var squareSprite:Sprite;
public var textFieldSize:Sprite;
public var textFormat:TextFormat;
public var currentTarget:TextField;
public var textFields:Array;
// Constructor
public function RoundedTextField(
input:String,
circleSize:Number = 210,
margin:Number = 15,
startY:Number = 10,
endY:Number = 30,
font:String = "Arial",
fontSize:Number = 13,
lineHeight:Number = 17,
backgroundColor:uint = 0xB3E7FB,
backGroundAlpha:Number = 1,
animate:Boolean = true
):void
{
if(circleSize != -1)
{
defaultCircleSize = circleSize;
autoSize = false;
}
else
{
defaultCircleSize = 50;
autoSize = true;
}
defaultMargin = margin;
defaultStartY = startY;
defaultEndY = endY;
defaultFont = font;
defaultFontSize = fontSize;
defaultLineHeight = lineHeight;
defaultBackgroundColor = backgroundColor;
defaultBackgroundAlpha = backGroundAlpha;
defaultAnimate = animate;
textFormat = new TextFormat();
textFormat.font = defaultFont;
textFormat.size = defaultFontSize;
textFormat.align = TextFormatAlign.CENTER;
init(input);
}
public function init(input:String):void
{
currentTargetNextY = (-defaultCircleSize) + defaultStartY + defaultLineHeight;
currentTargetIndex = 0;
placedChars = 0;
textFields = new Array();
// draw the background circle
circleSprite = new Sprite;
circleSprite.graphics.beginFill(defaultBackgroundColor, defaultBackgroundAlpha);
circleSprite.graphics.drawCircle(0, 0, defaultCircleSize);
circleSprite.graphics.endFill();
addChild(circleSprite);
addTextFields();
trace("input length; " + input.length);
enterText(input);
}
private function addTextFields():void
{
trace("adding Textfields");
while(currentTargetNextY < defaultCircleSize - (defaultLineHeight + defaultEndY))
{
var tf:TextField = new TextField();
tf.defaultTextFormat = textFormat;
tf.wordWrap = true;
tf.multiline = false;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.y = currentTargetNextY;
var futureTextFieldW:Number;
var tfy:Number;
if(currentTargetNextY < 0)
{
tfy = Math.abs(tf.y);
futureTextFieldW= Math.sqrt((defaultCircleSize * defaultCircleSize) - (tfy * tfy));
}
else
{
tfy = Math.abs(tf.y + defaultLineHeight);
futureTextFieldW= Math.sqrt((defaultCircleSize * defaultCircleSize) - (tfy * tfy));
}
tf.width = (futureTextFieldW * 2) - defaultMargin;
tf.x = -tf.width / 2; // centers the textfield (x)
tf.name = tf.name + Math.floor(tf.width);
addChild(tf);
currentTargetNextY += defaultLineHeight;
textFields.push(tf);
}
}
private function enterText(input:String):void
{
currentTarget = textFields[currentTargetIndex] as TextField;
for(var i:Number = 0; i < input.length; i += 1)
{
if(currentTarget.textWidth + (defaultMargin * 5) > currentTarget.width )
{
if(input.substring(i, i + 1) == " ")
{
if(currentTargetIndex < textFields.length - 1)
{
currentTargetIndex += 1;
currentTarget = textFields[currentTargetIndex] as TextField;
}
else
{
if(autoSize == true)
{
trace("Restarting, not enough space");
restart(input);
}
else
{
currentTarget.appendText("...");
}
difference = input.length - placedChars;
if(defaultAnimate == true)
{
animate();
}
return;
}
}
}
// look for a line break, add a new textfield and delete the %newline% from the inputtext
if(input.substring(i, i + 9) == "%newline%")
{
trace("found newline");
currentTargetIndex += 1;
currentTarget = textFields[currentTargetIndex] as TextField;
input = input.substring(0, i) + input.substring(i + 9, input.length);
}
if(i == input.length)
{
for(var x:Number = 0; i < textFields.length; i +=1)
{
if(textFields[x].text.length == 1)
{
removeChildAt(x + 1);
}
}
}
currentTarget.appendText(input.substring(i, i + 1)); // add 1 character to the textfield
placedChars += 1;
currentTarget.multiline = false;
}
}
private function restart(input:String):void
{
while(numChildren)
{
removeChildAt(0);
}
defaultCircleSize += defaultMargin;
init(input);
}
private function animate():void
{
trace("starting animation");
circleSprite.scaleY = .8;
circleSprite.scaleX = .8;
for(var i:Number = 0; i < textFields.length + 1; i += 1)
{
var target:Object = getChildAt(i);
target.alpha = 0;
Tweener.addTween(target, {
alpha: 1,
delay: .5 / i,
time: 1.5 / i,
transition: "easeInBack" });
}
Tweener.addTween(circleSprite, {
alpha: defaultBackgroundAlpha, delay: .2, time: .5, transition: "easeOutBack" });
Tweener.addTween(circleSprite, {
scaleX: 1, delay: .2, time: .5, transition: "easeOutBack" });
Tweener.addTween(circleSprite, {
scaleY: 1, delay: .19, time: .49, transition: "easeInBack" });
}
}
}
Revision: 39882
Updated Code
at February 19, 2011 03:55 by withinmedianl
Updated Code
/*
Usage from other .as file:
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.";
roundTextField = new RoundedTextField(inputText);
addChild(roundTextField);
*/
package
{
import caurina.transitions.Tweener;
import flash.display.BlendMode;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import flashx.textLayout.formats.BackgroundColor;
/**
* @author mparzinski (twitter: @withinmedianl)
* INSTRUCTIONS
* - parameters (input, circleSize, margin, startY, endY, font, fontSize, lineHeight, backgroundColor, backgroundAlpha)
* - input: The text that should be placed in the roundedtextfield
* - circlesize: The size of the circle (from center to side, so 75 gives a circle of 150px)
* - margin: The margin in px from the sides of the circle to the text
* - startY: topmargin (snaps to textfield's height)
* - endY: bottomMargin (snaps to textfield's height)
* - font: font used in the textfield
* - fontSize: size of the font in px
* - lineHeight: height of a line of text
* - backgroundColor: color of the circle (0xRRGGBB)
* - backgroundAlpha: alpha of the circle (0 - 1)
* - animate (boolean) should the clip animate in?
* //////////////////////////////////////////////////////////////
* SPECIALS
* - %newline% in input for a linebreak (dont work on autosize)
* - circlesize to "-1" for autoSize
* //////////////////////////////////////////////////////////////
*/
public class RoundedTextField extends Sprite
{
public var defaultCircleSize:Number;
public var defaultMargin:Number;
public var defaultStartY:Number;
public var defaultEndY:Number;
public var defaultFont:String;
public var defaultFontSize:Number;
public var defaultLineHeight:Number;
public var defaultBackgroundColor:Number;
public var defaultBackgroundAlpha:Number;
public var defaultAnimate:Boolean;
private var autoSize:Boolean;
public var currentTargetIndex:Number;
public var currentTargetNextY:Number;
public var placedChars:Number;
public var difference:Number;
public var circleSprite:Sprite;
public var squareSprite:Sprite;
public var textFieldSize:Sprite;
public var textFormat:TextFormat;
public var currentTarget:TextField;
public var textFields:Array;
// Constructor
public function RoundedTextField(
input:String,
circleSize:Number = 210,
margin:Number = 15,
startY:Number = 10,
endY:Number = 30,
font:String = "Arial",
fontSize:Number = 13,
lineHeight:Number = 17,
backgroundColor:uint = 0xB3E7FB,
backGroundAlpha:Number = 1,
animate:Boolean = true
):void
{
if(circleSize != -1)
{
defaultCircleSize = circleSize;
autoSize = false;
}
else
{
defaultCircleSize = 50;
autoSize = true;
}
defaultMargin = margin;
defaultStartY = startY;
defaultEndY = endY;
defaultFont = font;
defaultFontSize = fontSize;
defaultLineHeight = lineHeight;
defaultBackgroundColor = backgroundColor;
defaultBackgroundAlpha = backGroundAlpha;
defaultAnimate = animate;
textFormat = new TextFormat();
textFormat.font = defaultFont;
textFormat.size = defaultFontSize;
textFormat.align = TextFormatAlign.CENTER;
init(input);
}
public function init(input:String):void
{
currentTargetNextY = (-defaultCircleSize) + defaultStartY + defaultLineHeight;
currentTargetIndex = 0;
placedChars = 0;
textFields = new Array();
// draw the background circle
circleSprite = new Sprite;
circleSprite.graphics.beginFill(defaultBackgroundColor, defaultBackgroundAlpha);
circleSprite.graphics.drawCircle(0, 0, defaultCircleSize);
circleSprite.graphics.endFill();
addChild(circleSprite);
addTextFields();
trace("input length; " + input.length);
enterText(input);
}
private function addTextFields():void
{
trace("adding Textfields");
while(currentTargetNextY < defaultCircleSize - (defaultLineHeight + defaultEndY))
{
var tf:TextField = new TextField();
tf.defaultTextFormat = textFormat;
tf.wordWrap = true;
tf.multiline = false;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.y = currentTargetNextY;
var futureTextFieldW:Number;
var tfy:Number;
if(currentTargetNextY < 0)
{
tfy = Math.abs(tf.y);
futureTextFieldW= Math.sqrt((defaultCircleSize * defaultCircleSize) - (tfy * tfy));
}
else
{
tfy = Math.abs(tf.y + defaultLineHeight);
futureTextFieldW= Math.sqrt((defaultCircleSize * defaultCircleSize) - (tfy * tfy));
}
tf.width = (futureTextFieldW * 2) - defaultMargin;
tf.x = -tf.width / 2; // centers the textfield (x)
tf.name = tf.name + Math.floor(tf.width);
addChild(tf);
currentTargetNextY += defaultLineHeight;
textFields.push(tf);
}
}
private function enterText(input:String):void
{
currentTarget = textFields[currentTargetIndex] as TextField;
for(var i:Number = 0; i < input.length; i += 1)
{
if(currentTarget.textWidth + (defaultMargin * 5) > currentTarget.width )
{
if(input.substring(i, i + 1) == " ")
{
if(currentTargetIndex < textFields.length - 1)
{
currentTargetIndex += 1;
currentTarget = textFields[currentTargetIndex] as TextField;
}
else
{
if(autoSize == true)
{
trace("Restarting, not enough space");
restart(input);
}
else
{
currentTarget.appendText("...");
}
difference = input.length - placedChars;
if(defaultAnimate == true)
{
animate();
}
return;
}
}
}
// look for a line break, add a new textfield and delete the %newline% from the inputtext
if(input.substring(i, i + 9) == "%newline%")
{
trace("found newline");
currentTargetIndex += 1;
currentTarget = textFields[currentTargetIndex] as TextField;
input = input.substring(0, i) + input.substring(i + 9, input.length);
}
if(i == input.length)
{
for(var x:Number = 0; i < textFields.length; i +=1)
{
if(textFields[x].text.length == 1)
{
removeChildAt(x + 1);
}
}
}
currentTarget.appendText(input.substring(i, i + 1)); // add 1 character to the textfield
placedChars += 1;
currentTarget.multiline = false;
}
}
private function restart(input:String):void
{
while(numChildren)
{
removeChildAt(0);
}
defaultCircleSize += defaultMargin;
init(input);
}
private function animate():void
{
trace("starting animation");
circleSprite.scaleY = .8;
circleSprite.scaleX = .8;
for(var i:Number = 0; i < textFields.length + 1; i += 1)
{
var target:Object = getChildAt(i);
target.alpha = 0;
Tweener.addTween(target, {
alpha: 1,
delay: .5 / i,
time: 1.5 / i,
transition: "easeInBack" });
}
Tweener.addTween(circleSprite, {
alpha: defaultBackgroundAlpha, delay: .2, time: .5, transition: "easeOutBack" });
Tweener.addTween(circleSprite, {
scaleX: 1, delay: .2, time: .5, transition: "easeOutBack" });
Tweener.addTween(circleSprite, {
scaleY: 1, delay: .19, time: .49, transition: "easeInBack" });
}
}
}
Revision: 39881
Updated Code
at February 19, 2011 03:54 by withinmedianl
Updated Code
/*
Usage from other .as file:
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.";
roundTextField = new RoundedTextField(inputText);
addChild(roundTextField);
*/
package
{
import caurina.transitions.Tweener;
import flash.display.BlendMode;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import flashx.textLayout.formats.BackgroundColor;
/**
* @author mparzinski (twitter: @withinmedianl)
* INSTRUCTIONS
* - parameters (input, circleSize, margin, startY, endY, font, fontSize, lineHeight, backgroundColor, backgroundAlpha)
* - input: The text that should be placed in the roundedtextfield
* - circlesize: The size of the circle (from center to side, so 75 gives a circle of 150px)
* - margin: The margin in px from the sides of the circle to the text
* - startY: topmargin (snaps to textfield's height)
* - endY: bottomMargin (snaps to textfield's height)
* - font: font used in the textfield
* - fontSize: size of the font in px
* - lineHeight: height of a line of text
* - backgroundColor: color of the circle (0xRRGGBB)
* - backgroundAlpha: alpha of the circle (0 - 1)
* - animate (boolean) should the clip animate in?
* //////////////////////////////////////////////////////////////
* SPECIALS
* - %newline% in input for a linebreak (dont work on autosize)
* - circlesize to "-1" for autoSize
* //////////////////////////////////////////////////////////////
*/
public class RoundedTextField extends Sprite
{
public var defaultCircleSize:Number;
public var defaultMargin:Number;
public var defaultStartY:Number;
public var defaultEndY:Number;
public var defaultFont:String;
public var defaultFontSize:Number;
public var defaultLineHeight:Number;
public var defaultBackgroundColor:Number;
public var defaultBackgroundAlpha:Number;
public var defaultAnimate:Boolean;
private var autoSize:Boolean;
public var currentTargetIndex:Number;
public var currentTargetNextY:Number;
public var placedChars:Number;
public var difference:Number;
public var circleSprite:Sprite;
public var squareSprite:Sprite;
public var textFieldSize:Sprite;
public var textFormat:TextFormat;
public var currentTarget:TextField;
public var textFields:Array;
// Constructor
public function RoundedTextField(
input:String,
circleSize:Number = 210,
margin:Number = 15,
startY:Number = 10,
endY:Number = 30,
font:String = "Arial",
fontSize:Number = 13,
lineHeight:Number = 17,
backgroundColor:uint = 0xB3E7FB,
backGroundAlpha:Number = 1,
animate:Boolean = true
):void
{
if(circleSize != -1)
{
defaultCircleSize = circleSize;
autoSize = false;
}
else
{
defaultCircleSize = 50;
autoSize = true;
}
defaultMargin = margin;
defaultStartY = startY;
defaultEndY = endY;
defaultFont = font;
defaultFontSize = fontSize;
defaultLineHeight = lineHeight;
defaultBackgroundColor = backgroundColor;
defaultBackgroundAlpha = backGroundAlpha;
defaultAnimate = animate;
textFormat = new TextFormat();
textFormat.font = defaultFont;
textFormat.size = defaultFontSize;
textFormat.align = TextFormatAlign.CENTER;
init(input);
}
public function init(input:String):void
{
currentTargetNextY = (-defaultCircleSize) + defaultStartY + defaultLineHeight;
currentTargetIndex = 0;
placedChars = 0;
textFields = new Array();
// draw the background circle
circleSprite = new Sprite;
circleSprite.graphics.beginFill(defaultBackgroundColor, defaultBackgroundAlpha);
circleSprite.graphics.drawCircle(0, 0, defaultCircleSize);
circleSprite.graphics.endFill();
addChild(circleSprite);
addTextFields();
trace("input length; " + input.length);
enterText(input);
}
private function addTextFields():void
{
trace("adding Textfields");
while(currentTargetNextY < defaultCircleSize - (defaultLineHeight + defaultEndY))
{
var tf:TextField = new TextField();
tf.defaultTextFormat = textFormat;
tf.wordWrap = true;
tf.multiline = false;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.y = currentTargetNextY;
var futureTextFieldW:Number;
var tfy:Number;
if(currentTargetNextY < 0)
{
tfy = Math.abs(tf.y);
futureTextFieldW= Math.sqrt((defaultCircleSize * defaultCircleSize) - (tfy * tfy));
}
else
{
tfy = Math.abs(tf.y + defaultLineHeight);
futureTextFieldW= Math.sqrt((defaultCircleSize * defaultCircleSize) - (tfy * tfy));
}
tf.width = (futureTextFieldW * 2) - defaultMargin;
tf.x = -tf.width / 2; // centers the textfield (x)
tf.name = tf.name + Math.floor(tf.width);
addChild(tf);
currentTargetNextY += defaultLineHeight;
textFields.push(tf);
}
}
private function enterText(input:String):void
{
currentTarget = textFields[currentTargetIndex] as TextField;
for(var i:Number = 0; i < input.length; i += 1)
{
if(currentTarget.textWidth + (defaultMargin * 5) > currentTarget.width )
{
if(input.substring(i, i + 1) == " ")
{
if(currentTargetIndex < textFields.length - 1)
{
currentTargetIndex += 1;
currentTarget = textFields[currentTargetIndex] as TextField;
}
else
{
if(autoSize == true)
{
trace("Restarting, not enough space");
restart(input);
}
else
{
currentTarget.appendText("...");
}
difference = input.length - placedChars;
if(defaultAnimate == true)
{
animate();
}
return;
}
}
}
// look for a line break, add a new textfield and delete the %newline% from the inputtext
if(input.substring(i, i + 9) == "%newline%")
{
trace("found newline");
currentTargetIndex += 1;
currentTarget = textFields[currentTargetIndex] as TextField;
input = input.substring(0, i) + input.substring(i + 9, input.length);
}
if(i == input.length)
{
for(var x:Number = 0; i < textFields.length; i +=1)
{
if(textFields[x].text.length == 1)
{
removeChildAt(x + 1);
}
}
}
currentTarget.appendText(input.substring(i, i + 1)); // add 1 character to the textfield
placedChars += 1;
currentTarget.multiline = false;
}
}
private function restart(input:String):void
{
while(numChildren)
{
removeChildAt(0);
}
defaultCircleSize += defaultMargin;
init(input);
}
private function animate():void
{
trace("starting animation");
circleSprite.scaleY = .8;
circleSprite.scaleX = .8;
for(var i:Number = 0; i < textFields.length + 1; i += 1)
{
var target:Object = getChildAt(i);
target.alpha = 0;
Tweener.addTween(target, {
alpha: 1,
delay: .5 / i,
time: 1.5 / i,
transition: "easeInBack" });
}
Tweener.addTween(circleSprite, {
alpha: defaultBackgroundAlpha, delay: .2, time: .5, transition: "easeOutBack" });
Tweener.addTween(circleSprite, {
scaleX: 1, delay: .2, time: .5, transition: "easeOutBack" });
Tweener.addTween(circleSprite, {
scaleY: 1, delay: .19, time: .49, transition: "easeInBack" });
}
}
}
Revision: 39880
Updated Code
at February 19, 2011 03:53 by withinmedianl
Updated Code
/*
Usage from other .as file:
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.";
roundTextField = new RoundedTextField(inputText);
addChild(roundTextField);
*/
package
{
import caurina.transitions.Tweener;
import flash.display.BlendMode;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import flashx.textLayout.formats.BackgroundColor;
/**
* @author mparzinski (twitter: @withinmedianl)
* INSTRUCTIONS
* - parameters (input, circleSize, margin, startY, endY, font, fontSize, lineHeight, backgroundColor, backgroundAlpha)
* - input: The text that should be placed in the roundedtextfield
* - circlesize: The size of the circle (from center to side, so 75 gives a circle of 150px)
* - margin: The margin in px from the sides of the circle to the text
* - startY: topmargin (snaps to textfield's height)
* - endY: bottomMargin (snaps to textfield's height)
* - font: font used in the textfield
* - fontSize: size of the font in px
* - lineHeight: height of a line of text
* - backgroundColor: color of the circle (0xRRGGBB)
* - backgroundAlpha: alpha of the circle (0 - 1)
* - animate (boolean) should the clip animate in?
* //////////////////////////////////////////////////////////////
* SPECIALS
* - %newline% in input for a linebreak (dont work on autosize)
* - circlesize to "-1" for autoSize
* //////////////////////////////////////////////////////////////
*/
public class RoundedTextField extends Sprite
{
public var defaultCircleSize:Number;
public var defaultMargin:Number;
public var defaultStartY:Number;
public var defaultEndY:Number;
public var defaultFont:String;
public var defaultFontSize:Number;
public var defaultLineHeight:Number;
public var defaultBackgroundColor:Number;
public var defaultBackgroundAlpha:Number;
public var defaultAnimate:Boolean;
private var autoSize:Boolean;
public var currentTargetIndex:Number;
public var currentTargetNextY:Number;
public var placedChars:Number;
public var difference:Number;
public var circleSprite:Sprite;
public var squareSprite:Sprite;
public var textFieldSize:Sprite;
public var textFormat:TextFormat;
public var currentTarget:TextField;
public var textFields:Array;
// Constructor
public function RoundedTextField(
input:String,
circleSize:Number = 210,
margin:Number = 15,
startY:Number = 10,
endY:Number = 30,
font:String = "Arial",
fontSize:Number = 13,
lineHeight:Number = 17,
backgroundColor:uint = 0xB3E7FB,
backGroundAlpha:Number = 1,
animate:Boolean = true
):void
{
if(circleSize != -1)
{
defaultCircleSize = circleSize;
autoSize = false;
}
else
{
defaultCircleSize = 50;
autoSize = true;
}
defaultMargin = margin;
defaultStartY = startY;
defaultEndY = endY;
defaultFont = font;
defaultFontSize = fontSize;
defaultLineHeight = lineHeight;
defaultBackgroundColor = backgroundColor;
defaultBackgroundAlpha = backGroundAlpha;
defaultAnimate = animate;
textFormat = new TextFormat();
textFormat.font = defaultFont;
textFormat.size = defaultFontSize;
textFormat.align = TextFormatAlign.CENTER;
init(input);
}
public function init(input:String):void
{
currentTargetNextY = (-defaultCircleSize) + defaultStartY + defaultLineHeight;
currentTargetIndex = 0;
placedChars = 0;
textFields = new Array();
// draw the background circle
circleSprite = new Sprite;
circleSprite.graphics.beginFill(defaultBackgroundColor, defaultBackgroundAlpha);
circleSprite.graphics.drawCircle(0, 0, defaultCircleSize);
circleSprite.graphics.endFill();
addChild(circleSprite);
addTextFields();
trace("input length; " + input.length);
enterText(input);
}
private function addTextFields():void
{
trace("adding Textfields");
while(currentTargetNextY < defaultCircleSize - (defaultLineHeight + defaultEndY))
{
var tf:TextField = new TextField();
tf.defaultTextFormat = textFormat;
tf.wordWrap = true;
tf.multiline = false;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.y = currentTargetNextY;
var futureTextFieldW:Number;
var tfy:Number;
if(currentTargetNextY < 0)
{
tfy = Math.abs(tf.y);
futureTextFieldW= Math.sqrt((defaultCircleSize * defaultCircleSize) - (tfy * tfy));
}
else
{
tfy = Math.abs(tf.y + defaultLineHeight);
futureTextFieldW= Math.sqrt((defaultCircleSize * defaultCircleSize) - (tfy * tfy));
}
tf.width = (futureTextFieldW * 2) - defaultMargin;
tf.x = -tf.width / 2; // centers the textfield (x)
tf.name = tf.name + Math.floor(tf.width);
addChild(tf);
currentTargetNextY += defaultLineHeight;
textFields.push(tf);
}
}
private function enterText(input:String):void
{
currentTarget = textFields[currentTargetIndex] as TextField;
for(var i:Number = 0; i < input.length; i += 1)
{
if(currentTarget.textWidth + (defaultMargin * 5) > currentTarget.width )
{
if(input.substring(i, i + 1) == " ")
{
if(currentTargetIndex < textFields.length - 1)
{
currentTargetIndex += 1;
currentTarget = textFields[currentTargetIndex] as TextField;
}
else
{
if(autoSize == true)
{
trace("Restarting, not enough space");
restart(input);
}
else
{
currentTarget.appendText("...");
}
difference = input.length - placedChars;
if(defaultAnimate == true)
{
animate();
}
return;
}
}
}
// look for a line break, add a new textfield and delete the %newline% from the inputtext
if(input.substring(i, i + 9) == "%newline%")
{
trace("found newline");
currentTargetIndex += 1;
currentTarget = textFields[currentTargetIndex] as TextField;
input = input.substring(0, i) + input.substring(i + 9, input.length);
}
if(i == input.length)
{
for(var x:Number = 0; i < textFields.length; i +=1)
{
if(textFields[x].text.length == 1)
{
removeChildAt(x + 1);
}
}
}
currentTarget.appendText(input.substring(i, i + 1)); // add 1 character to the textfield
placedChars += 1;
currentTarget.multiline = false;
}
}
private function restart(input:String):void
{
while(numChildren)
{
removeChildAt(0);
}
defaultCircleSize += defaultMargin;
init(input);
}
private function animate():void
{
trace("starting animation");
circleSprite.scaleY = .8;
circleSprite.scaleX = .8;
for(var i:Number = 0; i < textFields.length + 1; i += 1)
{
var target:Object = getChildAt(i);
target.alpha = 0;
Tweener.addTween(target, {
alpha: 1,
delay: .5 / i,
time: 1.5 / i,
transition: "easeInBack" });
}
Tweener.addTween(circleSprite, {
alpha: defaultBackgroundAlpha, delay: .2, time: .5, transition: "easeOutBack" });
Tweener.addTween(circleSprite, {
scaleX: 1, delay: .2, time: .5, transition: "easeOutBack" });
Tweener.addTween(circleSprite, {
scaleY: 1, delay: .19, time: .49, transition: "easeInBack" });
}
}
}
Revision: 39879
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at January 22, 2011 03:54 by withinmedianl
Initial Code
/*
Usage from other .as file:
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.";
roundTextField = new RoundedTextField(inputText);
addChild(roundTextField);
*/
package
{
import caurina.transitions.Tweener;
import flash.display.BlendMode;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import flashx.textLayout.formats.BackgroundColor;
/**
* @author mparzinski (twitter: @withinmedianl)
* INSTRUCTIONS
* - parameters (input, circleSize, margin, startY, endY, font, fontSize, lineHeight, backgroundColor, backgroundAlpha)
* - input: The text that should be placed in the roundedtextfield
* - circlesize: The size of the circle (from center to side, so 75 gives a circle of 150px)
* - margin: The margin in px from the sides of the circle to the text
* - startY: topmargin (snaps to textfield's height)
* - endY: bottomMargin (snaps to textfield's height)
* - font: font used in the textfield
* - fontSize: size of the font in px
* - lineHeight: height of a line of text
* - backgroundColor: color of the circle (0xRRGGBB)
* - backgroundAlpha: alpha of the circle (0 - 1)
* - animate (boolean) should the clip animate in?
* //////////////////////////////////////////////////////////////
* SPECIALS
* - %newline% in input for a linebreak (dont work on autosize)
* - circlesize to "-1" for autoSize
* //////////////////////////////////////////////////////////////
*/
public class RoundedTextField extends Sprite
{
public var defaultCircleSize:Number;
public var defaultMargin:Number;
public var defaultStartY:Number;
public var defaultEndY:Number;
public var defaultFont:String;
public var defaultFontSize:Number;
public var defaultLineHeight:Number;
public var defaultBackgroundColor:Number;
public var defaultBackgroundAlpha:Number;
public var defaultAnimate:Boolean;
private var autoSize:Boolean;
public var currentTargetIndex:Number;
public var currentTargetNextY:Number;
public var placedChars:Number;
public var difference:Number;
public var circleSprite:Sprite;
public var squareSprite:Sprite;
public var textFieldSize:Sprite;
public var textFormat:TextFormat;
public var currentTarget:TextField;
public var textFields:Array;
// Constructor
public function RoundedTextField(
input:String,
circleSize:Number = 210,
margin:Number = 15,
startY:Number = 10,
endY:Number = 30,
font:String = "Arial",
fontSize:Number = 13,
lineHeight:Number = 17,
backgroundColor:uint = 0xB3E7FB,
backGroundAlpha:Number = 1,
animate:Boolean = true
):void
{
if(circleSize != -1)
{
defaultCircleSize = circleSize;
autoSize = false;
}
else
{
defaultCircleSize = 50;
autoSize = true;
}
defaultMargin = margin;
defaultStartY = startY;
defaultEndY = endY;
defaultFont = font;
defaultFontSize = fontSize;
defaultLineHeight = lineHeight;
defaultBackgroundColor = backgroundColor;
defaultBackgroundAlpha = backGroundAlpha;
defaultAnimate = animate;
textFormat = new TextFormat();
textFormat.font = defaultFont;
textFormat.size = defaultFontSize;
textFormat.align = TextFormatAlign.CENTER;
init(input);
}
public function init(input:String):void
{
currentTargetNextY = (-defaultCircleSize) + defaultStartY + defaultLineHeight;
currentTargetIndex = 0;
placedChars = 0;
textFields = new Array();
// draw the background circle
circleSprite = new Sprite;
circleSprite.graphics.beginFill(defaultBackgroundColor, defaultBackgroundAlpha);
circleSprite.graphics.drawCircle(0, 0, defaultCircleSize);
circleSprite.graphics.endFill();
addChild(circleSprite);
addTextFields();
trace("input length; " + input.length);
enterText(input);
}
private function addTextFields():void
{
trace("adding Textfields");
while(currentTargetNextY < defaultCircleSize - (defaultLineHeight + defaultEndY))
{
var tf:TextField = new TextField();
tf.defaultTextFormat = textFormat;
tf.wordWrap = true;
tf.multiline = false;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.y = currentTargetNextY;
var futureTextFieldW:Number;
var tfy:Number;
if(currentTargetNextY < 0)
{
tfy = Math.abs(tf.y);
futureTextFieldW = Math.sqrt((defaultCircleSize * defaultCircleSize) - (tfy * tfy));
}
else
{
tfy = Math.abs(tf.y + defaultLineHeight);
futureTextFieldW = Math.sqrt((defaultCircleSize * defaultCircleSize) - (tfy * tfy));
}
tf.width = (futureTextFieldW * 2) - defaultMargin;
tf.x = -tf.width / 2; // centers the textfield (x)
tf.name = tf.name + Math.floor(tf.width);
addChild(tf);
currentTargetNextY += defaultLineHeight;
textFields.push(tf);
}
}
private function enterText(input:String):void
{
currentTarget = textFields[currentTargetIndex] as TextField;
for(var i:Number = 0; i < input.length; i += 1)
{
if(currentTarget.textWidth + (defaultMargin * 5) > currentTarget.width )
{
if(input.substring(i, i + 1) == " ")
{
if(currentTargetIndex < textFields.length - 1)
{
currentTargetIndex += 1;
currentTarget = textFields[currentTargetIndex] as TextField;
}
else
{
if(autoSize == true)
{
trace("Restarting, not enough space");
restart(input);
}
else
{
currentTarget.appendText("...");
}
difference = input.length - placedChars;
if(defaultAnimate == true)
{
animate();
}
return;
}
}
}
// look for a line break, add a new textfield and delete the %newline% from the inputtext
if(input.substring(i, i + 9) == "%newline%")
{
trace("found newline");
currentTargetIndex += 1;
currentTarget = textFields[currentTargetIndex] as TextField;
input = input.substring(0, i) + input.substring(i + 9, input.length);
}
if(i == input.length)
{
for(var x:Number = 0; i < textFields.length; i +=1)
{
if(textFields[x].text.length == 1)
{
removeChildAt(x + 1);
}
}
}
currentTarget.appendText(input.substring(i, i + 1)); // add 1 character to the textfield
placedChars += 1;
currentTarget.multiline = false;
}
}
private function restart(input:String):void
{
while(numChildren)
{
removeChildAt(0);
}
defaultCircleSize += defaultMargin;
init(input);
}
private function animate():void
{
trace("starting animation");
circleSprite.scaleY = .8;
circleSprite.scaleX = .8;
for(var i:Number = 0; i < textFields.length + 1; i += 1)
{
var target:Object = getChildAt(i);
target.alpha = 0;
Tweener.addTween(target, {
alpha: 1,
delay: .5 / i,
time: 1.5 / i,
transition: "easeInBack" });
}
Tweener.addTween(circleSprite, {
alpha: defaultBackgroundAlpha, delay: .2, time: .5, transition: "easeOutBack" });
Tweener.addTween(circleSprite, {
scaleX: 1, delay: .2, time: .5, transition: "easeOutBack" });
Tweener.addTween(circleSprite, {
scaleY: 1, delay: .19, time: .49, transition: "easeInBack" });
}
}
}
Initial URL
Initial Description
Returns a circle filled with textfields with your text. fully customizable. See the actionscript comments for usage
Initial Title
Rounded Textfield
Initial Tags
text
Initial Language
ActionScript 3