Disabling Textfield scrolling

This tip is probably only for my own memory.

When you want to disable scrolling multiline textfield by mouse wheel use this:

myTextField.mouseWheelEnabled = false;

that's all folks!

One image, three states of button.

When we want to create custom button, usually three states considered: mouse over (roll over), mouse out (roll out) and press (click, release). If it is advanced, with multiple animations, and differences between those free states, theres no other way to create each of them separately. But if You need quite simple button which changes its color, look at this example.

Firstly some declarations:

private var _loader:Loader;


private var _colorTransform:ColorTransform;
private var _rollOverColorTransform:ColorTransform;
private var _clickColorTransform:ColorTransform;
        
private var _color:uint;
private var _rollOverColor:uint;
private var _clickColor:uint;

We also have to define values:

_color = 0xFFFFFF;
_rollOverColor = 0xFF6600;

We load image:

_loader = new Loader();
_loader.load(new URLRequest(url));
addChild(_loader);
buttonMode = true;

Prepare transformations for switching states:

_colorTransform = _loader.transform.colorTransform;
_colorTransform.color = _color;
_loader.transform.colorTransform = _colorTransform;
            
_rollOverColorTransform = _loader.transform.colorTransform;
_rollOverColorTransform.color = _rollOverColor;


_clickColorTransform = _loader.transform.colorTransform;
_clickColorTransform.color = _clickColor;

Then we set listeners:

addEventListener(MouseEvent.ROLL_OVER, handleRollOver);
addEventListener(MouseEvent.ROLL_OUT, handleRollOut);
addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);

And handlers for events:


private function handleRollOver(e:MouseEvent):void
{
    _loader.transform.colorTransform = _rollOverColorTransform;
}
    
private function handleRollOut(e:MouseEvent):void
{
    _loader.transform.colorTransform = _colorTransform;
}
        
private function handleMouseDown(e:MouseEvent):void
{
    _loader.transform.colorTransform = _clickColorTransform;
}

And it's done!

Check it:

Letter Spacing - TextFormat or css StyleSheet

If you;re looking for example of setting letter spacing - here it is.

The first solution is TextFormat. The property is named same in both options - letterSpacing. Let's see the code:

var txtfmodified:TextField = new TextField();

addChild(txtfmodified);

txtfmodified.y =20;

txtfmodified.text = 'hello world';

var tf:TextFormat = txtfmodified.getTextFormat();

tf.letterSpacing = 3; /* I tried lots of different values here. */

txtfmodified.setTextFormat(tf);

We can also use stylesheet to adjust part of text (in previous solution you can also adjust part of text but selecting chars is more complicated than using styles for classes of html tags). Here is the example:

var txtfmodified2:TextField = new TextField();

addChild(txtfmodified2);

txtfmodified2.y =40;

txtfmodified2.text = 'hello world';

var s:StyleSheet = new StyleSheet();

s.setStyle("p", {letterSpacing:3});

txtfmodified2.styleSheet = s;

txtfmodified2.htmlText = "<p>hello world</p>";

Remember that there are two solutions but you cannot mix them. Either way you'll receive error like this:

Error: Error #2009: This method cannot be used on a text field with a style sheet


And a proof at the end. First line is simple not modified field. Second line is modified by TextFormat properties. Third line is adjusted by stylesheet.

Color in Hex and separated to RGB channels

I don't know why conversion between hex code of color and separating it into RGB channels is not built in AS3.0 classes. It's quite easy operation. Here are methods for both directions:

function hex2RGB ( hex:Number ):Object 

{

var rgb:Object = new Object();

rgb.r = (hex & 0xff0000) >> 16;

rgb.g = (hex & 0x00ff00) >> 8;

rgb.b = hex & 0x0000ff;

trace(rgb.r, rgb.g, rgb.b);

return rgb;

}

Usage:

hex2RGB(0xE60E3F); // 230, 14, 63

It's more functional to operate on one object so the function returns it. For testing purpose there is trace that prints values of channels

function RGB2hex (r:uint, g:uint, b:uint):Number

{

return ((r << 16) + (g << 8) + b);

}

Usage:

trace(RGB2hex(230, 14, 63).toString(16));
For displaying purpose the radix has been changed to 16 (hex)

Dynamic Font Embedding

When You want to load some parts or modules later font is one of thing that is not most important. Sometimes there is some kind of configuration where you or user chooses which font should be used. In those situations font should be embedded dynamically. So here simple instruction step by step:

Firstly we need font packed separately in swf. I made sepataed project to easily maintain it but it can also be module. My code looks like this:


package Arial
{
import flash.display.Sprite;

public class Font_Arial extends Sprite
{
[Embed(source='ARIAL.ttf', fontName="Font_Arial", unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E, U+00A0-U+00FF, U+0100-U+017E, U+20AC')]
public static var Font_Arial:Class;


[Embed(source='ARIALBD.ttf', fontWeight= "bold", fontName="Font_Arial", unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E, U+00A0-U+00FF, U+0100-U+017E, U+20AC')]
public static var Font_ArialBold:Class;

[Embed(source='ARIALI.ttf', fontStyle='italic', fontName="Font_Arial", unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E, U+00A0-U+00FF, U+0100-U+017E, U+20AC')]
public static var Font_ArialItalic:Class;

[Embed(source='ARIALBI.ttf', fontStyle='italic', fontWeight= "bold",fontName="Font_Arial", unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E, U+00A0-U+00FF, U+0100-U+017E, U+20AC')]
public static var Font_ArialBoldItalic:Class;


}
}

Maybe small description of code. I have  got package name. This will be important later.
Class name is something you can sat as you wish. The only thing is that it cannot be named as Font name in system, so if you name it Arial there will be conflict.
As You can see I'm embedding similar files - each one consist different style - there is normal, bold, italic and bold&italic (last one is separated style!). For each one there are describing parameters fontWeight and fontStyle.
FontName for all font styles must be the same and must be same as class name.
Last parameter is unicodeRange. it describes which signs are embedded. You can leave it but then all signs will added which usually is unnecessary and your file will be heavy. For example all glyphs from Arial normal (without bold and italic) weights about 300kB when my file with four styles and only glyphs that are used by my application (latin symbols, numbers, special chars) weights 90kB.

Now let's load it

public function FontLoader():void {
loadFont(_serverPath+"fonts/Arial/Font_Arial.swf");
}


private function loadFont(url:String):void {
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, fontLoaded);
loader.load(new URLRequest(url));
}

I hope this part is easy and don't need comment


private function fontLoaded(event:Event):void 
{
var FontLibrary:Class = event.target.applicationDomain.getDefinition("Arial.Font_Arial") as Class;


Font.registerFont(FontLibrary['Font_Arial']);
Font.registerFont(FontLibrary['Font_ArialBold']);
Font.registerFont(FontLibrary['Font_ArialItalic']);
Font.registerFont(FontLibrary['Font_ArialBoldItalic']);


drawText();
}

We're extracting data from externall module. Remember my package name Arial? Full class name with package has to be put to getDefinition() method. Remember about package name. I lost some time to figure it out.
When you register font you can use it globally in your app.  Instead of calling similar command four time you can use foreach loop here.
Now we can use our font.

public function drawText():void
{
var tf:TextFormat = hintText.getTextFormat();

tf.font = "Font_Arial";
hintText.embedFonts = true;
hintText.setTextFormat(tf);
hintText.defaultTextFormat = tf;

}

I hope it's clear enough.

A lot of useless files in output folder

I was wondering why does flex builder (flash builder also) generates so many empty folders in my debug output folder. I found there whole structure of folders while they were empty cause they included only source files. I found that it's easy to clear it. In Poperties on ActionScript Compiler window you have to uncheck Copy non-embeddded files to output folder

VerifyError: Error #1053: Illegal override of z in mx.core.BitmapAsset.

Have you ever got error like in title? I was wondering what's the problem. I've checked everything twice. Spent on this some time. Solution? Check version of flash player and SDK that you're using. I had Flash player 10.1, I was compiling to 9.0 but was using SDK 4.2