FX

Reflections are a popular effect in rich Internet applications (RIAs) and Web 2.0 UIs. It is really easy to add a reflection effect to screen elements (images, shapes, and text) by using JavaFX technology. You can start by looking at the variables that can be used to modify the reflection. Then consider a few tips from the visual design perspective. Finally, take a look at some simple code that shows how reflection can be added to a shape, to text, or to an image.

Reflection Variables

You can change the distance between the object and its reflection, the fraction of the object that appears in the reflection, and the opacity at the starting and ending points of the reflection. Figure 1 describes the four variables that can be used to modify this effect.

Figure 1: Variables of the Reflection Effect

A Few Design Tips

The default values for these variables should work well for most applications. A few additional suggestions that we can offer to help make the application more appealing include:

• Try to use a fraction value that is smaller than the default 0.75. Other RIAs and Web 2.0 UIs use elements that have a fraction equivalent over 0.4.
  
  
• The topOpacity value should be set to 0.2 or 0.3 in most cases. If you have a background color and a foreground color that are highly saturated (so, effectively, you have a bright object placed on a highly polished surface) topOffset values of 0.5 may be appropriate. (See Figure 2)
  
  
• Do not combine this effect with a shadow, because in nature reflections and shadows do not coincide.
  
  
• Do combine this effect with a perspective transform, especially if you are highlighting one large image.
  
  

Figure 2 : topOffset of 0.2 or 0.3 Except for Black or Bright-Colored, Glossy Background

Adding Reflection to Text

To add reflection to text, like the previous images:

1. Create a background (a rectangle perhaps) and place the text on it.
   
   
2. Add the reflection effect to the text and tweak the parameters.
   

Stage {
    title: "Effects: Reflection"
    width: 250
    height: 650
    scene: Scene {
        content: [
            Rectangle {
                x: 0,
                y: 0
                width: 250,
                height: 650
                fill: Color.web("#000000")
            }
            Text {
                effect: Reflection {
                    fraction: 0.75
                    topOffset: 0.0
                    topOpacity: 0.8
                    bottomOpacity: 0.0
                }
                font: Font {
                    size: 32
                }
                fill: Color.web("#0b1621")
                x: 30,
                y: 100
                content: "Reflection"
               
            }


        ]
    }
}

Adding Reflection to Images

Figure 3: Applying Reflection to Images

To create the screen in Figure 3:

1. Start with a black rectangle the size of the stage. Alternately you can fill the stage with color.
   
   
2. Create the package <applicationname.images> in the Source Packages directory in the same location as main.fx.
   
   
3. Place an image of your choice in the directory.
   
   
4. Now add the lines of code that will place the image on top of the rectangle.
   
   
5. Add a reflection effect to the image.

Stage {
    title: "reflection"
    width: 325
    height: 500
    scene: Scene {



        content: [
            Rectangle {
                x: 0,
                y: 0
                width: 325,
                height: 500
                fill: Color.BLACK
            }
            ImageView {
                effect: Reflection {
                    fraction: 0.6
                    topOffset: 5.0
                    topOpacity: .30
                }

                x: 10
                y: 50
                image: Image { url: "{__DIR__}images/giraffe.jpg"

                }
            }
        ]

        }
    }

Adding Reflection to a Group of Objects

Figure 4: Applying Reflection to More Than One Object

To add reflection to a group of objects such as the box and text in Figure 4, place the objects in a group and apply the reflection effect to the group.

 Stage {
    title: "Effects: Reflection"
    width: 250
    height: 150
    scene: Scene {


        content: [


            Rectangle {
                x: 0,
                y: 0
                width: 250,
                height: 650
                fill: Color.web("#000000")
            }

            Group {

                effect: Reflection {
                    fraction: 0.75
                    topOffset: 2.0
                    topOpacity: 0.4
                    bottomOpacity: 0.0
                }

                content: [
                    Rectangle {
                        fill: LinearGradient {
                            startX: 0.0
                            startY: 0.0
                            endX: 0.0
                            endY: 1.0
                            stops: [
                                Stop {
                                    color: Color.web("#eeeeee")
                                    offset: 0.0
                                },
                                Stop {
                                    color: Color.web("#777777")
                                    offset: 1.0
                                },
                            ]

                        }
                        x: 60,
                        y: 60
                        width: 100,
                        height: 30
                    }
            
                    Text {
                
                        font: Font {
                            size: 12
                        }
                        fill: Color.web("#0b1621")
                        x: 80,
                        y: 80
                        content: "Reflection"

                    }
                ]
            }

        ]
    }
}

Try It

• Replacing the URL: You can replace the image URL with a link to your favorite image.
• Using a simple JavaFX application (a background, and an object with a reflection is all you will need), alter the value for topOpacity, and the fraction with various color combinations for the background and the object. When does the overall effect look appealing? Tip: For color selections see: Create Visual Appeal in Your UI.

Related Links

• Combining reflection and perspective transform - Chaining JavaFX Effects
• Reflection in JavaFX - Crying Baby

We welcome your participation in our community. Please keep your comments civil and on point. You may optionally provide your email address to be notified of replies—your information is not used for any other purpose. By submitting a comment, you agree to these Terms of Use.