The blogosphere is flooded with info on Flex 3 and AIR 1.0 today and I won't add much to the noise apart from pointing you here and here to find out more. Great job Flex team!

I've recently started working with Cliff Hall's PureMVC ActionScript framework (an alternative to Cairngorm or ARP for example) and after investing in a day's training and some sit-down-and-read-the-docs time I really started to like it. I believe it fills a gap in the market for coders like myself who know their way around AS, Flash and Flex but who struggle sometimes with implementing a good architecture. And that's where frameworks such as PureMVC come in - they force you into a best practices approach and to me that's exactly what I needed. You end up with an application that is much tighter, better structured and scalable, yet easy to maintain.
PureMVC is a bit of a new kid on the block when it comes to MVC frameworks so it's great to see that it stacks up well against the alternatives, so well in fact that it came out on top during a shootout at the Silicon Valley Flex Users Group (SilvaFUG).
PureMVC is my chosen framework for the time being and I am using for all my current projects.

My friend Darren has once again outdone himself and I'm very happy to be able to offer this Flex Whiteboard Component for sale on Flashcomguru.com as of today.
It is a complete rewrite of our popular Flash Whiteboard component which has been integrated into projects such as DimDim and Aspiringkidz. We hope that the Flex component will have a similar success. I truly believe that this is the best Flex based whiteboard component for FMS available today and it has a massive feature set including many public APIs and an architecture that allows you to specify any Canvas component in Flex as the whiteboard surface. Images are supported and we have even added Flickr integration.

I've set up a dedicated page with more information right here. Please note that automated purchasing is not available right now and you need to email me if you are interested. The contact link is at the top of the page.

A while ago I wrote a post about how Flexbuilder (FB) can be used to write AS3 code for Flash apps. It took a little effort to set it all up but once that first hurdle was taken things were running smoothly. And to be honest who'd want to use Flash's code editor after having used FB for a while?

Not long ago Adobe released the Flex Component Kit for Flash CS3 on Labs. The kit allows you to use Flash content as components in Flex. I've seen that the kit is now part of Flex 3 but for this example I was using Flex 2.01 with this patch applied (although I am not sure if the patch is needed).

First I checked my calendar to make sure it's not April 1st... but no, Adobe is actually going to open source Flex! The blogosphere is already full of it.
From the release: "Adobe is announcing plans to open source Flex under the Mozilla Public License (MPL). This includes not only the source to the ActionScript components from the Flex SDK, which have been available in source code form with the SDK since Flex 2 was released, but also includes the Java source code for the ActionScript and MXML compilers, the ActionScript debugger and the core ActionScript libraries from the SDK. The Flex SDK includes all of the components needed to create Flex applications that run in any browser - on Mac OS X, Windows, and Linux and on now on the desktop using 'Apollo'."
Also here are two video interviews with members of the Flex team. I need to digest this now, I'm blown away - there's just too much happening at the moment and I feel there's more to come. Whatever next - AMF? RTMP? How long before Microsoft copies the move? ;-)

Here's a little Flex component (I called it ExpandingList) that may come in handy when you want to build a people list in Flex - just like I just did. This List allows each item to be doubleclicked and expanded, revealing more info, in this case on a particular user. Another doubleclick closes the item again. The functionality is achieved by using an itemRenderer.
Many thanks to Tink who helped me along the way by suggesting I use mx:Resize and Mike who gave me some tips on the doubleclicking. Well done team :-)

There is however a bug that I can see. When you expand one item and then scroll up and down in the list quickly the items are mixed up, or shuffled around. At least it seems that way as suddenly the expanded item may be at the bottom instead of the top for example. I think I know that this has to do with the way that List items are recycled by Flex but how can I avoid this happening? Any other improvements I could make?

Sample is here, source here.

UPDATE: thanks Mike for submitting one possible fix. Check it here.

Is it possible do set styles via CSS at runtime inside a Flex app? I read about this method on Ted's blog but it appears that I still need to set up and compile the stylesheet upfront, which means I need to know the colors etc that I want to use in the future... To me that seems to be a designtime style, not a runtime one.
Example in hand: I need to build a Flex app that is configurable in appearance via a CMS. I figured that it would be great to use an external stylesheet for this and generate that from the CMS. But reading Ted's post I now realize that Flex CSS styles are compiled into the SWF, not loaded and somehow processed at runtime. Am I correct here? I assume that's the case because when I remove the CSS folder from my bin directory I still see my styles, so the CSS is not external after all...!? Sorry but I assumed it was, at least that's how I expetced it to work.

So what do I do? Do I need to save my styles in XML for example, load the XML at startup and then set colors? I'd call that a step in the wrong direction (the German's have a saying for that which goes somewhat like: 'from behind through the chest into the eye').
Or is this a job for FDS (in which case it's overkill as the rest of the app won't need it). Thoughts? I am sure there are many use cases for stylising Flex apps without having to compile CSS SWFs or even the entire app itself...

According to the Flex docs this is possible: "The VideoDisplay control lets you play an FLV file in a Flex application. It supports progressive download over HTTP, streaming from the Flash Media Server, and streaming from a Camera object."
But how do I attach a NetStream (which is playing my live stream) to the component for display? It seems to only have an attachCamera method and a source property, but no attachNetStream method.
It appears that this component manages it's own NetConnection and one has to feed it with a full RTMP string (which can point to a pre-recorded stream or a live stream): The syntax above works for me if I have a live stream called 'live_stream_name' playing.
But this a bit sucky for my particular app which consists of a broadcaster and a receiver. Both parts manage their own NetConnection (the text chat I'm using needs an NC regardless of video) and the fact that the VidoDisplay component establishes its own connection results in errors (the NC's callbacks I use elsewhere are not found for the component's connection).
What's also confusing is that on the broadcasting side I can use the component just fine via attachCamera and then a separate attach to the NetStream. So the component works on one end but not the other (if that makes sense). There's probably a way of hacking it so that it can use your own NC but that seems to be overkill here.

It would be good if you could pass the component a reference to a playing NS instead of a full RTMP address. For now I'll have to roll back and use a plain Video object to make this work.

I ran into a problem when working on this current Flex app. I wanted to add a binding between a variable and a ListBox component which was located inside a TabNavigator. Whatever I tried threw errors around me, I simply couldn't access the ListBox. It wasn't until I asked Ted Patrick for help when I found out the reason for this issue: instantiation order. Navigators lazily create children by default when the are viewed. My ListBox was on Tab 3 so it wasn't present when I tried to add the dataProvider...
I had to change the creationPolicy on the navigator to all which creates all instances all at once. Bam, the list was there and usable for databinding.

I'm having fun with Flex right now. No, seriously, I do. I know some of you are a bit mad with me for venting my Flex frustrations so to balance the picture let tell you that there's tons in Flex that works really well (as long as you don't need an HBox with a background image and rounded corners ;-). In fact I am making quick progress now and I have come a long way after an initial mountain that I needed to climb
Right now I am building a really cool Flex based FMS app for a client and I have taken Aral's excellent article on code behind as a guide.

I'm just starting work on a Flex project which requires tons of design and color customizations - 20 minutes into it and I am already pulling my hair out. Here's why.
The UI consists of two HBoxes on a Canvas. Each HBox should have a background image and rounded corners - should be easy as both properties can be set via the Flex Properties inspector, in fact I should be able to do it all in Design view.
I first tinkered with a solid background color. The first stumbling block was the fact that the cornerRadius property only renders if borderStyle is set to solid. Thanks Owen for the tip, this would have had me fallen at the first hurdle. I didn't get the memo...
I then moved on to testing a PNG image as the background for the HBox. Adding this was easy - but the corners were no longer rounded. The image now renders across the entire area of the HBox, including the rounded corners.
Can this be avoided? I am aware that I could probably script my way around this in AS (even though I am not quite sure how) but the point is that I shouldn't have to. I've now spent the best part of 2 hours on something that should take 5 minutes... and I still haven't got the look that I need. sorry about the rant but stuff like this really frustrates me.

This is some sort of part 2 of the Audio Chat app I posted a while ago. I have now added the ability to broadcast audio and video for a - in theory - unlimited number of users.

I am sure there are still some bugs and/or usability issues but here it is anyway, ready for testing. I would have posted this a lot sooner but recent weeks have been manic, with several hours each day just answering emails.
Any feedback on the app is appreciated.

Flex Video Chat

I needed to add a background graphic to my Flex app and this turned out to be a lot harder than anticipated. While Flex supports CSS it does not support all the attributes that you are used to from HTML nor does it act in the same way.
Specifying a backgroundImage: Embed(source="/assets/bg.png"); will stretch the image, sclae it or do other weird things with it. I don't understand how this is a usable option for a scalable interface.

I am not the only person with this problem so I Googled and found some approaches (this one being quite tricky), of which one seemed to work, at least a little bit :-).
So I tweaked Jeremy's example a bit and came up with this. It uses Jeremy's approach of creating a BitmapData object and Shape and 'painting' into it with a linked image tile.

You can get my sources here and see the demo here (click the button to show the background graphic). I am open to suggestions and comments regarding this approach, it may be resource intensive (maybe not) although my tests showed only a 200KB increase in memory after the graphic was loaded.

Sounds harsh I know - and don't get me wrong, I love Flex and I'm finding myself developing in AS3 more and more every day. Yet it seems seriously broken at times and I have to put up fights with problems that shouldn't cost me hours upon hours to figure out. I'm not sure if these are Flexbuilder bugs or problems with the framework (bit of both I think) but they are definitely in the way. Rapid Application Development? Not for me, sorry. Applications yes, development yes, but rapid? Nope.
And I can back it up. For starters Flexbuilder seems slow. It's a bad sign when my two fingered coding technique outruns the editor I am working in. Flexbuilder seems to have to play catch up at times, too often for my liking. So no rapidness here.

Will Law is currently trying to figure out how it is possible to access an MP3's id3 information (such as title, artist and so on) using AS3 when the MP3 is streamed via Flash Media Server.
In AS2 this was fairly easy by using an onId3 callback. The Sound Class in AS3 however seems to have no way of associating itself with an MP3 delivered by a NetStream.
Any one got any ideas on this? Using a serverside id3 retrieval method is not acceptable in this case as the implementation needs to work using a standard main.asc file, as included with the FLV Playback component. Basically the id3 info needs to be retrieved client side, not server side.
Please post any suggestions using the comments link below.

I've been playing with Flex (as you may have heard) and I thought to myself 'why not jump in at the deep end and build something that works with Flash Media Server'. What I came up with (and what is work in progress) is this Flex audio chat app. Basically a text chat application which also support push to talk functionality - no video right now, just audio and text.

I've learnt a lot from building this, most notably:

• There is now a client property for objects such as NetConnection and SharedObject, you need this to tell Flex where to direct callback methods to (so there's no more nc.doThis() - oh no). Thanks Owen
• To make individual properties in an AS3 class bindable use custom events for each property. Something like
  [Bindable (ChangeEvent='histChange')]
  public var chatHistory:String = ""
  Thanks Johannes, you are the official Bindings-meister (no, not bondage!), who btw hasn't blogged since October 4th ;-)
• If you are using a custom MXML itemRenderer (I did for my userlist) and want to inject some conditional logic into it, override data's getter/setter (I did in usersRenderer.mxml but couldn't have doen it without Tink, the IM oracle and Community Experts Expert).
• FIXED In order to get a TextArea component to scroll all the way to the bottom programmatically you need to some weird sh*t. One would have thought that verticalScrollPosition = textField.maxScrollV may do the trick but no - this.validateNow(); is needed also.
  BUT STILL: while the last line of text is now visible, the scrollbar won't go right down (see pic). What's going on there? Any ideas? (NOTE: this has now been fixed, check comments for details). Thanks to mr for the validateNow() guidance.
  
  
  So there you go, Flex with live audio, and no I have no idea how well it scales. BTW I am sharing the sources for the text version only - no audio right now as this may turn into a commercial project - sorry. But I do hope you learn a lot from my code and my mistakes, and the audio part should be fairly easy to add.
  
  Check out FlexAudioChat
  

I've taken the Snapshotter off the homepage, you can now find it here.

I know (or want to believe) that this is actually quite easy... it must be. Here's the deal: I want to access an existing ColdFusions component (CFC) from inside a Flex2 app. I'm experienced with Flash Remoting and can call my CFCs just fine from Flash.
Now I'd like to port things to Flex2 but I am having trouble understanding some concepts. I went ahead and installed Flex2, Flex Data Services (FDS) and ColdFusion 7.0.2 on my laptop. First problem: I didn't understand if Flex Data Services was needed or not... I thought ColdFusion 7.0.2 provided some sort of Remoting gateway for flex2 yet this part of the Flex2 docs seems to suggest that RemoteObject can only be used with FDS - I know now that this does not seem to be the case as I managed to call a CFC on my local CF server using RemoteObject without FDS running. So what am I missing? Is the RemoteObject class different from the MXML tag that I am using? And if it isn't then why do the docs suggest 'FDS only'?
Here's the MXML snippet that works fine for me locally using Flex2 and CF 7.0.2 (no FDS running):


I gather that the destination 'ColdFusion' is somehow configured in Flex's services-config.xml - how and why I haven't yet grasped. The 'names' in my RemoteObject tag is the CFC on my local machine and the getname is hte method in the CFc that I call. This works fine, no problem. But I don't understand how I would access a remote CFC using this code... Do I have to edit XML files and create a destination for every site that uses Remoting? That sounds a bit crazy and the XML config scared me a bit...

Please don't laugh, this is a very basic app but I figured that it may help somebody getting started with Flex2, just as I am doing right now. You may have read about my Remoting struggles - a chapter that isn't closed yet.
This little app loads the XML and images from my Snapshotter application and then let's the user navigate through them by clicking previous/next buttons (have fun - you need to click literally over a 1,000 times to see them all).
Usability aside, it's a little widget that seems to work nicely but I'll definitely need to dive deeper into that Total Training Flex2 DVD. Just need to find the time...
What did I learn? Well I now know that if you want to use a Panel component without a title bar then set headerHeight="0"... took me a while to figure that one out.
You can right-click the app to get the source.

PS: Hey Tink, as you can see I haven't got round to doing those transitions yet :-)

If you are new to Flex2 and would like to get up and running ion the basics quickly then you can't got wrong with the new DVD Training course Adobe Flex 2 Rich Internet Applications by Total Training. I've worked through about half of the material so far and I must say that it covers the basics of Flex2 very well. Presenter James Talbot walked me through the Flexbuilder IDE, covered basic MXML components including properties and methods as well as layout containers, viewstacks and more. He then moves on to remote data integration via XML and more complex processes.

Note though that if you consider yourself an intermediate Flex user then this DVD may not be for you. Instead it is better suited to Flex newcomers which have some understanding of Flash and Actionscript. Flex2 is a vast subject matter and it is obviously not all covered on one DVD. What is covered well are the basics of Flex2 development and that is the objective of this training course. On this basis I rate it 8 out of 10, losing 2 points not for the content but for issues with the integrated player and setup process.

Adobe Flex 2 Rich Internet Applications is available now via the Total Training website at a price of $149.99

Thanks to Ted I have now fixed the little XML-driven List which displays images from my Snapshotter app. I'd still like to figure out how to cache images (does a Flex app cache images at all, I mean outside of a Listbox for example?) or at least get rid of the disappearing image effect when scrolling quickly side to side. It just doesn't seem very tidy. I'm not convinced a List should behave like this - once I've loaded some images in there I'd expect them to stay there, no matter how quickly I scroll... It's just not very usable when you don't see the content you are scrolling to.

I kind of get the point that Ted is making about larger memory footprints when caching images but I have to be critical here and say that a browser handles this better than Flex. Can't Flex pass this onto the browser somehow and write it to the temp internet files? Or could the Flex team provide a simple flag for caching (on/off) for these components?

Sorry to rant on about this but the Flex docs mention that the horizontal list is ideal for displaying thumbnail images, for example product catalogues. Is it really? What's actually happening behind the scenes when the images disappear during scroll? Are they reloaded every time? If they are then that's a real bandwidth hog, if they are not then why do they have to disappear briefly? It's got something to do with setValue within Renderers, hasn't it?

Do I really need to build my own image caching logic in order to get rid of an image flickering effect in Listboxes? And how would that work, BitmapData copy of the image as part of a cellRenderer? Not trivial for many people, including myself.

*UPDATE* The sample app is now fixed, see this post

It's been a while since I played with Flex2, I had a go during the beta days but it seemed too much work to get code working again with every release. Combine that with a heavy workload and I had to wait until the release to dive back in again.

Deep breath - I feel a learning curve coming up. My first little experiment involves loading some XML data from my Snaphotter application and displaying the contained images in a horizontal list. Sounds easy enough, unfortunately it wasn't, but then I feel like a total noob when it comes to MXML, AS3 and all that malarky. Thanks to Tink who helped me out over IM so I finally got the XML part working.

You can see the partly finished and buggy app here. You can right-click the app and and choose view source to see my code (click on the canvas not an image to see the view source context menu). And that's the point of this post: please someone out there help me fix the remaining issues, which are: I am loading XML data which gets turned into an ArrayCollection called images.

I then use that ArrayCollection and a simple itemRenderer to populate my HorizontalList. This part seems to work great. However as soon as I click anywhere on the HorizontalList or try and scroll the list I'm getting a runtime error:

ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller. flash.display::DisplayObjectContainer/getChildIndex() at mx.managers::SystemManager/getChildIndex() at mx.managers::SystemManager/::mouseDownHandler()

Not sure why this happens or how I can fix it. Anyone know?

This is not a dig at Adobe but just a quick heads up for anyone listening: if you want to test out some FMS functionality with Flex2 and the Player 8.5 then don't yet use Remote Shared Objects. David Simmons from Adobe Engineering just confirmed on chattyfig that 'the sync/update events aren't happening under the hood.' He was referring to Player 8.5 beta.

I ran into this problem when I successfully hooked up to a Remote SO from within a Flex2 app I built for testing. The Shared Object appears to connect fine but it never actually seems to exist on the server, no SharedObject folder is being created and it's not visible in the FMS2 console either. It also never fires an onSync event. So for now you have to stick to NetConnection and NetStreams with Flex2, they seem to work ok.

Here's my MXML code, based on Brian Lesser's sample app. Note that this contains some redundant code, I haven't tidied up.