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.

16
17
18
19
20

// Setup the matrix
 var centerX:Number = projection.projectionCenter.x;
 var centerY:Number = projection.projectionCenter.y;
 matrix.appendTranslation(-centerX, -centerY, projection.focalLength);
 matrix.append(projection.toMatrix3D());

After that just pass in the matrix and the point to be projected to Utils3D.projectVector(). Then translate the result by centerX and centerY.
Here’s the helper function source, it takes in bounds, the matrix of the object and the perspective projection and returns the projected 2D bounds:

12
13
14
15
16
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

public static function projectBounds(bounds:Rectangle,
 matrix:Matrix3D,
 projection:PerspectiveProjection):Rectangle
 {
 // Setup the matrix
 var centerX:Number = projection.projectionCenter.x;
 var centerY:Number = projection.projectionCenter.y;
 matrix.appendTranslation(-centerX, -centerY, projection.focalLength);
 matrix.append(projection.toMatrix3D());
 
// Project the corner points
 var pt1:Vector3D = new Vector3D(bounds.left, bounds.top, 0);
 var pt2:Vector3D = new Vector3D(bounds.right, bounds.top, 0)
 var pt3:Vector3D = new Vector3D(bounds.left, bounds.bottom, 0);
 var pt4:Vector3D = new Vector3D(bounds.right, bounds.bottom, 0);
 pt1 = Utils3D.projectVector(matrix, pt1);
 pt2 = Utils3D.projectVector(matrix, pt2);
 pt3 = Utils3D.projectVector(matrix, pt3);
 pt4 = Utils3D.projectVector(matrix, pt4);
 
// Find the bounding box in 2D
 var maxX:Number = Math.max(Math.max(pt1.x, pt2.x), Math.max(pt3.x, pt4.x));
 var minX:Number = Math.min(Math.min(pt1.x, pt2.x), Math.min(pt3.x, pt4.x));
 var maxY:Number = Math.max(Math.max(pt1.y, pt2.y), Math.max(pt3.y, pt4.y));
 var minY:Number = Math.min(Math.min(pt1.y, pt2.y), Math.min(pt3.y, pt4.y));
 
// Add back the projection center
 bounds.x = minX + centerX;
 bounds.y = minY + centerY;
 bounds.width = maxX - minX;
 bounds.height = maxY - minY;
 return bounds;
 }

The full source is here projectedbounds.mxml.

This example was compiled with the now oldish 4.0.0.7052 Flex SDK build.

The source code that I used is here. I’ve actually checked it in our flex4test project and therefore the up-to-date source is available from this location (of course it’s outside of the SDK, so it’s not supported )