Using FireMonkey Image Effects

From RAD Studio
Jump to: navigation, search

Go Up to FireMonkey Quick Start Guide - Using Image and Animation 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.

GoldenGateBridge.png GoldenGateBridgeWithRippleEffect.png

How a ripple effect applies to a picture

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.

  1. Create a new FireMonkey application (File > New > Multi-Device Application > Blank Application).
  2. 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:
    SelectingTImage.png
    Selecting a TImage component on the Tool Palette
    WhiteSpace50.png
    TImageOnFormDesigner.png
    Placing a TImage component on the Form Designer
    WhiteSpace50.png
  3. 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 Client in the Object Inspector to make the size of the TImage component be the same as the client area of the form.
    SetAlignForTImage.png TImageWithAlClient.png
    Changing the Align property to Client
    WhiteSpace50.png
  4. Select the picture to which you want to apply the image effect. Open the MultiResBitmap Editor from the MultiResBitmap property from the Object Inspector.
    Note: The MultiResBitmap property allows you to have images of different scales for different device resolutions.
    GoldenGateBridgeOnForm.png
    Selecting a picture on a TImage component
    WhiteSpace50.png
  5. 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).
    SelectRippleEffect.png
    WhiteSpace50.png
    Now the RippleEffect component is displayed on the Structure Pane.
    RippleEffectOnStructure.png
    WhiteSpace50.png
    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.
    SetRippleEffectAsChild.png RippleEffectAsChildOfImage.png
    Making the RippleEffect component a child of the Image1 component
    WhiteSpace50.png
  6. Now you can see that RippleEffect is already in works on the Form Designer.
    RippleEffectInAction.png
    Applying a ripple effect to a picture on the Form Designer
  7. You can also change how this effect applies to the image by changing some properties. For example, changing the Frequency property to 20 changes the effect as displayed in the following image.
    RippleEffectWithDifferentFrequency.png

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.

  1. Select RippleEffect1 on the Structure Pane.
  2. Select the Phase property in the Object Inspector, and select Create New TFloatAnimation from the drop-down menu.
    SetFloatAnimationToRippleEffect.png
    WhiteSpace50.png
    Make sure that now FloatAnimation1 is defined as a child of RippleEffect1.
    FloatAnimationAsChildOfRippleEffect.png
    WhiteSpace50.png
  3. Change the properties of FloatAnimation1 as follows:
    Property Value Description

    Duration

    10

    The amount of time (in seconds) to animate from the start value to the stop value.

    Enabled

    True

    Starts the animation during the initialization of the runtime.

    Loop

    True

    Repeats the animation indefinitely.

    PropertyName

    Phase

    Specifies the name of the property to animate.

    StopValue

    20

    Terminates the animation of this property when it reaches this value.

    FloatAnimationPropertyForRippleEffect.png

    Setting the properties of FloatAnimation1
    WhiteSpace50.png

  4. Execute the application. Now you can see how the ripple effect progresses over time.

Applying Multiple Effects to a Picture

FireMonkey does not support multiple effects for objects, but it can be implemented using a container TLayout, for each different effect.

For example:

To apply two effects to the Bitmap of a TImageControl, apply each effect in a different TLayout:

  1. Place a TLayout (first container) on the TForm.
  2. Place another TLayout (second container) on the TForm, hierarchically hanging from the first container.
  3. Place a TImageControl hanging from the second container.
    1. Edit the Bitmap property to load an image.
  4. Place the effect TBlurEffect hanging from the second container.
  5. Place the effect TReflectionEffect hanging from the first container.

The effects apply at design time and at run time.

See the result in the Structure panel.

Multiple Effects Structure Panel.png

See Also

Samples