JavaFX Week 7 (Animation)

The signer certificate has expired

When trying to run the sample application CustomNode_animation_colliding_balls_3steps I noticed that it would not run due to the following error

init: 
deps-jar:
keytool error: java.lang.Exception: Key pair not generated, alias  already exists
Warning: The signer certificate has expired.
compile:
jar:
standard-run:
java.lang.NoSuchMethodException: collidingballs.MotionBall_3.javafx$run$(com.sun.javafx.runtime.sequence.Sequence)
        at java.lang.Class.getMethod(Class.java:1581)
        at com.sun.javafx.runtime.Entry.start(Entry.java:63)
        at com.sun.javafx.runtime.Main.main(Main.java:80)
browser-run:
jws-run:
midp-run:
run:
BUILD SUCCESSFUL (total time: 3 seconds)

To fix this, I simply went to the project properties, selected the 'application' tab, then disabled the 'self signed jar' option. I guess another project already has stored a certificate that conflicts with this demo.

Adding a little debug on-screen

I was asked whether we could output some debug quickly to see the values of the x position offset (xoff), scale and xflip, after a little consideration I added a VBox to provide a simple layout manager and then added three labels that were bound to those values. Hey presto, simple on-screen debug.

import javafx.ext.swing.SwingLabel;

import javafx.scene.layout.VBox;

.
.
VBox {
 content:[
  SwingLabel {
   text: bind "Xoff = {xoff}"
   width:400
  },
  SwingLabel {
   text: bind "Scale = {scale}"
   width:400
  },
  SwingLabel {
   text: bind "xflip = {xflip}"
   width:400
  }
 ]
}
.
.

Flipping Sharks!

It took a while to work out what timeline was required to move the sharks form the top-left of the screen to the bottom-right, to include the zoom and flipping of the Sharks.

I used three variables that I bound at different locations in the scene graph (actually I had help on this one by collegues at work).

var scale = 0.3;
var xoff = 0;
var xflip = 1.0;

My timeline was always pretty much right, but the key part is in the next section

var st = Timeline {
    keyFrames: [
        at(0s) {
        scale => .3;
        xoff => 0;
        xflip => 1.0
        },
        at(2s) {
        scale => 1.0 tween Interpolator.LINEAR;
        xoff => 300 tween Interpolator.LINEAR;
        xflip => 1.0
        },
        at(2.5s) {
        scale => 1.0 tween Interpolator.LINEAR;
        xoff => 350;
        xflip => -1.0 tween Interpolator.EASEBOTH;
        },
        at(4s) {
        scale => 0.3;
        xoff => 0;
        xflip => -1.0
        },
        at(5s) {
        scale => 0.3;
        xoff => 0;
        xflip => 1.0
        }
    ],
    autoReverse: false,
    repeatCount: Timeline.INDEFINITE
};

The Sharks ImageView was not happy having a transform applied to scale the sharks position and flipping in one go, so Chris at work came up with this option to have a sequence of transformations that are applied one after the other.

var shark = ImageView {
.
. 
    transforms: bind [
      Transform.scale(scale,scale),
      Transform.scale(xflip,1,theImage.width/2,0)
      ]
    translateX: bind xoff
.
. 
};