The following examples show how you can control whether a user can select the text in a Flex TextArea control by setting the selectable property in MXML and ActionScript.
Full code after the jump.
The following examples show how you can control whether a user can select the text in a Flex TextArea control by setting the selectable property in MXML and ActionScript.
Full code after the jump.
In a previous example, “Creating a simple image gallery with the Flex HorizontalList control”, we saw how to create a simple image gallery using the HorizontalList control and Image control in Flex.
The following example shows how you can change the full image whenever you roll your mouse cursor over the items in the HorizontalList control, as well as how you can double click an item in the Horizontal List control to display the image using the PopUpManager class.
Full code after the jump.
Today I’m proud to announce the launch of SpatialKey, the geospatial information visualization product I’ve been working on with our fantastic team at Universal Mind. I’ll make a bold statement that I stick by: this is the best web-based mapping product in existence. Today we’re releasing a “technology preview” that gives you a little glimpse at what we’ve been working on (just to whet your appetite until we release the full product).
Quick links
Before I explain what SpatialKey is I wanted to give a few quick links because I know a lot of you are going to have your ADD act up before you read the rest of the post.

San Antonio Prostitution Crimes - This link will jump you straight into exploring the prostitution crimes in San Antonio from Jan 2006 - July 2007. Check out how clearly the heatmap points out the corners that are the hotspots in the city.
Beyond points on a map

We’ve been seeing the same tired approach to web-based mapping for years now. Everyone throws markers on a map. You want to track crime? Throw a bunch of markers on a map. Little pin markers work fine if you’re showing a few data points. Want to see the location of Starbucks within a 3 block radius of your house? Use markers. But what if you want to see the total sales of all Starbucks worldwide? Or all crimes for the past 10 years? For the whole country?
SpatialKey uses some of the most advanced visualization renderings for geospatial data that have ever been seen on the web. The focus here is on aggregate renderings: heatmaps, thematic grids, graduated circles. 1,000 markers all piled on top of each other doesn’t help anyone. What you want to see is density or sum total value. SpatialKey focuses on rendering aggregate data in meaningful ways. We can show you a heatmap of the entire country and let you visualize any number of data fields. You want to see the heatmap represent total sales of all stores in the region? No problem. You want to see average house price over the past 10 years? We can do that.
| Heat Map | Heat Grid |
![]() |
![]() |
We haven’t seen innovative technology in this industry since Google let you drag the map. (I actually vividly remember that moment when I first dragged a Google map and my mouth started to water). It’s time to move beyond points on a map.
Your data doesn’t have limits
Try adding 10,000 data points to a Google Map. I dare you. What happens? If you’re using the “My Maps” feature of Google Maps, you’re limited to only show 200 points at a time, then you have to page through your data. And to top it all off you’re limited to a whopping total of 1,000 data points in the entire data set. So you get to page through 5 pages of data and only see 1/10th of your total data set anyway. If you create your own application with the Google Maps AJAX API you’re going to have serious performance problems when you get up into a few hundred markers. We think that’s ridiculous.
SpatialKey breaks through the limits of previous mapping technology in two ways. First, we’re simply faster. Flash can process and render data far faster than JavaScript. We can render 10,000 data points in a matter of milliseconds. You simply can’t do that with any JavaScript API out there. Second, we’re smarter. We aggregate data to produce heatmaps instead of just trying to overlay markers one on top of the other. Fundamentally, a massive dataset is an information visualization problem, not a technical one. You need better renderings to convey massive amounts of data, and that’s what SpatialKey delivers.
This is just the beginning
This is a technology preview. That basically means we’re showing you some cool stuff, but we’ve got way more up our sleeve. We’re looking for feedback on what we’ve got, and we’re hoping to get you excited about what we’ll be rolling out. We’ll be releasing new versions of SpatialKey Personal that will let you easily import your own data (if you’ve got an Excel file with addresses you can drop it right in). We’re also going to be releasing SpatialKey Enterprise, which lets you load a data set of any size (millions and millions of points). And then we’ve got a third product that we’re launching called SpatialKey Law Enforcement Dashboard, which is an enterprise version of SpatialKey specifically targeted toward police departments (includes special law enforcement reporting templates). And in the meantime we’ll be rolling out some more example datasets for you to play with, so keep an eye on the SpatialKey blog.
So go check out the SpatialKey Gallery and play with some data. We’re looking for feedback during this phase, so if you have any suggestions or (god forbid!) you run across bugs, please let us know by emailing feedback.
What are your biggest issues, bugs and annoyances with Adobe AIR? I am specifically looking for input on both developers bugs, and end user bugs. I am not looking for input on features you would like added (Ill do that in another post).
We already have a pretty good idea of the main issues (based on the forums, bug reports, blogs, testing and twitter), but your comments here will be another useful data point.
As usual, you can always submit the issues directly to the AIR team here.
So, post your biggest Adobe AIR annoyances, bugs and issues in the comments. Keep comments on topic.
The following example shows you how you can display all the getters/setters and their current values for a Flex TextArea control by using the describeType() method, some E4X filtering, and an XMLListCollection.
Full code after the jump.
This session at Adobe AIR Camp introduced traditional HTML and JavaScript developers to the AIR SDK and how to use the the various binaries (ADL and ADT) to develop, test, and package desktop applications. The session included a basic introduction to the AIRAliases.js file and it’s importance when coding against the AIR runtime with JS.
What I find really helpful is the Adobe AIR Language Reference for JavaScript developers. This is a subset of the ActionScript 3.0 Language Reference and includes all the AIR specific features that you as a JavaScript developer can access within the AIR runtime.
For the basic application seen below you can develop using your favorite text editor and the Adobe AIR SDK, download the Adobe AIR extension for Dreamweaver CS3, or even try developing with Aptana. I really like Aptana as it can be installed as a plugin for Eclipse and sit right beside my Flex development perspective.
For other AIR development tools click here.
Download the source code for the application below.
Your first desktop application with HTML and JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <html> <head> <title>Our first HTML AIR application</title> <script src="AIRAliases.js" ></script> <script> function doLoad() { alert("Simple alert to show we can include regular JS scripting"); } function writeFile() { var file = air.File.desktopDirectory.resolvePath("sample.txt"); var stream = new air.FileStream(); stream.open( file, air.FileMode.WRITE ); stream.writeMultiByte( document.getElementById('textInput').value , air.File.systemCharset ); stream.close(); } </script> </head> <body onLoad="doLoad()"> <h2>AIR HTML/JavaScript Sample</h2> <p>This sample application will take a simple text input entry and write this out to the contents of a file on the users desktop</p> <input type="text" id="textInput" value="www.flexdaddy.info"/> <input type="button" onClick="writeFile()" value="Save to desktop" /> </body> </html> |
And the application descriptor/manifest file
1 2 3 4 5 6 7 8 9 10 11 12 | < ?xml version="1.0" encoding="UTF-8"?> <application xmlns="http://ns.adobe.com/air/application/1.0"> <id>com.flexdaddy.samples.htmlair</id> <version>v1</version> <filename>aircamp_sample</filename> <initialwindow> <content>airsample.html</content> <visible>true</visible> <width>400</width> <height>350</height> </initialwindow> </application> |
Download the source code for this application.
Adobe Flex really is the development tool and platform of choice for developing desktop experiences on Adobe AIR. This slide deck was presented as part of a series of topics covered at Adobe AIR Camps throughout Australia and New Zealand. Take a look, download it, and share it! If anyone is interested in the demo files the Flex Builder project archive can be downloaded here.
The presentation introduces Flex Builder, the Flex framework and the AIR runtime by creating an application with a transparent window (thanks to Matt Voerman for providing the pretzel image!) that uses custom chrome and native window commands to move and close the application.
Take a look at the sample project, and if you have any questions feel free to leave a comment.
The following example shows how you can close a pop up window when a user presses the Escape key in Flex.
Full code after the jump.
The following example shows how you can use the PopUpManager class to display a VideoDisplay control in a TitleWindow container in Flex.
Full code after the jump.
The following example shows how you can embed a Google map into a Flex/ActionScript 3.0 project.
Full code after the jump.
Below are the keynote slides from the recent Adobe AIR Camps throughout Australia and New Zealand. Thanks to everyone who attended, and a special thanks to both Mark Blair and Matt Voerman who presented at the events as well, and to Mike Downey for presenting the keynote in Sydney while on his visit to WebDU 2008.
Over the next few days I’ll post slides and references to the rest of the content we covered at the AIR Camps.
Be sure to take a look at the following links to some great applications. A real nice showcase of what’s possible!
Adobe AIR Showcase
Adobe AIR Marketplace
The following example shows how you can embed a Yahoo! map into a Flex/ActionScript 3.0 project.
Full code after the jump.
I went to check the Amazon page for Flex for Dummies to grab a link to the page and I noticed that the book is shipping! I just bought two copies that will be delivered by Tuesday!
Go buy a copy! Buy 10! You already know Flex? Then buy it for the dude in the cube next to you who wants to learn!
I haven’t been blogging like I used to. It’s been a month since my last post (and that was just a silly cartoon). I’ve been thinking about why this is, and there are some typical expected reasons (busy work schedule, extra non-work commitments, a recent move, etc etc). This is all part of why I’ve fallen off the blogging wagon, but it’s not the whole story. This post is a bit of a dive into my psychology, trying to get at why I blog and where I’m trying to get to in my life. This isn’t a technical post and it’s not really even about Flex. It’s about me and my brain and my feelings. So if you don’t like mushy crap, you can stop reading.
First, the standard stuff:
So that’s all the stuff that I’d tell you if you asked me why I haven’t been blogging. “Man, I’ve just been so busy, I can’t find the time.” There’s a lot of truth to that, I certainly don’t want it to sound like I haven’t been busy. But largely the “I’ve been busy” excuse is bullshit. So why haven’t I been blogging?
I’m not hungry anymore.
Now we’re getting to the meat of this. I’ve been thinking about what drives me to blog and reflecting on the past year and a half. I’ve had a crazy ride. I went from being an unknown kid learning ActionScript and Flex to being a semi-famous-within-a-very-specific-geek-circle, book-writing, highly-paid, influential expert (and yeah, clearly you can tell that it’s all gone to my head). And it all happened in a year. My salary multiplied, I was speaking at conferences, I had a book deal. That’s some seriously crazy shit. That wasn’t entirely my plan from day one, although as things started picking up steam I started aiming higher and higher. I wanted to be famous. I wanted people to think I was good. I wanted to be in demand, to be sought after.
And so now what? What’s the next step? I’ve got a stellar job, I make bank, my book’s about to come out, I’ve got a reputation I’m proud of, and I’m being flown halfway around the world to speak at a conference. The people that I thought were rockstars, that I learned so much from while I was getting started (and still do every day); they all know who I am now (some of them are even good friends).
I used to be so hungry to prove myself. If someone had a coding problem they couldn’t solve I wanted to be the guy who showed everyone how to do it. I wanted people to stop and say “woah, where the fuck did this guy come from?” And now that I got that I guess I feel a bit drained. That fire to be the best, to be known, is dampened. I’m not saying I’m the best, I’m just saying I no longer care like I used to.
The Tech
There’s also a technology aspect to this. I’m starting to feel like I’ve taken Flex as far as it will go. I started proving small things; how to make little components, or how to hack some piece of the Flex framework. And I rode that until I knew Flex inside and out. I hit every brick wall (I climbed over or busted through some). And it was all so challenging and rewarding. I was unlocking secrets, uncovering things people didn’t know. But in terms of intellectual curiosity I’ve exhausted Flex 2 and 3. Of course there’s always new stuff in Flash Player 10 and Flex 4 that is going to be really interesting. But my interest has been shifting. I don’t want to solve small problems with a component or with a framework. I want big problems. I want new problems. I want real problems. I want to solve something that’s not just a technical detail.
I’m not ditching Flex or ActionScript. On the contrary, I feel like I’ve gotten to the point with the technology that I’m supposed to be: Flex and ActionScript are just tools to solve problems, not problems in themselves. When I started blogging Flex was a problem I was chipping away at, hacking together examples and tweaking the framework to get it to serve my needs. Now I want to move beyond that, and take on problems that are information problems on their own, and Flex just happens to be the best tool I have at my disposal.
The Next Step
I’ve been reading a good bit about information visualization as a field of research and soaking in as much as I can. The product I’ve been working on for Universal Mind takes geographic information visualization to a level that nobody’s done yet on the web (I put the “on the web” qualifier there, but I hope we’re working on stuff that pushes limits for any software, online or offline). And that’s just scratching the surface. There’s a ton room for innovation in the geo space. It’s a field that has so much potential but is stifled by a few big players and their ideas about how things are supposed to work. So I’m hoping I can help shake that up a bit. But geospatial information is just one small piece of the whole pie. I want to visualize everything. I want to create new ways of seeing data. And this is a field without limits. There is no end to the possible innovation.
So in the months ahead I hope to use this blog as an experimental proving ground for my forays into data visualization. I’m doing a lot of this for work, which is awesome because that means I get paid to do interesting work, but it has the downside that I often can’t share code. I imagine there will be more posts that are examples of what we’ve done (videos or live apps) that don’t show exactly how we did it. That sucks, but I think there’s still a lot to be said for showing off inspirational stuff. I’m also going to be trying to refocus on blogging small experiments in data visualization.
So if you’ve made it this far I’m impressed you read through my psycho-babble ramblings (or maybe you just skipped to the end looking for something worthwhile). From here on out I’ll probably keep the “dive into Doug’s head” type of posts like this to a minimum, and get back to blogging cool tech.
I’ve just posted the title and description of the session I’ll be giving at Flash on the Beach, which is happening September 28-Oct 1 in Brighton, England. My session is titled: Decompiling Flex and Flash. Here’s the full description (which you can also find on the FOTB site):
In this session we’ll learn how to decompile ActionScript 3 SWF files and peek inside other people’s code. Decompiling a SWF is often seen as an evil tactic that should be punishable by death, but regardless of your moral opinion, every SWF you create can be decompiled into often beautifully readable source code. If you’ve produced something cool, chances are someone has decompiled it (hell, chances are I’ve decompiled it myself).
In this session you’ll learn what you get when you decompile a SWF and what you don’t. We’ll cover how far you can get piecing a decompiled application back together and I’ll share a few real-world stories of how decompiling has proven invaluable in my development career.
This session will focus on ripping apart some large-scale Flex applications and diving into the source (we’ll see if I can get sued by the end of the session). I’ll cover some Flex-specifics that are important when you decompile a Flex app (Flex framework classes, generated MXML code, data binding code, etc). But decompiling AS3 SWFs is just as applicable for SWFs produced in Flash Authoring as well, so there should be plenty of information for everyone.
And for all the paranoid folks out there, in addition to decompiling code, I’ll also cover a few techniques to protect your source code to make it harder for people to steal.
I hope to see some of you in England!
The following example shows how you can rotate a Flex Image control along its x-axis, y-axis, and z-axis using the new rotationX, rotationY, and rotationZ properties in Flash Player 10 and Flex “Gumbo”.
Full code after the jump.
The following example shows how you can view a Flex application’s generated source code by adding the -keep compiler argument in Flex Builder.
To add a compiler argument in Flex Builder, launch the Project Properties dialog box by selecting Project > Properties from the main menu, select the Flex Compiler option from the left menu, and type “-keep” at the end of the Additional compiler arguments text input field (see Figure 1).

Figure 1. Flex Builder Project Properties dialog box.
Full code after the jump.
In a previous entry, “Downloading and installing Flex SDK builds from opensource.adobe.com”, we saw how to download and install nightly builds of the Flex 3 SDK into Flex Builder 3.
Setting up the beta Gumbo SDK has a couple little “gotchas” which can be a little tricky.

Figure 1. Flex Builder Project Properties dialog box.
If you forget to change the Flash Player detection to Flash Player 10, you may see the following compiler errors in your Flex Builder Problems tab:
1046: Type was not found or was not a compile-time constant: ContentElement.
1046: Type was not found or was not a compile-time constant: ElementFormat.
1046: Type was not found or was not a compile-time constant: FontMetrics.
1046: Type was not found or was not a compile-time constant: GroupElement.
1046: Type was not found or was not a compile-time constant: TextElement.
1046: Type was not found or was not a compile-time constant: TextLine.
If you haven’t already installed the Flash Player 10 beta yet, you can find the various installers in the downloaded SDK’s /runtimes/player/10/{OS}/ directory.
Now that you have the Gumbo SDK and Flash Player 10 installed, now it’s time to write a simple test file using the latest Flex SDK.
Full code after the jump.
The Flex SDK is constantly changing and improving. Every day bugs are getting fixed, features are being added or improved. If you want to use the latest code, you’ll need to know where to download the Flex SDK from and how to add the new SDK to Flex Builder.
New builds of the Flex SDK can be downloaded from the Flex SDK Downloads page on the opensource.adobe.com site. Currently, this page gives you links to download the latest Gumbo nightly build, the latest Flex 3 nightly build, or the various Flex 3 Compiler Modules. There are three main SDK build types:
The Flex team creates signed versions of the major RSLs for every milestone release.
The Flex team dos not currently create signed versions of the major RSLs for stable builds as it would begin negating the value of the framework cache (that said, we’ll be keeping an eye on things and re-evaluating as necessary).
[source opensource.adobe.com: SDK Build Types]
The next important thing to understand is the different types of Flex SDKs available:
[source opensource.adobe.com: Flex SDK Downloads]
That’s it! You’ve successfully downloaded and installed the latest and greatest version of the Flex SDK into Flex Builder.
If you want to compile your code against this new SDK you can select Project > Properties from the main menu, select Flex Compiler from the menu on the left, and select your new SDK from the dropdown menu in the Flex SDK version section.
Also worth mentioning is that you can manage your installed SDKs via the Project Properties dialog menu by clicking the Configure Flex SDKs link, which takes you to the Installed Flex SDKs preferences.
Happy Flexing!
I have been using the new AIR Update Framework in all of my new AIR applications in place of my UpdateManager that was originally written to handle application updates before the Adobe version was released.
The simplest way integrate this framework into your application is to setup your local configuration file with the checkForUpdate property set to false and all others set to true. This property is not telling the framework to never check for updates, it is simply telling the framework to hide the check for update dialog from the user so they will only see a dialog if an update actually exists.
In the sample below notice that the only other property that is necessary is the address of the remote update file. This local configuration file will ship with your application.
The remote file contains only a few properties. Notice the sample below where I have set a version property, url to the newest application file, and a small description which will display in the release notes section of the updater dialog.
Finally, within the application do the following:
Create an instance of the updater on line 8
After the application completes, I set the path to the local configuration file within the init function.
Next, I add an eventListener to listen for when the updater is initialized.
Within the eventListener function, I then call the checkNow() function.
Since, we hid the first dialog, the updater will now check for the update and only show the user a dialog when an update exists (see image below). If so, it will then walk them through the rest of the update process.
Here is the full application code:


The battle for Olympic gold in the global video streaming event is well and truly under way. With Microsoft having a head start in partnering (*ahem paying*) with NBC to deliver 2,200 hours of live, interactive video, plus integrated broadcast coverage. Their NBCOlympics site will have massive spikes of traffic based on the hotly contended events, as well as peak viewing periods.
With the eyes of the world closely scrutinising their offering. It goes without saying, that what ever is produced needs to be designed for performance and deliver a brilliant user experience. This being the case, NBC and Microsoft have teamed up with UX glitterati Schematic to design the Silveright based NBCOlympics Player application. The application will offer users the ability to switch between multiple live streams (i.e. cameras), and multiple events simultaneously, as well as offer enhanced picture-in-picture, and interactive features for all users watching at any given time.
Whilst it has been widely reported that NBC will be forcing users to download Microsoft’s Silverlight player in order to see live and on-demand video. This is not necessarily the case. Of course Microsoft would prefer users to download Silverlight in order to get the best user experience, but users who don’t have the plug-in, or choose not to use it, will still be able to get stand alone video streams if they have the Windows Media player. Having said that, given that the market penetration of Silverlight is still pretty low, Microsoft are obviously hoping that the Olympics will be the face to launch a million downloads. In theory, this isn’t such a bad plan, so long as the technology actually delivers on the promises from from an end UX perspective (which unfortunately it didn’t in my small focus group).
Despite having Silverlight installed on our Macs, when we attempted to view/test any streaming content via the NBCOlympics Player our browser(s) continually crashed. Additionally, if you’re not running Windows Media Centre, or are on a Mac, you won’t be able to access NBC’s online Olympic video centre (NBC Olympics On The Go) either. According to TVTonics’ site if you don’t have the following system requirements (below) you can forget about any streaming (or on-demand) video.
System Requirements
*Update* according to comments left over at TechCrunch - Comcast, Cox and others users whose ISPs throttle their downloads, or users on Timewarner and others who have metered bandwidth charges won’t be able to tune in either.
All-in-all, the fact that NBC, and Microsoft have seen fit to restrict the availability of a global sporting event in this manner is pretty disappointing from an end user perspective. Personal annoyances/disappointment aside, as an advocate of rich internet applications, and the genuine benefits they bring end users, I wish NBC/Microsoft every success with this endeavor - and honestly hope we don’t see a repeat of the Microsoft/Mosiac strike out earlier this year with the US Major League Baseball site.
The bottom line is that if users are required to make the effort to download/install a new run-time (regardless of flavour) to support the viewing of rich/digital media - anything less than a stellar end-user experience will do way more damage to the overall benefits of RIAs (as a whole) regardless of which platform they’re built on.
FotoViewer is a Flex based application that allows you to easily create 3D photo galleries of your photos stores on Flickr or SmugMug.
Its super easy to set one up - you simply pick the style for your photo gallery, then enter in your username for Flickr or Smugmug. The system connects to those photo sites and pulls down your albums or collections. Pick the one you want and you're done.
Here's one that I made of some photos I took in Ottawa a few weeks ago:
FotoViewr - Create your 3D photo gallery
There are a number of different templates that you can use to create the gallery. The one above is the "Wall" layout - they've got 6 in total - Flow, Horizon, Carousel, Floor and Pile are the others.
Once you've created the gallery, there's embed code for you to take an embed in your blog or social networking page, or a link that you can use to email them to your friends. Check it out - its a nicely done Flex app.