Unless you’ve been hiding under a MSN search box you’ve heard the news that Adobe has worked with Google and Yahoo to make SWF files truly indexable by search engine spiders.

I’ve put together a quick Flex application this morning to take this new feature for a test drive. It’s just a TabNavigator displaying a few tabs of content about Greek gods. My goal isn’t to become the number one result for zeus. I just want to see the content get indexed and see what the search results look like.

If you would like to help out with this little experiment then try linking to the application so that it might get crawled sooner. Wouldn’t it be cool if this little experiment ended up being on Google’s first page for “greek gods zeus”? I’ll do a site-search every few days to see when it gets indexed and report back in another post when it does.

I pulled the content off of the Wikipedia.org site and dropped it into a database here at polyGeek.com. Then I used AMFPHP to grab the data and create as many tabs in the TabNavigator as there are results. And I added toolTips to the images if you mouse over them.

The nice thing about the TabNavigator is that the BrowserManager is automatically engaged. And I wrote 3 lines of code to enable the deepLinking in the app so you can land directly on a specific tab depending on the URL. And as always, mi coda, su coda.

In the code I’ve added the SQL, images, and my GoRemote.mxml to help you recreate this if you want. You’ll just need to get AMFPHP going yourself and add my AMFdata.php file to the ../services/amfphp/ folder. I might cover all the more in depth in a later post, someday.

Addendum: I just read the blog post at Google and it mentions that

Googlebot does not execute some types of JavaScript. So if your web page loads a Flash file via JavaScript, Google may not be aware of that Flash file…

I’m using the default Javascript/HTML code that FlexBuilder creates. So I’ll see if it gets indexed. And if you’re wondering why I use the default FB code it’s because I’m too lazy to take the additional step of using SWFobject, most of the time. :-)

In a project I’m working on I get the number of seconds since the device was turned on and I need to display a message to the user similar to this: System uptime is 2 years, 1 month, 13 days, 1 hour and 15 seconds.

I figured that since showing System uptime is common to many websites it would be easy to find someone who had already written some code to do the conversion. After about 15 minutes of searching I hadn’t found anything and figured I could have written the code myself in that time. ( It actually took closer to 30 minutes to write the code because John Wilker stole my mojo and I was feeling pretty stupid. )

Trouble with time

So I lied. It ended up taking hours to get the code to work just right, at least mostly right.

There were losts of little things that I had to accomodate. Like if the time output ends with hours then it needs to say, “blah, blah, blah and some hours.” Originally I only took into account the “and” going before the seconds. But if there are no seconds then … you get my meaning.

Oh, and adding a space in some places to the output string turned out to be harder than I thought it would be. But after messing with output for a while I think I got it.

Time is an illusion, lunch-time doubly so

But then the issue came up: how many seconds are there in a year, or whatever. There are lots of different ways to measure time durations. Turns out we’re pretty well set for things like minutes, hours, and days. Beyond that it starts getting messy.

The way my code works is to take the number of seconds you input and create a date starting that many seconds after January 1, 1970. It’s then doing conversions to see how many years, month, days, etc. after that date. Which is probably going to be an approximation of what you really want. But the problem is that I don’t know what you really want. It could be that you want to measure time before or after right now. That would be a different algorythm. If that’s what you need then you have my source to start from. This solution works for my current need and I’ll bet it would work for Douglas Adams, if he needed such a thing.

If you know of some standards that are used in time calculations, such as this I’d love to hear about it in the comments. Or anything else you might have to share on the matter.

I have a new poll in my sidebar to the right that uses AMFPHP to read/write data to a MySQL database. The poll itself is based on an XML file. The Flex app reads the XML file and looks for the database/table that the XML file indicates. The nice thing is that if either the database or table don’t exist then the Flex app creates them.

So to make another poll all I have to do is create a new XML file and point at it. No messing around with MySQL admin and creating tables and such. Not that it’s hard but changing a few lines of XML is way easier. And in true geek manner I spent hours making the Flex app create everything from scratch rather than spend a few minutes here and there doing it manually.

The poll also stores your vote in a SharedObject so that you can only vote once. In the chart your vote choice is exploded out a bit. And as you roll over the labels in the poll results it dynamically explodes out that wedge of the chart.

If anyone has any suggestions for improvement let me know. I intend to tweak it a bit and release the code for others to use. Ultimately I think even people who have zero Flex/Actionscript experience should be able to implement this on their blog.

Oh, and don’t forget to vote.

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