Johnvh.com - online home of John Van Horn » Flash & Actionscript

E4x and as3 gotcha

johnvh — Fri, 26 Jun 2009 19:07:42 +0000

I love E4X in AS3. It's powerful and fairly simple. If you haven't worked with it yet, check out Roger Braunstein's excellent tutorial. But I was recently annoyed by this gotcha when doing some xml combining. Let's say you have this:

PLAIN TEXT

XML:

>
>
id="123">
>John>
>
>
>David>
>
>
>

Let's parse with E4X:

PLAIN TEXT

Actionscript:

// #1
trace( xml.people.person.length() );
// 2
// #2
// no animals, but e4x still returns an XMLList
trace( xml.people.animal.length() );
// 0
// #3
// no animals, so no further children, but still returns XMList
trace( xml.people.animal.fur.color.length() );
// 0
// #4
// gotcha
trace( xml.people.person.( "123" == @id ) );
// thows: ReferenceError: Error #1065: Variable @id is not defined.

The first 3 examples work great. Even though there are no nodes, E4X still returns an XMLList. Even looking for more siblings under nodes that don't exist works great - it always returns an empty (but valid) XMLList. Always returning an XMLList makes it easy to work with because you can always for-each over the result.

What I don't understand is the 4th example. It fails because not every node has an id attribute. But so what? If you look at the 2nd and 3rd examples, not every node has an node. So why don't we get the same result - an empty XMLList?

Turns out that there is an easy solution/work-around, that Roger mentions in his tutorial:

PLAIN TEXT

Actionscript:

// will error if every person node does not have an id attribute
trace( xml.people.person.( "123" == @id ) );
// use this
trace( xml.people.person.( attribute( "id" ) == "123" ).length() );
// 1

A bit wtf, but at least it works like the other examples.

Flash’s secret Javascript API

johnvh — Tue, 28 Apr 2009 03:01:49 +0000

Yahoo! invasion

Is that a Yahoo! ad in a Youtube player? No. It's a Yahoo! logo in a Youtube player. How did it get there? Via Flash's secret javascript api!

Ok, so it's not really secret. More like old, surely deprecated, and forgotten. I've been working with flash for a good while now, and I had no idea this existed until my friend Robert Ames stumbled upon it.

What's cool (or not cool) about this api, is that it's part of the Flash plugin itself and has nothing to do with Actionscript. All you have to do to enable this api is... well... embed a swf. Try going to a youtube video page like this one, and then entering this in the address bar:

PLAIN TEXT

JavaScript:

javascript: document.getElementById( "movie_player" ).LoadMovie( 98, "http://l.yimg.com/a/i/ww/beta/y3.gif" );

I want to play around with this a bit more... I wouldn't be surprised if some of these API methods bypassed some of the Flash Player's security restrictions.

Ignoring files in Flex Builder Navigator

johnvh — Tue, 31 Mar 2009 04:08:53 +0000

I don't like seeing .svn or CVS files in my Flex Builder/Eclipse workspace. I'll never need to edit those files directly, and if I do, I won't use Flex Builder to do it. But if they're in your project, they'll show up in the Navigator panel. Everywhere.

Every directory in your project will have a .svn folder.

Fortunately, Eclipse provides a way to filter files in the Navigator, but a) it's rather hidden, and b) it's not obvious how to add filters. In the Navigator panel, hit the down arrow in the top right corner and select "Filters...".

Navigator panel options.

Here's the list of filters you get by default:

Default Filters

What? No "add filter" option? No "edit"? I guess you could use the ".*" filter, but that would hide every file or directory whose name starts with ".". That may or may not be acceptable, depending on the type of project or files your working with. What if you had a .htaccess file in your project?

Fortunately again, there is a mechanism for adding additional filters, but it's not obvious. It involves editing the plugins.xml file for the Flex Builder editor plugin. You can find this plugin in the eclipse plugins folder (located in same place as Flex Builder.app) in your Flex Builder install. It's called com.adobe.flexbuilder.standalone_3.0.194161, and it's located for me at:

PLAIN TEXT

CODE:

/Applications/Adobe Flex Builder 3/plugins/com.adobe.flexbuilder.standalone_3.0.194161

So navigate there, and edit plugins.xml. You're looking for the extension node whose attribute point is "org.eclipse.ui.ide.resourceFilters". Under that node is where the default filters are defined. All you have to do is add another one and save the file:

Flex Builder editor plugin.xml, with svn filter added.

The remaining step is to restart Flex Builder, using the -clean option. Since the plugin.xml file is either cached or compiled in somewhere, using the -clean option tells the Eclipse executable to reload all plugins and configs. This requires use of the Terminal:

PLAIN TEXT

CODE:

$ cd /Applications/Adobe\ Flex\ Builder\ 3/Flex\ Builder.app/Contents/MacOS
$ ./FlexBuilder -clean

When Flex Builder launches, you should now see the filter you just added in the filters window. Thanks to Robert Ames for telling me how to launch Flex Builder with arguments.

New filter added.

Are your event handlers bad?

johnvh — Tue, 17 Mar 2009 04:42:46 +0000

Event handlers can be bad. They're not intrinsically bad - that's how shit gets done in AS3. It's the way they often get written that can be bad. Consider the following example:

PLAIN TEXT

Actionscript:

package
{
import fl.motion.Color;
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
public class Nothing extends Sprite
{
private var square:Sprite;
public function Nothing()
{
square = new Sprite();
square.graphics.beginFill( 0xFFFFFF, 1 );
square.graphics.drawRect( 0, 0 , 50, 50 );
square.graphics.endFill();
square.addEventListener( MouseEvent.CLICK, click );
addChild( square );
}
private function click( event:MouseEvent ):void
{
var clickedObject:DisplayObject = event.target as DisplayObject;
var tint:uint = 0xFF0000;
var color:Color = new Color();
color.setTint( tint, 1 );
clickedObject.transform.colorTransform = color;
}
}
}

Great. So a sprite is tinted red when its clicked. But what happens when you have to tint that sprite at other times, like when the application loads? All the code that does the tinting is locked up inside the event handler - the problem there is that the event handler needs a MouseEvent to run.

A better, more reusable, and more modular approach would be:

PLAIN TEXT

Actionscript:

public function tint( obj:DisplayObject ):void
{
var tint:uint = 0xFF0000; //or better, make this an argument
var color:Color = new Color();
color.setTint( tint, 1 );
obj.transform.colorTransform = color;
}
private function click( event:MouseEvent ):void
{
var clickedObject:DisplayObject = event.target as DisplayObject;
tint( clickedObject );
}

You see? The event handler just notifies us that something needs to be tinted. The actual tinting happens elsewhere. Now, code that does work does not need anything other than a reference to a DisplayObject to run! Now, you can tint an object when the application loads. You can tint an object on a timer. Now, you can tint anything, at anytime! Now its testable and reusable! And, it's a very easy concept to master.

Get what you need from an event object, and get out.

When you write event handlers, think about what they are actually doing. What do you actually need from the event object? How would you test the event handler? Or better yet, how would you make the same thing that happens in the event handler, happen without the event?