Mask/Image Positioning

Introduction. There will be times when you’ll want to cut your image up into pieces, non-destructively, and put them in various places on the screen. You would accomplish this with a mask and a copy of the image for each mask. A simple mask would be a rectangular layer, an all-white gradient or solid layer, positioned over the image. If the image piece (determined by the mask) is to move around the screen, then the relative pan-x and pan-y settings of both the mask and the image are going to be the same (their actual settings are going differ). In this case, we’re assuming that the mask is somewhat smaller than the image.

The layer’s position is referenced from its center. So, a pan-x of -50 will move the layer to the left. The layer’s center lies on the frame edge, the left half is off-screen, and the right half is visible. Move the layer to -50,-50 (pan-x, pan-y) and only the lower right quarter of the image is visible.

So, if you want the same part of the masked image visible as the mask moves around the screen, the image position must have its position adjusted accordingly. For instance, let’s say you want to display the upper left third of the image. In this case we would use a mask sized to the aspect of the screen (say 16:9 aspect, or 1280×720). The zoom would is then set to 33.45% for both zoom-x and zoom-y. Now, position it to -33.33, -33.33 (see the graphic for an explanation of where these numbers come from). The image is at 0,0. For simplicity sake, this image is a 16:9 image (the same as the show frame) and set to 100% zoom.

rame with 9 Positioned Mask Layers
Figure 1 Frame with 9 Positioned Mask Layers

With the mask positioned here, the upper left third of the image is displayed when masked. If the mask is now moved to -33.33, 33.33, the lower left third of the image is displayed. However, that’s not what we want. So, we have to make the image move the same distance the mask moved and in the same direction. The mask moved a distance of 33.33 + 33.33 = 66.66. So, the image’s coordinates must now be changed to 0, 66.66. The image’s upper left corner is now back under the mask. Move the mask to 33.33,33.33. We have to move the image the same distance that the mask moved. So, the image is now going to move to 66.66,66.66 to keep the its upper left corner under the mask.

So, every time the mask moves, we must calculate how far it has moved in each axis. Then, we have to move the image the same amount of distance in each axis to keep the same portion of the image beneath the mask. That can get complicated, especially if the image is NOT the same aspect as the mask layers. It is possible to simplify the movement this considerably. That is, we can off-load the calculation from ourselves to the program. In this fashion, we can make even complex position changes for the mask and no calculations for the image whatsoever. How? By using a modifier.

A pan following modifier aligns the image layer center to the mask layer center. Then, by adding an offset to the image that effectively subtracts the masks position, the relative image position to the mask is maintained. So, for instance, if the mask has a position of -33.33,-33.33 and the image and layer centers have been aligned using a pan following modifier, we simply add 33.33 to the image’s pan-x and 33.33 to the images pan-y values. -33.33 +33.33 = 0. So, that means the image has now been offset back to screen center for its default position. Since the image is now tied to the mask layer’s position, any change in the mask’s position automatically adjusts the image’s position accordingly.

Frame with the Upper Left Mask Active
Figure 2 Frame with the Upper Left Mask Active

Pan Follow.What is pan following? It is a modifier containing an action similar to the following: + Pan X from Layer #, where “#” represents the layer number (see Figure 21, Pan Follow Modifier).

  • So, if the mask is layer 1 and the image layer is layer 2, we would right click over layer 2’s pan-x box, select “Add Modifier” in the popup menu.
Pan Follow Modifier
Figure 3 Pan Follow Modifier
    • Next, we would select the radial button for Variable Amount Using. This is where we tell the program WHERE we are getting our modification to layer 2’s Pan-X from.
    • We then select Pan X.
    • Next, in the “From” box, we select Layer 1 from the dropdown list (which we got by clicking on the down arrow at the far right of the From Box).
    • In the Actions box we now see + Pan X from Layer 1 (“layer name”). The “layer name” will be the name of the layer selected (in this case, that’s the name associated with layer 1).  That’s the basics of it.
    • By default, this selection will apply to all keyframes on the layer and there is a 1-to-1 association between the mask’s position and the image layer’s position (because the Multiplied by option is set to 1 by default).
    • Using the example frame above, we note that the mask’s pan-x position is set to -33.33. That implies that we need to offset the image layer to compensate for that position and move the image to the right by 33.33 (that is, the default position of 0 – (-33.33). We do that by clicking on the “+” in the Actions title bar. By default the radial button for Constant Amount is selected. Enter 33.33 into the box just to the right of the words Constant Amount. There are now two action lines:

+Pan X from Layer 1 (“Layer Name”)
+33.33

Our actions are Now, click on OK. We do the same thing for the image’s pan-y. In that modifier, our actions will be

+Pan Y from Layer 1 (“Layer Name”)
+33.33

Now, wherever the upper left mask moves, the image layer will follow it precisely with the same area always showing beneath the mask. You will do this for each of the 8 other mask and their copy of the image. The image will always follow the pan of the mask layer above it. Each image will be offset from the mask’s position such that the image layer’s center is reset to screen center. Use the example figure above as an guide to how much offset each image layer needs. Each mask will have a copy of the image layer beneath it. Each mask is initially assigned a position such that when all a placed in their proper positions, the entire screen frame is covered. Their position, in this case, represents the amount of image offset needed to return the image’s layer center to screen center. Note that if the mask pan value has a positive value, the constant amount offset can be entered as a negative number or you can enter a positive number and change the “type of action” for it to [-] Subtract from Modifier.

The pan-x and pan-y boxes should now contain a little red triangle in the upper right corner (See Figure 2). Now, make sure the image pan values are all set to 0 for all keyframes (all positioning information is contained in the modifier’s actions).

Pan Modifier Indicator
Figure 3 Pan Modifier Indicator

Image Explanation. See Figure 19, Frame with 9 Mask Layers. This figure represents the screen frame which has been divided into 9 equal segments. Each segment (representing a mask layer) represents a third of the x-axis and a third of the y-axis. Each segment is actually 33.45% of the screen tall and wide. However, to address the problem of partially transparent pixels (see Partial Transparency Pixels) around the layer edges, the layers are positioned as of there were exactly 33.33% of the screen. The slightly oversized segments are then forced to overlap by a small amount. The following table gives the Figure 19 mask layer’s position information:

A    -33.33, -33.33    B    0, -33.33    C    33.33,-33.33
D    -33.33,0          E    0,0          F    33.33,0
G    -33.33, 33.33     H    0,33.33      I    33.33, 33.33

Each mask has an associated image and each image has a zoom of 100% and the same scale as each of the mask layers. When using a pan following modifiers, to move the image back to screen center, it needs to have its center move back to screen center. Therefore, we need to subtract the mask’s position from the layer’s position. accordingly, we need to move the image center effectively back to 0,0. For Mask A then, the image’s position must subtract -33.33 from its position of 0 for a result of 0 – 33.33 = 33.33. For Mask I, the result would be 0-33.33 = 33.33. Once the image offset from the mask has been established and dealt with, everywhere the mask moves, the image automatically follows it.

If the movements are to be done manually, we have to ensure the image travels exactly the same distance as the mask in exactly the same fashion as the mask. Except for very simple motions, that can become very difficult very quickly.

Each mask has an associated image and each image has a zoom of 100% and the same scale as each of the mask layers. When using a pan following modifiers, to move the image back to screen center, it needs to have its center move back to screen center. Therefore, we need to subtract the mask’s position from the layer’s position. accordingly, we need to move the image center effectively back to 0,0. For Mask A then, the image’s position must subtract -33.33 from its position of 0 for a result of 0 – 33.33 = 33.33. For Mask I, the result would be 0-33.33 = 33.33. Once the image offset from the mask has been established and dealt with, everywhere the mask moves, the image automatically follows it.

If the movements are to be done manually, we have to ensure the image travels exactly the same distance as the mask in exactly the same fashion as the mask. Except for very simple motions, that can become very difficult very quickly.

© 20110419-2323, Dale Fenimore
140525-1055

Leave a comment