First off, I need to thank Ricky Bacon for bringing this to the attention of the Flashcoders list. Click on the image below to see the full-size screen shot, and you’ll see what happens at this particular AOL page when you visit it using the Debug version of the Flash Player. Make sure to read the error message carefully.

Pretty funny, no? In any case, this should serve as a lesson to all of us: Write useful and professional error messages! It was always a good idea anyway, but now that anyone with the Debug version of the player can see what you wrote, it’s an even better idea. Otherwise, one day the joke may be on you…

One of the great advantages that Flash (and by extension Flex) has over Ajax is that you don’t have to worry about browser idiosyncrasies or versions: If your application heavily depends on JavaScript and/or CSS, you could find major issues whenever a new browser version comes out. By contrast, Flash 4 movies that I built 8 years ago still run in the Flash 9 player without issue.

However, that is no longer true for all developers or all applications. There is a significant difference in the way that the Flash 9 player handles swf’s that are loaded in at runtime. Grant Skinner details it thoroughly in this excellent blog post, but to put it succinctly: When you attempt to unload a dynamically loaded swf, the Flash player probably won’t release it from memory.

(more…)

There’s a room in my house that has a pair of old-fashioned wingback chairs set in front of a large Scandinavian bookshelf unit. I like the way this arrangement looks; the graceful curves of the Queen Anne style chairs contrast nicely with the hard, sleek lines of the bookcase. And it would seem that I’m not alone; lots of people like to juxtapose classic older styles with contemporary ones. In order to do this successfully, of course, the older item often needs a bit of work: hardware replacement, scratches and dings filled in, or perhaps a complete refinishing job. But the result is often more than worth the effort. And this exercise is not only aesthetically pleasing, it helps to minimize waste by putting an old item to use that might otherwise have been destined for the rubbish pile.

We now have a somewhat analogous situation in the Flash development world - especially those of us who have been working with the technology for several years. We all have old Flash assets lying around that are potentially useful, but they don’t have all of the functionality we need, and they can’t be imported into ActionScript 3 projects. So what do we do with them?

One answer is to use the LocalConnection class to enable these antiques to communicate with our current projects. With LocalConnection, any two (or more) SWFs running in the end user’s Flash player can send messages to each other regardless of what version the SWFs are compiled to or which version of ActionScript they use.

Suppose, for example, that you are asked to build an application that has a clickable U.S. map. When the user selects a state, a pie chart displays the relative amounts spent on various types of candy bar in that state. Flex Charting can take care of the pie chart pretty easily, but what about the map? Suppose you have an old interactive map built in Flash 5 laying around, and you want to use that rather than building a new one from scratch. Well, that is precisely what was done here:

This application uses a Flash 5 map of the U.S. loaded into a Flex 2.0 application. Just a few lines of LocalConnection code added to the version 5 FLA were sufficient to enable this perfectly useful old asset to communicate with its ActionScript 3 host. Apart from the developer, the only people who could tell the difference between this application and one built completely from scratch are the people who pay the bill - they could see it in the money they save.

As an aside, you’ll also notice that the Flex project included in this application illustrates a few interesting things in addition to the LocalConnection code:

• The use of a custom renderer component to build a custom legend
• Using a custom color palette with a Flex chart
• Using the interpolate effect to animate a pie chart
• An AS3 helper class to read, manipulate, and generate XML data

You can run the complete application here. When the application opens, right-click on it to view and download the source.

Note: The XML data file used for this application is a work of fiction. Any resemblance to actual sales figures or percentages, living or dead, is entirely coincidental.

Enjoy!

Well, I had a three-day weekend right after the conference, and then a very busy week, but I’m finally getting around to posting some of the highlights of day three.

Air Bootcamp

In this 3.5-hour session, Mike Chambers and company walked us through the essential steps for building desktop applications using Flex Builder 3, Flash CS3, Dreamweaver CS3, and the command line compiler. I picked up a number of useful hints and tips, and came away even more impressed with the power and ease of use that Adobe has built into AIR (creating a desktop application from Flash CS3, for example, is insanely simple). However, there are still a couple of weaknesses. For example, Flex Builder 3 still does not support keeping a Web app and its corresponding AIR app in a single project; you need to create a separate project for each application, which can create maintenance headaches. Also, AIR printing is simply Flash printing, so we’re stuck with the accompanying limitations for the time being.

One particularly good piece of news - which was also mentioned in one of the general sessions - is that AIR now ships with database support (SQLite).

Beyond the Basics of LiveCycle Data Services

Jeff Vroom, Adobe’s Principal Scientist, presented a truly brain-filling discussion of LiveCycle Data Services. One useful tidbit is that managed associations are preferred over hierarchical values whenever IDs are available for the referenced objects. I’ll try to write more on this later, because it really merits its own post.

Flex Roadmap

Ely Greenfield blew us all away again. In this discussion of how the Flex team are re-thinking the framework in order to accommodate future innovation, he presented an idea that is simply brilliant. By reducing each component to its essence, and then implementing supplemental features and behaviors as discrete elements (which can often be re-used across multiple components), the framework can become virtually limitless in its potential for extensibility, customization, and innovation. The essence of a button, for example, is a label and a click event. Everything else (e.g. skin) can be left open to modification by the application developer. Using this simple premise, Ely demonstrated how the Flex framework might be changed to enable the application developer (or tool such as Thermo) to create a tremendously engaging UI control from a simple List component. This idea is inspirational not so much because of what it says about the future of Flex, but rather because of the ways we can apply this idea in all of our development work. For more thoughts along these lines, see Anatole Tartakovsky’s post.

I actually wrote the following on Tuesday night, but WordPress was broken so I couldn’t post it. Apparently some files had somehow become corrupt; I re-uploaded them, and now it appears to be working again. Anyway, here are some of the highlights from Tuesday’s sessions.

Building Global Ready Flex Applications

Long-time Adobe employee Craig Rublee gave a solid presentation with plenty of easy-to-follow code samples. He demonstrated the localization process in Flex 2, and then showed two different methods available in Flex 3. In Flex 2, it turns out that you need to compile a separate application swf for each locale (language) that you want to support. This made me sad. However, in Flex 3 you can compile multiple locales into a single application swf, or you can compile locale swfs that have nothing but locale-specific information and load them as modules into your application at runtime. This makes me happy. Of course, the Flash Player still doesn’t support right-to-left text, but as was announced yesterday that will change with the release of version 10 next year. When that happens Flash and Flex will have complete localization capabilities. Meanwhile, I hope to post some code samples illustrating the different options in the near future.

Continuous Integration with Flex, FlexUnit, and Ant

Daniel Rinehart of Allurent provided a good introduction to FlexUnit, Ant, and continuous integration for those who weren’t familiar with them. He then stepped through the process for automating the build, testing, and publishing processes using Antennae. I was pleased to see that the best practices that Daniel (and Allurent) promote via Antennae are consistent with our practices at Eye Street. I also noticed that Daniel does his development work in emacs, which should make Ryan McGeary happy.

Building Rich Internet Applications with Cairngorm and LiveCycle Data Services

This presentation was a real shocker. Peter Martin told us that he and the other members of the Adobe Consulting Team are in the midst of a complete re-thinking of the Cairngorm framework. In their recent work with mfg.com, in fact, they dispensed with the CairngormEvent paradigm altogether, and had the View act directly on the Model instead. Peter went so far as to say that they are considering eliminating the Controller. If you’re familiar at all with Cairngorm, then you know that these are radical changes that are sure to offend Cairngorm religionists. For my part, I’m glad that they are thinking this way, because I have been thinking along the same lines (thanks in part to some prodding from Ryan M). I applaud the Adobe folks for their willingness to re-examine their own assumptions and practices, and change direction when they believe they have discovered a better way of doing things.

Update: Steven Webster has made it clear that the Adobe Consulting Team’s “deep thinking” applies only to applications that use LiveCycle Data Services, and not to applications built with service-oriented architectures. (At MAX Matt Chotin had told me privately that he beleived this to be the case, but now it’s in writing.) This is disappointing, because as noted above Cairngorm could use with some trimming down regardless of what’s being used server-side.

Building Accessible Applications with Flex

Andrew Kirkpatrick and John Bennett provided a comprehensive overview of accessibility, touching upon everything from its importance to why it is often overlooked to suggestions on how to sell it to managers and clients. They also presented some clear and simple code samples to illustrate how to implement Flex’s accessibility features.

Thanks to them I finally know why JAWS has non-Forms Mode. Until today I thought that this mode was nothing but a nuisance, since it seemed to me that it rendered the accessibility features in Flash completely useless. However, Andrew and John explained that this mode is required to read text that cannot receive input focus. So, while it may not be the best way of implementing this functionality, at least it does have a purpose. I also learned of Inspect32, a tool that reads and displays the MSAA data that screen readers use so that you can see how your application looks to the screen readers. This provides a great way of testing accessibility without needing to listen to JAWS.

Andrew and John also indicated that they will soon be posting some tools on Adobe Labs that will help simplify building accessible Flex applications, particularly with respect to video.

General Session / Sneak Peeks

There was way too much cool stuff demonstrated and announced to fit in one blog post, so I’ll write more later. For now, let me simply say this: Thermo will blow you away.

As expected, the first day of MAX was full of useful, interesting, and exciting information. Here are some of the highlights from various sessions:

General Session / Keynote

Kevin Lynch announced that an upcoming release of the Flash Player will include support for the H.264 video codec. This was particularly timely for me, because just a couple of hours earlier another attendee told me that he used QuickTime for Web video instead of Flash primarily because QuickTime supported this codec. Along these same lines Flash Player will also support HD video to 1080p.

Emmy Huang and Justin Everett-Church gave a preview of some of the features coming in Flash Player 10, code named “Astro” (don’t you love Adobe’s code names?). Emmy has a video of the talk on her blog, but I’ll just mention the main points here for convenience:

• Advanced text support, including right-to-left text and columns
• Out-of-the-box 3D effects
• Support for custom filters

Customizing the Flex Framework

Deepa Subramaniam did an excellent job on this presentation. There wasn’t a lot of new information for those who are experienced at extending Flex, but I really appreciated her clear and easy to follow style. And I did learn something new: I learned why developers might want to tell the compiler to preserve metadata. I was aware that this compiler option existed, but had no clue as to what it might be used for. Deepa explained that it comes in handy for shops that roll their own testing and / or automation tools.

Flash Player Internals

Jim Corbett and Lee Thomason provided a wealth of useful information about the Player. For one thing, it turns out that the new display list model, which I sort of complained about here, helps to improve performance because it’s array based and doesn’t allow empty layers.

They also pointed out the Flash Player emulates the version of the SWF that is currently playing, so that a Flash 6 SWF still plays like a Flash 6 SWF even if it’s running in Player 9. One consequence of this is that any bugs that existed in Flash 6 will continue to manifest themselves even if the bugs have been fixed in subsequent versions. In order to get rid of the effects of the bugs, the SWF needs to be re-published to a later version.

You may already know that Flash uses retained mode rendering, and that this helps to enhance performance. Well, it turns out that in the case of the Flash player it also precludes multi-threading. That being the case, we won’t be seeing support for multi-threaded Flash apps any time in the foreseeable future. We can, however, look forward to some upcoming improvements to the Player’s performance, including support for multi-core processors and GPU acceleration. There will also be cross-domain caching of the Flex framework code (and perhaps other code signed by Adobe), so that any given client will only need to download the framework once.

Case Study: ESRI Geospatial Application

Mansour Raad of ESRI demonstrated the use of their new Flex API, which is now in Beta. It looks like it will be extremely easy to build geospatial Flex apps with this solution, and the apps are very fast and responsive because they use vector graphics rather than downloading large image files. The only downside I see is that ESRI data does not come cheap, so this solution may remain out of reach for smaller organizations.

BOF: Flex Interface Guidelines

Rob Adams and Narciso Jaramillo introduced a new initiative to raise the bar for Flex UI design and development called Flex Interface Guidelines (FIG). You can read about FIG here. One gem I gained from Rob’s presentation was an acronym for the Windows GUI paradigm: WIMP (I think it stands for Windows Icons Menus and Pointers). For all I know it may be an ancient acronym, but it was new to me, so I enjoyed it.

BOF: Meet the Team: Flex

I didn’t get a lot of new info from this session, but it was really encouraging to see so many members of the Flex team hanging around till 9:30 PM and later to answer our questions. It speaks well of Adobe’s commitment to their user base, and the character of the people on the team.

BOF: Flex Component Panel

I learned (or was reminded?) of a cool site for Flex skins: scalenine. Check it out, if you haven’t already.

Partner Pavilion

I enjoyed talking to some of the Adobe partners at their respective booths, and it was great to learn a little about the cool stuff they’re doing. It was particularly nice to meet folks at Universal Mind who are friends of my friend Harris. They also had a good blues band (didn’t get the name) at the Sponsor Reception.

Free Stuff!

I really liked the free stuff that they gave me. I got several cool things from Adobe and partners, but one item deserves special mention: the green foam hand that I got from HostMySite. It’s not every day that I get one of these babies!

There’s more that could be said, but it’s wa-a-a-ay past pumpkin time, and I don’t want to sleep through breakfast tomorrow (which reminds me - the food was great).

As you’ll see in this new sample app, I’ve been having fun playing with Flex Component Kit for Flash CS3. The new app has some important features that my sample app for part one did not have:

• The movie clip in the FLA extends a custom class (defined, of course, in a separate AS file).

• The SWC dispatches a custom event that is handled in the Flex code.

• The SWC exposes a public API (properties and methods) that is accessed from the Flex code.

Overall, there is more interaction between the SWC and the Flex app, and yet at the same time they are more loosely coupled (the Flex app no longer specifies the view state of the SWC).

In the course of putting this demo together, I ran across a number of bugs and gotchas. These may be documented elsewhere, but I’m listing them here for convenience:

1. At one point, I placed the FLA and AS source in the root folder of the Flex app, thinking it would make distribution simpler. I did not receive any error message, but the Flash component simply refused to appear in the compiled Flex app. Lesson: don’t put your Flash source in the Flex root!

2. When you use external AS files in your FLA, you need to manually set the source attachment parameter in Flex to point to the root folder of your Flash AS files. In Flex Builder, you do this like so:
Open Project Properties -> Flex Build Path -> Library path
Expand your SWC by clicking on the plus sign next to it
Click on Source attachment and click Edit (or double-click on Source attachment)
Enter the path to your Flash source files (or click Browse to navigate and select)

3. In the AS file for the Flash movie clip class, it’s necessary to import flash.display.MovieClip even though you don’t use it in the class. If you don’t import it, you’ll get a compiler error in Flash and an utterly unhelpful error in Flex (see #4).

4. If there’s a problem with the Flash component, you are likely to get a message from the Flex compiler telling you that an “internal error” has occurred. This, of course, is the sort of error message that’s lots of fun to see, because it tells you absolutely nothing yet prevents you from making any progress in your work. Yippee!!!

5. When your Flash SWC movie clip is based on a custom class, you need to take an extra step after running Commands -> Make Flex Component: In the movie clip’s Symbol Properties, the Base class needs to be changed back to flash.display.MovieClip.

6. Flex Builder’s Auto-complete did not detect the custom event defined in the SWC base class, so I had to type it in by hand (ugh!). However, Flex seemed to recognize the event name after it was typed; I didn’t get a compiler error or warning.

7. This one may seem obvious to you, but I didn’t think about it till I ran afoul of it. In your Flash SWC movie clip, you may use a boundingBox to establish your component’s size inside Flex (so that Flex doesn’t keep resizing it when it animates). Well, your boundingBox must be on the stage for the entire timeline of movie clip, or Flex will do really weird things with your component.

Overall, the integration is still more cumbersome and buggy than I would like, but there is reason to hope it will improve as Flex 3 moves through its Betas toward production. Meanwhile, the Flex Component Kit is usable, and it provides a useful tool for building very cool applications.

You can view the demo app here. Usually, all you need to do is right-click on the app to access the source; however, the SWC seems to be interfering with that, at least with version 9.0.28 of the player. If you right-click a few times and can’t get the “View source” option, then click here to get the source. Enjoy!

(In case you’re wondering, the demo app was inspired by an old Far Side cartoon that showed a scientist catching a butterfly and asking for a jar of ether.)

I’ve been playing with the Flex Component Kit for Flash CS3, and it looks pretty cool. I have run into a couple of issues, however.

One issue has to do with the bounding box feature which - in theory - works as follows: When you create a new Flash CS3 file that is to be published as a Flex component, the Flex layout managers treat it as though it is the full size of the Flash stage (which still has the same age-old default of 550 x 400). In order to avoid this, you create a rectangular movie clip of the size that you want the component to be, and give it an instance name of boundingBox. However, in actual practice this does not work if your component includes GIF images that are larger than the bounding box: the portion of the GIF that is outside of the bounding box shows up in the Flex application. Not cool.

The other issue has to do with Flex Builder’s code-hinting and code-complete features. Even though my Flash SWC had all of the appropriate frame labels, Flex Builder didn’t help me out with any code hints for currentFrame. Call me spoiled, but I like it when the IDE helps me out with the spelling of arbitrary language and framework names.

In spite of these disappointments, I’m liking the possibilities here; it looks like it will help to build even cooler UIs. And according to Adobe it’s going to get a whole lot better with Flex 3 - but I’m not going to let myself get too distracted with Flex 3 until Flexmaniacs is over.

I’ve put together an extremely simple demo - simple enough that I think it should be self-explanatory. However, these things always seem simpler to the author than they do to anyone else, so feel free to post any questions or issues that arise. I hope to take the demo a step or two further, and will make the results of my experiments available with future posts.

• Click here to view the demo app. When it loads, right-click on it to view and download the source.