I'm attempting to draw a text box on the screen. If I assign width and height to any value, as in the code below, I don't see anything drawn. Why is this? What is the use of width and height? Adobe's docs say it's the width/height of the sprite in pixels. Why would that occlude or prevent the drawing of a textbox or another box? I assumed the width/height would set the area that this sprite could be drawn upon, but based on this, I'm probably wrong.
Thanks in advance.
-Nick
package
{
import flash.display.Sprite;
import flash.events.Event;
import mx.core.* ;
import mx.collections.* ;
import flash.display.* ;
import flash.text.* ;
[SWF(width=1000,height=500)]
public class BareBones extends Sprite
{
public var backBuffer:BitmapData;
public var clearColor:uint = 0xFF0043AB;
public var display_txt:TextField;
public var i:uint = 0
public function BareBones()
{
addEventListener(Event.ENTER_FRAME, step);
width = 1000;
height = 500;
display_txt = new TextField();
display_txt.text = "Hello World!";
addChild(display_txt);
}
private function step(event:Event) : void
{
i++;
display_txt.text = i.toString();
}
}
}
When you set width and height in the constructor, you're actually affecting the scaleX and scaleY variables, which in turn affect root's transform.matrix.
In order to know how to set scaleX, Flash works off the content that is inside the clip. For example if you have a MovieClip with a 100x100 box in it, and you set width = 200, Flash will calculate that you mean scaleX = 2.
However you are setting width and height on a clip with nothing in it. The consequence is that scaleX and scaleY are both being set to 0.
Related
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.
Please explain why this will show a label if and only if the width and height are not set:
package
{
import flash.display.Sprite;
import flash.text.TextField;
public class Screen extends Sprite
{
public function Screen()
{
super();
// width = 640;
// height = 480;
var lbl:TextField = new TextField();
lbl.textColor = 0xFFFFFF;
lbl.text = "This is a disclaimer.";
addChild(lbl);
}
}
}
If I'm reading this right, which I think I am, it is coming down to a basic error. You haven't declared the width and height properties ANYWHERE in scope (within the class or the function). So, what's basically happening is that, because of the error, the code is aborting before it gets to defining the TextField.
You appear to be trying to set the Sprite's width and height. To do that, the lines need to be...
this.width = 640;
this.height = 480;
this is a special keyword that points AS3 directly back to the object this relates to directly. Without this, AS3 thinks you're just working with some variables, and you haven't declared any such variables in scope.
Frankly, however, I'm surprised you're not getting an error message. What IDE are you using?
public class ItemView extends MovieClip {
private var _title:TextField;
private var _extra:MovieClip;
public function ItemView( ) {
setup();
return;
}
private function setup( ):void {
trace("ItemView::setup()");
_title = new TextField();
_title.text = "Title";
addChild(_title);
_extra = new MovieClip();
_extra.width = 200;
_extra.height = 40;
_extra.graphics.beginFill(0x0000ff);
_extra.graphics.drawRect(0, 0, 20, 20);
_extra.graphics.endFill();
addChild(_extra);
return;
}
}
When I create an instance of ItemView and add it to the stage, "Title" displays but the blue square does not. However, if I make the graphics calls on this instead of _extra, I do see the blue square. This tells me that _extra itself is not displaying properly, but I can't figure out why.
What am I missing? Is there some special procedure for adding one MovieClip to another?
A little quirk.
When you set the width/height of the MovieClip object, Flash internally also adjusts the scaleX and scaleY properties. For instance, if the original width was 100, and now you've set it to 200, then the new scaleX should be 2. This means Flash will display it at 2X scale horizontally.
Now, initially the width is 0 (blank object), so when you set a new width, the new scaleX should become infinite - or 0, as Flash does it.
So even though you've drawn something onto the object, it's still at zero scale, which is why nothing gets displayed. The way to remedy this, as suggested by another poster, is to avoid setting width/height on the blank object or alternatively to reset scaleX and scaleY to 1 after your drawing is done.
...
_extra.graphics.endFill();
_extra.scaleX = _extra.scaleY = 1;
Try to delete
_extra.width = 200;
_extra.height = 40;
Here's a very simple AS3 project consisting of one class which draws a rectangle. When I run it, the rectangle is clearly larger than 100x100 pixels. After pulling out my hair for a few hours I thought I'd ask: why?
Edit: I know that it isn't correct because, though I have my screen resolution set to 1280x800, if I set the width to 500 it takes up almost all of my screen.
package
{
import flash.display.Sprite;
import flash.events.Event;
public class Draw extends Sprite
{
private var screen:Sprite;
public function Draw():void
{
this.addEventListener(Event.ADDED_TO_STAGE, stageHandler);
}
private function stageHandler(e:Event):void{
screen = new Sprite();
screen.graphics.clear();
screen.graphics.beginFill(0x333333,.9);
screen.graphics.drawRect(0,0,100, 100);
screen.graphics.endFill();
addChild(screen);
trace(stage.width + "," + stage.height);
}
}
}
:
Somehow your scalemode settigns for your flash player are set in a strange mode from FlashBuilder.
Try setting
stage.scaleMode = StageScaleMode.NO_SCALE;
in your stageHandler function. You code has no errors. The problem is in your publish preview settings somewhere.
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.