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.

This might seem rather obvious to most of you, it did to me once I thought about it, but don’t use your default browser for testing/debugging your Flex apps.

Why?

Because you’re likely to crash your browser. I know I do all the time.

To select which browser Flex Builder/Eclipse uses for testing and debugging open up your preferences: Window -> Perferences. Then in the left navigation panel open up General -> Web Browser.

I’m sure I’m not the only one who screws up the logic on their do-while loops or recursive function calls. So now while you’re waiting for the Flash player to timeout and let you stop the script you can browse through your unread RSS feeds in your default browser. :-)

I’m getting the following error when I use the FlexProjectWizard to create a project that will access data through ColdFusion Flash Remoting Service:

VerifyError: Error #1053: Illegal override of subtopic in mx.messaging.Consumer.
at flash.display::MovieClip/nextFrame()
at mx.managers::SystemManager/::deferredNextFrame()
at mx.managers::SystemManager/::preloader_initProgressHandler()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.preloaders::Preloader/::timerHandler()
at flash.utils::Timer/flash.utils:Timer::_timerDispatch()
at flash.utils::Timer/flash.utils:Timer::tick()

Solution ( well it worked for me )

Remove the Library path to the fds.swc file and just leave it as: \WEB-INF\flex\libs\.

You can also find some help on the Flex Support Forums.

Ask me why it works this way? Go on, ask…

Reply: I don’t know! I didn’t build the frakking thing!!! ( Reese in Terminator. I love that line. I use it a lot at work. )

As always the best part of a conference is what happens outside the sessions. Not to disparage the speakers at all. There were some great sessions, more about that later, and some good sessions. And think this might be the first conference I’ve been to where none of the sessions I attended were bad.

John Wilker and Tom Ortega did a fabulous job. I guess the best compliment I can pay them is that I plan to be going to the next 360Flex conference that’s on the West coast.

There were lots of great sessions. If I had to pick my favorite I’d go with Doug McCune’s Building Custom Components. His message was that we need to keep an eye on existing open source projects that we can use to wrap into our projects when ever possible. His tileUI is mosly open source code that he mashed together.

I thought it was brilliant that his session itself was sort of open source. He got things started and then mediated a discussion from various members of the audience. Deepa Subramaniam from Adobe, Adam Flater from effectiveUI, David Coletta from Buzzword, and a few others that I didn’t know made significant contributions to the discussion. And on many occasions Doug himself asked questions of the audience like, “this is what I do. What do you do?”

I think a lot of presenters would be afraid of letting go of control over the session but Doug handled it well. Others should consider a similar approach.

Bugs

I think Adobe should hand out buttons or something that say, “Submit a bug.” I heard that phrase countless times. So, if you find something you think is a bug in Flex then go to bugs.adobe.com/flex/ and do a search to see if anyone else has submitted a bug on what you’ve found. If they have then vote for it. The more votes a bug gets the more likely it is to get fixed. If there isn’t already a bug report then submit one.

The most common bug you’ll find are properties/methods that are private should should be public. So if you find something in the framework that you want public submit a bug. Deepa also offered that these are the easiest bugs to fix and they do have a quota. So don’t be shy.

I personally don’t know what the problem is. I just did a search and replace across all the entire flex framework on my system and make everything public. Problem solved. Okay, I’m kidding. But that would solve the problem. :-)

Tid-bits

The good news: Flex 3 will ship as open source.

The bad news: Flex 3 won’t ship until early ‘08. I think we were all hoping for a ship date around MAX07. Bummer.

AIR 1.0 will ship with Flex 3.

Flex 3 will have much better text support with kernaling, font height, etc.

Blogs to read

Here are a few blogs to read that you may not have seen before.

Alex’s Flex Closet ( http://blogs.adobe.com/aharui/ )

Flexophile: fount of Flex factoids ( http://blogs.adobe.com/gosmith/ )

Deepa said that she was going to start blogging before MAX07. If she doesn’t I’m going to file a bug. :-)

Coldfusion 8 hosting

I talked to Ted Patrick about who was offering shared hosting of a Coldfusion 8 with LiveCycle setup. He said that they were working hard to get that option out in hosting community for us. I’m sure that as soon as someone has that available then someone at Adobe will make it known to the community.

Video

The video encoder that comes with Flash is good. But if you want the best results look for On2Flix or Sorenson’s encoders. They do two pass encoding which the Adobe encoder doesn’t do.

Nity-gritty

If you use setStyle in your Flex apps do it on initialization not creationComplete. That will help speed up your apps rendering time.

Debugging

It never occurred to me that those ugly exceptions warnings that pop up in Flex apps only work in the debug version of the player that we Flex developers have. That’s a relief.

In Flex 3 you will get the option in the code editor to right-click and select watch variable/property during your debugging sessions.

You can make Eclipse preview in a browser other than your default by going to: Window -> General -> Web Browser.

Nested functions are not a member of any class. So there is really no telling what this is.

Custom Components

Metadata is for code hinting purposes. They don’t actually serve any purpose in code execution.

If you have a custom event you use clone to keep those custom properties attached as the event bubbles. Otherwise the event bubbles but loses your custom property.

Have your heard of the tag [Mixin]. You should check it out at AdamFlater’s blog.

List of speakers

This is a good page to keep handy if you want to go back and find a presenter’s website/blog someday.

http://www.360conferences.com/360flex/2007/05/speaker-to-session-list.html

These cars were design in the Forza2 racing game for the XBox360. First off let me give credit where credit is due. I did not do the designs on the polyGeek car or the Seahawks car. That was done by Lee Nicholls the Global Solutions Director for Getronics, World domination hobbyist, woo-er of beautiful women, driver of outrageously fast cars, and Forza2 designer extraordinar.

You can view the source code here. ( The download zip is a little over a meg because I left in the images of the Adobe Fararri for you to play with.) I’ve commented the code pretty thoroughly so I don’t think there’s much point in going into details. I’ll just give a quick overview of how this works.

First off, there are XML files that describe a series of images. The code goes through and loads each image and places them one on top of the other.

As soon as all the images are loaded it runs through the series of images to display them each in turn giving the illusion of the car, or whatever you have photos of, rotating. That’s serves the purpose of letting the user know that they can rotate through the images. Just displaying a mouse-hand probably isn’t enough of an indication.

The mouse wheel also works to scroll through the images.

The images are loaded one after the other instead of all the requests going out at once. I found that there were some odd errors with making a request for 40 images all in one shot. Sometimes they would load and sometimes they wouldn’t. Loading in sequence solved all that.

As your drag your mouse across the image space it uses the width of the image and the number of images in the stack to calculate how much you need to drag your mouse before the next image displays. That way if you start from one side of the image space and drag all the way across it will rotate through all of the images. No matter how many there are.

Modulo to the resuce

There are few occasions to use modulo in Actionscript. That’s the mathematical operation using the “%” sign. Modulo gives you just the remainder after division. Example: 34 % 10 = 4 because 10 goes into 34 three times with 4 left over.

Modulo was very handy for solving an otherwise messy problem. References to each image are stored in an array. As you drag your mouse across the image space the code figures out which image needs to be visible at that point.

So what happens if the user is dragging through the last few images in the array and then needs to start back at the beginning of the array? You can imagine lots of messy if() statements to handle all that or, I can just take the modulo of the image I think they need to see with the length of the array and they will always see the correct image.

Example: suppose there are 30 images in the array ( 0-29). The user is dragging across the image space and displaying the last few images, 27, 28, 29, 30 . . . But there is no image 30. But if when I go to display an image I use the calculated image number modulo 30 ( length of the array ) then I’ll always be in the range of the image array.

So when I try to display image 30 I’ll get 0, and for 31 I’ll get 1 and so forth. Problem solved and no messing if() statements.

In my Seach Flex app I’m asking the Flickr API for data based on my search terms and the number of photos that I want to see. The data that comes back is returned to my event handler, via the ReseltEvent, where I can use it to create links to photos that are displayed. I’m binding that data to an ArrayCollection - named photos. Simple enough.

I have a line of code like this:

photos = event.result.rsp.photos.photo;

my photos:ArrayCollection is being set equal to the repeating element of the returned data - event.result.rsp.photos.photo.

If I ask for 3 photos to be returned then I could do something like this:

That would produce output like this:

photo ID: 431933355
photo ID: 431931375
photo ID: 431854221

But what happens if I ask for just one photo to be returned? It would be nice if I could access that data like this:

trace("photo ID: " + photos[0].id);

But I can’t. Actually, I wouldn’t even get that far because the line above where I made my photos:ArrayCollection equal to the ResultEvent would have produced an error: TypeError: Error #1009: Cannot access a property or method of a null object reference.

Here’s the big surprise - sarcasm - an ArrayCollection can’t be set equal to something that isn’t Arrayish.

When I came upon this error it was pretty easy for me to spot because I’ve run into this before with my PXP2 class for ActionScript 2 which is a lot like the ArrayCollection. Of course when I ran into the problem the first time it took hours for me to figure out what the frak was wrong. Such is coding.

The solution is pretty simple. Here’s how I fixed it in the Seach Flickr app:

In the first if-case I’m dealing with the issue of not getting anything back. Like if you search for “iidneidntineidte” and nothing comes back.

The second if-case handles the more likely case of getting an Array back and the else handles what happens if there is just one photo returned.

So if you’re working with ArrayCollections you better make sure that you’re always getting an array of objects from where ever. Otherwise you’ll get those nasty error popups.

As an aside: this happened to me on the Zune.net media player. I set everything up using my PXP2 class to handle lots of videos and photos. Then when the production crew got it they broke it the very first day because I never tested the thing with just one photo or video. Really, the way this thing was designed it looked like there would always be lots of content. Whooops.

Lesson learned: always test with zero, one and many.

I vote that we make the Flex Search Flickr application a sort of right of passage for developers new to Flex. It was Sho Kuwamoto himself who started the whole thing with his video tutorial back in the Flex 2 alpha days. In fact, that was the first Flex app I ever saw. Thanks Sho.

Unfortunately enough changed between when he recorded the video in Flex 2.0 alpha and the final Flex 2.0 that it broke his wonderful example. Still, it’s worth watching the video because the general code flow still applies. It’s just the actual code specifics that needs a bit of tweaking.

You can see my Flex Flickr app here and the view source works from the right-click or you can download everything here. You will need to get your own API_KEY from Flickr to use my example.

Since the Search Flickr app requires using data binding, states, the ArrayCollection, HTTPService, events, ResultEvent and ItemRendering I, polyGeek, do hereby decree that all who successfully create and understand their own Search Flickr application may thereafter refer to themselves as novice Flex developers, a grade up from newbie.

I’m not sure what application will qualify for graduating from novice to experienced Flex developer. I haven’t gotten there yet. :-)

I’m a big fan of coding on black. That’s using a black background and bright colors for the text. Unfortunately I’ve had nothing but trouble setting this up in Eclipse. Lucky for me there was a session at 360Flex called Flex Builder Secrets where I learned a great deal about how to use the hidden features in Eclipse and got the scuttle bug on how to change those pesky colors.

Here’s the rub: you can’t change the text colors inside of Eclipse. You have to go into an XML file that’s buried in a .jar file in your installation folder, under some peat moss at the bottom of a deep ravine in the heart of Borneo. Okay, that last part is hyperbole.

Before we get started editing the colors we need to change the background color of the code window. You would think that the background color would be controlled in the same place as the text colors, but, sadly, you would be wrong.

The image below shows you where to change the background color and while we’re at it you can change the font if you wish. The preferences are under: Window -> Preferences… Uncheck the System Default checkbox and select the color that you would like to use.

Now to edit the color coding. Find the \plugins\ subfolder in your installation folder. For me it’s: C:\Program Files\eclipse\plugins. Now there are a bunch of subfolders there. You’re looking for the com.adobe.flexbuilder.editors.common_2.0.155577 - that number at the end is the build number and may be different than mine.

Now I’m in the subfolder: C:\Program Files\eclipse\plugins\com.adobe.flexbuilder.editors.common_2.0.155577. In there you should see a file named common.jar. Before going any further you’ll want to make a backup of that file. I created a backup folder in the \plugins\ folder so that I wouldn’t be duplicating the .jar file inside itself. You’ll see how this works in a moment.

Inside the .jar file is the colors.xml file. A .jar file is really the same thing as a .zip file so if you’re on Windows you can just change the extension and then unzip it. It will create two more subfolders: com, META-INF. To find the XML file we’re looking for drill down to: com -> adobe -> flexbuilder -> editors -> common -> color. You should now see the Colors.xml file in the midst of a bunch of .class files. You can change the text color, and set the italics and/or bold properties. If any certain node doesn’t have the italic or bold attribute then it defaults to false. You can simply add the attribute and make it true to turn it on.

If you want something like this you can download my colors.xml file.

All that’s left to do is update the .jar file with the changes you made to the Colors.xml file. If you know how to do that then you’re set but this is the part that really fraked with me. Here’s how I ended up doing it.

1. Create a new zip file in the \plugins\ folder, one folder under where you found the common.jar file.
2. Now drag the \com\adobe\flexbuilder\editors\common\color folder into the zip file.
3. *Drag your zip file up into the \com\adobe\flexbuilder\editors\common\color folder.
4. Rename your zip file to common.jar.
5. Restart Eclipse or FlexBuilder.
   

*This sounds sort of messed up I know but the path in the .jar/.zip file must be \com\adobe… I couldn’t get the path right without doing it this convoluted way. Hey, whatever works. If you get an error while starting Eclipse/FlexBuilder then you probably messed up the paths and you’ll need your backup file.

Good luck and may you enjoy coding on black, or whatever color you enjoy.