1. Clicking on any image in the WheelLayout mode will rotate all the elements until the selected item is centered in front. In this animation the layout runs on every frame of the animation.
2. Selecting different layouts from the drop-down will animate the items’ transformation. In this animation the layout is disabled and is not running during the animation.

Animating the Scroll Position

In the first animation I want the selected item to come “in view”. In the WheelLayout I’ve already implemented the standard API that calculates the scroll distance to an item – getScrollPositionDeltaToElement(). Now in the item renderer of the list – FlickrThumbnail.mxml – I detect when the item has been clicked and then create an animation for the scroll position of the parent Group:

protected function itemrenderer1_clickHandler(event:MouseEvent):void
{
    var g:GroupBase = parent as GroupBase;
    var p:Point = g.layout.getScrollPositionDeltaToElement(this.itemIndex);
    if (p)
    {
        var startX:Number = g.horizontalScrollPosition;
        var startY:Number = g.verticalScrollPosition;
        var anim:Animate = new Animate();
        anim.motionPaths = new [
            new SimpleMotionPath("horizontalScrollPosition", startX, startX + p.x, 500),
            new SimpleMotionPath("verticalScrollPosition", startY, startY + p.y, 500)
        ];
 
        var interpolator:NumberInterpolatorWrapping =
			new NumberInterpolatorWrapping(0, g.contentWidth - g.width);
        var scrollLength:Number = interpolator.getLength(startX, startX + p.x);
        anim.interpolator = interpolator;
        anim.duration = Math.max(550, Math.min(2500, scrollLength * 2));
 
        anim.play([g]);
    }
}

One interesting thing to note is that because of the circular nature of the WheelLayout I wanted the animation to interpolate between the values in a wrap-around manner. For example scrolling from the last element to the first element shouldn’t scroll through any other elements since the first and last elements are visually next to each other. For that reason I implemented a custom interpolator – NumberInterpolatorWrapping.as.

Animating Items between Different Layouts

In this animation I wanted all the elements to move and rotate smoothly when I switch between various layouts. In this animation the start position is defined by the current layout and the end position is defined by the new layout. In-between, while the elements are being animated, they really don’t belong to any layout. For that reason, I disable the layout of the container for the duration of the animation using the autoLayout property of the parent Group.

For convenience I transition between the layouts using states:

<s:states>
	<s:State name="tile"/>
	<s:State name="wheel"/>
	<s:State name="vertical"/>
	<s:State name="horizontal"/>
</s:states>
 
<s:List width="100%" height="100%"
		dataProvider="{photoFeed}"
		itemRenderer="FlickrThumbnail"
		id="theList" useVirtualLayout="false">
 
	<s:layout.vertical>
		<s:VerticalLayout horizontalAlign="center"/>
	</s:layout.vertical>
	<s:layout.horizontal>
		<s:HorizontalLayout verticalAlign="middle"/>
	</s:layout.horizontal>
	<s:layout.tile>
		<s:TileLayout horizontalAlign="center" verticalAlign="bottom"
                                      columnWidth="112" rowHeight="132"
				      requestedColumnCount="5"/>
	</s:layout.tile>
	<s:layout.wheel>
		<my:WheelLayout gap="20" axisAngle="{axisSlider.value}"
		verticalCenterOffset="{offsetSlider.value}"/>
	</s:layout.wheel>
</s:List>

Because the elements could be both moved and/or rotated in 2D or 3D, I use a parallel of both effects:

<fx:Declarations>
    <s:Parallel id="myEffect" effectEnd="myEffect_effectEndHandler(event)">
        <s:Move3D applyChangesPostLayout="false"/>
        <s:Rotate3D applyChangesPostLayout="false"/>
    </s:Parallel>
</fx:Declarations>

And finally, when I switch from one layout state to another, I want to run the effect. Now I need to perform the following steps:

1. Make the effect target all of the elements.
2. Capture the start values (the position and rotation defined by the old layout).
3. Switch the layout (by changing the state) and call validateNow() so that all elements are positioned and/or rotated by the new layout.
4. Turn off the autoLayout property so that the new layout doesn’t interfere with the running effect.
5. Run the effect. Note that at this point the effect is going to capture the animation end values – the position/rotation defined by the new layout. I’ve already captured the start values at step 2, so I’m all set.
6. When the effect is done, turn the layout back on.

private function animateTo(toState:String):void
{
    // Make sure any previous animation is stopped.
    if (myEffect.isPlaying)
        myEffect.stop();
 
    // Add targets
    myEffect.targets = new Array();
    for (var i:int = 0; i < theList.dataGroup.numElements; i++)
        myEffect.targets.push(theList.dataGroup.getElementAt(i));
 
    // Create Transition for all elements
    myEffect.captureStartValues();
 
    // Go to the end state
    var fromState:String = this.currentState;
    setCurrentState(toState);
 
    // Validate everything before turning off the layout
    theList.validateNow();
 
    // Turn the layout off before running the effect
    theList.dataGroup.autoLayout = false;
 
    // Play the effect
    myEffect.play();
}
 
protected function myEffect_effectEndHandler(event:EffectEvent):void
{
    theList.dataGroup.autoLayout = true;
}

Note that my demo has one limitation – I needed to turn off virtual layout so that everything works fine. If I have virtual layout running, I’m not guaranteed that the old and new layouts will assign the items to the same item renderers.
Click on the image at the top to go to the demo, where you can select “view source” from the right-click menu to get the code.

Now VGroup and VerticalLayout have a “verticalAlign” property with the three supported values of “top“, “middle“, “bottom“. Accordingly HGroup and HorizontalLayout get a “horizontalAlign” property with the supported values of “left“, “center” and “right“. The alignment modes work for the layouts with and without virtualization enabled.
An important difference to note is that when “clipAndEnableScrolling” is set to “true” and the containers are scrolling (the content is bigger than the container), the Spark layouts ensure that the entire content can be scrolled in view by internally reverting to the “top“/”left” alignment respectively.

When playing with the attached sample, you’ll notice difference between the clipping and the non-clipping containers when scrolling is in effect (drag the slider left to force smaller height for the containers).

The sample was compiled with SDK version 4.0.0.13553, source: MajorAxisAlignment.mxml

Let me show off the end result first:

And the source code is available here.

Update: The source has been updated to compile with Flash Builder / Flex SDK beta 2. I also added a horizontalAlign property, just because I can =)

Adding a Layout Property

I want to implement two properties – a horizontalGap for between the elements within a row, and verticalAlign which will control how the elements within the row are aligned. For the latter, I’ll have “top”, “middle” and “bottom” as options, and of course I’ll have to beef up the FlowLayout to support elements with various heights.

I’ll add the properties directly to the FlowLayout class. When the value changes, I need to invalidate the container which will cause the layout to run its updateDisplayList() and at that point I’ll take into account the new values:

17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

    //---------------------------------------------------------------
    //  horizontalGap
    //---------------------------------------------------------------
 
    private var _horizontalGap:Number = 10;
 
    public function set horizontalGap(value:Number):void
    {
        _horizontalGap = value;
 
        // We must invalidate the layout
        var layoutTarget:GroupBase = target;
        if (layoutTarget)
            layoutTarget.invalidateDisplayList();
    }
 
    //---------------------------------------------------------------
    //  verticalAlign
    //---------------------------------------------------------------
 
    private var _verticalAlign:String = "bottom";
 
    public function set verticalAlign(value:String):void
    {
        _verticalAlign = value;
 
        // We must invalidate the layout
        var layoutTarget:GroupBase = target;
        if (layoutTarget)
            layoutTarget.invalidateDisplayList();
    }

Then I will add a drop-down and a slider in the flowTest.mxml to configure the the properties like this:

22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

    <!-- The slider to control the horizontal gap -->
    <s:HSlider id="hGapSlider" minimum="0" maximum="50"
                         value="10" liveDragging="true"/>
 
    <!-- The drop-down to select vertical alignment -->
    <s:DropDownList id="vAlign" requiresSelection="true">
        <s:ArrayCollection>
            <fx:String>bottom</fx:String>
            <fx:String>middle</fx:String>
            <fx:String>top</fx:String>
        </s:ArrayCollection>
    </s:DropDownList>                         
 
    <!-- A Spark List -->
    <s:List id="list1" width="{widthSlider.value}"
            selectedIndex="7"
            dataProvider="{new ArrayCollection(
            'The quick fox jumped over the lazy sleepy\n\dog'.split(' '))}">
 
        <!-- Configure the layout to be the FlowLayout -->
        <s:layout>
            <my:FlowLayout1 verticalAlign="{vAlign.selectedItem}"
                            horizontalGap="{hGapSlider.value}"/>
        </s:layout>
    </s:List>

Then the harder part – actually implementing the support for these properties in the FlowLayout’s updateDisplayList() method.  Since I’ll need to know the row height before I can decide how to position the elements, I’ll have to replace my original loop with a little more complicated code, something along the lines of:

79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

        // loop through the elements
        // while we can start a new row
        var rowStart:int = 0;
        while (rowStart < count)
        {
            // The row always contains the start element
            element = layoutTarget.getElementAt(rowStart);
            var rowWidth:Number = element.getPreferredBoundsWidth();
            var rowHeight:Number =  element.getPreferredBoundsHeight();
 
            // Find the end of the current row
            var rowEnd:int = rowStart;
            while (rowEnd + 1 < count)
            {
                element = layoutTarget.getElementAt(rowEnd + 1);
 
                // Since we haven't resized the element just yet, get its preferred size
                elementWidth = element.getPreferredBoundsWidth();
                elementHeight = element.getPreferredBoundsHeight();
 
                // Can we add one more element to this row?
                if (rowWidth + hGap + elementWidth > containerWidth)
                    break;
 
                rowWidth += hGap + elementWidth;
                rowHeight = Math.max(rowHeight, elementHeight);
                rowEnd++;
            }
 
            // Layout all the elements within the row
            for (var i:int = rowStart; i <= rowEnd; i++)
            {
                element = layoutTarget.getElementAt(i);
                ...
                // Position the element
                element.setLayoutBoundsPosition(x, y + elementY);
            }
 
            // Next row will start with the first element after the current row's end
            rowStart = rowEnd + 1;
 
            // Update the position to the beginning of the row
            ...
        }

Enabling Scrolling

Now I’m almost done, but I want the FlowLayout to be scrollable. In theory this would mean that I need do the following steps:

1. Add scroll-bars.
2. Hook up the scroll-bars with the layout’s horizontalScrollPosition and verticalScrollPosition properties.
3. Calculate the ranges for the scroll-bars and keep them in sync whenever the values change.

In practice, I can save a lot of work by using a ready stock Spark component – the Scroller. Without going into too much details, the Scroller can wrap a container and automatically put up scroll-bars, keeping everything in sync with the container’s layout.  And since in my flowTest.mxml I’m using a List, the Scroller is already in there!!! It’s a part of the List default skin   Now all that’s left to do for me is actually calculate the ranges for the scroll bars. This is basically the total width and height of the scrollable area of the container a.k.a. the “content size”.

Calculating the content size is easy enough – I’ll just find the maximum extents of all the children while I’m resizing and arranging them in the FlowLayout’s updateDisplayList(). At the very end of that method I’ll set the updated content size like this:

144
145
146
147

        // Set the content size which determines the scrolling limits
        // and is used by the Scroller to calculate whether to show up
        // the scrollbars when the the scroll policy is set to "auto"
        layoutTarget.setContentSize(maxRowWidth, y);

That’s it!