How it works...
The Group class (a node itself) allows the grouping of two or more nodes to be placed on the
scene graph. One of the features of the Group node is its ability to apply a blending algorithm
to the group's members. It applies its algorithm to all children in its content property when a
blend mode is provided through the blendMode:BlendMode property.
In the previous sample code provided, we use Group instance imgPanel to apply blending
effects to two images placed in the group. Let's take a closer look at how the application works:
F The images —the first thing we do in the code is to declare two instances of
ImageView , img1 and img2 . To ensure that the images fit in a pre-determined
dimension on the screen, we set the properties fitWidth and fitHeight on the
two instances. Then, we place the two images in a Group instance called imgPanel ,
where they will receive blending effects.
F The image animation —to make things a little interesting, the code uses an instance
of Timeline to animate the two images. The first KeyFrame instance slides img1
from the left-hand side to the middle of the screen, and the second KeyFrame
instance slides img2 from the right-hand side to the middle of the screen. The two
images stack up in the middle of the screen where you can see the selected blending
F Loading the images —when the user types the URL location of the images in the
TextBox instances, with property id="addr1" and id="addr2" , and presses
Enter , this invokes the function loadImg() . That function loads and attaches the
loaded image to instances of ImageView img1 and img2 , respectively.
F Applying the blend — Group variable controls contains two rows of RadioButton
instances (not all shown in previous code). For each instance of RadioButton , the
code assigns the name of a BlendMode as its text content (that is, "ADD" , "COLOR_
BURN" , "MULTIPLY" , and so on). When the user clicks on the button titled Blend-
Image, it creates a BlendMode object using the text of the selected radio button,
and applies it to the imgPanel Group containing the images, as shown:
def mode = toggleGrp.selectedButton.text;
imgPanel.blendMode = BlendMode.valueOf(mode);
BlendMode.valueOf(:String) returns an instance of BlendMode based on