JavaFX Coverflow Part 2
Tuesday, 26 August 2008
Continuing with our previous example, we now create a CustomNode Coverflows, which contain 11 covers.
A new function called positiveOrZero is introduced so that the tilt angle can be negative.
A fill attribute is introduced to the Cover class and it is bound to the Rectangle.
/**
* Coverflow.fx
**/
package coverflow;
import javafx.application.*;
import javafx.animation.*;
import javafx.input.*;
import javafx.scene.geometry.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.effect.*;
import java.util.Random;
var rnd : Random = new Random();
class Cover extends CustomNode
{
attribute height:Number = 100;
attribute width:Number = 100;
attribute angle:Number = 10; /* 0 to 10 */
attribute fill:Color = Color.WHITE;
function positiveOrZero(v:Number):Number
{
if (v > 0) { return v; } else { return 0; }
}
function create():Node
{
this.opacity = 0.1;
return
Group
{
content:
[
Rectangle
{
width: 100 height: height x: 0 y: 0
fill: this.fill;
effect: Reflection { topOffset:0.0 topOpacity:0.30},
},
]
effect:
PerspectiveTransform
{
llx: bind translateX+0.0 lly: bind translateY+height*2 - positiveOrZero(-angle)
lrx: bind translateX+width lry: bind translateY+height*2 - positiveOrZero(angle)
ulx: bind translateX+0.0 uly: bind translateY + positiveOrZero(-angle)
urx: bind translateX+width ury: bind translateY + positiveOrZero(angle)
}
}
}
}
class Covers extends CustomNode
{
attribute covers:Cover[] =
for (i in [0..10])
Cover {
translateX: if (i==5) {125+i*25} else if (i>5) {150+i*25} else {100+i*25}
translateY: bind this.translateY
angle: if (i<5) {10} else if(i>5) {-10} else 0
fill: Color.rgb(rnd.nextInt(255), rnd.nextInt(255), rnd.nextInt(255))
};
function create():Node
{
this.covers[5].opacity = 1.0;
return
Group
{
content: covers;
}
}
}
Frame
{
visible: true
title: "Coverflow Part 2"
closeAction: function() { java.lang.System.exit(0); }
width: 800 height: 300
stage: Stage
{
fill: Color.BLACK
content:
[
Covers { translateY: 20 },
]
}
}

No. 1 — September 8th, 2008 at 7:05 pm
Hi, thanks for your example. I was planing to do the same thing. Actually it is possible to chain effects in Java FX, since there is one attribute named input of Effect, for example, you can use
PerspectiveTransform
{
input: Reflection { topOffset:0.0 topOpacity:0.30}
llx: bind translateX+0.0 lly: bind translateY+height*2 - positiveOrZero(-angle)
lrx: bind translateX+width lry: bind translateY+height*2 - positiveOrZero(angle)
ulx: bind translateX+0.0 uly: bind translateY + positiveOrZero(-angle)
urx: bind translateX+width ury: bind translateY + positiveOrZero(angle)
}
instead.
No. 2 — October 3rd, 2008 at 8:49 pm
[...] Feature Request: Coverflow for Contacts on the iPhone Saved by sykmyn on Wed 01-10-2008 JavaFX Coverflow Part 2 Saved by lewiscb on Wed 01-10-2008 Lukas: Local.ch Coverflow Clone goes open source Saved by [...]