CS4 component icon library bug.

I've been wondering why items in my library disappear occasionally - including the library buttons and column headers!

I've narrowed the problem down to a CS4 bug. Steps to reproduce bug:
1.Create a MovieClip
2. Select 'Component Definition'
3. Add a parameter so that the component icon will become visible.
4. Select 'Seek Bar Control Icon' or 'Buffering Control Icon' as custom component icon.
5. Select 'OK'
6. Watch the craziness ensue!

jerky raster animations

It has always bothered me that animations of raster images are always jerky when they get to the point of animating less than a pixel per frame. Flash assumes that rasters should only live on the exact pixel.

This can be resolved with bitmaps that are created with ActionScript with the Bitmap.pixelSnapping value but for pure animation is a little more complicated.

I've just discovered that if you adjust the scale, rotation or skew of the image, Flash will turn pixelSnapping off. So giving a slight degree(more than 0.1%) of one of these factors is the simplest way to demand no pixelSnapping, without requiring one line of ActionScript.

Stage dimension limitation - 214x137

I was trying to work out why the Flash Player Settings window was not appearing when i attached a webcam to a Video object, when i discovered that my stage was too small. Although i can't find documentation for this feature anywhere, I have found through experimentation that for the Settings Window to appear, the stage must be a minimum of 214x137.

stage.mouseLeave and wmode=transparent

noted a strange incompatibility today - the stage.mouseLeave event doesn't get triggered when you hold a mouse button down, and drag off stage on a flash object which has wmode set to transparent. in fact doing so takes the focus off the flash object so that regular stage events no longer get triggered until it receives focus again(say by the user clicking on the object).

sounds obscure, but if someone's dragging a slider and somehow drags off the object, releases the mouse button and then returns to the object, the slider continues to move around with the mouse even though the mouseButton isn't down.

dynamic text fields part II

just got back from a six week holiday, so was wondering if i'd lost my mind while i was away...

steps to recreate weird problem:

1. set up two dynamic text boxes on the stage - one bold and one not bold - both with letter spacing of 1.(hint at solution) give them instance names - text1 and text2
2. set their text attributes in actionscript eg.
text1.text="hello";
text2.text="there";
3. run out - notice that neither text box is bold.

for some bizarre reason, giving the text box a letter spacing value!=0 means that it loses its formatting when you set its text value.

to resolve either set letter spacing to 0, or follow my earlier post in setting text with a letter spacing value.

Frusting Flex problems solved #4 - preventing a DataGrid column from resizing

What a laborious problem this was!

I had set up a DataGrid that resized with the browser, and the user could also resize the column widths. However one column contained a button, and needed to not be resizable by the user or by browser resizing. But in practice, the button was resizing smaller and smaller every time the browser was resized. After many forum postings a solution was suggested(thanks VarioPegged) that is not the most elegant but works:

To recap, three steps must be followed:

1. add a dummy datagridcolumn to the far right of the datagrid that is not resizable and has a width of 0.
2. give the column you don't want to resize a minWidth value.
3. set up an updateComplete event handler on the datagrid, which resizes the button column and then calls validateNow() on the datagrid.

you can follow the newsgroup post on this issue here.

dynamic text field part I - letter spacing

This blog has moved.
Just discovered that flash resets the author-time letter spacing of a dynamic textfield when the textfield's text is set in ActionScript.

To maintain the authortime letter spacing settings of the textfield, you need to record the textfield's textformat, set the text, and then reset the textfield's textformat to what it was. For example, if your textfield's instance name is test:

var fmt:TextFormat = test.getTextFormat();
test.text="New text";
test.setTextFormat(fmt);
something to check is that if the textfield does not contain any text, the author-time TextFormat letter spacing property is not recorded. So if you don't want your textfield to contain any text, make sure the textfield contains at least one space to ensure it maintains its author-time TextFormat letter spacing property.

Frustrating Flex problems solved #3 - DataGrid scrolling error

I'm currently working on a project that requires me to be using Flex 2 rather than Flex 3(I'm using an older version of Zinc, and avoiding upgrading if possible as we'll probably be moving to AIR after this project). But - issues in Flex 2 are no longer supported...

The problem i encountered was when changing the DataGridColumns and dataProvider of a DataGrid, it gave a #1010 error 'A term is undefined and has no properties.' when scrolling vertically.

After trawling the web for answers, I found a diamond here from Marc Sulinski, who suggested the hack of extending the DataGrid class and overriding updateDisplayList with the following:

override protected function updateDisplayList(w:Number, h:Number):void {
var b:Boolean = false;

if( rendererChanged ) b = true;

super.updateDisplayList(w, h);
if( b ) {
while( rowInfo.length > listItems.length ) rowInfo.pop();
}
}

ObjectCollection

i'd set up a repeater to display data returned from a ColdFusion call - which would either be a Y or N. I wanted to adjust how this appears to YES or NO, and thought a straightforward way of doing this would be set up an associative array:

[Bindable]
public static var yesNoTranslator:Object={N: "No",Y: "Yes"};

and my text component would look something like:

<text="{Constants.yesNoTranslator[repeater.currentItem.rsvpStatus]}">

Flex Builder produced warnings on this, however:
"Data binding will not be able to detect changes when using square bracket operator. For Array, please use ArrayCollection.getItemAt() instead."

Though in this case, i could ignore the warning and the app would work as desired, i could see that sometimes you may want your associative array to change and the binding wouldn't detect changes. Anyway, warnings are annoying to have hanging around, and for some strange reason they seem to propogate themselves in Flex Builder...

As the warning describes, if yesNoTranslator was an array, i could use ArrayCollection.getItemAt() instead. yesNoTranslator was an object and there is no equivalent with objects(for some reason), so i thought the simplest thing to do would be to create one, which i've called ObjectCollection:

package
{
import mx.utils.ObjectProxy;

public class ObjectCollection extends ObjectProxy
{
public function ObjectCollection(item:Object=null, uid:String=null, proxyDepth:int=-1)
{
super(item, uid, proxyDepth);
}
[Bindable(event="propertyChange")]
public function getItemAt(index:String):Object {
return(this[index]);
}
}
}

and modify my above code to:

[Bindable]
public var yesNoTranslator:ObjectCollection=new ObjectCollection({Y:"Yes",N:"No"});

< text="{yesNoTranslator.getItemAt(repeater.currentItem.rsvpStatus)}">

An Internal Build Error has occurred...

public var interactionType:String=INTERACT_DRAG=INTERACT_FORM;

This line of code just wasted 4 hours of my life.

Flex didn't notice that there was a problem, and it was only in building that a problem arose with the line 'Classes must not be nested.' and then the more obscure 'An internal build error has occured' Location: UNKNOWN.

So it was down to me looking through my thousands of lines of code to find the problem. I ended up restoring a backup of my code and comparing the two until i narrowed it down to the above line...

deployment issues

just finishing up an alpha version of a Flex project and discovering a couple of deployment issues that are worth getting down for future -

i was getting a persistent 'Where is the debugger or host application running?' popup window for my swf. i discovered that this occurs for specific versions of the flash player and the most recent flash player ignores the lack of debugger. however i wasn't too keen in forcing my users to install the very latest flash player if it was otherwise unnecessary, so found that i could also add the compiler argument: (in the Flex Project Properties, Flex Compiler tab)

-debug=false

Next i was getting a #2032 error. I discovered that this meant that the framework.swf file wasn't being found. This was happening because the final html file that displayed the swf was not where flex was putting it, so it wasn't finding the framework.swf(which was set to RSL, rather than Merged with Code, to save the user download time). To resolve this, I adjusted the path to the framework url. (in the Flex Project Properties, Flex Build Path, Library Path, Flex 3..., framework.swc, RSL URL)

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);