Comments on: Here’s 5 3D Layouts for Flex 4

By: dl

dl — Thu, 07 Jan 2010 12:43:00 +0000

@Ryan Campbell
The Spiral Layout might look very nice animated

By: Flex 4: Random Layout and Step Layout - Mrinal Wadhwa

Flex 4: Random Layout and Step Layout - Mrinal Wadhwa — Sat, 22 Aug 2009 15:04:25 +0000

[...] may want to checkout the ConcentricLayout example I posted last week or Ryan Campbell’s very cool 3D Layouts. Evtim, an engineer on the Flex SDK team also has a some detailed posts on how to write Layouts on [...]

By: viatropos

viatropos — Sun, 21 Jun 2009 03:02:16 +0000

There’s no way you’re going to use Flex 4 over OpenFlux! OpenFlux is WAY better. Full 3D support, full animation support, way easier to customize.

By: Evtim

Evtim — Wed, 17 Jun 2009 19:02:12 +0000

Hi Ryan, yup I see what you mean. The Flex framework doesn’t provide support for automatic animation of the children upon layout/container changes.
For animations within the same layout we recommend animating layout properties to drive the elements on screen.
Layout switching animations are not supported out of the box.
For layout switching with simple cases where you have the same elements showing in both states you can write a small action-script code to animate the elements’ transforms between the two states (run layout in src state, capture src values, run layout in dst state, capture dst values, animate between the two).
For cases involving lists, item renderers and virtualized layouts, things get quite complicated as the item renderer recycling and creation has the possibility to have the item renderer not exist in one of the states or correspond to a different item in the second state.

By: Ryan Campbell

Ryan Campbell — Tue, 16 Jun 2009 17:44:01 +0000

Hi Evtim,

Yes, I plan to do the same with scrolling. For now I could do the same by animating the index property of my layouts.

But what about animating children when changing layouts? That would need to be handled by the Flex framework.

See my old OpenFlux example to see what I mean:
http://www.bobjim.com/2008/04/04/updated-plexiglass-openflux-3d-example/

Ideally setLayoutBoundsPosition/Size/Matrix methods would handle animation for you.

Ryan

By: Evtim

Evtim — Tue, 16 Jun 2009 17:37:22 +0000

Hey Ryan,
These are cool!

On animation and scrolling:

Scrolling – When I created the WheelLayout, I had to override a couple of methods:
1. To abstract the scrolling in the horizontal direction – LayoutBase.updateScrollRect()
2. To implement the step/page on the scrollbar snapping to the elements – LayoutBase.getHorizontalScrollPositionDelta()
3. To be able to know how much to scroll to get a particular item in view – LayoutBase.getScrollPositionDeltaToElement()
4. To make sure that when the scrollPosition changes I rerun the layout – LayoutBase.scrollPositionChanged()

Once I had scrolling, the animation was very easy, I simply animated the scrollPosition from the current one to the scroll position for the element that’s clicked.

-Evtim

By: Ely Greenfield

Ely Greenfield — Tue, 16 Jun 2009 16:00:15 +0000

Love it Ryan!

Its great to see the work on all the new layout features paying off. These layouts are beautiful.

Ely.