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

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.

Related

Why does setting a Sprite subclass's object's width and height in its contructor make its TextFieldRenderers not show up?

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?

AS3 draws bigger Sprite than i have set (padding/margin ?)

i created my own Button which simply extends from Sprite.
Its able to show 3 different text fading in and out using a timer.
In my draw function i first draw a rectangle with the Sprites graphics object representing the background of the button.
I added a function to set the button width. This property is used to draw the rectangle. I know that the sprites's size is updated after the rectangle drawing. But for some reason the sprite's width is always more than what i have set via my "setButtonWidth" function.
Now i have a simple sprite acting as a button having a graphics.drawRectangle part drawing a simple rect. with lets say 500px width. But when i trace the width of that button it is always about 10% more. Where are these 10% coming from?
I read about calling validateNow(). But this is only for Labels, or Checkboxes. For some reason i cannot access the library for Label. This must work somehow with TextFields. But how?
// this function is part of MyButtonClass.as file
function drawButton()
{
this.graphics.clear();
this.graphics.beginFill( currentBackColor);
this.graphics.drawRoundRect(0, 0, int(this.buttonWidth)+20, 30, 10, 10);
this.graphics.endFill();
}
// this code is in main action code frame
// the buttonWidth is set this way
stage.addEventListener( Event.RESIZE, updateBtn);
function updateBtn( event:Event)
{
// access the container in which the buttons are in like ...
for( var i = 0; i < buttonContainer.numChildren; i++) {
var btn = buttonContainer.getChildAt( i) as MyButtonClass;
// MyButtonClass is the class which extends from Sprite drawing my button
// and using buttonWidth to draw the backgrounds width.
btn.setButtonWidth( (stage.stageWidth / 2) - 20);
// i set half of stageWidth because i have two columns with a list of buttons
// after setButtonWidth is called in MyButtonClass, the draw function is called
// which does the graphics stuff above.
}
}
this.buttonWidth is set to 500. There is nothing special done on that sprite. No children to be added, only this drawing stuff. But this sets the sprite's width to 550 or something.
Define Button like this
package {
import flash.display.Sprite;
public class Button extends Sprite {
private var _buttonWith: int = 0;
private var _buttonHeight: int = 0;
public function Button() {
// constructor code
}
public function set buttonWidth(w: int): void {
_buttonWith = w;
updateButton();
}
public function get buttonWidth(): int {
return _buttonWith;
}
public function set buttonHeight(h: int): void {
_buttonHeight = h;
updateButton();
}
public function get buttonHeight(): int {
return _buttonHeight;
}
protected function updateButton() {
graphics.clear();
graphics.beginFill(0xff00ff);
graphics.drawRoundRect(0, 0, buttonWidth, buttonHeight, 10, 10);
graphics.endFill();
}
}
}
And create instance like this
var button:Button = new Button();
addChild(button);
button.buttonWidth = 100;
button.buttonHeight = 30;

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)

Textbox disappears when I change width of initial sprite

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.

AS3 Rounded Text Field

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.