Flickr Image Search using YQL and Flex

A few days ago I spotted a Twitter conversation between Simon Whatley and Christian Heilmann which brought YQL back into my mind. In case you don't know, YQL stands for Yahoo Query Language is 'an expressive SQL-like language that lets you query, filter, and join data across Web services'. In short, it's a sort of API to a lot of other APIs, and then some. It's also very easy to use since it's effectively just like SQL. For example you can use this example query to get details about a specific Vimeo video. But not only can you query web services using YQL, you can even scrape HTML pages which do not expose an API - very powerful stuff.

Flickr is one of the APIs that's also supported and I figured that it would be a great addition to one of my products, Scribblar, if a user could get easy access to all the images for a given keyword which are released under a Creative Commons license. Again this is very easy with YQL using a query such as this one.

I've created a simple Flex app which wraps the functionality provided by YQL and the Flickr API. You can check it out here. The source overview is here, and the downloadable zip here.

Flex Help Needed - Issues with Image Canvas

This is what happens when you stand on the shoulders of giants - you don't quite know what you are doing, at least in my case.
I've been working on a way to dynamically load images into a Flex app and set them as the tiled background of a Canvas component. Luckily I spotted creacog's work which I adapted a little bit for my needs. You can see the results here.

So far the image loading and displaying as a borderskin of the Canvas works, but as you can see when you drag the box around is that as soon as scrollbars appear the image is no longer rendered and the Canvas's background color it displayed instead.

I'd appreciate any tips on this. You can see the sources by right-clicking the app or directly from here (the .zip is here).

Feel free to use and reuse this code if you find it useful, and remember to credit who has done the hard work on this.

Flex Skinning Problem using SWFs and Scale 9

I'm saying it's a bug because I think it should work differently to what is happening in my application.
I was trying to create a background image from a Flash MovieClip asset for a Flex UI component (for arguments sake I am using a VBox in this example) and could simply not get the slice-9 grid that I had defined in Flash be picked up in Flex.

I'm using the Flex 3.2 SDK and the only way to get my graphic to scale as expected was to use the original PNG. Anything I tried via the SWF asset would not work, including defining the scale 9 grid in CSS in Flex.

Here's my example app (I used one of Arals' tutorials as a basis). Please view source on my app and tell me why this isn't working, because I do not understand it. What am I missing?

Creating New Flex Locales in OSX

When adding localisation support for my Flex applications I often find myself having to create new locales. This process is not very easy and involves some Terminal/Commandline interactions. I'm posting the necessary details here for anyone who needs them, as well as for myself as I constantly have to look this up.
The problem is that the Flex 3 compiler is pickier than the Flex 2 compiler used to be so any specific locales you would like to support need to be present somewhere in the bowles of your Flex SDK directory. In order to produce the missing files and folders one must compile the existing en_US locale for the new locale (say de_DE) one wants to support. On OSX you need to do the following, in Terminal:

view plain
1// navigate to the specific SDK you are compiling for (such as 3.0.0 in this example)
2cd '/Applications/Adobe Flex Builder 3 Plug-in/sdks/3.0.0'
4// use the copylocale tool to compile/copy/godknowhatitsdoing
6sudo bin/copylocale en_US de_DE

Last step: in your Flex project properties under Flex Compiler > Compiler Options add the new locale so it gets compiled:

view plain
1-locale=en_US,de_DE -source-path=../locale/{locale}

Here's what it should look like:

Straight forward isn't it? No, not really. It drives me up the wall actually. Now please go and file an enhancement request will you?
By the way, the best (and pretty much only comprehensive) page which explains the localisation features in Flex is on Adobe Labs of all places. Well worth a read.

Tip for Debugging Remoting Calls in Flex Builder 3

Imagine the times when Flash Builder (Gumbo) was still in beta, times when the Network Monitor was still only a twinkle in the corner of a Flex engineer's eye. Imagine... your current day job, and a Flex 3 project with a bit of ColdFusion powered Remoting (other Remoting gateways are available) thrown in. Which is going wrong. And you need to debug the Remoting calls.
Ok, that doesn't require much imagination, I know. We know that Flash Builder will make our lives somewhat easier when it finally ships, but in the meantime your boss doesn't allow you to run beta software so what does one do besides coming to work for me? And maybe, just maybe, your boss is really mean (unlike myself) and won't even pay out for a license of Charles. So now what?

I present to you . It's a little tag tat does wonders to your Flex Builder 3 Console, and I don't know why it isn't being promoted much more. I've been using it for quite a while, and while I do not recall how I discovered it I am sure it's never too late to tell the world all about it.

So what does TraceTarget do? In a nutshell it outputs a ton of logging information into your Console when you debug your Flex project, and in particular it tells you a lot about the Remoting calls that you are undoubtedly making. Here's an example of my current project, first without TraceTarget added:

view plain
1[SWF] Users:stefan:Documents:dev:flex:fb3:demo:bin-debug:index.swf - 1,379,424 bytes after decompression
2result getUserDetails
Yeah, nothing basically besides one trace that I out in there to signal the return from CF. Now let's add to the main.mxml file and debug the app again:
view plain
1[SWF] Users:stefan:Documents:dev:flex:fb3:demo:bin-debug:index.swf - 1,383,632 bytes after decompression
2'9670B130-68C5-3D75-D251-3D30C4A99F2E' producer set destination to 'ColdFusion'.
3'F2AF48B3-896A-FA9D-D77A-3D30C4AF2A71' producer set destination to 'ColdFusion'.
4'8495032E-7DE7-49B1-124E-3D30C4EB0643' producer set destination to 'ColdFusion'.
5'8495032E-7DE7-49B1-124E-3D30C4EB0643' producer sending message '17E7B79A-6D4E-21C3-4F67-3D30C4EE538F'
6'my-cfamf' channel endpoint set to
7'my-cfamf' channel settings are:
8<channel id="my-cfamf" type="mx.messaging.channels.AMFChannel">
9 <endpoint uri=""/>
10 <properties>
11 <polling-enabled>false</polling-enabled>
12 </properties>
14'my-cfamf' pinging endpoint.
15'my-cfamf' channel is connected.
16'my-cfamf' channel sending message:
18 body = (Array)#1
19 [0] "abcd"
20 clientId = (null)
21 destination = "ColdFusion"
22 headers = (Object)#2
23 messageId = "17E7B79A-6D4E-21C3-4F67-3D30C4EE538F"
24 operation = "getRoomDetails"
25 source = "api.v1.private.rooms"
26 timestamp = 0
27 timeToLive = 0
28'8495032E-7DE7-49B1-124E-3D30C4EB0643' producer connected.
29'8495032E-7DE7-49B1-124E-3D30C4EB0643' producer acknowledge of '17E7B79A-6D4E-21C3-4F67-3D30C4EE538F'.
31'9670B130-68C5-3D75-D251-3D30C4A99F2E' producer sending message '01B287E5-5EF5-1B40-75EE-3D30C648A026'
32'9670B130-68C5-3D75-D251-3D30C4A99F2E' producer connected.
33'my-cfamf' channel sending message:
35 body = (Array)#1
36 clientId = (null)
37 destination = "ColdFusion"
38 headers = (Object)#2
39 messageId = "01B287E5-5EF5-1B40-75EE-3D30C648A026"
40 operation = "getUserDetails"
41 source = "api.v1.private.users"
42 timestamp = 0
43 timeToLive = 0
44'9670B130-68C5-3D75-D251-3D30C4A99F2E' producer acknowledge of '01B287E5-5EF5-1B40-75EE-3D30C648A026'.
45result getUserDetails

Pretty cool, right? You can read more about TraceTarget and other logging frameworks here. But if you just want a quick and dirty way to see some more debug info on your Remoting calls then you could do worse than simply sticking the TraceTarget tag into your main.mxml file and save yourself some hassle. It may not be as slick as Charles or the upcoming Network Monitor but it can be handy nevertheless. Have fun coding.

Silvafug List of Flex Video Tutorials and Presentations

This page has been sitting on my bookmarks folder for quite a while and it's about time that I post it.
The Silicon Valley Flex User Group (Silvafug for short) have been recording their Adobe connect meetings for some time and the result is a great list of tutorials and presentations by some of the best flex developers in the world.

After all, who better to learn about Flex custom component development from than Doug McCune? Or hear Ted Patrick talk about Events?

The full list - which is likely to be growing - can be found here. Enjoy.

Flex Whiteboard Component for RED5 Now Available

I'm proud to announce the immediate release of our Flex Whiteboard Component for Red5. This component is based on the existing and very popular FMS Whiteboard Component which has been ported to Red5.
I will shortly be adding more details to the product page but since the clientside API is essentially identical to the existing FMS component there is little to say other than that we now have a separate Red5 version :)
Once again I am standing on the shoulders of giants and all credit goes to my friend Darren who has not only written the original FMS version but also ported it to Red5.

The component consists of a SWC for use with Flex plus full sources for the server side, in this case written in Java. The price is $499 which is the same price as for the FMS version. We do also offer a source code licence to selected clients. The component version is sufficient for most use cases though.

Feel free to contact me if you are interested in this component or its sources.

Using The New FLVPlayback 2.5 Component in Flex

Alongside the recently released Flash Media Server 3.5 and its Dynamic Streaming and DVR capabilities Adobe have also pushed out an updated version of their FLVPlayback component. As Andrew Shorten explains, this component can be used in both Flash or Flex since it is not based on UIComponent. In short, FLVPlayback brings a more fully featured video component to Flex (dare I say finally), and while most of us have a love-hate relationship with this baby it's certainly good news for the platform, and you no longer have to 'port' your Flash based FLVPlayback component to Flex now (as I did here).

I gave the component a quick test drive and wrapped it into a Flex project that you can download and try yourself. The demo below uses FMS for streaming, the downloadable project uses a progressive download. Note that I'm using Oleg's excellent Swfobject 2.1 Flex template and I added the allowFullScreen parameter for this example and removed the history management (not really needed for a plain video player). Sources here.

Using NetStream.send Callbacks in AS3

I've recently decided that I should post more tips and tricks on this blog. I get a lot of emails and also answer questions on mailing lists that contain information that may be hard to track down (or in the case of email replies impossible) and would be better posted publicly on a blog. Here's one I'd like to start with.

Question: I have been trying to use your tutorial on the NetStream.send function and am getting frustrated. I have been researching this for the past couple of days and not finding any answers.

› Read Full Article

Flash Platform News from Flash on the Beach

As you may know I am spending the main part of this week at Flash on the Beach in Brighton. If you don't know what Flash on the Beach is, it's the biggest Flash (and Flex, AIR etc) conference in the UK, if not Europe. It's also the best conference of the whole year in my calendar. I presented my session on monday right after the keynote so I am now free to enjoy the conference fully. While attending some of the sessions I gathered a few interesting bits of information, some of which may not have been public knowledge before.

› Read Full Article

Previous Entries / More Entries