Skip navigation

Category Archives: flex

Last month I talked about Ted Patrick‘s “Facebook on The Flash Platform“, an Adobe eSeminar discussing development with the Facebook API using Flash. In particular, I pointed to an open source Actionscript API library to work with in the absence of Facebook themselves offering ‘official’ support as they (then) did only for PHP and Javascript development.

This week though, Adobe and Facebook announced a partnership they’d managed to keep neatly under wraps and have now released a new official open source client library for Actionscript 3.

This joint effort is intended to be a complete resource supporting all Facebook APIs, including Facebook Connect, for all Flash and Flex applications for Facebook.

Over on the Adobe’s Facebook Developer Connection, Adrian Ludwig (Adobe) and Josh Elman (Facebook) talk about the library and the partnership. There’s also documentation, example applications, quick starts, inspiration and code.

Adobe Flash Platform - Facebook Platform | Adobe Developer Connection

In his post, Serge Jespers points to a nice quick start by Danny Dura that uses the library to set up a simple connection to Facebook in about ten minutes.

You can tell both Adobe and Facebook are excited about this, adding social elements to games, user experiences or interactions makes them endlessly more engaging, it almost goes without saying. But now that these experiences can be as easily enabled – and in my opinion, enhanced – by Flash, I hope will prove to facilitate some great applications.

It’s equally beneficial for Facebook and Adobe. It means even more applications for the Flash platform and an easily entry point for yet another set of developers to integrate with the Facebook API.

And to help kick that off, Rich Tretola at InsideRIA has announced a new series of articles covering development with the new AS3 library, authored by Mirza Hatipovic – an ambitious 20 articles, from a simple Hello World to advanced PHP and database-supported applications.

I’m particularly looking forward to seeing and playing with the Facebook Connect API – not sure if InsideRIA will cover these – but hopefully whatever I do get up to, I’ll get round to writing about.


Ted Patrick has posted a recording of his Adobe eSeminar “Facebook on The Flash Platform” that he presented last Thursday.

Josh Elman, Facebook Platform Project Manager, joins him – offering a little technical history and strategy behind the application platform and Facebook Connect also.

Facebook on The Flash Platform

It’s a good introduction to building Flash applications using the Facebook API. It’s clear that building on the Facebook platform grants developers an equal opportunity to create powerful and successful social experiences.

As Ted and Josh describe, by utilising Facebook users’ social contexts and by the ease of which you can distribute through the social graph, applications can generate a huge amount of traffic – and as Josh puts it, developers can profit wildy. 😉

Ted gives a simple overview of the architecture of a Facebook application, the various application states and talks about FBML, Facebook’s XML mark-up – and shows how to build a simple single-component Flex application that really demonstrates how easy Facebook have made the information retrieval possible via the API.

The Q&A is worth listening to (it starts around 37 minutes), Ted and Josh discuss important development aspects outside of the actual coding – how hosting is managed, handling session keys and such.

But Ted also points to a promising looking Actionscript library designed for Facebook application developers, simply called The Facebook Actionscript API – which definitely sounds worth checking out (no pun intended).

As yet, Facebook only ‘officially’ support their PHP library, but continue to work with developers in the community to support the other languages. Josh claims this will only improve over the next couple of months and through the year – hopefully (it sounded) to develop similar ‘official’ library counterparts.

Ted’s also posted his Facebook on The Flash Platform sample files.

Whilst I’m on the subject of Google and trying to finish half-written drafts hanging over from last year, I thought I’d briefly mention the release of Analytics for Flash.

Aside from capturing all the obvious generic statistics you’d expect from a Flash tracking package – and by being fluidly compatible with the main JavaScript library is capable of outputting all the core functionality of the existing Analytics components – the metrics offered by Google Analytics for Flash can be particularly designed to offer interesting insight into other aspects of your users’ activity you may not first expect. For example, you can collect data that can help you gauge levels of usability or (kind of) the implementation of design success. Seemingly you can monitor the behaviour of the users’ interaction during their visit too – as well as the length of the visit itself.

It’s all technically possibly, with Google’s introduction of event tracking that can be fired from custom interactions – whether that be a button click or video view or anything else. Along with that, the event can carry a payload, later received by your Analytics dashboard for your interpretation. It sounds simple – but it’s capable of being very powerful.

Previously, tracking your Flash content would be in isolation. That is to say, you could fire a tracking event when a user accesses a page of Flash content, but from there you were blind to their progress until navigating again.

This payload though, not only could detail traffic to specific sections within a Flash application (although in turn, separate events could be created for those) but could return data specific to that user and session. For example, the total time the user has spent in a particular place, or the site as a whole.

Depending on how complex you wish to be (and how many stats you want to trawl though later) this could offer very valuable data. But that data need not only be of value to an agency or advertiser. Counts for clicks on specific buttons aren’t anything new when you want to find out how many people click a ‘News’ link first, or if anyone notices the ‘Help’ button. This can be far more granular – to the point, as above, where the data could be used to inform decisions on say, design or usability.

Take a standard Flash video player as a media component you’re used to seeing on a daily basis. You can easily picture the common control bar. But how many people actually use those ‘Rewind’ and ‘Fast forward’ buttons? Could the design be improved?

Admittedly with Flash video components, you’re unlikely to see those nowadays 😉 – but that (as I’ve picked this example) is the result of user testing, something this kind of tracking can’t replace – Jesse Warden has a strong sense of this in his post about Flash Analytics.

Anyway, the custom events let you send as (overly-) complex amount of data as you wish. Flash of course can be used everywhere, deployed as widgets or embedded on blogs anywhere on the Web. These Analytics though, are part of your application itself. So you can track its usage outside of the original HTML page the previous iteration of Analytics would have restrained you to.

And it’s free! Check out the code repo.

Exactly how search engines deal with the content of Flash-based websites and information in SWF files has notoriously been a bit of a grey area for a long time. Historically, website creators had to battle with clients as to whether the aesthetic potential of Flash was enough a pay-off against their judgement of the importance of this new idea called ‘SEO’.

In July of last year, Adobe announced a collaboration with Google (1, 2) and Yahoo! to develop a new Flash Player technology specifically to enhance the search results of dynamic content in Flash – ultimately, to make the SWF searchable.

But it was unclear how it worked, what it actually did and what provisions the Flash developer or content creators would have to make.

Peter Elst aired his thoughts and agreed as I did, it looked like a ‘backup’ or intermediary solution. There also lacked a standard or recommended approach to deploying the content for this new technology – presuming this new platform hadn’t just become instantly intelligent to all possibly methods of delivery.

Adobe later published an FAQ, but still it wasn’t very technical, so a few developers started experimenting. After seeing Peter’s attempts, Ryan Stewart announced a Flex SEO Contest – an outright declaration that we’re confused but determined to find out what exposure our content has. As well as being a bit of fun. 😉

Dominic Gelineau constructed fourteen test cases, essentially finding every possible way you could contain a simple text string in a SWF file (see 1 – 7 here, 8 – 14 here). He used both static and dynamic TextFields, populated them in various ways, MXML components, standard Flash UI components, whether to use states, etc – covering all the bases across Flash and Flex.

Initially he concluded Google wasn’t really finding anything new, but in a later article for InsideRIA he listed his principle observations:

  1. Most of the content that was on the stage/timeline at compile time would be indexed even if it was outside the viewing area.
  2. The TextArea, Text, ViewStack and custom MXML component in Flex would get indexed if they were in the MXML (the Flex equivalent of being on the stage) but the Label component would not.
  3. Until October, SWF files embedded in the HTML using JavaScript (SWFObject, AC_RunActiveContent, etc) could not be found on Google.
  4. Again until October, anything related to the ActionScript 3 method addChild would not get indexed. As an example, adding a MovieClip from the library with static text in it using addChild method would not show up in Google’s search results. In the same way, using states in Flex wouldn’t work. My guess is that since states uses addChild in its MXML syntax, once compiled it would get converted to the addChild method in AS3.
  5. Finally, any content loaded externally from the embedded SWF file wouldn’t get indexed, but was clearly stated by Google.

Fortunately, Jim Corbett, Flash Player Engineer at Adobe offeres some much-need clarification, answering many of these questions at the Adobe MAX conference this year. The video can be found at Adobe TV, (I’m having problems embedding it with WordPress) – it’s lengthy, and gives a good insight into the Player’s search mechanics.

Last month’s Flash platform group meeting was presented by Michael Plank and Frank Piotraschke from Powerflasher, authors of FDT the Actionscript IDE plugin for Eclipse. One of many features of FDT Frank demonstrated was SWC and SWF(-ish) browsing support.

He opened debate as to whether adopting a SWC or SWF nominated workflow for handling compiled components and libraries is more desirable, presenting methodology for both. Although then a decent excuse for him to show off FDT, each approach has its benefits and it’s good to know how to code both – previously I’d never used SWFs in this way, always choosing SWC files.

To use a SWC as a linked library and access a clip as a dynamic class, establish a linkage in the library to a class definition that does not exist – for example:


When you click the ‘Validate class definition’ tick, you’ll get an alert that the definition cannot be found and it will be automatically generated upon export. Export the SWC and add it to your project classpath and it’s ready to use. Just instantiate it as you would any other class, note the import if your packaging requires it:

import flash.display.Sprite;
import com.hibbins.Clip;

public class SwcTest extends Sprite
public function SwcTest()
var clip:Clip = new Clip();

To do the same with a library from a compiled SWF, you need to load the SWF file containing your assets into the same Application Domain as your loading SWF file. The following diagram represents the classes available to each SWF file considering their respective domains:

Application Domains

The SwfTest class exists within the loading SWF file, the Clip class in the library file (published as assets.swf). Loading the file in to the current Application Domain shared the loaded SWF domain classes within the main class pool:

Application Domains

The following code demonstrates how to do that, then instantiate the class with the getDefinitionByName method:

package com.hibbins
import flash.display.Loader;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.system.ApplicationDomain;
import flash.system.LoaderContext;
import flash.utils.getDefinitionByName;

public class SwfTest  extends Sprite
public function SwfTest()
var loader:Loader = new Loader();
var context:LoaderContext = new LoaderContext(false,


loader.load(new URLRequest(“assets.swf”), context);

private function onLoadComplete(event:Event):void
var ClipClass:Class = getDefinitionByName(“com.hibbins.Clip”)
as Class;

var clip:MovieClip = new ClipClass();

Both are pretty quick ways to handle custom MovieClips from your library dynamically. If you want to add any functionality to the clips you can write their classes using matching definition paths. Be aware though, any timeline actions will be dropped if you do this.

If you really want to keep frame actions, I’ve found two ways – firstly by using frame labels which are maintained elsewhere and coding around those, the other only works with SWC files, creating a class which extends from the dynamic clip class. With the SWC in your class path you won’t have any compilation errors.

As Frank pointed out, SWC files can be a lot heavier when loaded on application startup which can make your main SWF quite large. Using SWF files over SWCs, you can create an sequential load manager or only load them asynchronously when necessary. Also, with SWCs being relatively new in comparison to SWF use, you might have no choice. On the other hand, the SWC workflow is simpler and many IDEs have some form of SWC explorer – FDT and Flex Builder, for example.

There’s also an a shortcut to display the contents of a SWF in the same way in FDT, though it’s undocumented. Hit Alt+Shift+W and you can get an outline view (I don’t think this works on all versions of FDT though). It would be good if when this is better integrated into FDT, the classes are recognised in a similar way to the SWC support for auto-completion – as Tink says in the video, to avoid the ‘flakey’ long line of code that’s easily prone to mistyping.

Presentation slides, source code and videos are now online [via].

Peter Elst recently posted the Sneak Peeks session from the Adobe MAX conference this year. It shows some really good projects, that as the disclaimer strongly advises, may or may not be featured in future releases of the various Creative Suite software:

Serge Jespers presented Nitro, a platform to design, build and distribute Flash widgets ‘on multiple screens’ – i.e. multiple target devices. Intended to create a coherent work flow and end-user deployment environment of ‘widgetized’ Flash content.

There’s a nice demo of pulling a widget directly from a browser to the desktop, detected by the central Nitro widget ‘dock’ which simultaneously synchronised to a mobile device and television. If it’s even half as simple as the demo suggested, then delivering widgets recognised as solid portable, ubiquitous single-purpose applications rather than kitschy or novelty desktop ‘toys’ could very soon be far easier realised.

Meer Meer is a virtual laboratory of browsers, basically a Flex app that runs a variety of coded browsers (of multiple operating systems) on a single server and centralised into a one application. Integrated directly into Dreamweaver, you can render all your local files in each browser with one click of a button. Not only does it offer split-screen views, but an onion skinning mode to overlay browser images without the need of endless screen grabbing (as I currently do) if you play to the pixel. This makes my browser testing posts (1, 2) completely useless, excellent. 🙂

If none of that interests you, just watch Rufus Deuchler presenting Shai Avidan’s Infinite Images and Infinite Panoramas – I won’t even try explaining – you need to just watch, starts around the 55 minute mark.

Also featured was RTMFP Application-level Multicasting, which broadcasts live video with P2P-style distribution methods; Durango, a Flex/AIR framework to easily create mashup applications almost code free; LiveCycle services in combination with CS4; and running server-side Actionscript seemingly without Flex or Flash – the demo didn’t really work out.

Can’t afford Flex Builder? Build your own!

Well, almost. You can get some easy auto-completion, syntax highlighting and simple error checking of MXML scripts with a nifty bit of XSD integration with Eclipse, using an XML Schema doc from an open source project, imaginatively titled XSD4MXML.

The XSD format is the typical extension for XML Schema, a document defining a set of rules to which an XML document must conform. Eclipse can utilise a Schema document then, in combination with some of the baked in plugins – namely Web Tools and the standard XML editor – to offer these benefits.

The XSD4MXML document outlines what properties any given tag can express – at the most basic level for example, an Application tag can have a layout attribute or a frameRate attribute, an HTTPService tag has a url attribute – but it references every attribute, includes inheritance, for all properties, events, methods etc. This document weighs in at 1.2mb, it’s almost 28,000 lines of code.

Combine that with the error checking the standard XML editor offers and the auto-completion when an XSD format is provided and very quickly you’ve got some useful functionality.

So it goes:

  1. Get the latest version of Web Tools. A fresh Eclipse build should come with it, otherwise follow the instructions here. NB: I’m using Europa, the update process is a little different for the new Ganymede release – also, don’t try and get the latest Web Tools version if you haven’t got Ganymede.
  2. Grab the latest version of the XSD4MXML doc.
  3. Open the Preferences panel in Eclipse, go to Web and XML > XML Catalog and select ‘User Specified Entries’.
  4. Click ‘Add…’ and browse to your local copy of XSD4MXML, the namespace should fill automatically when you’ve found it, click OK.
  5. Go to General > Editors > File Associations and add the *.mxml type. Under ‘Associated editors’ add the XML editor.
  6. Still in the preferences, go to Content Types, open the Text type and select XML, again add *.mxml.
  7. Create a new project and MXML file, add the XML header, an mx:Application tag and namespace:
  8. <?xml version=”1.0″ encoding=”UTF-8″?>
    <mx:Application xmlns:mx=””&gt;


  9. Within the Application tag, hit Ctrl+Space for the Content Assist menu and you should see a full list of MXML tags and you’re done.

You can use the Ctrl+Space shortcut for auto-complete on all tags, properties, events, etc. The XML editor should highlight syntax and do a little error checking itself.

Adobe recently beta released a new project codenamed Alchemy.

Alchemy is basically a research project that allows you to compile C and C++ code to run on the Actionscript Virtual Machine (AVM2), essentially, enabling you to utilise compiled C and C++ libraries, ‘as Actionscript’, in all your web applications:

Alchemy is primarily intended to be used with C/C++ libraries that have few operating system dependencies. Ideally suited for computation-intensive use cases, such as audio/video transcoding, data manipulation, XML parsing, cryptographic functions or physics simulation.

It used to be called FlaCC, and was previewed at Adobe MAX last year. Although it’s not intended to produce complete applications, it can run up to ten times faster than Actionscript – although still slower than native C/C++ code.

The Alchemy site at Adobe Labs offers a promising ‘Getting Started’ guide with tutorials for Windows, Macintosh and Linux now that each platform – Flash Player 10, Adobe Air, the Flex SDK and the Alchemy toolkit – are all cross-platform and open source.

I decided to give it a go, working with my preferred development environment running on Ubuntu 8. However, in following the seemingly quite simple steps to compile my first library, I ran across a number holes in the guide and problems in the toolkit.

Alongside my efforts, Tim Crook tried the same on Machintosh.

Unable to get any success from Adobe’s instructions, we took following steps to get Alchemy up and (almost) running:

Set up your environment – make sure you have up-to-date versions of Java, Perl and GCC. Then download the latest Flex SDK and add the bin directory to your system path. If you’ve not done this before, you’ve basically two methods. Firstly get the path to the SDK, mine is at:


Then, to add the bin directory for the current session, execute:

export PATH=$PATH:/usr/lib/flex_sdk_3/bin

Obviously change the path accordingly if yours isn’t in the same place. But you’ll have to do this with every new session you create, because the append is only temporary.

Instead, to add the path automatically you’ll need to modify your login script or bash profile – depending on your system. On Ubuntu 8, I add the above line to the end of of my bash startup file, which I find at:


There are different ways to add directories for various user types – whether for single or multiple users, for the root user etc – there’s a troubleshoot here. You can check whether either method was successful by calling:

echo $PATH

You should see the path appended – there’ll most likely be other directories listed too. Test the path and SDK by running:

adt -version

You should see output similar to:

adt version “”

Which is just your Air Developer Tool version number. You’ll need to restart the session if you’ve modified your bash script rather than modifying the path temporarily.

Then download and extract the Alchemy toolkit, again, mine is at:


Run the configuration file by navigating to the folder using the cd command and execute:


As you’ll be prompted, there’s a set-up that needs to be run every time you login. To achieve this automatically, open up the bash profile again and before the path modification add:

source /usr/lib/alchemy/alchemy-setup

If you’ve followed the ‘Getting Started’ guide – it’s all the same up until now, but here’s where we begin to differ. Restart your terminal session. As far as we found, you’ve no need to modify your path any further. To check whether the set-up did run successfully, turn Alchemy on and check which GCC you are using:

which gcc

You should see something along the lines of:


The Adobe instructions say you’re now ready to compile one of the sample libraries. Navigate to:

cd /usr/lib/alchemy/samples/stringecho

Then run:

gcc stringecho.c -03 -Wall -swc -o stringecho.swc

And you should see some ouput. But I didn’t, neither did Tim – ours both die silently. 😦

After a lot of head scratching a Googling we found a forum complaint that there are some bad symlinks in the current release of the toolkit – and we found them too. There’s two symlinks in /alchemy/bin:

llvm-g++ -> /usr/lib/alchemy/bin/llvm-gcc4-ubuntu-install/bin/llvm-g++
llvm-gcc -> /usr/lib/alchemy/bin/llvm-gcc4-ubuntu-install/bin/llvm-gcc

These go nowhere, so created new links to the correct compilers as follows:

ln -s /usr/lib/alchemy/bin/llvm-gcc4-ubuntu-install/bin/g++ llvm-g++
ln -s /usr/lib/alchemy/bin/llvm-gcc4-ubuntu-install/bin/gcc llvm-gcc

Then try again.

For Tim, success – for me, not so much.

There’s obviously something in the Linux toolkit that’s not in the Macintosh version. Amongst the output I do get though, is the following line:

cc1 error: /usr/lib/alchemy/usr/lib/alchemy/avm2-libc/avm2/AVM2Env.h

So it’s another path issue somewhere that’s causing the duplication – I’m just yet to locate it, or find a way to resolve it. I’m working on it.

This whole project could be incredible, Adobe are strongly encouraging developers to share ported libraries and support the open source ethos.

If anybody has run into the same problems as I, or even fixed them – get in touch!

Update (03.12.08): I’ve since found the fix.

I managed to catch half of an Adobe webcast yesterday, previewing Creative Suite 4. It seems their main focus with the release is to improve workflow, easing the integration through the software family, across the whole suite, and with that improve the production process faced by designers and developers alike.

From the outset, their recent press release promises:

“Hundreds of feature innovations.. Delivering radical workflow breakthroughs that bring down the walls between designers and developers.”

So what were they?

Well from what I saw, there’s more ‘live updates’, some things I’d seen intended for CS3 that never quite made it. There was a good demo of Dynamic Link, their platform to facilitate these, which moved video clips from Premiere to After Effects and back, in this case, without the need to render a thing – a process that would ‘usually take fifteen minutes’ takes fifteen seconds in comparison.

Illustrator can now handle multiple art boards at once, embedding them into a single workspace. Meaning others’ updates are synchronised to your working environment. These could then be imported, for example, into Flash – still in their accumulated state.

A lot of Flash and Flex events I’ve attended recently seem to have presented the same message, their attempts to converge the designer and developer, or at least bring them closer together. The new skinning and design options in Flex 4 (Gumbo) for example, or even Thermo as a complete authoring tool, seem intent on doing this.

But I’m undecided, half of me won’t trust the code any ‘WYSIWYG’ editor writes for me. I wonder if designers might soon experience a similar dilemma – Photoshop CS4 has a ‘content-aware scaling’ tool that determines for you what ‘objects’ in a flat image should be resized, or otherwise maintain ratio. See it in action here.

The other half thinks that Adobe aren’t trying to dictate my working environment to me, or forcing me to change a thing. Instead, more trying to accommodate others that might struggle and/or are new to the software, or in my interest, interactive development.

Colin Moock recently presented the ‘Charges Against ActionScript 3.0‘ at InsideRIA, continuing a discussion into whether Actionscript 3’s ‘hard’ reputation is deserved. He criticised CS3 for making ‘simple interactivity hard’ – his example proves his point, the on() and onClipEvent() handlers are no more. But it’s not so bad, just that even the most simple animations require a little more structure now.

But in comes the demonstration of the new animation features of Flash CS4, including tweening by dynamic bezier-like paths with easy and intelligent ways to modify them, ‘scalable’ timelines which automatically reposition keyframes and even creating ‘skeletons’ for MovieClips to quickly animate what would previously have required tedious dissection and some fiddly manipulation.

There’s even 3D effects in the authoring tool – effects being the keyword. I can’t help but think this is the direct result of the impact and rise in popularity in some powerful open source 3D engines, like Papervision and Sandy. The demonstration didn’t impress at all compared to some of the samples from the aforementioned. I wouldn’t be surprised if in a similar vein, some ‘light’ physics simulation could soon be introduced.

The repeated message from Adobe; what previously took the time of a developer to write parameter-based code, whether for interaction or animation, can now be done by a designer in half the time, what they almost suggest, for half the price – because it’s now twice as easy.

I’m sure there’s some more showings today for southern hemisphere timezones, but a whole load of video tutorials are playing over at Adobe TV that are well worth checking out. Everything else can be found at the CS4 homepage.

I should have mentioned already what an awesome success Flex Camp 08 was a couple weeks back. London’s first go hosting the show, huge well done to the London Flex Platform User Group, the guys at Emak Mafu and everyone else involved in arranging the event. The day was made up of various show and tell sessions, panel discussions and workshops, all for free, needless to say those who couldn’t make it sorely missed out, irrelevant of the free beer and pizza by a long way.

Andrew Shorten, Adobe Platform Evangelist, opened with a keynote similar to Mark Anders‘ recently at 360 Flex (found via InsideRIA), reviewing Flash development since 1993 and looking at the roadmap ahead, toward Flex 4, Gumbo – and tools like Thermo and Degrafa. We got some sneak peeks at Flash Player 10, previously ‘Astro’, not only showing off some cool effects like Pixel Bender, but interestingly with those, further steps made by Adobe toward the more open source development community.

A couple highlights, I enjoyed Justin Clarke and Samuel Williams rattling through their presentation on PureMVC. I’ve used PureMVC before, but as frameworks go, I generally always adopt Cairngorm for the majority of Flash and Flex work, but they’ve definitely convinced me to have another look.

As good was Bryan Hunt of Emak Mafu delivering his brilliantly disgruntled thoughts on working with Flex and Java, something I’m yet to try, but he also touched upon developing with the Spring framework, which I’d recently come across working with Red5 – glad I caught up with him afterwards.

Perhaps the most useful was Peter Elst‘s class on using SQLite and AIR, in which he quickly put together an app with a simple straightforward relational database, using very little MXML and Actionscript, demonstrating the SQL database support in AIR as standard with AS3, as well as it’s capabilities in synchronising with online sources.

I’ve seen a couple requests around for any source code or presentation slides from the day, but I’ve yet to find any – if I do I’ll update here, I’m keen to see them myself.