Introduction to JavaFX
Effects, Animation & Production Suite
March 18, 2009 Jim Connell jconnell@[Link]
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: [Link] fill: [Link] }, Text { font : Font { size : 36 } x: 20, y: 45 content: "Hello JavaSIG" fill: [Link] strokeWidth: 2 stroke: [Link] } ] } }
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: [Link] fill: [Link] }, Text { font : Font { size : 36 } x: 20, y: 505 content: "Hello JavaSIG" fill: [Link] strokeWidth: 2 stroke: [Link] } ] } }
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 [Link]; import import import import import [Link].*; [Link]; [Link]; [Link]; [Link]; var rect = Rectangle { x: 100 y: 10 width: 200 height: 200 fill: [Link] }; var rotateRect = Rectangle { x: 100 y: 250 // start lower than original width: 200 height: 200 fill: [Link] 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: [Link] transforms: [ Rotate { angle: 45 pivotX: 150 pivotY: 350 } ] };
schematic
Additional Transforms
From [Link], you can also
apply:
Afne, Scale, Shear and Translate transforms
schematic
Effects: Drop Shadow Text
var text = Text { content: "JavaSIG" font: [Link]("Garmond", [Link], 90) x: 10, y: 30, textOrigin: [Link] stroke: [Link] strokeWidth: 3 fill: [Link] }
schematic
Effects: Drop Shadow
var shadowText = Text { content: "JavaSIG" font: [Link]("Garmond", [Link], 90) x: 10, y: 200, textOrigin: [Link] stroke: [Link] strokeWidth: 3 fill: [Link] effect: DropShadow { offsetX: 5 offsetY: 15 color: [Link] } }
schematic
Other Effects
From [Link], 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: [Link] };
schematic
Animation: Key Frame
var timeline = Timeline { repeatCount: 1 keyFrames: [ KeyFrame { time: 3s values: [ xPosition => 325 tween [Link] yPosition => 525 tween [Link] ] ] }; // Starting the timeline [Link](); schematic
Animation: Tweening
variable => endValue TWEEN Interpolator
xPosition => 325 TWEEN [Link] yPosition => 525 TWEEN [Link]
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 [Link] 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: [Link] autoReverse: true keyFrames: [ KeyFrame { time: 3s values: [ frame => 16 tween [Link] ] } ] }; [Link]();
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: [Link] 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 = [Link](die); var rotateDie = RotateTransition { duration: 150ms byAngle: 36 fromAngle: 0 toAngle: 360 repeatCount: 4 node: die } [Link]();
Refers to Node in FXZ
schematic
Flashing Scores
public var value : Integer = -1 on replace { if (value != -1) { [Link] = 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: [Link] duration: 175ms } [Link](); } }
Text node well grow
Grows to 1.3 x original size
schematic
Making Noses Wiggle
One after the other
var bigNoseWiggle = SequentialTransition { repeatCount: [Link] 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; } ] }; [Link]();
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) { [Link] = true; [Link] = false; swap(player1Label, player2Label); } else { [Link] = false; [Link] = true; swap(player2Label, player1Label); } } /** Swap the tabs to show the next player. */ function swap( node1:Node, node2:Node ) { delete shrink from [Link]; var bounds = [Link]; [Link] = [Link] + [Link] / 2; [Link] = [Link] + [Link] / 2; insert shrink into [Link]; [Link] = 1; [Link] = .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:
[Link]
schematic
