9-scale resizing

If You want to create component properly scalable remember about resizing shapes. Problem occurs during resizing for example rectangles. Border of 2 pixels thick becomes really big. Because object is resized as-is proportionally with content and graphic.
Here is the proof:

To avoid this problem You should use 9-scale. This property (officialy named scale9Grid) is avaiable in Movieclips, Sprites and so on. Here is example of code how to use it:

var background3 = new Sprite();
background3.graphics.lineStyle(2, 0xd61e31);
background3.graphics.beginFill(0xFFFFFF, 1);
background3.graphics.drawRect(0, 0, 40, 40);
background3.graphics.endFill();


//here comes 9-scaling
var grid:Rectangle = new Rectangle(5, 5, 30, 30);
background3.scale9Grid = grid;

Rectangle that is created above creates 9 regions in our object (which also is rectangle shaped). Picture below shows regions. Points A(5,5) and B(30,30) shows coordinates of lines which are regions borders.

Those 9 regions can be grouped to 4 types. Each type is scaled in different way:

• corners - four corners are not scaled. They are constant
• long vertical sides - middle-left region and middle-right regions are scaled only in Y axis
• long horizontal sides - center-top and center-bottom regions are scaled only in X axis
• middle-center - this region is scaled in both directions

Here is description from API

Embedding fonts

Embedding fonts is quite easy. Here is example:

Firstly, we have to embed font. In this case my path is relative. mimeType is not manatory, but it's good practise to fill it.

[Embed(source='assets/MyFont.ttf', fontName="Font_MyFont", mimeType="application/x-font-truetype")]
private static var stringForHoldingFont:String;

Variable from above is not used anywhere. It's just for holding glyphs.

Here comes our field, where we use embedded font
private var _title:TextField;

_title = new TextField();

var style:TextFormat =  _title.getTextFormat();

Type of font is set in TextFormat. We can create new or copy existing one. And here comes most important part. We set name from embed. And in textfield object (not TextFormat!), we setembedFonts property to true. Otherwise there will be no result.


style.font = "Font_MyFont";
_title.embedFonts = true;

When we set format for field this should work.


_title.setTextFormat(style);
_title.defaultTextFormat = style;

If You are using Flex builder / Flash builder as IDE remember to set font manager for project. Otherwise it won't work. To do this choose project properties -> 'ActionScript Compiler' and as 'Additional compiler arguments' put
 -managers flash.fonts.AFEFontManager 
like on this screen:

Remember to check it on device where this font is not installed. For example if You forget to set property embedFonts this will work on computer where you have this font (like probably your computer).

Setters and Getters

Similar to other programming languages like C# there is possibility to create setters and getters in ActionScript. Here is an example:

//method accesed privately
private var _title:String = "Title";


//getter
public function get title():String
{
    return m_title;
}


//setter
public function set title(aTitle:String):void
{

    _title = aTitle;

    /*
     * here can be other code that you need to be executed 
     * when somebody sets your variable
     * example:
     * this.dispatchEvent(new Event('ModelTitleChangeEvent'));
     */
}

Use it or not? It depends on You and Your project. If project is advanced it is useful solution. And in my opinion code is easy to understand.

Problem with xampp - why apache server does not start

While using xampp you can be faced with problem when apache server cannot start. Even if console window show info, the status and button does not change.

The problem is not in xampp itself but in another program on your computer that uses port 80. In my case it was skype. To turn it off in skype open Tools -> Options -> Tab 'Advanced' -> 'Connection' and uncheck 'Use port 80 and 443...'

Now just save and restart skype. Let's check results.

It works.

Text alignment

When positioning text there is easy way to set horizontal align like in this example:

_background = new Sprite();

_background.graphics.beginFill(112233,0.7);
_background.graphics.drawRect(0,0,200,20);

_itemLabel.width = _background.width;

rollOutStyle = _itemLabel.getTextFormat();
rollOutStyle.align = TextFormatAlign.CENTER;


another option is to switch last two lines by:


_itemLabel.autoSize = TextFieldAutoSize.CENTER;


But there is no such solution for vertical. We have to set it manually:


_itemLabel.y = _background.height * 0.5 - _itemLabel.textHeight * 0.5;

Numerical attributes in XML & no value in code

I know it's a stupid case, but sometimes I forgot about simple things.

Problem:
we have numerical value in XML like:

<component itemHeight="20" itemsVSpace="10" .../>

in code we want to use those values

itemLabel.y = index*( _contentXML.@itemHeight + _contentXML.@itemsVSpace);

Result? We receive zero. Because attribute value is used as String and + works as concatenation. Then multiple converts value to zero. We have to cast values at the begining to expected type:

itemLabel.y = index*( int(_contentXML.@itemHeight) + int(_contentXML.@itemsVSpace) );

buttonMode & TextFields

We have some kind of like Sprite/MovieClip. We're creating our own button or item that should be click-able. So we set buttonMode, add event listener, and everything is ok till we add some text. And here comes problem. Hand cursor disappears when we roll over on the text.

best solution is to use mouseChildren property.

this.buttonMode = true;

this.mouseChildren = false;

this.addEventListener(MouseEvent.MOUSE_UP, _handleMouseRelease);

All objects added as child won't be mouse enabled

check API!