JavaFX: Pelota 3D con sombra rebotando sobre video

Ok, solo para que vayan descubriendo el poder de JavaFX. Ayer yo no sabía NADA de JavaFX script. Luego de jugar unas pocas horas, ya tengo este ejemplo: Una "habitación" que tiene en el piso un VIDEO y sobre el cual rebota una bola de apariencia 3D, que incluso se aleja del frente de la pantalla y que proyecta una sombra que varia tanto en intensidad como tamaño dependiendo de la altura a la que se encuentra la bola.



Por ahora sólo les dejo el código. Más adelante postearé otro artículo con la explicación del mismo.

Atención: este ejemplo requiere el mediacomponent.jar entre los Libraries del proyecto. Si crean un proyecto demo basado en el SimpleMediaPlayer (incluido con Netbeans 6.5) y luego reemplanzan el código de Main.fx, la biblioteca mediacomponent.jar quedará incluida en el proyecto automáticamente. Si no, tienen que buscar donde se encuentra en su disco la biblioteca e incluirla entre los libraries del proyecto haciendo click con el botón derecho del mouse en Libraries (a la izquierda en Netbeans) y seleccionado Add Library... (ahí tienen que decirle donde está el archivo). Pero como les digo, lo más fácil es comenzar con un proyecto de ejemplo de mediaplayer y reemplazar el código de Main.fx por el código que incluyo a continuación:

package simplevideoplayer;

import javafx.stage.Stage;
import javafx.scene.Scene;
import com.sun.fxmediacomponent.*;
import javafx.scene.Group;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.animation.Interpolator;
import javafx.animation.Timeline;
import javafx.scene.paint.Stop;
import javafx.scene.effect.PerspectiveTransform;
import javafx.scene.shape.Ellipse;
import javafx.scene.paint.*;
import javafx.scene.effect.*;
import javafx.scene.transform.*;
import javafx.scene.shape.Line;


var mediaUrl:String = "http://sun.edgeboss.net/download/sun/media/1460825906/1460825906_2956241001_big-buck-bunny-640x360.flv";
if(FX.getArgument("mediaURL")!=null) {
  mediaUrl = FX.getArgument("mediaURL").toString();
}

def vidWidth = 1024;
def vidHeight = 576;

var X=0;
var Y=1;
var Z=0;
var VX=230; // perspectiva horizontal para video
var VY=376; // perspectiva vertical para video
var S:Number;

Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
  at (0s) {X => 100},
  at (2.3s) {X => 924 tween Interpolator.LINEAR},
]
}.play();


Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
  at (0s) {Y => 100},
  at (0.5s) {Y => 476 tween Interpolator.EASEIN},
]
}.play();


Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
  at (0s) {Z => 40},
  at (10s) {Z => 100 tween Interpolator.LINEAR},
]
}.play();


Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
  at (0s) {S => 0.5},
  at (0.5s) {S => 1 tween Interpolator.EASEIN},
]
}.play();


var mediaBox:MediaComponent = MediaComponent {
  // set the media and make the component visible
  mediaSourceURL : mediaUrl
  visible:true
  // the position and size of the media on screen
  translateX: 0
  translateY: 0
  mediaViewWidth : vidWidth
  mediaViewHeight: vidHeight
  // determines if the control bar is below the media or on top with a fade in
  staticControlBar: false
  // make the movie play as soon as it's loaded
  mediaPlayerAutoPlay: true
  // set the volume
  volume: 1.0

  effect: PerspectiveTransform {
      ulx: bind VX        uly: bind VY
      urx: bind 1024-VX   ury: bind VY
      lrx: 1024           lry: 576
      llx: 0              lly: 576
  }
};


// Currently these variables have to be set after the component is created

// Description to be displayed when the mouse is over the component
mediaBox.mediaDescriptionStr = "A well-tempered rabbit finds his day spoiled by the rude actions of the...";
// Duration to be displayed when the mouse is over the component
mediaBox.mediaDurationStr = "9:56";
// Title to be displayed when the mouse is over the component
mediaBox.mediaTitleStr = "Big Buck Bunny";


Stage {

 title: "Simple Media Player"

 scene: Scene{

     width: vidWidth
     height: vidHeight

     stylesheets: [
        MediaComponent.css_skins
     ]

     content: [

         mediaBox,

         Line {
              strokeWidth: 3.0
              stroke: Color.BLACK
              startX: bind VX
              startY: bind VY
              endX:   0
              endY:   576
        }

        Line {
              strokeWidth: 3.0
              stroke: Color.BLACK
              startX: bind VX
              startY: bind VY
              endX:   bind VX
              endY:   0
        }

        Line {
              strokeWidth: 3.0
              stroke: Color.BLACK
              startX: bind VX
              startY: bind VY
              endX:   bind 1024-VX
              endY:   bind VY
        }

        Line {
              strokeWidth: 3.0
              stroke: Color.BLACK
              startX: bind 1024-VX
              startY: bind VY
              endX:   bind 1024-VX
              endY:   0
        }

        Line {
              strokeWidth: 3.0
              stroke: Color.BLACK
              startX: bind 1024-VX
              startY: bind VY
              endX:   1024
              endY:   576
        }


         Ellipse {
             centerX: 0, centerY: 0 radiusX: 100 radiusY: 30
             fill: Color.BLACK
             opacity: bind S - 0.2
             fill: RadialGradient {
                 proportional: false  radius: 100
                 centerX: 0  centerY: 0
                 focusX: 0  focusY: 0
                 stops: [
                     Stop { offset: 0.0  color: Color.web("#333333", 1.0) },
                     Stop { offset: 0.4  color: Color.web("#444444", 1.0) },
                     Stop { offset: 1.0 color: Color.web("#FFFFFF", 0.0) }
                 ]
             }
             transforms: bind [
                 Transform.translate(X , 476 + Z - 100 + Z / 2)
                 Transform.scale(S * Z / 100.0, S * Z / 100.0)
             ]
         }

         Circle {
             centerX: 0  centerY: 0  radius: 100
             stroke: Color.BLACK
             fill: RadialGradient {
                 proportional: false  radius: 100
                 centerX: 0  centerY: 0
                 focusX: 20  focusY: -50
                 stops: [
                     Stop { offset: 0.0  color: Color.WHITE },
                     Stop { offset: 0.85 color: Color.RED },
                     Stop { offset: 1.0  color: Color.BLACK }
                 ]
             }
             transforms: bind [
                 Transform.translate(X , Y + Z - 100)
                 Transform.scale(Z/100.0, Z/100.0)
             ]

         }

    ]

 }

}