Home > JavaFX > Text Berjalan (Marquee) dengan TranslateTransition

Text Berjalan (Marquee) dengan TranslateTransition


Text berjalan atau yang lebih dikenal dengan Marquee text sering dilihat di sebuah website. Kali ini text berjalan juga dapat diterapkan pada JavaFX dengan sebuah transisi yaitu AnimationTransition.

Source Code

/*
 * MarqueeText.fx
 *
 * Created on 18 Apr 10, 23:39:28
 */

package com.pizaini.fx;

/**
 * @author Pizaini
 */

// place your code here
import javafx.animation.transition.TranslateTransition;
import javafx.animation.*;
import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.image.*;
import javafx.scene.layout.ClipView;
import javafx.scene.paint.Color;
import javafx.scene.text.*;

var marqueeText:Text;

// animasi transisi
var transTransition = TranslateTransition {
    duration: 75s
    node: bind marqueeText
    toY: -820
    interpolator: Interpolator.LINEAR
    repeatCount: Timeline.INDEFINITE
}

Stage {
    title: "Transisi"
    scene: Scene {
       height: 387
       width: 516
       content: [
          //background
          ImageView {
             image: Image {
                url: "{__DIR__}javafx.jpg"
             }
          },
          ClipView {
             layoutX: 50
             layoutY: 50
             width: 430
             height: 85
             node:
               marqueeText = Text {
                   layoutY: 200
                   textOrigin: TextOrigin.BOTTOM
                   textAlignment: TextAlignment.JUSTIFY
                   wrappingWidth: 380

                   // Text yang akan ditampilkan
                   content: "Selamat Datang di JavaFX "
                            "JavaFX is The Best "
                            "JavaFX is a RIA"
                            "Take enjoy with JavaFX "
                            "Selamat Datang di JavaFX "
                            "JavaFX is The Best "
                            "JavaFX is a RIA"
                            "Take enjoy with JavaFX "
                            "Selamat Datang di JavaFX "
                            "JavaFX is The Best "
                             "JavaFX is a RIA"
                             "Take enjoy with JavaFX "

                           // The approximate color used in the scrolling Star Wars intro
                 fill: Color.rgb(187, 195, 107)
                  font: Font.font("Arial", FontWeight.BOLD, 24);
              }
           }
        ]
    }
}
// Start the text animation
transTransition.play();

Thansk…

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: