Styling Text In Instances Of Components Using TextFormat

This blog has moved.

this is an extension of a previous entry here.

Text in components or TextFields can be formatted in several ways - applying styles manually in the case of TextFields, applying a style using a TextFormat object, StyleSheets for styling html formatted text, or the StyleManager for setting global styles or styles for all instances of a component.


This article focuses on styling instances of components or TextFields with an embedded font in a TextFormat object.


The TextFormat Object would look something like this:

//let's use red Comic Sans to make it obvious when it's working.
//first embed Comic Sans in the library
//select Linkage Properties on the font, select 'Export for ActionScript' and give it the Class name of 'ComicSans'.
var format:TextFormat=new TextFormat();
format.font=new ComicSans().fontName;
format.color=0xFF0000;

Use the following code to apply this TextFormat style to the following display object types(all of which i've assumed have the instance name 'whichObject'.)


TextField

whichObject.embedFonts=true;
whichObject.defaultTextFormat=format;

Button, TextArea, TextInput, Label, NumericStepper, RadioButton, CheckBox

whichObject.setStyle("embedFonts", true);
whichObject.setStyle("textFormat", format);

ComboBox

whichObject.textField.setStyle("embedFonts", true); //textField is the item displayed in the combo box
whichObject.textField.setStyle("textFormat", format);
whichObject.dropdown.setRendererStyle("embedFonts", true); //dropdown is the list of options
whichObject.dropdown.setRendererStyle("textFormat", format);

List

whichObject.setRendererStyle("embedFonts", true);
whichObject.setRendererStyle("textFormat", format);

DataGrid

whichObject.setRendererStyle("embedFonts", true);
whichObject.setRendererStyle("textFormat", format);
whichObject.setStyle("headerTextFormat", format); //styles the datagrid's header
STOP PRESS:

Update to this post here:

Embedding external assets

Strange, strange.

If you've embedded a Flash object inside a html page, and the Flash object loads external assets(images, SWFs, audio), the flash object locates the assets relative to the location of the html file and NOT relative to the swf file.

However, if you're playing an FLV file using progressive download, the FLV is located relative to the SWF file and NOT relative to the html file.

I've actually been aware of this for a few years but thought that they'd resolve its inconsistency with one of the latest iterations of Flash. but no.

positioning the cursor in a text field

positioning the cursor in flash can be a little tricky and sometimes temperamental, but we should be able to control where the cursor is with setSelection, with both beginIndex and endIndex set to the same position, for example the end of the input box:
testBox.setSelection(testBox.text.length,testBox.text.length);

We may also need to first set the focus to the text box, if the focus may be elsewhere. If our 'text input' is a TextField of type 'input text', then set focus through the stage object:

stage.focus=testBox;
testBox.setSelection(testBox.text.length,testBox.text.length);

if we're using a TextInput component, use its built in setFocus method:

testBox.setFocus();
testBox.setSelection(testBox.text.length,testBox.text.length);

printAsBitmap - object must be on stage

This blog has moved.

just for future reference, I've discovered today something that appears to be undocumented - when setting a PrintJob to printAsBitmap=true OR you are printing from a mac,(using the PrintJobOptions class) it is suddenly important that the object is on the stage, or it won't print.

so if you didn't want your object on the stage, the simple solution is to surround your send with an addChild and removeChild like so:

this.addChild(page);page.visible=false; //for macs only - otherwise they display the page while the print dialogue is open.
var myOption:PrintJobOptions = new PrintJobOptions(true);
my_pj.addPage(page,null,myOption);
my_pj.send();
this.removeChild(page);

preloader absorbing application FlashVars

This blog has moved.


As has happened frequently, after completing a Flash application, I find that the size of the application demands a preloader swf to load the application swf (complete with progress bar). the problem i have found with this preloader swf is that it now absorbs any FlashVars that the application swf was expecting to be passed to it from the html.

how to get the preloader to pass the FlashVars to the application? well, the preloader could extract the FlashVars and explicitly send them to the application in a function call once the application is loaded. but this would mean that the application would work differently than it would have prior to the loader. it could also mean that the preloader may have to be modified for each project, whereas a generic preloader would be much simpler.

here is a solution that means the application works exactly the same, and the preloader can remain generic - within the preloader extract all the FlashVars, and pass them along to the application as URLVariables in the URLRequest.data property.

var ldr:Loader = new Loader();
var url:String = "application.swf";
var urlReq:URLRequest = new URLRequest(url);
urlReq.data=getObjectURLVariables(this.loaderInfo.parameters)
ldr.load(urlReq);
this.addChild(ldr);

public function getObjectURLVariables(whichObject:Object):URLVariables {
var variables:URLVariables=new URLVariables();
for (var i in whichObject) {
variables[i]=whichObject[i];
}
return(variables);
}
You could quite easily set this up as a custom Loader class that automatically passes the FlashVars along to the loaded application.

adding a symbol dynamically from the library

how to add a symbol from the library?
in AS2,
this.attachMovie("square", "square", 1);

and in AS3,
var square1:square=new square();

but how do you add a symbol dynamically from the library? say if you have a shape stored in a variable:

var shape:String = "square";

and you want to add the symbol in the library with this name.
in AS2, simple! you could have written:
this.attachMovie(shape, shape, 1);

however the AS3 syntax doesn't obviously allow for dynamic references. so how is it done? (credit to kglad for assisting in this discovery)

getDefinitionByName is what you need to extract the class from the library like so:

import flash.utils.getDefinitionByName;

var classRef:Class = getDefinitionByName(shape) as Class;
var square1:* = new classRef();

Frustrating Flex problems solved #2 - addChild

This blog has moved.

this.addChild(new Sprite())

looks simple enough doesn't it? especially if you've been working solely in Flash AS3. But if you try this line within a Flex component, you'll receive the error: 'Type Coercion failed: cannot convert flash.display::Sprite@86cc0e1 to mx.core.IUIComponent.'
This is because Flex components implement a different addChild method. although addChild is described as accepting a DisplayObject as a parameter, this DisplayObject must implement the IUIComponent interface.
How to add a sprite then? You can either:
specify a UIComponent. eg:
this.addChild(new UIComponent())
This sort of works in this case as UIComponent implements the Sprite. However the additional implementation of UIComponent may at best be unnecessary and at worst cause problems with your code. Also, this alternative won't work in some cases, say if for some reason you wanted to add a MovieClip.

so an alternative is that you can add your child to the component's rawChildren, a property which contains a list of ALL of the container's children - not just the children that the container wants you to know about! (this.numChildren<=this.rawChildren.numChildren) see flex help for more info on this. this alternative looks like: this.rawChildren.addChild(new Sprite())