A couple of weeks go someone who’d checked out the source left a post asking what Rect was for and how it differed from the Rect found in FXG. I thought it was about time I wrote a post to cover it.

I was building a dashboard component for a client a couple of weeks back, much like the one found on the main BBC homepage, or iGoogle, where you can add/removed and rearrange the position of the items shown. Much like those I wanted to show the user where the new item would be dropped with a rectangle that had a dashed stroke, and I wanted to be able to defined this in my skin, in MXML using a dropIndicator, to keep things nice and readable.

The problem is that Flash doesn’t support different stroke types, just different weights, and Adobe’s implementation of FXG also doesn’t allow for different stroke types. It’s true I could have drawn it with a complex Path, but then it wouldn’t have scaled correctly.

So I set about getting some primitive classes together where I could specify custom stoke types the result of which are below. You can also specify custom fill types, although I’m not sure they’ll be as useful as we already have BitmapFill. Using a the lineBitmapStyle() method for the stroke just didn’t cut it as the BitmapData needs to change depending on the direction of the stroke.

I’ve covered the primitives that are included in FXG, but the code is by no means complete and still needs some work to support missing drawing methods, and to fully implement some of the methods that are included.

I’ve also added 2 types of stroke, SolidColorDash (probably the most useful), and SolidColorHatch.

The classes Dash and Hatch can also be used in pure AS if required (props to Senocular where the basis for these classes was lifted).

First up this month, Alastair Dant from The Guardian will be doing a session titled ‘Digital Storytelling’, and following him will be David Fox with a session on ‘Flash Contracting’.

London Flash Platform User Group 24th June 2010 (24/06/2010)

Sponsored by Flash on the Beach & friends of ED.

Some of Flash Player 10.1 new features…

Download Flash Player 10.1

AIR 2

Some of AIR 2 new features…

Download AIR 2
Official AIR 2 blog post by Arno Gourdol
AIR 2 Release Notes (references the list of new features)

Kudos to both teams and all involved!

NavigatorLayoutBase can be considered a base layout class for use with our navigators (NavigatorGroup, Navigator, DataNavigatorGroup, DataNavigator, BorderDataNavigator), but can also be used with the standard Flex 4 containers/controls. I published an example of StackLayout some time ago which lays a container out as a ViewStack (i.e. a single child at a time), which is the default layout class for our navigators.

SemiCarouselLayout has a couple of classes in between NavigatorLayoutBase.

SemiCarouselLayout lays the children out as if they in the front half of a carousel. Means its not a complete carousel it means the number of items can be infinite without affecting the number of visible items. There’s a few options for the layout which are easiest to describe with an example, so I’ve implement the layout with a couple of components below… (drag and drop is still to be implemented)

The source can be downloaded from our Google Code repository, the following classes have been added.

Note I’ve also moved around some of the navigator classes and their skins into more explanatory packages.

We didn’t want to have to change our data objects to hold a hard coded value to check whether the item should be selectable or not as in Steve’s version so I came up with this.

There’s 3 ways you can specify to exclude an item from being is selectable.

The example below shows each of these being used, but you could also use a combination of the 3 methods above to exclude items.

The source can be downloaded from our Google Code repository, the following class has been added.

First up this month, Matt Pollitt & Juan Delgado with on Developing Flash Apps to Run 24/7, following him seasoned LFPUG speaker Richard Leggett is back with a session on the multiplying platform Android.

London Flash Platform User Group 27th May 2010 (27/05/2010)

Sponsored by Flash on the Beach & friends of ED.

We still have places left on our training course The Beginners Guide to Away 3D. To book a place on this course please contact training AT lfpug.com.

First up this month, Jodie O’Rourke with our first session at LFPUG on Adobe’s Open Source Media Framework, following him, with all the talk on HTML5 and JavaScript we have Alex Rogers presenting a session on the JavaScript framework MooTools.

London Flash Platform User Group 29th April 2010 (29/04/2010)

Sponsored by friends of ED.

Also we still have places left on our training course The Beginners Guide to Away 3D. To book a place on this course please contact training AT lfpug.com.

Mega Early Bird and Ultra Early Bird tickets have already sold out. Don’t leave it too late for the Super Early Bird tickets!

We didn’t want to be stuck with the old ModuleLoader and Module based on VBox and LayoutContainer, so here’s our new versions based on Group.

They should work pretty much the same as the mx versions with one change, there is now an additional loadPolicy property.

You can use this property to specify when the ModuleLoader should load its content. This was added to solve a problem I’d ran into a few times with the mx version. I’d have multiple ModuleLoaders in a ViewStack but they would all load immediately and at the same time. It didn’t make sense to load a Module unless the user actually wanted to view it.

ModuleLoader.loadPolicy has 4 valid values

The example above shows 4 instances of ModuleLoader in a Navigator (this means the loaders are only added to the stage when the index is displayed). Each ModuleLoader has a different loadPolicy specified, Once a ModuleLoader has loaded its target a string representing the loadPolicy is added to a Label (note the ModuleLoader with a loadPolicy of “none” will never load its module unless you click on the Button to manually load it).

Thanks to Darrell for his help with these.

The source can be downloaded from our Google Code repository, the following classes have been added.

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.

In Flex 4 UIComponent now has a depth property that is typed to an int. Changing this properties value will change the z-sorting of the items in the display list. Here’s an example…

In the example above there is a HBox and a HGroup, each contain 4 SkinnableContainers that have the same properties. You’ll notice that a depth property has been set on each in the MXML. On click any of the 3 buttons the depth propery of the elements is also affected.

Note that although we can change the depth of the elements in the mx container (or children actually means we are talking mx), the property has no effect at all, yet in the spark container it does, so whats going on here?

With Flex 4 components you are no longer allowed to play with the display list or change a child index directly, instead you manage an extra list of IVisualElements, and internally the display list is managed for you (this means FXG can be managed in an efficient way). The order in which items are rendered in layouts is now based upon the order of the elements in the container, this means that internally the child indices can be swapped without having any effect on the order of the layout.

Yuo do this by setting the depth property of your child elements. The container then runs through the elements and changes their index in the display list (affecting the z-sorting), but because the layout uses the Array of elements for the layout order, the position of items in the layout aren’t affected.

This might not seem that useful at the moment as you probably rarely have negative gaps in your layouts, but when you start using 3D and setting z positions (most probably in layout classes) you’ll see how important and easy to use this new property is. Its also work noting that this depth property works find in a DataGroup, and the classes that use it.