Animasi gambar & tulisan

April 3, 2010 pukul 7:17 PM | Ditulis dalam Animasi gambar & tulisan | Tinggalkan komentar
Kaitkata: Animasi, Artikel, Gambar, JavaFX, Project, teks

Membuat class pada javaFX dan memanggilnya sekaligus membuat animasi ini dari ukuran gambar yang kecil lalu menjadi besar dan menjadi kecil lagi.

Langkah-langkahnya seperti ini:

1. Buat project baru dengan nama “timeline” dengan ukuran 800×600.
2. Buat javaFX class dengan nama “kelas1”.
3. Memanggil class dengan cara memisalkan namanya “conto”, script seperti ini : def conto:kelas1=kelas1{}.
4. Meload gambar .png dengan nama “sound”.
5. Membuat text dengan content “HOROK”.
6. Membuat timeline untuk menganimasikan gambar dan text.
7. repeatCount: 2 untuk mengulang animasi  sebanyak 2 kali.
8. autoReverse:true untuk membalikkan animasi.
9. lebih mudahnya copy saja scriptnya dan saksikan keajaibannya.

script pada main class

package timeline;

import javafx.stage.Stage;

import javafx.scene.Scene;

def conto:kelas1=kelas1{}

Stage {

title: “Application title”

scene: Scene {

width: 800

height: 600

content: [conto]

}

}

script pada javafx class

package timeline;

import javafx.scene.*;

import javafx.scene.text.*;

import javafx.animation.*;

import javafx.scene.image.*;

public class kelas1 extends CustomNode {

def t2:ImageView=ImageView  {

x:200

y:200

image: Image {

url: “{__DIR__}sound.png”

}

}

def t1:Text=Text {

font : Font {

size: 24

}

x: 300, y: 300

content: “HOROK”

}

def animasi:Timeline=Timeline {

repeatCount: 2

autoReverse:true

keyFrames : [

KeyFrame {

time : 0s

canSkip : true

values: [

t1.scaleX => 0.0 tween Interpolator.LINEAR,

t1.scaleY => 0.0 tween Interpolator.LINEAR,

t2.scaleX => 0.0 tween Interpolator.LINEAR,

t2.scaleY => 0.0 tween Interpolator.LINEAR,

]

}

KeyFrame {

time : 5s

canSkip : true

values: [

t1.scaleX => 2.0 tween Interpolator.LINEAR,

t1.scaleY => 2.0 tween Interpolator.LINEAR,

t2.scaleX => 2.0 tween Interpolator.LINEAR,

t2.scaleY => 2.0 tween Interpolator.LINEAR,

]

}

]

}

public override function create(): Node {

animasi.play();

return Group {

content: [t1,t2]

};

}

}