Where in the world is Craig?

There´s been not much movement in this blog for a while because I´ve been travelling South America for a few months and am currently in Bogotá, Colombia. If by chance anyone in Bogotá is reading this, give me a shout. Would be very interested in meeting local Flash developers.

In other Flash news, I´m heading to the Adobe Latin Flash Tour next Friday with Lee Brimelow speaking, will post an update here afterwards.

Embedded fonts disappearing when loaded into another SWF

I once found that when an AS3 flash movie(let's call it parent) that contained a UIComponent, loaded another AS3 flash movie(let's call it child) that contained a UIComponent with embedded fonts, the component within the child lost its embedded fonts.

I also discovered that if the parent contained the font, then the component in the child was then able to find the embedded font, and all was well.

However, this isn't an ideal situation, because I could imagine that you sometimes want the child movie to be able to operate independent of the parent, manage its own font embedding, or maybe not waste loading time of fonts in the main parent movie that may not even be required if the child isn't navigated to.

I was prompted to revisit this dilemma in a forum post, and it got me wondering what was going on. I can't find documentation to confirm, but I have a theory that once the parent has a UI Component it then tries to take over handling of the list of global Fonts that the child tries to access. This list of global Fonts maintained by the parent, doesn't by default have access to Fonts embedded in SWFs it loads.

However to give the parent access to the font, the child needs to register its font with the global list with:

Font.registerFont(ComicSans); //ComicSans for example

This ensures that when the parent takes over handling of the global list of fonts, it has access to the font the child has embedded.

Component styling utility function

In addition to an earlier post here:

I have put the sample code into a simple utility function that will apply a TextFormat style to any component or TextField, without needing to consider the specific syntax of the component.

You can download this here.

'as' isn't the equivalent of typing.

I guess I hadn't thought too deeply about it, but I always thought that the 'as' Operator was the equivalent of typing a variable.

pseudo code example:

type(x) = as type

or to give a real world example:

var myVar:String='3';
var myInt:int=int(myVar);
//or alternatively:
var myInt2:int=myVar as int;
trace(myInt,myInt2);

But this code will trace:
3 0

I've realised that while typing a variable actually converts the variable to the requested datatype, 'as' merely informs the compiler to expect a certain variable to be of a certain datatype.

In the above example, 'myString as int' doesn't work because myString isn't an int.

However, if initially we had defined myVar like so:
var myVar:*=3;

The code would have no problem as myVar is an int.

ComboBox direction

I needed to force the Flex ComboBox to open in a specific direction. (I'm using a HTML Component FCKEditor, which has to be on top, so I need to aim the ComboBox away from it, so it doesn't animate underneath it)

It seems as though the only way to do this in Flex is to edit the mx.controls.ComboBox class itself. With some help from typeoneerror, I went ahead and did just that:

i added two booleans to the class to use to force the comboBox's direction:

public var forceDirectionDown:Boolean = false;
public var forceDirectionUp:Boolean = false;

now in the displayDropdown method, inside the 'opening the dropdown' section, i just changed the if statement:

if (forceDirectionUp || (!forceDirectionDown &&
point.y + _dropdown.height > screen.height &&
point.y > _dropdown.height))

There is still a problem, however - when I set the Combo to 'forceDirectionDown' and there isn't enough room at the bottom of the screen, when the dropdown closes, it assumes to animate the dropdown down, away from the combo. To resolve this, I added to the 'closing the dropdown' section, where it sets endY. I changed the condition line to:

endY = (forceDirectionUp || (!forceDirectionDown &&
(point.y + _dropdown.height > screen.height || tweenUp))

"Color" component parameter

I never really understood why when you define a component parameter, you can define its type. Wouldn't the variable type that the parameter is related to, always define the type of the parameter? Aren't parameter and variable types synonymous?

Well, it turns out that they are not necessarily.

I've never paid much attention to the fact that you can specify the 'type' of a parameter in the Inspectable tag, as it was obvious to me that this would be the same as the variable type.

But I've discovered at least one case where this is not so.

Attempting to define an Inspectable variable as type 'fl.motion.Color' seems to work okay - it invokes the Color Picker in the Component Inspector when you click on the component on the stage. However when in the Component Inspector when you change the color from the default, and run the file, you'll get:

1067: Implicit coercion of a value of type int to an unrelated type fl.motion:Color." error.

Obviously Flash expects the parameter of type 'color' to be related to a variable of type 'int'. Seems a little strange but there is a way to get around this apparent conflict between parameter and variable types of 'color':

Specify the parameter to be of type 'Color' and the variable to be of type 'int'.

package
{
import flash.display.MovieClip;
public class test extends MovieClip
{
private var _color:int;
[Inspectable (type = "Color")]
public function get color():int {
return _color;
}
public function set color(value:int):void
{
_color = value;
}
}
}

Flex - skinning the DateField icon

When adjusting the Date icon skin in a DateField component, its not sufficient to just use the css that Flex auto-generates when importing the Skin Artwork. In addition to 'skin', you must also specify that upSkin, overSkin, downSkin, disabledSkin are all set to null. otherwise they will supersede 'skin'. you do this for example, like so:

DateField {
skin: Embed(skinClass="DateField_skin");
upSkin: ClassReference(null);
overSkin: ClassReference(null);
downSkin: ClassReference(null);
disabledSkin: ClassReference(null);
}