JavaFX Metallic LoginForm
I usually browse through dribbble for inspiration and i was inspired by a login form that had a metallic look and feel.I decided to create my own with css and a couple of transitions,sounds and effects,just started still work on it ,maybe add popups,animate the screws
I have hardcoded the username for demonstration if verification fails this how the Interface looks
Effects used are :-
Glow
DropShadow
Lighting
DisplacementMap
Transition only fadeTransition thinking of adding RotateTransition for the screws.
In the TextField a sound is played on keyTyped
something like
name_textfield.setOnKeyTyped(new EventHandler<KeyEvent>(){
@Override
public void handle(KeyEvent event) {
sound= new AudioClip("file:click.mp3");
sound.setCycleCount(1);
sound.play();
}
});
The yellow dropshadow
dropShadow = new DropShadow();
dropShadow.setRadius(5.0);
dropShadow.setOffsetX(3.0);
dropShadow.setOffsetY(3.0);
dropShadow.setColor(Color.YELLOW);
If verification fails change the color of the dropShadow and start our FadeTransition
of the RadioActive icon and play the caution sound.
dropShadow.setColor(Color.RED);
FadeTransition ft = new FadeTransition(Duration.millis(500), radioActiveIcon);
ft.setFromValue(1.0);
ft.setToValue(0.0);
ft.setCycleCount(Timeline.INDEFINITE);
ft.setAutoReverse(true);
ft.play();
sound= new AudioClip("file:caution.mp3");
sound.setCycleCount(Timeline.INDEFINITE);
sound.play();
On clicking the icon stop set to default
radioActiveIcon.setOnMouseClicked(new EventHandler<MouseEvent>(){
@Override
public void handle(MouseEvent event) {
ft.stop();
sound.stop();
root.getChildren().remove(radioActiveIcon);
dropShadow.setColor(Color.YELLOW);
}
});
The displacementMap effect
FloatMap floatMap = new FloatMap();
floatMap.setWidth(400);
floatMap.setHeight(50);
for (int i = 0; i < width; i++) {
double v = (Math.sin(i / 20.0 * Math.PI) - 0.5) / 40.0;
for (int j = 0; j < height; j++) {
floatMap.setSamples(i, j, 0.0f, (float) v);
}
}
DisplacementMap displacementMap = new DisplacementMap();
displacementMap.setMapData(floatMap);
title_label.setEffect(displacementMap);
Video Demo
Login form default look |
Effects used are :-
Glow
DropShadow
Lighting
DisplacementMap
Transition only fadeTransition thinking of adding RotateTransition for the screws.
In the TextField a sound is played on keyTyped
something like
name_textfield.setOnKeyTyped(new EventHandler<KeyEvent>(){
@Override
public void handle(KeyEvent event) {
sound= new AudioClip("file:click.mp3");
sound.setCycleCount(1);
sound.play();
}
});
The yellow dropshadow
dropShadow = new DropShadow();
dropShadow.setRadius(5.0);
dropShadow.setOffsetX(3.0);
dropShadow.setOffsetY(3.0);
dropShadow.setColor(Color.YELLOW);
If verification fails change the color of the dropShadow and start our FadeTransition
of the RadioActive icon and play the caution sound.
dropShadow.setColor(Color.RED);
FadeTransition ft = new FadeTransition(Duration.millis(500), radioActiveIcon);
ft.setFromValue(1.0);
ft.setToValue(0.0);
ft.setCycleCount(Timeline.INDEFINITE);
ft.setAutoReverse(true);
ft.play();
sound= new AudioClip("file:caution.mp3");
sound.setCycleCount(Timeline.INDEFINITE);
sound.play();
On clicking the icon stop set to default
radioActiveIcon.setOnMouseClicked(new EventHandler<MouseEvent>(){
@Override
public void handle(MouseEvent event) {
ft.stop();
sound.stop();
root.getChildren().remove(radioActiveIcon);
dropShadow.setColor(Color.YELLOW);
}
});
The displacementMap effect
FloatMap floatMap = new FloatMap();
floatMap.setWidth(400);
floatMap.setHeight(50);
for (int i = 0; i < width; i++) {
double v = (Math.sin(i / 20.0 * Math.PI) - 0.5) / 40.0;
for (int j = 0; j < height; j++) {
floatMap.setSamples(i, j, 0.0f, (float) v);
}
}
DisplacementMap displacementMap = new DisplacementMap();
displacementMap.setMapData(floatMap);
title_label.setEffect(displacementMap);
Video Demo
Comments
Post a Comment