Archive for March, 2010

Flex 4: UIComponent.depth

Wednesday, March 31st, 2010

Do you remember using MovieClip.getDepth() & MovieClip.swapDepths(target:Object) in AS 1.0 and 2.0. This was how we used to work with the z-sorting of MovieClips. Oh the joy!

With the release of AS 3.0 depths went out the window and the display list was introduced, the index of the child denoting the z-sorting of the DisplayObjects. This works fine but can be tricky to manage if the z-sorting is changing as you don’t have a continous way of accessing the same DisplayObject via an index, unless you push all the children in another Array to use as this reference.

Flex 3 also uses the index of items in the display list for layout purposes. For instance a VBox will render the child at the lowest index at the top, and the child at the highest index at the bottom. If for instance you had a negative verticalGap, you were constrained to the index with a higher index in the display list overlapping those at a lower index. If you change the index of a child to bring it to the front, its position in the VBox was also change.

Flex 4 re-introduced depths.


The Beginner’s Guide to Away3D

Tuesday, March 30th, 2010

LFPUG have teamed up again with Rob Bateman to offer another training session on Away3D in May titled ‘The Beginner’s Guide to Away3D’.

This is a personal (maximum of 14 attendees), hands-on, 2 days training with an Away3D co-founder and lead developer.

The Beginner’s Guide to Away3D.

Flex 4: Navigator

Wednesday, March 24th, 2010

In a couple of previous posts I introduced DataNavigators and their skinable counterparts…

Spark: DataNavigators
Spark: DataNavigators – Elements instead of ItemRenderers

In the later of the 2 posts I showed how you can use a DataNavigator with IVisualElements instead of using itemRenderers so that each element can be an instance of a different class (spark.components.DataGroup & spark.components.List can be used in the same way). This achieves deferred instantiation of the elements.

To do this you had to set the itemRenderer property to null, and then add you elements to the component, but have them wrapped inside an ArrayList. The 2 steps weren’t ideal so I thought I get together a Navigator class that got around this, enabling you to use it as expected.


Non-embedded Assets & Spark BitmapImage

Monday, March 22nd, 2010

Steven Shongrunden of Adobe made a post on this subject last week which I commented on, but I was unable to post the MXML code in the comments.

I thought it would be worth posting it here, to show an MXML only version.


London Flash Platform User Group March 2010

Friday, March 19th, 2010

Massive thanks to Mathieu Gosselin for his session last month. As usual you can find the videos, presentations and source files in the presentations section (apologies I forgot to press record for my presentation).

First up this month, all the way from Stockholm, Bartek Drozdz will be doing a session on ‘Flash & Unity3D’, and following him keeping a 3D theme will be regular Rob Bateman with a session on the Away3D library.

London Flash Platform User Group 25th March 2010 (25/05/2010)

Sponsored by friends of ED.

Spark: Alert

Thursday, March 18th, 2010

Spark doesn’t include an s:Alert control and I’d put one together previously as a bit of test so I thought I’d push it out there.

It differs in its use from the mx:Alert in that you can add whatever buttons you want instead of being limited to a single set of predetermined flags (you can create you own predetermined flags as constants in a class as used in the example).

The component supports the following SkinParts (all are optional)

  • messageDisplay : TextBase
    - defines the appearance of the message text
  • buttonGroup : Group
    - defines the appearance of the button area
  • iconGroup : Group
    - defines the appearance of the icon display
  • and the following inherited from spark.components.Panel…

  • controlBarGroup : Group
    - defines the appearance of the control bar area
  • titleDisplay : TextBase
    - defines the appearance of the title text
  • The inherits the styles from Panel and adds the following:

  • buttonStyleName
  • messageStyleName
  • titleStyleName
  • On clicking a button the Alert removed itself and dipatches a CloseEvent specifying the index of the button click in CloseEvent.detail.


    Spark: DataNavigators – Elements instead of ItemRenderers

    Friday, March 12th, 2010

    In the previous post I gave an example of our DataNavigators in action as you would expect them to be used, with a dataProvider and ItemRenderer but you may well be asking…

    I want navigators where all the elements can be different, not driven by data all using the same ItemRenderer.

    This is the obvious usage of navigators as we know them (ViewStack, TabNavigator).

    Well DataGroup has a sneaky little secret. It isn’t just capable or reusing ItemRenderers, its also capable of achieving deferred instantiation on elements defined inside it (thanks to Ryan Frishberg for this info).

    To do this you set the itemRenderer property to null, the add your elements inside an ArrayList. Using this method its only when the element is required to be displayed that it is created.

    Unfortunately this isn’t a complete solution as it isn’t capable of handling FXG as an element, it has to be wrapped inside another container.

    I developed a DeferredGroup class to get over this limitation, but its success is dependent on changes to the SDK. I have 2 items in the Flex Bugbase referring to this, so if you would like to DeferredGroup (a Group that supports deferred instantiation and FXG), please go and vote on them…

  • Make it easier to extend Group
  • Don’t not hard code GraphicElement to Group
  • The components used in the following example are the same as the example in the previous post, but instead of using an ItemRenderer and setting a dataProvider the elements that need to be displayed are specified (check the numElements count, compared to the previous examples numRenderers count):


    Spark: DataNavigators

    Tuesday, March 9th, 2010

    At the last LFPUG I did a presentation on Flex 4 where I went through what I thought were the fundamental changes, and they showed some custom stuff I’d been working on. The plan was to then do a post on each slide explaining in a little more detail (which is still the plan), but there’s a few posts that talk about Navigators in Flex 4, and for anyone who visits this blog often you’ll be well aware of how much I use navigators.

    With this in mind I thought I start posting some examples and open sourcing the code I’ve been working on, so today I thought I’d start with DataNavigators.

    There are 3 components to talk about here. They all support virtualLayouts as long as the layout supports it. In building these I’ve ask a lot or questions of what others expected and try to implement the re-usability that is inherent in the spark framework.



    You can think of this to much like a DataGroup with 2 exceptions…

  • the layout must implement INavigatorLayout (a custom interface I’ll cover another day).
  • it implements ISelectableList
  • —————————————————————-


    You can think of this much like a SkinnableDataGroup, with 3 exceptions…

  • the layout must implement INavigatorLayout (a custom interface I’ll cover another day).
  • it implements ISelectableList
  • the SkinPart it uses for displaying content has to be a DataNavigator
  • —————————————————————-


    BorderDataNavigator extends SkinnableDataNavigator adding a border, in the same way as BorderContainer extends SkinnableContainer.


    Here’s an example of the 3 of them in action using itemRenderers: