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.
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
(8 votes, average: 4.88 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.
It`s really cool. Is there a new version of this component?
Nope, I’ve been totally swamped with my current contract since I’ve posted this so no update whatsoever. It wasn’t intended to be more than a simple proof of concept anyway.
Very nice.
Any way to get rid of the vertical scroller and make it transparent?
Add this to TimeMachine_Flex4.mxml:
2
3
4
5
6
7
@namespace s "library://ns.adobe.com/flex/spark";
s|List s|Scroller {
verticalScrollPolicy: off;
}
</fx:Style>
Great example! If I needed to get a reference to the currently selected itemRenderer object so that I can add/remove event listeners when it is in front, how can I do that dynamically?
Nice one!! This REALLY helped clear up some questions for me. Great job
Fantastic stuff! Thanks so much for posting this, you’ve sent me hours and hours of trial and error in getting a project off the ground. And as a newbie Flex developer (although not a newbie developer…) I am extremely grateful.
Its so hard for me to see this without lovely images
you should put in some images in these samples they would shine more but great concepts even if i don’t want to see a chart sheet animate
Hehe, couldn’t be bothered at the time. But you’re right, this blog must definitely deserves more love from me (obviously).
hi.
i’ve been playing around with your coverflow component, and it looks really good, but is there any way to optimize the cpu consumption using your component?
i noted that as soon i roll the mouse on the window that runs the component, it calls the methods scrollpositionchanged, updateddisplaylist and update scrollrect, this happens every single time i change the mouse position, or minimize the window and bring it back up.
it seems to me that this behaviour takes it’s toll on the cpu.
any workaround for this?
thanks
As explained, this is not a production grade component, merely a proof of concept. It also lacks virtualisation and could certainly use some optimisation.
The wheeling layout is cool but this timemachine layout is awesome and I like it. I also like to implement it on my desktop.
Is there a way to use different panels? Thanks
Hey, it’s just a layout mate! You can use whatever component you wish as an ItemRenderer.