JavaFX 1.3 Animation (No Image)



Advertisements

JavaFX 1.3 Light Bulb



var buttonstext = "On" on replace {
            if (buttonstext == "Off") {
                lightOpacity1 = .1;
                lightOpacity3 = .3;
                lightOpacity4 = 1;
                controlVisible = true;
                slider.value = .3;
            } else {
                lightOpacity1 = 0;
                lightOpacity3 = 0;
                lightOpacity4 = 0;
                controlVisible = false;
                slider.value = 0;
            }
        };
var lightOpacity1: Number = 0;
var lightOpacity2: Number = bind slider.value;
var lightOpacity3: Number = 0;
var lightOpacity4: Number = 0;
var lightbulbImg = ImageView {
            image: Image {
                url: "{__DIR__}resources/lightbulb.jpg"
            }
        }
var controlVisible = false;
var effects = Group {
            content: [
                Rectangle {
                    width: 412
                    height: 520
                    fill: Color.YELLOW
                    opacity: bind lightOpacity1
                }
                LightBulbEffect {effectOpacity: bind lightOpacity2}
                LightBulbEffect {effectOpacity: bind lightOpacity3}
                Rectangle {
                    effect: GaussianBlur {
                        radius: 10
                        input: Glow {}
                    }
                    translateY: 178
                    translateX: 165
                    width: 65
                    height: 8
                    arcWidth: 8
                    arcHeight: 8
                    fill: Color.WHITE
                    stroke: Color.ORANGE
                    strokeWidth: 1.8
                    opacity: bind lightOpacity4
                }
                Path {
                    effect: GaussianBlur {
                        radius: 1
                        input: Glow {}
                    }
                    stroke: Color.WHITE
                    strokeWidth: 1.8
                    opacity: bind lightOpacity4
                    elements: [
                        MoveTo {x: 172 y: 183},
                        LineTo {x: 183 y: 182},
                        QuadCurveTo {
                            controlX: 198 controlY: 183
                            x: 213 y: 182
                        }
                        QuadCurveTo {
                            controlX: 214 controlY: 183
                            x: 225 y: 185
                        }
                    ]
                }
            ]
        }
var togglebutton = Button {
            translateY: 350
            translateX: 260
            text: bind buttonstext
            onMousePressed: function (ev: MouseEvent): Void {
                if (buttonstext == "Off") {
                    buttonstext = "On";
                } else {
                    buttonstext = "Off";
                }
                }
        }
var slider: Slider = Slider {
            translateY: 420
            translateX: 128
            max: .4
            min: 0
            visible: bind controlVisible
        }
var controls = Group {
            content: [
                togglebutton,
                slider,
                Label{ translateX: 120 translateY:419 text:"-" visible: bind controlVisible}
                Label{ translateX: 268 translateY:419 text:"+" visible: bind controlVisible}
            ]
        }

Stage {
    title: "JavaFX Light Bulb"
    scene: Scene {
        width: 402
        height: 499
        fill: Color.BLACK
        content: [
            lightbulbImg,
            effects,
            controls
        ]
    }
  }
}
public class LightBulbEffect extends CustomNode {

    public var effectOpacity: Number;

    override function create() {
        Path {
            translateX: -10
            translateY: -8
            effect: GaussianBlur {input: Glow {level: 1} radius: 63}
            fill: Color.YELLOW
            stroke: Color.YELLOW
            strokeWidth: 5
            opacity: bind effectOpacity
            elements: [
                MoveTo {x: 127 y: 132},
                QuadCurveTo {
                    controlX: 206 controlY: 48
                    x: 287 y: 132
                }
                QuadCurveTo {
                    controlX: 320 controlY: 180
                    x: 295 y: 230
                }
                QuadCurveTo {
                    controlX: 290 controlY: 240
                    x: 270 y: 280
                }
                QuadCurveTo {
                    controlX: 270 controlY: 295
                    x: 260 y: 320
                }
                LineTo {x: 153 y: 320}
                QuadCurveTo {
                    controlX: 143 controlY: 295
                    x: 143 y: 280
                }
                QuadCurveTo {
                    controlX: 118 controlY: 240
                    x: 115 y: 230
                }
                QuadCurveTo {
                    controlX: 95 controlY: 180
                    x: 127 y: 132
                }
            ]
        }
    }

JavaFX 1.3 Effect Example



Stage {
    title: "JavaFX Effect"
    scene: Scene {
        width: 400
        height: 450
        fill:Color.BLACK
        content: [
            JavaLogo {translateX: -100 translateY: -145}
        ]
    }
}
public class JavaLogo extends CustomNode {

    override public var translateX;
    override public var translateY;
    var smokeDifuseConstant: Number = 2;
    var glowLevel: Number = 0;
    var cup = Cup {smokeDifuseConstant: bind smokeDifuseConstant with inverse}
    var javaText = Text {
                x: 210
                y: 500
                content: "Java"
                fill: Color.DARKORANGE
                effect: Glow {
                    level: bind glowLevel
                    input: Lighting {
                        light: DistantLight {azimuth: -135}
                        surfaceScale: 3
                    }
                }
                font: Font.font(null, FontWeight.EXTRA_BOLD, FontPosture.REGULAR, 60)
            }
    var fxText = Text {
                x: 337
                y: 500
                content: "Fx"
                fill: Color.BLUE
                effect: Glow {
                    level: bind glowLevel
                    input: Lighting {
                        light: DistantLight {azimuth: -135}
                        surfaceScale: 3
                        diffuseConstant: 1.5
                    }
                }
                font: Font.font(null, FontWeight.EXTRA_BOLD, FontPosture.ITALIC, 60)
            }
    var timeline1: Timeline = Timeline {
                repeatCount: Timeline.INDEFINITE
                keyFrames: [
                    KeyFrame {
                        time: 3s
                        values: [smokeDifuseConstant => .7 tween Interpolator.EASEBOTH]
                    }
                    KeyFrame {
                        time: 6s
                        values: [smokeDifuseConstant => 2 tween Interpolator.EASEBOTH]
                    }
                ]
            }
    var timeline2: Timeline = Timeline {
                repeatCount: Timeline.INDEFINITE
                keyFrames: [
                    KeyFrame {
                        time: 300ms
                        values: [glowLevel => .8 tween Interpolator.EASEBOTH]
                    }
                ]
            }

    override function create() {
        timeline1.play();
        timeline2.play();
        Group {
            content: [
                cup,
                javaText,
                fxText
            ]
        }
    }
}
public class Cup extends CustomNode {

    override public var translateX;
    override public var translateY;
    public var smokeDifuseConstant: Number = 1;
    var cup = Group {
                translateX: 240
                translateY: 100
                effect: Glow {
                    level: 1
                    input: Lighting {
                        light: DistantLight {azimuth: -135}
                        surfaceScale: 5
                        specularExponent: 15}
                }
                content: [
                    Path {
                        fill: Color.BLUE
                        stroke: Color.BLUE
                        elements: [
                            MoveTo {x: 0 y: 326},
                            QuadCurveTo {
                                controlX: 50 controlY: 337
                                x: 112 y: 323
                            }
                            QuadCurveTo {
                                controlX: 50 controlY: 339
                                x: 0 y: 326
                            }
                        ]
                    },
                    Path {
                        fill: Color.BLUE
                        stroke: Color.BLUE
                        elements: [
                            MoveTo {x: -3 y: 310},
                            QuadCurveTo {
                                controlX: -20 controlY: 315
                                x: 0 y: 320
                            }
                            QuadCurveTo {
                                controlX: 50 controlY: 330
                                x: 100 y: 320
                            }
                            QuadCurveTo {
                                controlX: 50 controlY: 337
                                x: 0 y: 323
                            }
                            QuadCurveTo {
                                controlX: -20 controlY: 318
                                x: 0 y: 310
                            }
                        ]
                    },
                    Path {
                        fill: Color.BLUE
                        stroke: Color.BLUE
                        elements: [
                            MoveTo {x: 20 y: 302},
                            QuadCurveTo {
                                controlX: 30 controlY: 315
                                x: 70 y: 305
                            }
                            QuadCurveTo {
                                controlX: 30 controlY: 308
                                x: 20 y: 302
                            }
                        ]
                    },
                    Path {
                        fill: Color.BLUE
                        stroke: Color.BLUE
                        elements: [
                            MoveTo {x: 18 y: 282},
                            QuadCurveTo {
                                controlX: 30 controlY: 295
                                x: 70 y: 285
                            }
                            QuadCurveTo {
                                controlX: 30 controlY: 290
                                x: 18 y: 282
                            }
                        ]
                    },
                    Path {
                        fill: Color.BLUE
                        stroke: Color.BLUE
                        elements: [
                            MoveTo {x: 12 y: 252},
                            QuadCurveTo {
                                controlX: -5 controlY: 252
                                x: 15 y: 260
                            }
                            QuadCurveTo {
                                controlX: 50 controlY: 270
                                x: 85 y: 260
                            }
                            QuadCurveTo {
                                controlX: 50 controlY: 273
                                x: 15 y: 263
                            }
                            QuadCurveTo {
                                controlX: -5 controlY: 252
                                x: 15 y: 252
                            }
                        ]
                    },
                    Path {
                        fill: Color.BLUE
                        stroke: Color.BLUE
                        elements: [
                            MoveTo {x: 100 y: 251},
                            QuadCurveTo {
                                controlX: 136 controlY: 253
                                x: 90 y: 290
                            }
                            QuadCurveTo {
                                controlX: 155 controlY: 240
                                x: 90 y: 252
                            }
                        ]
                    }
                ]
            }
    var smoke = Group {
                translateX: 240
                translateY: 100
                effect: Glow {
                    level: .5
                    input: Lighting {
                        light: DistantLight {azimuth: -135}
                        surfaceScale: 5
                        diffuseConstant: bind smokeDifuseConstant
                    }
                }
                content: [
                    Path {
                        fill: Color.ORANGE
                        stroke: Color.ORANGE
                        elements: [
                            MoveTo {x: 50 y: 250},
                            QuadCurveTo {
                                controlX: 10 controlY: 225
                                x: 50 y: 200
                            },
                            QuadCurveTo {
                                controlX: 75 controlY: 180
                                x: 65 y: 150
                            },
                            QuadCurveTo {
                                controlX: 77 controlY: 180
                                x: 55 y: 200
                            },
                            QuadCurveTo {
                                controlX: 20 controlY: 225
                                x: 50 y: 250
                            }
                        ]
                    },
                    Path {
                        fill: Color.ORANGE
                        stroke: Color.ORANGE
                        elements: [
                            MoveTo {x: 50 y: 245},
                            QuadCurveTo {
                                controlX: 25 controlY: 225
                                x: 75 y: 200
                            }
                            QuadCurveTo {
                                controlX: 30 controlY: 225
                                x: 60 y: 245
                            }
                            QuadCurveTo {
                                controlX: 65 controlY: 250
                                x: 60 y: 255
                            }
                            QuadCurveTo {
                                controlX: 50 controlY: 245
                                x: 50 y: 245
                            }
                        ]
                    }
                ]
            }

    override function create() {
        Group {
            content: [
                smoke,
                cup
            ]
        }
    }
}