Introduction to JavaFX

Effects, Animation & Production Suite

March 18, 2009 Jim Connell [email protected]

schematic

Vibe
Partnered with Sun @ - JavaFX Launch - Mobile World Congress - SXSW

schematic

Topics
5 minute JavaFX script introduction Transforms & Effects Animation Events Production Suite
schematic

JavaFX Script Introduction

schematic

Your First JavaFX Script

Stage { title: "Hello JavaSIG", width: 400, height: 600 scene: Scene { content: [ Rectangle { x: 15, y: 10 width: 250, height: 100 stroke: Color.BLACK fill: Color.LIGHTGREEN }, Text { font : Font { size : 36 } x: 20, y: 45 content: "Hello JavaSIG" fill: Color.WHITE strokeWidth: 2 stroke: Color.DARKGREEN } ] } }

schematic

First Program 2nd Look

Stage { title: "Hello JavaSIG", width: 400, height: 600 scene: Scene { content: [ Rectangle { x: 15, y: 450 width: 250, height: 100 stroke: Color.BLACK fill: Color.LIGHTGREEN }, Text { font : Font { size : 36 } x: 20, y: 505 content: "Hello JavaSIG" fill: Color.WHITE strokeWidth: 2 stroke: Color.DARKGREEN } ] } }
Stage Scene Rectangle Text

schematic

What is a SceneGraph?
Declarative method to dening visual
structure

A composite hierarchy of objects: Node, a leaf (terminal node) Group, a composite node (contains
others)
schematic

Items in 1st Program

Item
Stage Scene Rectangle Text

Description
Device idependendent container The container for the SceneGraph A node that knows how draw rectangles A node that draws Text

schematic

Features of Nodes
Have one parent Transforms (translation, scaling, etc) Effects (shadows, blurs, lighting, etc) Event handlers (keys & mouse) Visual Properties (coordinates, height,
width, etc)
schematic

JavaFX Script Features

Supports OO constructs: classes, functions,
members

UIs are constructed using a Scene Graph Can call existing Java code Java can call FX with a little effort
schematic

JavaFX Features (cont)

Supports binding, change notications
propagated automatically

Supports triggers, code that gets executed

when values change
schematic

No more property change listeners

Transforms & Effects

schematic

Structure of Examples
package presentation.transform; import import import import import javafx.scene.transform.*; javafx.stage.Stage; javafx.scene.Scene; javafx.scene.shape.Rectangle; javafx.scene.paint.Color; var rect = Rectangle { x: 100 y: 10 width: 200 height: 200 fill: Color.DARKOLIVEGREEN }; var rotateRect = Rectangle { x: 100 y: 250 // start lower than original width: 200 height: 200 fill: Color.DARKOLIVEGREEN transforms: [ Rotate { angle: 45 pivotX: 150 pivotY: 350 } ] }; // continued from snippet on left Stage { title: "Rotate" scene: Scene { width: 400 height: 600 content: [ rect, rotateRect ] } }

Examples will just show this

schematic

Transform: Rotate
var rotateRect = Rectangle { x: 100 y: 250 width: 200 height: 200 fill: Color.DARKOLIVEGREEN transforms: [ Rotate { angle: 45 pivotX: 150 pivotY: 350 } ] };

schematic

Additional Transforms
From javafx.scene.transform, you can also
apply:

Afne, Scale, Shear and Translate transforms

schematic

Effects: Drop Shadow Text

var text = Text { content: "JavaSIG" font: Font.font("Garmond", FontWeight.BOLD, 90) x: 10, y: 30, textOrigin: TextOrigin.TOP stroke: Color.BLACK strokeWidth: 3 fill: Color.DEEPSKYBLUE }

schematic

Effects: Drop Shadow

var shadowText = Text { content: "JavaSIG" font: Font.font("Garmond", FontWeight.BOLD, 90) x: 10, y: 200, textOrigin: TextOrigin.TOP stroke: Color.BLACK strokeWidth: 3 fill: Color.DEEPSKYBLUE effect: DropShadow { offsetX: 5 offsetY: 15 color: Color.GRAY } }

schematic

Other Effects
From javafx.scene.effect, you can also apply: Blend, Flood, Glow, InnerShadow,
Lighting, Motion Blur, and more!

schematic

Animation

schematic

Animation: Move A Rectangle

var xPosition = 0; var yPosition = 0; var rect = Rectangle { x: bind xPosition y: bind yPosition height: 50 width: 50 fill: Color.DARKGREEN };

schematic

Animation: Key Frame

var timeline = Timeline { repeatCount: 1 keyFrames: [ KeyFrame { time: 3s values: [ xPosition => 325 tween Interpolator.LINEAR yPosition => 525 tween Interpolator.LINEAR ] ] }; // Starting the timeline timeline.playFromStart(); schematic

Animation: Tweening
variable => endValue TWEEN Interpolator
xPosition => 325 TWEEN Interpolator.LINEAR yPosition => 525 TWEEN Interpolator.LINEAR

time:

0s

1s

2s 325 525

3s

xPosition 0 yPosition 0

increments evenly to increments evenly to

schematic

Animation: Interpolation
Interpolators: specify how to calculate
current value of variable

Built-in Interpolators: LINEAR EASEIN, EASEOUT, EASEBOTH Custom Interpolators implement

Interpolatable
schematic

Animation: Images
// we put Duke images T0-T16.gif the // duke directory, directly below this // directory var frame = 0; var duke = ImageView { image: bind Image { url: "{__DIR__}duke/T{frame}.gif"; } };

schematic

Animation: Images
var timeline = Timeline { repeatCount: Timeline.INDEFINITE autoReverse: true keyFrames: [ KeyFrame { time: 3s values: [ frame => 16 tween Interpolator.LINEAR ] } ] }; timeline.playFromStart();

schematic

Events

schematic

Events: Mouse
var message: String = ""; var text = Text { x: 150, y: 150, content: bind "{message}"; } var rect = Rectangle { x: 150, y: 10, width: 100, height: 100 fill: Color.ROYALBLUE onMouseMoved: function( e: MouseEvent ):Void { message = "mouse moved!" } onMouseClicked: function( e: MouseEvent ):Void { message = "mouse clicked!" } onMousePressed: function( e: MouseEvent ):Void { message = "mouse pressed!" } };

schematic

Events: Mouse
Other Mouse Events (variables on Nodes): onMouseEntered onMouseReleased onMouseDragged onMouseWheelMoved All accept the same anonymous function
schematic

Events: Keys
Similar to Mouse events 3 types: onKeyPressed, onKeyReleased,
onKeyTyped

Accept a function with this signature function( e: KeyEvent ):Void

schematic

Production Suite

schematic

Production Suite
Tools to greatly simplify designer/developer
workow

Designers work in Illustrator, Photoshop or

SVG capable tool JavaFX (FXZ)

Suite converts between (AI, PS and SVG) to

schematic

Update Design

FXZ

Write Logic & Manipulate Design

Update UI Stub

Workflow Overview
schematic

Pig:Dice Game
schematic

Demo of Game

schematic

Demo of Artwork
schematic

Design View JavaFX Code!

NetBeans View
schematic

Rolling Dice
var die = fxz.getNode(die); var rotateDie = RotateTransition { duration: 150ms byAngle: 36 fromAngle: 0 toAngle: 360 repeatCount: 4 node: die } rotateDie.playFromStart();

Refers to Node in FXZ

schematic

Flashing Scores
public var value : Integer = -1 on replace { if (value != -1) { text.content = getContent(value); var t = ScaleTransition { repeatCount: 2 autoReverse: true node: text fromX: 1, toX: 1.3, byX: .05 fromY: 1, toY: 1.3, byY: .05 interpolate: Interpolator.EASEIN duration: 175ms } t.playFromStart(); } }

Text node well grow

Grows to 1.3 x original size

schematic

Making Noses Wiggle

One after the other

var bigNoseWiggle = SequentialTransition { repeatCount: Timeline.INDEFINITE node: board.big_pig_nose; content: [ PauseTransition { duration: 8s } TranslateTransition { repeatCount: 4 autoReverse: true toY: -3, byY: 1 toX: -3, byX: 1 duration: 300ms node: board.big_pig_nose; } ] }; bigNoseWiggle.playFromStart();

Refers to Node in FXZ

schematic

Swapping Players
var shrink = Scale { x: .8, y: .8; } /** True if the current player is player1, false otherwise. */ public var isPlayerOne: Boolean on replace { if (isPlayerOne) { player1Spot.visible = true; player2Spot.visible = false; swap(player1Label, player2Label); } else { player1Spot.visible = false; player2Spot.visible = true; swap(player2Label, player1Label); } } /** Swap the tabs to show the next player. */ function swap( node1:Node, node2:Node ) { delete shrink from node1.transforms; var bounds = node2.boundsInParent; transform.pivotX = bounds.minX + bounds.width / 2; transform.pivotY = bounds.minY + bounds.height / 2; insert shrink into node2.transforms; node1.opacity = 1; node2.opacity = .6;

Swap visible tab

Shrinks & lighten inactive name

schematic

UI

Board UI

Load UI

Board fxz

UI Facade Logic

Game Button Score Control Player Marker Controls

Controller

Structure of Game
schematic

Pig Highlights
Most of the code is the logic, effects &
animation

Smart Controls manipulate using

Transitions

Updates to UI through binds & triggers DIDNT HAVE DRAW A THING!

schematic

Production Suite: Pros

Cleanly separates designer/developer roles Designers use tools they already know Developers manipulate design using
standard JavaFX

Teams can automate conversion using ANT

schematic

(everything you just saw!)

Thank You!
Special thanks to Jonathan Wei from
Schematic

For examples & source visit:

http://newfoo.net/presentations/introduction-to-javafx/

schematic