Using FireMonkey Image Effects
FireMonkey provides many different types of built-in image effects that modify an image either individually or in concert with others to achieve various visual effects.
In this tutorial, you will use several basic image effects in a FireMonkey application.
Step 1: Apply an Effect to a Picture
In FireMonkey, applying an image effect to a picture is a straightforward process. Simply create a component that holds a picture, and then apply one of the image effect components.
- Create a new FireMonkey application (File > New > FireMonkey HD Application).
- Place a TImage component on the form. To do so, type “image” in the search box on the Tool Palette, and then double-click the TImage component:
- You can see that the TImage component is not placed at the center of the Form Designer. As shown in the image, you need to make the size of the image area as big as possible. To do so, select the TImage component on the Form Designer, and then change the Align property to
alClientin the Object Inspector to make the size of the TImage component be the same as the client area of the form.
- Select the picture to which you want to apply the image effect. The TImage component holds the picture in its Bitmap property. Select the Bitmap property on the Object Inspector, and use the Edit… menu to select a picture.
- Now you can select an Image Effect Component. Go to the Tool Palette, type “effect” in the search box, and select TRippleEffect. In the Tool Palette you can find many effects available. You can read detailed explanations of these effects at our API Reference (FMX.Filter.Effects).
- Now the RippleEffect component is displayed on the Structure Pane.
- To apply an effect, an effect component has to be defined as a child of another component. In this case, RippleEffect1 should be defined as a child of Image1. To do so, drag RippleEffect1 and drop it to Image1 component on the Structure Pane.
- Making the RippleEffect component a child of the Image1 component
- Now you can see that RippleEffect is already in works on the Form Designer.
- You can also change how this effect applies to the image by changing some properties. For example, changing the Frequency property to
20changes the effect as displayed in the following image.
Step 2: Apply an Animation Effect to a Property of an Image Effect
As discussed in FireMonkey Animation Effects, any numeric property can use animation effects (changing value over time). At this step, apply one of the typical animation effects, TFloatAnimation, to this sample application.
- Select RippleEffect1 on the Structure Pane.
Select the Phase property in the Object Inspector, and select Create New TFloatAnimation from the drop-down menu.
Make sure that now FloatAnimation1 is defined as a child of RippleEffect1.
Change the properties of FloatAnimation1 as follows:
Property Value Description
The amount of time (in seconds) to animate from the start value to the stop value.
Starts the animation during the initialization of the runtime.
Repeats the animation indefinitely.
Specifies the name of the property to animate.
Terminates the animation of this property when it reaches this value.
- Execute the application. Now you can see how the ripple effect progresses over time.