Blog has moved...

This blog has moved. It has migrated to: http://craiggrummitt.wordpress.com/

video white

A recent task I had to achieve was to play a video for several seconds and extract a frame as a JPG several seconds in. I did not know the dimensions of the video ahead of time, so hoped to extract that information out of the video metadata, and create the video object at this point. Sounds simple enough!

However, this only seemed to work about 75% of the time. Occasionally I was seeing just white in certain videos, like they weren't attached correctly to the Video object(despite receiving the metadata correctly). My theory was that perhaps the metadata was received after the FLV began playing, and that perhaps there can be problems creating a Video object and attaching a NetStream to it, after it has begun playing.

So I tried creating the Video object and then resizing after receiving the FLV metadata, but the resize seemed to have no effect when extracting the Bitmap Data. But finally found a solution - the Bitmap Data extracted correctly, if I placed the Video object inside a MovieClip and extracted the Bitmap Data of the MovieClip instead of the resized Video object.

SharedObject not updating between tabs

Just created an app which required persistent data, so used a local SharedObject. However discovered that if one person had the app open in two different places(eg. 2 tabs) the persistent data in one tab wasn't updating in the other tab. To remedy this I tried reloading the SharedObject(SharedObject.getLocal) every time I extracted a variable, and yet this SharedObject variable still wasn't updating.

Discovered that, strangely, the only way to update the SharedObject, is to first set it to null. Set it to null and then reload it forces an update.

Frustrating Flex problems solved #7 - Removing DragDrop animation

In Flex was building a simple drag and drop from a library list to another simple list. I also wanted to build the functionality of dragging the item out of the simple list to automatically remove the item from the list, and return the item to the library.

I managed to handle this with one problem remaining. As the dragged item thought it wasn't going to be accepted, it automatically played an animation of it returning to the simple list before my code displayed it back in the library. The animation was completely misleading but I couldn't find a way to turn it off!

My solution in the end was to create a custom ListItemDragProxy component. I included this in the list with:
dragIndicatorClass="display.CustomListItemDragProxy"

and in the custom class, I merely set visible=0 onMouseUp. Simple solution that works perfectly.

Frustrating Flex problems solved #6 - Keydown

Spent some time screaming "Why can't my component receive keyboard events? "

Crazy, I'm not sure why i never knew this, but for a component to receive keyboard events, it needs to implement IFocusMangerComponent. And then, however you're trying to receive keyboard events, by overriding keyDownHandler, or listening for a keydown event, it should now receive these events...

easy when you know how!

implements="mx.managers.IFocusManagerComponent"

Frustrating Flex problems solved #5 - ButtonBarButton bugs

So i had a series of custom Buttons all set up perfectly in a ButtonBar, when I realised that the design dictated that one of the buttons was a different size than was happening with the automatic sizing system...

So after discovering that the ButtonBar does not allow facility for resizing the width of a button, I had the choice. If i was going to extract the buttons from the ButtonBar, it probably would make sense to have them as a different type - Button for example. But reskinning my buttons as a different type could be time-consuming so I thought I'd see how I go just using ButtonBarButtons that aren't in a ButtonBar!

All turned out fine, except that my labels weren't appearing. A little delving into the code and I discovered the following code inside spark.components.supportClasses.ButtonBase:

// Push down to the part only if the label was explicitly set
if (_content !== undefined)
labelDisplay.text = label;

For my two cents, there's something strange going on there... So to set the label, I need to put the text inside the label property, and i need to ensure that content is not undefined. Set content to something arbitrary and the label appears! weird...

<s:ButtonBarButton label="Title" content="nada"/>

XML read error in AIR

Back to blogging, working on a couple of projects:

I was importing an XML file using the standard technique of using a URLLoader, and in the result handler, setting the XML file with:
var result:XML = new XML(event.target.data);

But I found I had to move this to the FileStream class in an AIR application because the user had to specify the XML file to load. So I used:
var result:XML = new XML(stream.readUTFBytes(stream.bytesAvailable));

Suddenly I was getting a 1088 error on this line:
TypeError: Error #1088: The markup in the document following the root element must be well-formed.

After checking and rechecking the XML, I found that for some reason, there was a byte at the beginning of the byteString, which was causing havoc with reading the XML. So the String being returned by the readUTFBytes method had to truncate the first character. Like so:
var fileData:String = stream.readUTFBytes(stream.bytesAvailable);
var result:XML = new XML(fileData.substr(1));

latin flash tour

Went to the Latin Flash tour last week in Bogotá, and met Lee Brimelow. He went over and demonstrated some of the latest updates to Flash CS5 and the FlashPlayer 10.2.

Features that got my interest:

• code snippets panel(frequently used code - similar to the old flash simple mode in old versions of Flash that people have complained about disappearing for years!)


• code hinting(although I´ll probably keep using FlashDevelop)


• FLA format is now an open format XML based file (with extension XFL) with all media external.


• Font embedding panel - embedded fonts can be managed more easily


• TLF text - a new text layout format which allows columns more easily(with editable text too!)


• Multitouch event handling(if your hardware can handle it of course!)


• Access to microphone data(turn your voice into darth vader apps coming up!)


• Uncaught error event - Finally you don´t have to ensure you are catching every error possible to avoid the user ever getting a Flash uncaugh error message.


• AIR - open a filetype with the default app


• AIR - Filemanager API can now catch volume state change events(i.e. if the user plugs in a hard drive)


• BUT of course! The feature that everyone talking and every question from the audience was about, was that Flash now has a feature to publish apps for the IPhone! No IPhone still doesn´t have a Flash Player, Flash packages for a native IPhone runtime. And the answer to almost every question about ´can the iphone apps do this´and ´can the iphone apps do that´was yes, it can do everything that the Flash player can do!(with the caveat that you just have to consider that performance might be worse on the Iphone)

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

This blog has moved.

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

This blog has moved.

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

adding classes dynamically Part II

A little addition to a previous post on adding symbols dynamically from the library. I was having difficulty adding classes(that weren't in the library) dynamically - they weren't being recognised.

var classRef:Class = getDefinitionByName("Square") as Class;
var shape:IShape= new classRef() as IShape;
//Flash displays: ReferenceError: Error #1065: Variable Square is not defined.

With help from Aaron Beall(on adobe forums) who was having the same problem, i've realised that obviously flash doesn't know to compile the class if it only exists in a string. So we need to ensure that flash compiles every possible class that we may refer to dynamically. We can do this simply by declaring a variable of that class type.

var squareRef:Square;

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.