Using tweens to change the behavior of how Flex components transition is very simple. But there are lots of possibilities. So I built this Tween Flex-plorer so that I could see what the different tweens would look like. And of course I always share. :-)

While writing the code for the previous post I ran into a problem: my browser kept crashing when I’d publish my Flex project. All that was happening was that a <mx:Button> and <mx:TextArea> were fading in-and-out using <mx:Fade>.

Sure enough, it would cycle through about 4 times and start getting all jittery and then kaboom! Down goes the browser.

All that’s happening, in this example, is that when you click the top button it starts the other two buttons sliding back and forth. When one <mx:Move> is complete it calls an onTweenLeftEnd which starts the tween to the right. Back and forth we go.

If instead you use <mx:Fade> to fade the buttons in-and-out you get the same result. This doesn’t happen if you move or fade just one <mx:Button>. And it seems to happen with any two UIComponents.

Sometimes I feel that I suffer so that the rest of you don’t have to. When I run across one of those maddening, “but this should work” issues I always try to blog about it so that you - the reader - won’t have to suffer as I have. And I have, suffered greatly today. :-)

Here to the right we have two nearly identical Flex projects. The only difference is that the one on bottom has one line commented out of the CSS: fontWeight: normal;

It turns out that if you want to embed the font for a <mx:Button> you need to set the fontWeight. Yeah, it took me about 2 hours of trial and error to fix it. What really got me was that the embedding worked fine for the <mx:TextArea> all along. Go figure.

That’s it. So why does the fontWeight have to be “normal” in order for the <mx:Button> to get it’s embeded font? In the immortal words of Kyle Reese, “I don’t know. I didn’t build the fucking thing!”

Seriously, why does there have to be a declaration that the fontWeight has to be normal? Isn’t that the default? And yes, changing it to bold breaks it.

Perhaps I’m missing something. Perhaps the Flex team isn’t out to confuse and confound me on a daily basis. If so please enlighten me in the comments. Until then I’m just going to assume that Deepa did this just to drive me mad. Mad I say. Mad, mad, MAD! :-)

I’m creating a Flex based videoPlayer/slideShow viewer for a client. One small usability feature that I wanted to add is making the Spacebar act as a play/pause toggle.

It’s not as straight forward as one might think. First off if you create a Flex application then which ever component has focus receives the keyboard input. Which is really cool unless you don’t want it to do that. And this is the first occasion I’ve had for using applicationComplete() before. Because you have to have access to the application stage in order to set up the keyboard event and that isn’t available on creationComplete() - as noted here at the Flex cookbook.

Here’s the gist of the code:
private function appInit():void {
stage.addEventListener( KeyboardEvent.KEY_DOWN, keyPressHandler );
}
private function keyPressHandler( e:KeyboardEvent ):void {
// if the spaceBar is pressed then toggle video play/pause
if( e.charCode == 32 ) {
if( this.focusManager.getFocus() != toggleBtn ) {
this.focusManager.setFocus( toggleBtn );
// whatever happens when you click on the button you place here
// it's best to have a 'clickHandler' that calls another method
toggleBtnHandler();
}
}
}

I got stuck on a problem the other day using E4X. I was simply trying to get a Boolean value out of an attribute. It seemed to me that I could simply say:

setAutoPlayVideo( p.@autoPlayVideo );

Where autoPlayVideo is an attribute with a value of either “true” or “false”.

I expected E4X to type the variables I was using because I hadn’t needed to cast any of the attributes that were Strings or Numbers. Those all worked fine. After debugging a bit I discovered that each attribute was actually typed as XML. I’m a bit spoiled by my PXP2 class which automatically types values as Number, Boolean or String.

In the case of E4X and Booleans it was simple enough to fix once I understood what was going on. This does the trick:

var b:Boolean = ( p.@autoPlayVideo == "true" ) ? true : false;
setAutoPlayVideo( b );

Or if you’re not used to the ternary operator

var b:Boolean
if( p.@autoPlayVideo == "true ) {
b = true;
} else {
b = false
}
setAutoPlayVideo( b );

In the Flash authoring tool ( IDE ) there’s a preference called your Global Class Path. You can set that path(s) as a preference in the application so that every single FLA that you create will have access to those classes.

I’ve been trying to figure out how to do the same thing in FlexBuilder for ages. If you came to FlexBuilder as a Java developer then this should be old news to you. But for someone new to FlexBuilder it’s a pain trying to figure out even the basics of Eclipse. The books on Flex mostly gloss over the inner workings of FlexBuilder.

In this video tutorial I’ll cover how to build a Flex Library Project - the equivalent of your Global Class Path in the Flash IDE. You can then add your Actionscript and MXML classes to that project and have access to them throughout your workspace without doing an import and duplicating your files.

[ Download Flex Builder 3 | [ Download FLV | Download _comPolygeek.swc ]

Here’s the Adobe documentation on Creating Flex component library files.

Ryan, Sim, I miss you guys! :-)

Addendum: Ted Patrick pointed out that you can drop a SWC into the “libs” folder of your Flex3 projects.

Testing my Flex apps, especially using the debug mode, in Firefox is a big problem. The app opens in a new tab in Firefox but sometimes bad things happen and it crashes the browser.

Firefox isn’t the quickest starting browser out there especially if you’re like me and have lots of persistent tabs automatically open.

But just because Firefox is default browser on my computer doesn’t mean it has to be me default browser for Eclipse/FlexBuilder. I can easily change it to IE so that I can run my apps. And there’s a little added bonus: when you kill a debug session from the debug panel IE automatically closes. With Firefox I always had to kill the debug session and then close the tab. And with the browser one monitor and the debug panel on the far monitor - of a three monitor system - that’s a lot of mouse tracking. ( Yeah, yeah, poor me. I hear you. )

To make IE your default browser for running your Flex apps go: Window > Preferences… Now open the General menu and select Web Browser. Now you can just check off which browser you want to use.

Another added bonus is that I can use the regular old public Flash player in Firefox and only install the debug Flash player for IE. That way I don’t get all the Flex error messages popping up on . . . well, I won’t tell you who’s site they pop up on all the time. But you know who you are. ;-)

If you’re a Flash developer/designer and you’ve ever tried to explain to someone what Flash is you probably got about as far as mentioning keyframes before you started seeing glazed eyes.

The same is true of Flex. If you’ve never seen it there can be a lot of confusion as to exactly what it is and how you use it. I put this short ( less than 10 min ) video together to cover the three essentials:

1. Flex Builder
2. MXML
3. the Flex Framework

This isn’t a video that goes into any depth on writing code. It’s just a quick glance behind the curtain, so to speak.

[ Download Flex Builder 3 ]

And no, I couldn’t resist The Matrix reference. I didn’t even really try. ;-)

At Ted Patrick’s request I posted this video to youTube with the 30OnAir tag. I hope he didn’t request that just to make me look like a fool. :-)

360Flex is coming to the big peach, home of the Dirty Birds, and Sherman’s backyard BBQ - you history buffs will get that one.

The hosts Tom and John sent a call out for badge designs so I thought I’d toss my own in, again.

Right-click to view source

You may be wondering why I chose that particular photo as the background. Well, so am I. That’s because the photo is downloaded from Flickr.com using their API. So it will change over time depending on photos uploaded recently and their tags.

Essentially I created a simple MXML component that you can pass your Flickr API, theme - search terms for Flickr images, and the city/dates. It then searches Flickr, places the image, does a little resizing and masking, blah, blah, blah.

Please forgive the rough edges and lack of comments in the code. I tossed this together in a few hours this morning because I can’t sleep.

Sources used for this project

I used a bit of this code to draw the rounded rectangle.

Here’s the bit about making dropshadows on text from the Flex Cookbook.

Thank you, and goodnight.

Addendum

I think it would be cool to load multiple images - like 10 or so. Then rotate through showing them every few seconds. I’ll work on that tonight if I can’t sleep. Unless someone else does it beforehand.

So I’m writing this Flex widget/app/thingy that will let people vote for things on my site. I need to test that the user has selected one of the radio buttons when they hit the submit vote button. The code for that is:

Pretty simple stuff. In the if-statement I’m essentially saying, “if votingChoices.selectedValue DOESN’T exist then do this stuff, else do this other stuff.

Like I said, simple. Right?

But there’s a catch. I wasn’t paying attention and gave the radioButtons data values of, wait for it, numbers starting with zero. And you know what that means: no one will be able to submit the first choice in the list.

Okay, so simple fix. I shouldn’t use numbers, especially starting with zero, for the radioButton values.

But better yet I could just change the if-statement to:

if( votingChoices.selectedValue == null ) { ...

That would be the smart thing to do. And I tell myself that all the time. Don’t test for the existence of something in an if statement by just placing a reference. Go ahead and write out undefined or null. Because that’s what you’re really testing.

I can’t count the number of times I’ve screwed that up. So now every time I do that I’ll force myself to come back to this post and comment that no I can’t learn from my mistakes. :-)

So here are a few other things that equate to false. From Moock’s Essential ActionScript 3.0.

Here is a table of the default values for the various types.