Subscribe
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...
- My take on Pong using Flex, Away3D, Mate, Degrafa and, uh, Efflex A Flex version of Pong, using Away3D engine, Mate framework,...
- Degrafa: Extend CSSSkin to skin Flex Buttons How to extend Degrafa's CSSSKin class in order to skin...
- CatalystBuilderSync 0.6.2: First public alpha Introducing CatalystBuilderSync, a new tool to simplify exchanges between Adobe...
Related posts brought to you by Yet Another Related Posts Plugin.
(No Ratings Yet)
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 =:)