Friday Jan 23, 2009
With me, it happens most of the time. The basic code is over and I stuck in giving a good color to a button or a text. Now a day, a good UI is as required as basic functionality. In my 7 year of Computer life including college + work I always ran away from animations and coloring.
Last day, I was making a button and it took me pretty much time to finish it off. But, I find a good observation from it. A simple and quick way to color a button or giving a glossy effect. Have a look at these buttons.
If you are not a grahics designer, then you probably like these buttons. These buttons has been made with very simple effort, just a small work of Linear Gradient. But the fight is which color to put in Linear Gradient. So, here is my observation, you need to put the color which are close to each other and can be easily merged with each other. Like .. hmm :
LIGHTBLUE, DARKBLUE, LIGHTBLUE.(3rd button)
This is actually the best pattern.
2nd button is also the result of same :
LIGHTGREEN, DARKGREEN, LIGHTGREEN.
So, check more with this simple code :
Stage {
title: "Some Cool Buttons"
width: 250
height: 280
scene: Scene {
fill:Color.BLACK
content: [
Rectangle {
x: 10,
y: 10
width: 90,
height: 30
fill: LinearGradient {
startX: 0.0
startY: 0.0
endX: 0.0
endY: 1.0
proportional: true
stops: [
// Stop { offset: 0.0 color: Color.BLACK },
Stop {
offset: 0.0
color: Color.LIGHTGREEN },
Stop {
offset: 0.5
color: Color.DARKGREEN },
Stop {
offset: 1.0
color: Color.LIGHTGREEN }
]
}
opacity:0.6
arcHeight:5
arcWidth:5
},
Text {
font: Font {
size: 12
name: "Arial Bold"
letterSpacing: 0.15
}
fill:Color.WHITE
x: 18,
y: 30
content: "HelloWorld"
} ] }
Some of my fav. combinations(2 already mentioned) :
1. Stop {
offset: 0.0
color: Color.LIME },
Stop {
offset: 0.5
color: Color.DARKGREEN },
Stop {
offset: 1.0
color: Color.LIME }
This will look awesome, if you are writing a flashy application. Very vibrant in color.
2. Stop {
offset: 0.0
color: Color.ALICEBLUE },
Stop {
offset: 0.5
color: Color.BLUE },
Stop {
offset: 1.0
color: Color.ALICEBLUE }
3. Stop {
offset: 0.0
color: Color.ORANGE },
Stop {
offset: 0.5
color: Color.RED },
Stop {
offset: 1.0
color: Color.ORANGE }
4. A very plain and descent effect :
Stop {
offset: 0.0
color: Color.LIGHTYELLOW },
Stop {
offset: 0.5
color: Color.YELLOWGREEN },
Stop {
offset: 1.0
color: Color.LIGHTYELLOW }
Enough, please let me know your choice. Is there any pattern, you follow !
Tuesday Dec 09, 2008
Me and Vikram was looking today some of the cool flash examples and I have seen the button effect at some place, when you press the button it really goes like inside and coming out. But that was an effect achieved by the images(two different images, one unpressed button and one pressed button) and then we thought to simulate this effect by code. Somehow we are able to do that in FX, here is the final outcome:
What we have tried to do is pressing one button will put the other in unpressed mode and vice-versa. This has been achieved by some of the cool API's of JavaFX. And we have used the DistantLight effect of JavaFX which gives a lighting effect in its awesome way. Actually this can be more cooler but I left that for developer to modify it according to their need :). But this is a modular code and can be used in any of the button place.
Here is the simple code for the same(again code is not written in the most optimized way but in the best way for understanding) :
package lighteff;
import javafx.scene.effect.light.DistantLight;
import javafx.scene.effect.Lighting;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
var factor = 5;
var scale = 1.0;
var factor1 = 10;
var scale1 = 0.85;
Stage {
title: "Control Panel"
width: 290
height: 180
style: StageStyle.UNDECORATED
scene: Scene {
fill: Color.BLACK
content: [
Group {
effect: Lighting {
light: DistantLight {
azimuth: 90
elevation: 60
}
surfaceScale: bind factor
}
content: [
Circle {
centerX: 100,
centerY: 100
radius: 40
fill: Color.RED
onMousePressed: function( e: MouseEvent ):Void {
scale = 0.85;
factor = 10;
scale1 = 1.0;
factor1 = 5;
}
},
Text {
fill: Color.WHITE
scaleX: bind scale
scaleY: bind scale
font: Font {
size: 24
}
x: 71,
y: 105
content: "Press"
}
]
},
Group {
effect: Lighting {
light: DistantLight {
azimuth: 90
elevation: 60
}
surfaceScale: bind factor1
}
content: [
Circle {
centerX: 200
centerY: 100
radius: 40
fill: Color.BLUE
onMousePressed: function( e: MouseEvent ):Void {
scale1 = 0.85;
factor1 = 10;
scale = 1.0;
factor = 5;
}
},
Text {
fill: Color.WHITE
scaleX: bind scale1
scaleY: bind scale1
font: Font {
size: 24
}
x: 171,
y: 105
content: "Press"
}
]
}
]
}
}
Friday Nov 28, 2008
What to achieve: A sparkling glass(beer glasses are clean and shiny before beer get served) like this.
So, our aim is to make those sparkling effect on glass. Here is the code in JavaFX(things are little hard coded but better for understanding):
package sample;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.input.MouseEvent;
import javafx.scene.transform.Rotate;
import javafx.scene.shape.Polygon;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;
import javafx.scene.shape.Circle;
import javafx.scene.Group;
/**
* @author Vaibhav
*/
var r = 0.0;
var t = Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames: [
KeyFrame {
time: 3s
canSkip: true
values: [
r => 360.0 tween Interpolator.EASEBOTH
]
}
]
}
t.play();
var op = 1.0;
var t1 = Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames: [
KeyFrame {
time: 3s
canSkip: true
values: [
op => 0.0 tween Interpolator.EASEBOTH
]
}
]
}
t1.play();
Stage {
title: "Sparkling on Glass"
width: 250
height: 480
scene: Scene {
fill: Color.BLACK
content: [
ImageView {
image: Image {
url: "{__DIR__}wineglass.png"
}
}
Polygon {
rotate: bind r;
translateX: 130
translateY: 100
scaleX: 0.5
scaleY: 0.5
points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
fill: Color.WHITE
opacity: bind op
},
Polygon {
rotate: 45;
scaleX: 0.25
scaleY: 0.25
translateX: 130
translateY: 100
points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
fill: Color.WHITE
opacity: bind 1 - op
},
Polygon {
rotate: bind r;
translateX: 50
translateY: 50
scaleX: 0.5
scaleY: 0.5
points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
fill: Color.WHITE
opacity: bind op
},
Polygon {
rotate: 45;
scaleX: 0.25
scaleY: 0.25
translateX: 50
translateY: 50
points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
fill: Color.WHITE
opacity: bind 1 - op
},
Polygon {
rotate: bind r;
translateX: 30
translateY: 120
scaleX: 0.5
scaleY: 0.5
points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
fill: Color.WHITE
opacity: bind op
},
Polygon {
rotate: 45;
scaleX: 0.25
scaleY: 0.25
translateX: 30
translateY: 120
points: [ 0,0, 2,-50, 4,0, 54,2,4,4,2,54,0,4,-50,2]
fill: Color.WHITE
opacity: bind 1 - op
},
]
}
}
Same animation in flash is here :
http://www.entheosweb.com/Flash/sparkling_effect.asp
Tuesday Aug 19, 2008
It looks good, so I decided to put before the completion of work. I was trying to simulate some fancy effects on button, so that I can embed it somewhere in some site. Here what is the class for Button:
public class Button extends CustomNode {
public attribute x: Number;
public attribute y: Number;
public attribute text: Text;
public attribute rectangle: Rectangle;
public attribute content: String;
public function create(): Node {
Now, the buttons will look like:
If you move the focus on any of the button, it will shine like this :
or like this :
This simple 2 line animation is achieved by playing with the opacity code. Though I am not able to fit my text inside the button which currently I am trying to bind out. But simple flashy buttons are easy to achieve. Here is the code:
package flashybutton;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.text.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.Color;
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.ext.swing.TextField;
import javafx.scene.Font;
import javafx.scene.FontStyle;
import javafx.scene.paint.*;
import javafx.input.MouseEvent;
var x: Number = 100;
var y: Number = 100;
var color: Color;
var buttons:Button[];
var text: Text;
var content: String;
var width: Number = 100;
var height: Number = 40;
var arcWidth:Number = 10;
var arcHeight: Number = 10;
var opacity: Number = 0.6;
for( i in [1..5] ) {
insert Button {
x:100 + 100 * i,
y:100,
content: "HelloWorld" + i,
opacity: 0.6
} into buttons;
}
Frame {
title: "MyApplication"
width: 1000
height: 200
closeAction: function() { java.lang.System.exit( 0 );
}
visible: true
stage: Stage {
fill: Color.BLACK
content: [
buttons
]
}
}
public class Button extends CustomNode {
public attribute x: Number;
public attribute y: Number;
public attribute text: Text;
public attribute rectangle: Rectangle;
public attribute content: String;
public function create(): Node {
return Group {
content: [
Rectangle {
x : bind x,
y : bind y,
fill: LinearGradient {
startX: 0.0
startY: 0.0
endX: 1.0
endY: 0.0
proportional: true
stops: [
// Stop { offset: 0.0 color: Color.BLACK },
Stop { offset: 0.0 color: Color.BLACK },
Stop { offset: 0.5 color: Color.GOLD },
Stop { offset: 1.0 color: Color.BLACK }
]
},
width: 100
height: 40
arcWidth: 10
arcHeight: 10
opacity: bind opacity
onMouseMoved: function( e: MouseEvent ):Void {
opacity = 1.0;
}
onMouseExited: function( e: MouseEvent ):Void {
opacity = 0.6;
}
},
Text {
x: bind x + 10,
y: bind y + height / 2 + arcHeight / 2;
content: bind content
}
]
}
}
}
|
|
|
|
hi...
i am trying to devolop application similar t...
Loading content dynamically is generally in JavaFX...