Subscribe
The new layout architecture in Flex 4 is pretty cool. It’s much much simpler to implement complex layouts than what was possible with Flex 3. So the other day I was asked to develop a TimeMachine-like layout. It eventually ended up being done with Flex 3 but before that I had a chance to give a try with the new layout system.
So I picked a bit of Evtim’s Wheel layout, added a bit of Ryan Campbell’s 5 3D Layouts (who got himself inspired by Evtim’s example), blended the whole thing in my own recipe and ended up with something I thought I should share (source is available by right-clicking on the demo after launching it):
Flex 4: Animated TimeMachine Layout (click to Launch)
It’s not optimized, some things can certainly be done a different/better way, but at least it works reasonably well and gives another idea of how easy it is to implement complex layouts with Flex 4.
Related posts:
- Flex 4: CoverFlow Layout An example of coverflow-like layout using the new flex 4...
- Flash Builder 4 beta2, Flash Catalyst Beta2 and CatalystBuilderSync? Good to go but… CatalystBuilderSync seems to work fairly well with the new Beta...
- CatalystBuilderSync 0.6.2: First public alpha Introducing CatalystBuilderSync, a new tool to simplify exchanges between Adobe...
- Degrafa: Extend CSSSkin to skin Flex Buttons How to extend Degrafa's CSSSKin class in order to skin...
Related posts brought to you by Yet Another Related Posts Plugin.
(3 votes, average: 5.00 out of 5)
Loading ...
Really really cool.
Thanks! Glad you like it
Really really cool
+1
Thanks for sharing, inspired me to start playing with flex 4
very cool!
awesome work!
question – how would one disable the click (inside a panel) that changes the index of panels – as in I want to add functionality to the panel, but the click makes it change index – make sense?
many thanks
Thanks!
And you’re right, I’d forgotten to add the following to updateDisplayList in TimeMachineLayout.as:
if (IVisualElement( element ).alpha <= 0)
IVisualElement( element ).visible = false;
else
IVisualElement( element ).visible = true;
That should fix your problem.
kind of worked
the focus cuts off where the upper panel/layer is – for example I have a start / stop button to play a youtube clip – the stop button works, the play (next to stop) button changes the displayIndex (changes the upper panel). Make sense? – can I disable that listener?
also any advice for dynamic ItemRenderes on this one – similar to http://www.themorphicgroup.com/blog/2009/02/20/example-of-feature-rich-dynamic-item-renderers-in-flex-3/
rgds
martin
oops – this was the correct link for the dynamic itemRenderes – http://www.themorphicgroup.com/blog/2008/12/03/using-gumbo-and-itemrendererfunction-to-create-multiple-itemrenderers/
Sounds like a weird behaviour to me. You sure you added my last bit of code at the right place? Your updateDisplayList method should now look like this:
2
3
4
5
6
7
8
9
10
11
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
{
var numElements : int = target.numElements;
var selectedIndex : int = Math.max( index, 0 );
_totalHeight = height + ( numElements - 1 ) * distance;
_layoutHeight = height;
target.setContentSize( width, _totalHeight );
for ( var i : int = 0; i < numElements; i++ )
{
var element : ILayoutElement = useVirtualLayout ?
target.getVirtualElementAt( i ) :
target.getElementAt( i );
element.setLayoutBoundsSize( NaN, NaN, false ); // reset size
var matrix : Matrix3D = new Matrix3D();
var position : Number = distance * i - target.verticalScrollPosition;
if ( position < 0 )
IVisualElement( element ).alpha = 1 - ( -position / distance );
else
IVisualElement( element ).alpha = 1 - ( position / 1000 );
if (IVisualElement( element ).alpha <= 0)
IVisualElement( element ).visible = false;
else
IVisualElement( element ).visible = true;
matrix.appendTranslation( position * horizontalDisplacement, position * verticalDisplacement, position );
matrix.appendTranslation( width * .5 - ( element.getPreferredBoundsWidth() * .5 ), height * .5 - ( element.getPreferredBoundsHeight() * .5 ), 0 ); // center element in container
element.setLayoutMatrix3D( matrix, false );
if ( element is IVisualElement )
{
IVisualElement( element ).depth = -position;
}
}
}
About dynamic ItemRenderers, well, there’s certainly a way to replicate that kind of functionality in Flex 4 but bear in mind that now itemRenderers must extend the ItemRenderer class and their structure is also slightly different.
Some useful readings about ListBased controls and ItemRenderers in Flex 4:
- Using list-based controls
- Using a default item renderer with a Spark container
- Define a custom item renderer
I know i may sound a bit off the topic, but do you happen to know any news about the new html features of fp 10.1 ?
Sorry but no, I don’t know anything specific about those features.
Regarding the animation, could Flex4’s Move3D class be used instead of tweenlite??
You’re absolutely free to use whatever animation engine you feel comfortable with. In Evtim’s initial example he was using Flex 4 built-in animation system which I found overly complicated when I could get off with it with a simple one-line tweenlite code (for some reason he has since removed the animation part of his example). Once again, just use what feels right to you.