AS3 Rounded Text Field - actionscript-3

Does anyone know how to create a dynamic textfield with a visible border and rounded corners in AS3?
I think I might have to create a rounded movieclip, resize and place it behind the text.
I tried this, but I don't see any changes.
var styleRound:StyleSheet = new StyleSheet();
styleRound.parseCSS("h4{cornerRadius:10;borderStyle: solid; borderThickness: 1;}");
tf.htmlText = "<h4>" + hotspotData.caption + "</h4>";
tf.styleSheet = styleRound;

Here is a list of the available CSS styles for TextFields in ActionScript 3. Sorry, there is no corner radius.
You can turn on a border for a textfield on the TextField objects border property. But there is not a property available to round the corner.
I suggest you create a new component and add the border yourself as a Sprite underneath the TextField. Something like:
package
{
import flash.display.Graphics;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
public class TextBorder extends Sprite
{
private static const CORNER_RADIUS:int = 5;
// display objects
private var background:Sprite;
private var field:TextField;
// properties
private var _text:String;
public function TextBorder()
{
background = new Sprite;
field = new TextField;
field.autoSize = TextFieldAutoSize.LEFT;
addChild(background);
addChild(field);
// TESTING:
text = "Hello World";
}
public function set text(newText:String):void
{
_text = newText;
display();
}
public function get text():String
{
return _text;
}
private function display():void
{
field.text = _text;
var g:Graphics = background.graphics;
g.clear();
g.lineStyle(0, 0x0);
g.beginFill(0xFFFFFF);
g.drawRoundRect(0, 0, field.width, field.height, CORNER_RADIUS);
}
}
}

I ended up creating a rounded rectangle in flash and exporting it as its own class - hotspotBG.
var hotspotBackground:hotspotBG = new hotspotBG();
hotspotBackground.width = textField.width + 10;
caption.addChild(hotspotBackground);

You cannot change the text field it self, as of 2014 flash does not allow that.
What you can do is delete the background and the borders,
which will leave the text field completely transparent,
then add an image (rectangle tool is the easiest way to do this) at back of the text field,
so that the text field is on top of the image (z-axis-wise)
It may not be the way you thought of but hell it works!
//you are deleting the background and the borders
//and replacing them with an image
textbox.background=false;
textbox.border=false;

Can you just use the CSS styles? Something like:
TextInput {
borderStyle: solid;
borderThickness: 1;
cornerRadius: 2;
}
I haven't tested this, but that should give you a rounded corner.

Related

How to change SWC component's width shown on the Flash IDE?

I linked an item in library with an .as file.In this .as file,I write the class like this:
public class TextArea extends MovieClip
{
.......
public function setWidth(w:Number):void
{
this.width = w;
}
}
Then I change the item to complied clip in library(It is same as complied as ***SWC* )**.I add it into stage and change it's property to fire the setWidth function.But the width just doesn't change.What should I do to change the Movie Clip's width?
P.S. The child ,a TextField , in this item can be changed width.
In the pic, I put a SWC component on stage and the SWC only have one TextField as child.
The Text field is given black border and the SWC is being selected,the blue border is its bounds.
And I print the this.width in text and the width is auto changed to adjust the text field.
But the blue border is what I want to change.It shows on Flash panel and stand for the transform bounds like this:
So, I don't have any trouble to change children's data. And now I found the class is like this:
There is a LivePreviewParent as this.parent. It provide the live preview of my swc on stage.And the size I change is absolutely changed,but I think the blue border is stand for the LivePreviewParent's border.
However, change the size of LivePreviewParent is equal to change the component's size not the blue one.How strange the class is ! So I want to know the blue one is actually the LivePreviewParent's border? If yes , how to change it?
I don't know, how is exactly your component builded, you should have inner logic to resize subcomponents/childs.
Universal solution, blind resize of every child:
public function setWidth(w:Number):void
{
var i: uint, len: uint = this.numChildren, child: DisplayObject;
for(i; i < len; ++i){
this.getChildAt(i).width = w;
}
}
If only textArea is one child:
public function setWidth(w:Number):void
{
textArea.width = w;
}
Simple TextField container, with background and custom padding:
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
public class TextContainer extends Sprite {
private var _textField:TextField;
private var _padding:int;
public function TextContainer(text:String, format:TextFormat, padding:int = 4) {
_padding = padding;
_textField = new TextField();
_textField.defaultTextFormat = format;
_textField.autoSize = TextFieldAutoSize.LEFT;
_textField.multiline = true;
_textField.wordWrap = true;
_textField.text = text;
addChild(_textField);
_textField.x = _textField.y = padding;
//Default width
setWidth(100);
}
public function setWidth(value:Number):void {
_textField.width = value;
graphics.clear();
graphics.beginFill(0xF0F0F0);
graphics.drawRect(0, 0, _textField.width + 2*_padding, _textField.height + 2*_padding);
}
}
Usage:
var textContainer: TextContainer = new TextContainer("Some text here for test, more text, for multi-line test and resize", new TextFormat("Arial"));
desiredContainer.addChild(textContainer);
textContainer.setWidth(200);
You have to change the width of 'this' relative to something. The most likely thing is its container. So let's assume that your TextArea class is instantiated in your Main class as 'textarea' In Main you'd write this: textarea.width = 500
Finally I found that there is an impassable wall between Flash IDE and the AS code in SWC. There is no way to access IDE's data from SWC.

How to create irregular shape mask

I'm trying to make a mask with bitmaps, i.e. has such a shape below.
Here my image mask:
All, in above image, is not white is transparent. So applying a mask she cuts a rectangle instead of this form. Is there any way to implement it? Primitives will hardly make such a mask.
Here my source:
package
{
import flash.display.Bitmap;
import flash.display.Sprite;
[SWF(width="960", height="640", frameRate="60", backgroundColor="0x4a4137")]
public class Main extends Sprite
{
[Embed(source="jack.jpg")]
private var PhotoImg:Class;
[Embed(source="faceArea.png")]
private var FaceAreaImg:Class;
private var _imageBox:Sprite;
public function Main()
{
createMask();
}
private function createMask():void
{
var img:Bitmap = new PhotoImg();
_imageBox = new Sprite();
_imageBox.x = 0;
_imageBox.y = 0;
_imageBox.addChild(img);
addChild(_imageBox);
var faceArea:Bitmap = new FaceAreaImg();
faceArea.x = 50;
faceArea.y = 50;
addChild(faceArea);
_imageBox.mask = faceArea;
}
}
}
Hi skyboyIf you want to make masking with transparent bitmaps, you have to make the cacheAsBitmap property of the two DisplayObjects to true.
try:
_imageBox.cacheAsBitmap = true;
faceArea.cacheAsBitmap = true;

AS3: Add layer overlay on top of everything?

I want to add some extra texturing for my current game, let's say an overlayed grunge texture on top of everything.
My entire project (except background image) is set on a Main Class.
Is it Possible? How?
Screenshot:
Sure, just disable any mouse input on the overlay and it will be like its not even there.
public function LuckyHitBeta()
{
...
var overlay:Sprite = new Sprite();
overlay.addChild( /* your texture goes here as a Bitmap */ );
overlay.mouseEnabled = false;
overlay.mouseChildren = false;
addChild(overlay);
}
Cant entirely remember the correct syntax but couldn't you just do:
import flash.display.Stage;
public class GlobalStage extends MovieClip
public static var theStage:Stage;
public static var theRoot:MovieClip;
public function GlobalStage() {
theStage = this.stage;
theRoot = this.root;
}
var grunge:MovieClip = new Grunge();
var topDepth:uint = theStage.numChildren()-1;
theStage.addChildAt(grunge, topDepth)

click on color button and write in textarea with that color font

I want to do as follows:
* click a "red" button
* write in textarea with red color font
* click "blue" button
* write in textarea with blue color font
Isn't this possible in flash 10 using AS3 ??????
I tried using setTextFormat but the problem is i have to have text before inserting format on that.
This is what i want:
* start writing in textarea with WHITE COLOR (eg: "abc")
* click BLUE COLOR BUTTON
* start writing in textarea with BLUE COLOR (eg: "abcdef" - abc in white and def in blue)
* click RED COLOR BUTTON
* start writing in textarea with RED COLOR (eg: "abcdefxyz" - abc in white and def in blue and xyz in red)
Please somebody tell me how to do this?
the documentation states that if you want to change the format of the text prior to writing anything in the text field to assign a new defaultTextFormat. otherwise, setting a new format will change the current selection.
the solution below works by maintaining the focus on the text field, so when the buttons are clicked the text field still has focus. if there is a current selection, the selection will change either blue or red, depending on which button is pressed. if there is no selection, a new defaultTextFormat is applied, without changing previous defaultTextFormats, since the text field still had focus when the new format was applied.
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.text.TextFormat;
import flash.events.MouseEvent;
import flash.events.FocusEvent;
public class ChangeTextColor extends Sprite
{
private var field:TextField;
private var redButton:Sprite;
private var blueButton:Sprite;
public function ChangeTextColor()
{
init();
}
//Initialize
private function init():void
{
//Create Text Field
field = new TextField();
field.type = TextFieldType.INPUT;
field.border = true;
field.x = field.y = 10;
addChild(field);
//Retain Focus On TextField
field.addEventListener(FocusEvent.FOCUS_OUT, fieldFocusOutHandler);
//Create Button
redButton = createButton(10, 120, 200, 20, 0xFF0000);
blueButton = createButton(10, 150, 200, 20, 0x0000FF);
}
//Create Button Method
private function createButton(x:uint, y:uint, width:uint, height:uint, color:uint):Sprite
{
var resultSprite:Sprite = new Sprite();
resultSprite.graphics.beginFill(color);
resultSprite.graphics.drawRect(0, 0, width, height);
resultSprite.graphics.endFill();
resultSprite.addEventListener(MouseEvent.CLICK, mouseClickEventHandler);
resultSprite.x = x;
resultSprite.y = y;
addChild(resultSprite);
return resultSprite;
}
//Apply Text Format
private function changeTextFormatColor(color:uint):void
{
var format:TextFormat = new TextFormat();
format.color = color;
//Change Format Of Selection Or Set Default Format
if (field.selectionBeginIndex != field.selectionEndIndex)
field.setTextFormat(format, field.selectionBeginIndex, field.selectionEndIndex);
else
field.defaultTextFormat = format;
}
//Maintain Focus Of TextField When Color buttons Are Clicked
private function fieldFocusOutHandler(evt:FocusEvent):void
{
stage.focus = evt.currentTarget as TextField;
}
//Button Click Event Handler
private function mouseClickEventHandler(evt:MouseEvent):void
{
switch (evt.currentTarget)
{
case redButton: trace("red clicked");
changeTextFormatColor(0xFF0000);
break;
case blueButton: trace("blue clicked");
changeTextFormatColor(0x0000FF);
}
}
}
}
alternatively, if you have other buttons in your program that do not relate to the text field and should make the text field lose focus when clicked, just remove the fieldFocusOutHandler function and place stage.focus = field; inside the buttonClickHandler method. you could also keep and tailor the fieldFocusOutHandler function if this is an issue.
Here is the solution for anyone who is looking around (thanks to those who solved my problem)
Use following in changehandler of textfield:
textfield.setTextFormat(default_format, textfield.caretIndex-1, textfield.caretIndex);
Use following in clickhandler of button:
default_format.color = getColor("red");
stage.focus = textfield;
Regards

How to Draw a circle displaying a number in flex

I am flex newbie , so please forgive me if i am not using the right words to ask the following question. I want to know if there is a way to draw a circle which shows a number , like for ex. Graduated Circles representing its radius to show it's relevance. Is there a component which already do so , if not what is the best way to do this.
thanks.
Here's a quick example on how you could do it (to be continued to achieve your particular needs)
package
{
import flash.text.TextFormatAlign;
import flash.text.TextField;
import flash.display.Sprite;
import flash.text.TextFormat;
public class LabeledCircle extends Sprite
{
private var textField:TextField;
public function LabeledCircle(radius:Number, label:String = "")
{
// Prepares the textField
var textFormat:TextFormat = new TextFormat();
textFormat.align = TextFormatAlign.CENTER;
textField = new TextField();
textField.defaultTextFormat = textFormat;
addChild(textField);
// Sets the default parameters
this.radius = radius;
this.label = label;
}
public function set radius(radius:Number):void
{
// redraws the circle
graphics.clear();
graphics.beginFill(0x000000, .5);
graphics.drawCircle(0, 0, radius);
// recenters the textfield depending on the radius
textField.width = radius * 2;
textField.x = -radius;
}
public function set label(label:String):void
{
textField.text = label;
}
}
}
Flare has a component which is similar to the concentric circle example in the link you have posted. See Layouts > CirclePack in the demo.
I am not yet sure what you mean by 'associating a number'. Try this: Rendering text on a path.
Actionscript Drawing API - example here
Degrafa - Graphics framework which makes the Drawing API easier to use and includes a circle class