Subscribe
UPDATED (07/04/2010):
I’ve updated the example (and the source code) to reflect some things added in the comments and also added a new stepFade property (see the example).Finally, I’ve also updated the example “content” so it’s more in phase with the season…
Last month I already showed you how cool Flex 4′s new layout system is with my TimeMachine Layout. Pretty much at the same time I knocked together another example, the good ol’ CoverFlow but with my new gig in Paris for Keytree/SAP/Publicis I didn’t get the chance to publish it until now.
Here it is! As usual, just click on the picture to launch it and right-click to see the source.
Flex 4: CoverFlow Layout (click to Launch)
Same disclaimer as for the TimeMachine layout: 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.
Enjoy and Merry Christmas/Happy New Year!
Related posts:
- Flex 4: Animated TimeMachine Layout An example of timemachine-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...
- Refresh Automatically in Flash Catalyst Beta 2: a quick fix A quick fix to activate Adobe Catalyst Beta 2 Refresh...
Related posts brought to you by Yet Another Related Posts Plugin.
(2 votes, average: 5.00 out of 5)
Loading ...
Gilles,
Thanks very much for taking the time to post this – this approach was new to me, and I like it quite a bit.
I have a question if you get some time. I’m trying to add a simple scale to this effect: The idea is that the selected item will be centered and full scale (as you currently have it) but the “previous” and “next” items (to the right and left of center) will be scaled down a bit (say by 0.6 or so). So the items on the right and left will move and rotate (as they do now) but also scale a bit smaller.
Following your code, I’ve added a matrix item – something like:
if( position0 )
scaleAmount = 0.6
matrix.appendScale(scaleAmount, scaleAmount, 1.0);
By adding this matrix.appendScale *after* your matrix.appendRotation, it works…. except, the scaling effect is not tweened. The scale “jumps” between big and small.
I’ve spent some time with the TweenLite library (also new to me.. and quite good!) but I’m not quite seeing what needs to be done.
Any thoughts?
thanks again
You should try something like this instead:
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
{
var numElements : int = target.numElements;
var selectedIndex : int = Math.max( index, 0 );
_totalWidth = width + ( numElements - 1 ) * distance;
_layoutWidth = width;
target.setContentSize( _totalWidth, height );
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.horizontalScrollPosition;
var step : Number = position - ( distance * ( i - 1 ) - target.horizontalScrollPosition );
var posX : Number = position;
var posZ : Number = 700; // Increase/Decrease this number to Decrease/Increase your element "size"
var rotationElement : Number = rotation;
if ( position < 0 )
{
IVisualElement( element ).depth = position;
if ( position > -step )
{
rotationElement = -(( rotation * .01 ) * ( 100 / ( -step / position )));
}
else
{
rotationElement = -rotation;
}
if (( posZ / ( -step / position )) < posZ )
posZ = ( posZ / ( -step / position ));
}
else if ( position == 0 )
{
posX = 0;
rotationElement = 0;
posZ = 0;
}
else if ( position > 0 )
{
IVisualElement( element ).depth = -position;
if ( position < step )
{
rotationElement = (( rotation * .01 ) * ( 100 / ( step / position )));
}
if (( posZ / ( step / position )) < posZ )
posZ = ( posZ / ( step / position ));
}
matrix.appendRotation( rotationElement, Vector3D.Y_AXIS, new Vector3D( 100, 0, 0 ));
matrix.appendTranslation( width * .5 - ( element.getPreferredBoundsWidth() * .5 ), height * .5 - ( element.getPreferredBoundsHeight() * .5 ), 0 ); // center element in container
matrix.appendTranslation( posX, 0, posZ );
element.setLayoutMatrix3D( matrix, false );
}
}
Gilles,
Ah! Perfect. I’m still getting my head around the matrix transforms (for some reason it’s just not intuitive to me, but as you’re demonstrating here, it’s pretty powerful).
Thanks very much!
Hi,
even if the scroller is set to null it is shown. Is there a way to hide the horizontal Scroller ?
Thank you very much for this clean example !
Love and Light
dl
Add this to Coverflow_Flex4.mxml:
2
3
4
5
6
7
@namespace s "library://ns.adobe.com/flex/spark";
s|List s|Scroller {
horizontalScrollPolicy: off;
}
</fx:Style>
I simply placed the other scrollbar above the existing now , but I trt this approach now as well thanks alot !
When I add my own CoverFlowPanelRenderer, the selected item is offset to the right and not displayed in teh center of the List.
I am on now studying the code but I ahvenet founbd it yet.
Where can I set where the selected item is being displayed ?
I tried :
@namespace s “library://ns.adobe.com/flex/spark”;
s|List s|Scroller
{
horizontalScrollPolicy:off;
}
It did not work, I get a message:
“CSS type selectors are not supported in components: ‘spark.components.List spark.components.Scroller”
Be careful with your ItemRenderer offset. If you look at mine you’ll see that I’ve hardcoded the horizontal position (x=”-100″ in the Panel properties). This is definitely not the cleanest approach but I didn’t have time (and still don’t) to find a better one and wanted to focus on the Layout itself.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:local="*"
xmlns:layouts="layouts.*"
viewSourceURL="http://www.flexstuff.co.uk/wp-content/uploads/examples/coverflowlayout/srcview/index.html">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
s|List s|Scroller {
horizontalScrollPolicy: on;
verticalScrollPolicy: off;
}
</fx:Style>
<fx:Script>
// .... the rest of Coverflow_Flex4.mxml code...
</s:Application>
Ok the style woked now, my error was to place it into my custom component in which i placed the Coverflow.
Do you like to have a look on my current progress ? It still lokks somehow odd.
chat ? email?
When my itemRenderer has a with of 100 I set analog to your example my x position to -50
But than the main selected item is still not in the middle of the list.
When I reduce the x value lets say to -150, the selected item is in the middle of the List, but all animated items to the left hand side are broken.
Actually there was an error in my code (one among others). Nothing was really centered. The culprit was the following line in CoverflowLayout.as:
which needed to be replaced by:
Thanks dl for pointing that out.
Thank you very much for your fast reply !
Applying the center fix above result in:
http://img5.imagebanana.com/view/coca8hzn/Picture2.png
Quite close =:)
I recently moved my code over to the final release of Flash Builder 4, and had a minor issue where the items in my coverflow were receiving mouseover and selection treatment (they were turning light blue when selected, and light blue when moused over). Since this coverflow begins as a List, it inherits that functionality (not sure why it wasn’t in my older Flex4 build?)
Anyway (in case it helps other out there since I tried a few things before I got it working) to remove the mouseover and selection indications, I overrode the updateDisplayList function in the itemRenderer. So in the original example:
In the file renderers.CoverflowPanelRenderer.mxml add some script tags and include the following:
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{ }
This did the trick. (and gives you the power to do fancier things if you want)
For what it’s worth I tried a number of other things that *should* have worked – particularly setting the styles on my List to include:
selection-color:transparent;
roll-over-color:transparent;
But Flex seems to translate “transparent” into black… a likely bug..
Anyway, perhaps this will help somebody – and thanks again Gilles for the good work.
Hi Gilles !
First : your coverFlow is great & very intuitive to learn and apply layout.
Second : I’ve a question about depth !
I need to add a alpha (0,5?) on the position “> 0″ and “< 0" and 1 to position "0"
So, I added a alpha variation in "updateDisplayList" like this :
—-
if ( position -step )
{
…
}
else
{
…
}
}
else if ( position == 0 )
{
IVisualElement( element ).alpha = 1;
…
}
else if ( position > 0 )
{
IVisualElement( element ).alpha = 0.2;
}
—-
But this solution “lag”
Any ideas ?
Thx,
Sky
Hi Sky, what do you mean by “lag”?
Hi Gilles,
with my fix solution, the central panel have 1 for the alpha value, and the others panels have 0.2. ok.
Now, if i have 7 panels, I would like have :
for “panel -3″ to “0.7 alpha value”
“panel -2″ to “0.8 alpha value”
“panel -1″ to “0.9 alpha value”
“panel 0″ to “1 alpha value”
“panel 1″ to “0.9 alpha value”
“panel 2″ to “0.8 alpha value”
“panel 3″ to “0.7 alpha value”
Sky, I’ve updated the post example with a new property: stepFade. Check it out, I think it solves your problem
Great !
Thanks !
Here’s another approach to the coverflow layout: http://www.rialvalue.com/blog/2010/03/30/flex4-coverflow-layout/
I used to use this in Flex 3. Thanks a lot Gilles for this!!
Is there a way to center the main image when it is rectangular?
It seems to align to the left. I can’t click the previous images anymore….
Thanks
Great job!
Glad to see this being used in an SAP context. I can still recall when I was involved with the publicis presales in Paris with SAP about 1.5 years back to demo Flex usage from SAP.
hi – great stuff – in bottom of updateDisplayList you also need to multiply getPreferredBoundsWidth by .5 to center item:
matrix.appendTranslation( width * .5 – ( element.getPreferredBoundsWidth()*.5), height * .5 – ( element.getPreferredBoundsHeight() * .5 ), 0 ); // center element in container
thx again.
Haudey,
how can I implement a function for choosing a cover on the beginning? The List-index/selectedIndex way does not working! The _index declaration in CoverflowLayout.as too!
Thanks