Timeline. How does (or does not) update global variables?

Question

Hello All,
I am having problems to understand how a timeline updates values. In my case the timeline is supposed to change an index within a second always by incrementing it by one or decrementing by one. Basically I am trying to create a mosaic of images that when I press left key all the columns move to left and when I press right key all the columns move to right.
To do this I have a deltaX constant that defines the translation.
Then I have a global tracker initialized to 0 and then udated +1 if move to right, -1 if move to left.
The Timeline is:
public var tracker: Number = 0;
var thumbnails: ImageView[] = bind for (column in [0..appModel.CATALOG_COLUMNS + 1]) {
                for (row in [1..appModel.CATALOG_ROWS]) {
                    def imageView: ImageView =  ImageView {
                                image: bind catalogData.dataAt(row, column)
                                x:  bind (column - 1)*catalogData.maxThumbnailWidth + column*xSpacing
                                y:  bind ySpacing + (row - 1) * (catalogData.maxThumbnailHeight + ySpacing)
                                translateX: bind tracker*deltaX
                                transforms:  bind [
                                    Rotate {
                                        angle: bind direction * rotation
                                        pivotX: bind imageView.x + imageView.boundsInLocal.width / 2
                                        pivotY: bind imageView.y + imageView.boundsInLocal.height / 2
    override public function create(): Node {
        return Group {
                    content: bind thumbnails
public function rotateAndTranslateToRight(): Void {
        direction = 1;
        translateAndRotateTimeline.stop();
        translateAndRotateTimeline.play();
    public function rotateAndTranslateToLeft(): Void {
        direction = -1;
        translateAndRotateTimeline.stop();
        translateAndRotateTimeline.play();
    var translateAndRotateTimeline = Timeline {
        def initialValueTracker = tracker;
                keyFrames: [
                    KeyFrame {
                        time: 0s
                        values: [
                             rotation => 0,
                             tracker => initialValueTracker
                    KeyFrame {
                        time: 1s
                        values: [
                            rotation => 360 tween Interpolator.LINEAR,
                            tracker => initialValueTracker + direction tween Interpolator.LINEAR
            }The problem is that if I first move to right the Timeline works correctly and tracker goes from 0 to 1 in one second, therefore I see a translation to right of tracker*deltaX pixels. So far so good.
Then if I move to left, I am expecting the Timeline to change tracker from 1 to 0 in one second, but really it is changing tracker from 0 to -1... which of course messes up my translation to left.
I thought Timeline updates global variables (define outside the Timeline in the context of the class the Timeline is defined) during the transition, but apparently from my observation it doesn't.
Or maybe I am not defining correctly the Timeline itself and/or the tracker variables?
Thanks.
Edited by: sacchett88 on Jun 4, 2010 1:03 PM

Answer 1

Thanks for the reply... but it didn't help me that much in finding the workaround. I wrote a simpler example to prove the point that can be easily copied and pasted and run. The example draw a circle and for every right key it should move the circle to right of a deltaX number of pixel. If left key is pressed then the circle should move to left of a deltaX number of pixels. The code is:
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.input.KeyEvent;
import javafx.scene.input.KeyCode;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;
var deltaX: Number = 70;
var direction: Number = 1;
var tracker: Number = 0;
var circle: Circle;
var translate = Timeline {
    def initialValueTracker = tracker;
            keyFrames: [
                KeyFrame {
                    time: 0s
                    values: [
                        tracker => initialValueTracker
                KeyFrame {
                    time: 1s
                    values: [
                        tracker => initialValueTracker + direction tween Interpolator.LINEAR
Stage {
    title: "Application title"
    scene: Scene {
        width: 900
        height:500
        content: [
            circle = Circle {
                centerX: 100,
                centerY: 100,
                translateX: bind tracker*deltaX
                radius: 40
                fill: Color.BLACK
                onKeyPressed: function (e: KeyEvent): Void {
                    if (e.code == KeyCode.VK_RIGHT) {
                        direction = 1;
                        translate.stop();
                        translate.play();
                    } else if (e.code == KeyCode.VK_LEFT) {
                        direction = -1;
                        translate.stop();
                        translate.play();
circle.requestFocus();I understand how KeyFrame works. However the final value I'd like to be the initial value for next key press. I also tried to assign explicitely the final value to the tracker variable at the end of the timeline, but next time timeline still picks up the initial value 0 of tracker.
Thanks.