In previous posts (Spark pains) I expressed my disappointment with Spark’s lack of functionality versus the Flex 3 mx components it came to replace. Like others, I shared the notion that Spark is half baked, and Adobe should have included a more complete solution in version 4.0 or 4.1, at least for the included components like button or image. Let’s see what is in for us in the upcoming Flex 4.5 (“Hero”).

Spark Button: The return of the Icon

Good news – the icon style is back to Spark button!  After spending a lot of time writing custom skins and specialized classes I was glad to see that the spark button now supports icon out of the box, just like the good old mx button. Too bad it came  late for my recent projects, all using spark buttons, cluttered with custom skins only to achieve the trivial task of putting an icon in a button.

By any reasonable standard, we should have had these  in Flex 4.0 release last year.

I can only reiterate the comment in a post in the Flex Examples blog: all that to get what we’ve had for years in Flex 3.  I really am glad these basic features are back, but was it really necessary to wait over a year to have it back (and require Flash 10.2 player)?

Really, Adobe – is that too much to expect?

Spark Bitmap Image

Another source of frustration for me was the spark BitmapImage. Made to replace mx image, it gave similar functionality… well, almost. No support for runtime loading and display of timeline swfs forced me and my team to fall-back to mx image for no other alternative.

Even worse, the overblown security model made image caching almost impossible to implement. Try constantly loading images from services like flikr and facebook and see what I mean. Policy files, trusted or untrusted domains, nothing seems to work properly. To actually make it possible to access bitmapData, everyone uses a PHP script to bypass the flash player security model – not very elegant.

A Hero to the rescue, Flex 4.5 brings the new and improved  BitmapImage with all of mx image features and built it image caching – Hallelujah!  they even threw in smart scaling and letterbox mode.  It’s too soon to comment on how effective it is since it is still in beta, but kudos to Adobe for doing the right thing.

What more can I say? Better late than never.

The last year has seen a lot going on in the business of flash and game development. Speaking for myself, being a Flex consultant with emphasis on games, I’ve seen this sector gaining momentum as demand started to picked up since late 2009  - specifically here in Toronto. With more opportunities available locally, the environment for a freelance and consulting business is currently healthier. New platforms like mobile (Android) and social (Facebook, Twitter) became prominent this year for Flash and Flex developers as they account for the increase in investment capital for new projects.

Here is a list of things I expect to talk about this year in this blog:

• Developing for Android 2.3 (Gingerbread) and 3.0 (Honeycomb)
• Flash games for tablet devices
• Flash with Google maps and Facebook APIs
• Programmatic animation and effects
• Using Flex 4.5 (Hero)
• Using the new 3D API in Flash

As a final note, here are some of the best articles for this year-end by flash developers on being a freelance developer.

Jesse Freeman – If You Can Make it Here

In this 3 part series  Jesse Freeman  is a detailed account of his ventures in New York City including lots of figures. This three part article is a bit long, but it makes a fascinating read for anyone interested in becoming an independent developer.

If you are short on time, skip to part 3 – where you get a glimpse at the obstacles he had to face, including living in a tiny apartment and dealing with clients that refuse to pay.

Jesse Warden –  State of the Flash & Flex Market for 2010

Jesse warden gives his annual state of the union address and discusses trends in the industry with business perspective.  As always, the comments are just as interesting as the post itself.

Ben Stucki – 2010 Year End Review

In this post the author reveals the revenue numbers of his company, with breakdown of rates, expenses, taxes etc. It’s rare for anyone to expose this kind of data, which makes an interesting read.

That’s it for now. Happy new year for everyone!

This is what I needed:

Basic Image List

First of all lets consider the options. A list can be created by either a DataGroup or a spark List. Both components can display a list based on data provider and item renderer, but there are a few differences, summarized here:

1. List is skinnable, DataGroup is not.
2. DataGroup is much lighter
3. List provides  additional  functionality, namely selection and drag-drop

Since I needed the select functionality I decided to go with the List.

<s:List id="lst1"
          dataProvider="{sampleData}"
          itemRenderer="cc.ImageRenderer"
          rollOverColor="#cccccc" selectionColor="#eeee00"
          width="100%">
       <s:layout>
            <s:HorizontalLayout gap="4"/>
       </s:layout>
 </s:List>

The Item Renderer

Start with a basic renderer from a template: ‘New->MXML Item Renderer’. Add an image control as the main display object, and optionally some background. If you try to run you’ll get a list with static images.

<s:states>
    <s:State name="normal" />
    <s:State name="hovered" />
    <s:State name="selected" />
</s:states>
 
<s:Rect left="0" right="0" top="0" bottom="0">
    <s:fill>
        <s:SolidColor
            color.normal="0x808080"
            color.hovered="{getStyle('rollOverColor')}"
            color.selected="{getStyle('selectionColor')}"
            />
    </s:fill>
</s:Rect>
 
<mx:Image id="img"
          verticalAlign="middle" horizontalAlign="center"
          left="4" right="4" top="4" bottom="4" />

Note that I took advantage of the styles for selection and rollover colors.
Now we add the effect, using the postLayoutTransformOffsets property of the item renderer.

<!--       The Zoom effect      -->
<s:postLayoutTransformOffsets>
    <s:TransformOffsets id="tOffsets"
                        scaleX="1" scaleY="1"
                        scaleX.hovered="1.5" scaleY.hovered="1.5"
                        scaleX.selected="1.1" scaleY.selected="1.1" />
</s:postLayoutTransformOffsets>
 
<!--       Transitions          -->
<s:transitions>
    <s:Transition toState="hovered" autoReverse="true">
        <s:Animate target="{tOffsets}" duration="200">
            <s:SimpleMotionPath property="scaleX" />
            <s:SimpleMotionPath property="scaleY" />
        </s:Animate>
    </s:Transition>
    <s:Transition fromState="hovered" autoReverse="true">
        <s:Animate target="{tOffsets}" duration="200">
            <s:SimpleMotionPath property="scaleX" />
            <s:SimpleMotionPath property="scaleY" />
        </s:Animate>
    </s:Transition>
</s:transitions>

To make the scale work from the center, simply set transformX and transformY to half the size of the renderer. Run the code and see the nice zoom effect on rollover. Works nice overall, but there is one problem – since the items are scaled during the effect, the area for the list is based on the normal scale, clipping the oversized item on the edges of the list. Simply put, we need some more space between the list and its container – which brings us to skinning.

Skinning the list

The default skin for spark list is basically a DataGroup enclosed within a scroll component. Simply adding margins between the list and the scroller will not do – the images would still get clipped. We need to wrap the list in a group, so that clipping can be controlled. Replacing the scroller block with the following code will do the trick.

<!--- The Scroller component to add scroll bars to the list. -->
<s:Scroller left="0" top="0" right="0" bottom="0" id="scroller" >
 
    <s:Group left="0" top="0" right="0" bottom="10">
        <s:DataGroup id="dataGroup"
                     left="22" top="26" right="22" bottom="26"
                     itemRenderer="spark.skins.spark.DefaultItemRenderer">
        </s:DataGroup>
    </s:Group>
 
</s:Scroller>

Final Result

The demo app contains the three different lists to compare the effect of the skin and rederer.
Looking at the final result, we got a slightly modified skin for the list and the item renderer. Most of the effort went on skinning – not bad, considering the list itself and the effect are used almost out of the box.

So I’m taking the opportunity to show off a project I’m involved in that got published recently as a Facebook game.

Lottorace Facebook page

This project is  made of server side and client side. The client side is Flash, and several packages where used to create it. It’s based on Flex 4 with Spark controls, uses Robotlegs as mvcs framework and makes use of Facebook API for connectivity.

As part of my role in the development I had to implement the animations and effects entirely in code – based on prior designs by artists that where done originally as timeline animations.

Game Area

The main game level contains a ‘lotto machine’ that features physics, particle motion and plenty of sequenced effects. To achieve those, I relied heavily on Greensock TweenMax 11 with its excellent plugins as well as home-brew physics code.

The Game

Both the floating balls and the ones falling down the tube have particle physics with some collision, so they bounce off the glass and off each other in a ‘believable’ manner.  For the rest we used TweenMax.

A word on TweenMax: this is by far the best animation/tweening library in the market and I can’t start to imagine how I would do without it. Its really easy to use and produces nice smooth motion with tons of differnt options. If you plan on doing any animation in code you should definitely check it out.

Technically speaking the entire code was designed with performance in mind. There isn’t a single timer in the code (flash timers are bad for you) and only a single point were the ENTER_FRAME event is used. That proved as a valuable decision in regards to performance tuning and memory footprint – for the most part, the game runs in a steady rate of 30 fps.

So check it out here, and comment here if you like it.

I sure had a lot of fun working on it!