Flex Toggle Switch Spark Skin

With Flex 4.6 Adobe introduced a new mobile component called the ToggleSwitch. This is a toggle button that uses an interaction paradigm made popular with the iPhone. Unfortunately it is a Mobile component and using it in a desktop application or anything under Flex 4.6 requires some workarounds. In addition, as it's designed for a mobile context the skin is not written in MXML but rather in pure actionscript. This makes customizing difficult.

These limitations made me to decide to write a Spark skin for a Spark CheckBox that functions in the same way. It can be toggled by either clicking/touching or by sliding the toggle. It can be used in any Flex 4 application including desktop applications. That means it also doesn't require Flash Player 11 like Flex 4.6 does.

Read More

Starling Performance Enhancements

I had previously written some performance tests comparing ND2D and Starling with each other. Starling seemed to lag behind quite significantly. Since then the library has seen a couple of performance enhancements. I've posted some new tests below using Starling 0.9.1. It's still slightly slower (especially as ND2D is automatically smoothing the bitmaps) but the changes have definitely brought it up to a respectable speed. I had to increase the amount of sprites from 2000 to 10000 to be able to see the difference.

Read More

Starling Framework Released

Today Starling was released. It's a new open source Flash framework for running 2D content on the GPU. It's Adobe supported and tries to mimic Flash's native display list. It's great news for game developers for whom it is obviously geared towards.

I've recently being doing some work with ND2D which is a similar framework so I decided to write a few tests to compare performance. They all run an animation on 2000 sprites. You will need Flash Player 11 installed to run these.

Read More

Sprite Sheet Animation Tagger

I've been playing around with spritesheets quite a lot recently. During my experiments I used a lot of prexisting spritesheets such as those from the Metal Slug games . Creating animations out of those spritesheets was tedious though as I had to manually mark every sprite's coordinates because each sprite wasn't the same size. And even if all the sprites were the same size, creating animations out of them still took a bit of work. To help with this I created a simple AIR app that allows you to easily create and edit animations from a given spritesheet. 

Once the animations have been marked up you can export the data and import it into your own application to be used. These lets you easily access animations by name.

Read More

How to use Flash Player 11 and Stage 3D in Flash Builder

Stage 3D is only available in the Flash Player 11 beta at the moment and there a few steps to get it working correctly. A few of the last ones tripped me up so I thought I'd list them here for anyone else who is having trouble.

  1. Download and install Flash Player 11 beta
  2. Download at least Flex 4.5 and unpack anwhere
  3. Install Flash Player 11 playerglobal.swc:
    • Download playerglobal.swc (bottom of page)
    • Rename downloaded swc to 'playerglobal.swc'
    • Place playerglobal.swc into Flex SDK folder under /frameworks/libs/player/11.0
  4. Install Flex SDK in Preferences -> Flash Builder -> Installed Flex SDKS -> navigate to adobe Flex SDK
  5. Create a web based Actionscript or Flex Project in Flash Builder with the above Flex SDK 
  6. Go into the project properties -> compiler settings
    • Set User specific version to 11.0.0
    • Add compiler argument -swf-version=13
    • Make sure generate HTML wrapper file is checked
  7. Open html-template/index.template.html and add params.wmode = "direct"; at line 49
  8. Make sure your video card drivers are up to date and are newer than 2009
  9. Lastly right click on any flash content and go to settings and make sure 'Enable hardware acceleration' is ticked.

All those steps except the last 3 are required to compile with Flash Player 11. Setting the wmode to direct, having up to date video card drivers and making sure hardware acceleration is enabled are required for Stage 3D to work. 

Hope this helps.

Native Extensions in Adobe AIR 3

Adobe have just posted a new release candidate for AIR 3, which includes support for the new Native Extensions feature.

This will allow people to create extensions that use a combination of native code and Actionscript that lets applications written in AIR leverage the native system capabilities of wherever it is deployed, in effect extending the AIR runtime.

This capability will allow AIR to:

  • Achieve deeper integration with target devices
  • Incorporate legacy native code in applications
  • Take andvantage of multiple cpu cores
  • Offload calculations to the GPU
  • Achieve maximum performance for critical code

Adobe have also posted a detailed article detailing the specifics which is a really good read.

I think this really helps Adobe's aim for Flash to be the go to platform for creating applications across different systems and devices. It was already pretty good but this takes it to a whole new level. It can now compete with the likes of HaXe which has really been gaining ground recently. And with the inclusion of Stage3D (which is also in AIR 3.0) Flash is also becoming a truly powerful platform for games. All in all it gives me high hopes for the future of Flash.

I'm really excited to start playing with this, and to see what extensions the community is going to build. 

Flash Builder custom metadata for Parsley and FlexXB

Flash Builder 4.5 added code completion for metadata tags. Adding support for custom metadata tags however requires building a swc containing a metadata.xml file outlined in hard to find documentation. They could have just added a preferences panel but this is a good way for developers to include custom metadata info right in their library swcs.

Two libraries I use quite often and leverage metadata tags heavily are Parsley and FlexXB. Neither of them have included this metadata.xml file in their latest releases so I have created 2 extra swcs containing just the metadata info using xml files found here and here respectively. I'm sharing them here in case anyone else wants to use them.

Note that they just contain the metadata info not the rest of the library. I could have bundled it in, but if the library recieves an update that still doesn't include the metadata file it will need to be integrated again.

Predray Application

t seems there have been some issues running the Predray applet with newer versions of the Java runtime. All openGL applets now have to be signed or something. In any case, I thought I'd post some links to download the application so you can run it straight from your desktop. This should have it run faster as well. I also have some fullscreen versions, so if anyone is interested let me know in the comments and I can package them up as well.

Read More

Water Ripples

I've always found water simulations fascinating. Recently I've been playing around in as3 trying to recreate some of this liquidy goodness. Here's a demo showing some of that early experimentation.

This was created using perlin noise, displacement maps, masks, simple shape drawing and a convolution filter. The basis for the mouse ripples came from Der Schmale

Let it sit or mouse over the water to create ripples.

Read More

XML parsing with FlexXB

One of the necessary evils of working with xml in Flash is the mundane task of writing xml parsers. I've written countless xml to object and object to xml functions over the years. That is until I came across FlexXB.

FlexXB is a library for handling automatic xml (de)serialisation within Flash. There are a few xml serializers out there including the XML to Object Mapper that's built into Spicelib which is the core of Parsley (my new favourite application framework). Most of these libraries however require you to write quite verbose actionscript to utilize their most basic functions. They end up being hard to write, read and maintain in my opinion. FlexXB can create mappings this way too, but utilizing it within Flex is where it really comes into its own. There you can easily decorate your classes with simple as3 metadata tags that define the mappings automagically.

Here is an example taken from the documentation:  

This is a simple example on using xml annotations. Only fields that have been decorated with an annotation will be taken into account in the (de)serialization process. Notice the idField attribute. It specifies that this object supports a compact method of defining it in xml, by only specifying the id. The id will be rendered as element or attribute in the owner xml.

[XmlClass(alias="Mock2Replacement", idField="id")]
public class Mock3
{
    [XmlAttribute]
    public var id : Number = 3;
    [XmlAttribute]
    public var attribute : Boolean;
    [XmlElement(alias="objectVersion")]
    public var version : Number;
                
    public function Mock3()
    {
        super();
    }
}

The object has been built as:

var target : Mock3 = new Mock3();
target.attribute = true;
target.id = 5;
target.version = 33;

The resulting XML is:

<Mock2Replacement attribute="true" id="5">
    <objectVersion>33</objectVersion>
</Mock2Replacement>

This makes it so easy to use as classes can be configured inline and most of the time all you need is a simple [XmlElement] tag before a property and you're good to go. If there is ever a whole lot of logic to how an object is (de)serialised all you have to do is implement the XMLSerializer interface and you can do your work in the encode and decode functions. The options at your disposal within the tags gives you lots of power though with support for attributes, elements, array handling, class names, namespaces, virtual xml paths, id referencing, object caching and more. As well as creating mappings for custom objects you can create Convertors for simple objects like Dates that (de)serialize to/from strings.

There are some rare cases where you don't have access to the classes you want to (de)serialize (such as from a swc) which means you can't annotate them. But FlexXB has you covered with an easy to use api for programatically configuring your mappings. There are a few other features of the library such as classes for communicating with web services and object persistence, but I won't go into those here.

The developer recently announced details about an upcoming version (1.7) which will include more robust caching support including a feature I asked for only recently. He has also talked about adding support for xml versioning, which would allow for different xml mappings based on the version specified.

All I can say is this library has saved me hours and hours of time and recommend it highly. I have yet to see something that handles the mundane problem of xml (de)serialization so elegantly.

Wunderkind BVR

For the past couple of months I've been working on a product called Wunderkind BVR.

    

The BVR stands for branded video recruitment and allows for clients to create campaigns and jobs which applicatants can apply for via customised forms, file uploads and video responses through a customisable branded interface.


Our first client is Malibu and they have just launched their campaign to find a Malibu Brand Ambassador using Wunderkind BVR.


malibu-rum-aus-careers.com.au

Expect more updates about this product in the coming months. At the moment only the public facing campaign site has been launched, but there is also an admin site where clients can set up their campaigns, and a shortlist site where stakeholders can vote on potential candidates which is being released within the next few weeks. Once this has all come together it will be open for all potential clients via an automatic signup process.

The application framework for the frontend has come together quite nicely. I think it's one of the nicest frameworks I've ever developed in. It's a combination of Parsley, FlexXB, the Cairngorm Navigation Library, and a bunch of custom code. I might write more about that in a future post.

Camera enabled iPad imminent?

I was just updating some iPhone apps and noticed this interesting update log in Pano

Here is an update to Pano that we made for you. Pano now has beautiful retina graphics thanks to Eric. We've also optimized for any upcoming camera-bearing products (*wink*).

This seems to suggest that the developers know that a camera enabled iPad is coming sooner rather than later. Though perhaps it's just a guess on their part from looking at iOS 4.2.

We know that at least some developers are starting to get early access to 4.2 via another application update log in Epic Citadel which claims it "Fixed performance issues on iPad devices running iOS4 or later." [via: ismashphone.com]