Thursday Jan 22, 2009

Putting effect in effective way...JavaFX

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 !

About

Hi, I am Vaibhav Choudhary working in Sun. This blog is all about simple concept of Java and JavaFX.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today