Move an object with a parameter

Align To is not really the appropriate behavior to use if you want to animate an object between two other object positions. Link affords you some mathematical options (addition, subtraction [negative addition] and multiplication) via the Apply Mode parameter option. Link can be effectively combined with Align To... and I'll get back to this.

Simon's tutorial is about animating a third shape object from one shape object to another. To simplify this explanation as a follow along, create a rectangle and duplicate twice more -- keeping the same dimensions across all three objects makes this an easier "experiment". Color two of the Rectangles white and the third one blue (this one should be highest in the layers list so as to be "on top" of the other two when they overlap). Name the two white rectangles Left and Right... Later on, we'll arrange these using another method. For now: move the Left rectangle to the upper left side of the canvas - in a "general area" - no need to align it to anything. Move the Right rectangle to the lower right side of the canvas - again - generally placed. Keep the Blue rectangle *generally* in the middle of the canvas (we don't care about exact positioning).

The first thing you want to do is go to Properties > Transform > Position and right click on it and select Add Parameter Behavior > Link. [Note, right-click ON "Position"; not X, Y or Z.] Since all three of these objects are "Shape" objects, all their position parameters are "like" variables. (Different types of objects have TWO values: the one you see in the inspector, and the one that actually represents it "behind the scenes". Sometimes they are the same, but not often.) What that means is that the position parameter values for each object will be an identical type of value (keeping this simple).

Back to our Link behavior. As soon as you add the Link, Motion should open the Link inspector pane automatically. In the Source Object drop well, drag the Left Rectangle from the Layers list and drop into the well. The Source Parameter should automatically be added as Properties.Transform.Position. Your Blue rectangle should immediately snap to the position of the Left rectangle.

Take a minute here to slide the Scale parameter back and forth from 1 to 0 and back (it's okay to go over 1 and notice how it will continue moving along the line from its original position, over the linked Left rectangle and off the canvas and going in the negative direction will move it away from the Left rectangle along the same line.) Reset the Scale to 0 (leaving the blue rectangle in it's *original* position).

From here we're going to go back and add another link to the Blue Rectangle's Position in the exact same manner (right click on Properties > Transform > Position and Add Parameter Behavior > Link.) Add the Right rectangle to the source well. Since the first Link Scale is set to 0, notice how the second Link behaves exactly the same when you adjust the Scale parameter, except that the blue rectangle "gravitates" toward the Right rectangle.

Now, start adjusting both Scale parameters and notice their behaviors. The first link (lower in the Layers List) seems to have no effect. That is due to priority and the fact that both Links are set to Apply Mode > Replace with source. Replace means replace and the Link with the higher "priority" takes over.

Change the Apply Mode to Add to source. Now, when you change either Scale, you will see motion in either direction, although in general you still won't have the movement along the line that goes through the center of both the Left and Right rectangles except when the Link 2 (right rect) > Scale is set to 1 - Left.Link.Scale.

At this point, you have two choices. You can Rig the two Scales to a Slider widget, or you can add another link to do the addition (subtraction) of the two Scales and then Rig the Scale value of this subtraction Link. Either way, the setup needs to be Rigged because the in the first case, it's nearly impossible to control two Scale parameters at the same time and 2, the distance between 0 and 1 in a Scale parameter is small and the animation is too fast, not smooth, etc. and the range is practically infinity and we're trying to restrict the movement to between the two "control points". The benefit of method 1 is that there is no extra third link behavior to add... but that's about it.

But just for completeness:

Set the Scale of the Left rectangle > Link > Scale to 0 and the Scale of the Right rectangle > Link > Scale to 1.0.

Right click on the topmost Blue rectangle > Link > Scale parameter and Add Parameter Behavior > Link. Set the Apply Mode to Add to Source. Set its Scale to -1.0. For the Source Parameter > Compatible Parameters, select:

Behaviors > Link (lower in list) > Scale.

Now, when you adjust the Left (lower) Link > Scale between 0 and 1, the Scale of the Right Rectangle becomes equal to 1 - leftScale.

Right click on the bottom-most Link (the only Replace with Source link) > Scale and Add to Rig > Create New Rig > Add to New Slider.

In the Slider widget inspector: with the Slider at the leftmost position, set the Rectangle.Link.Scale to 1.0 (which will realign the blue rectangle to the left side reference rect). Slide the Slider all the way to the right (the right side blue dot must be "lit") and set the Rectangle. Link.Scale to 0 — if necessary (it will probably already animate down to 0 as you slide the slider).

When you slide the slider between the min and max positions, the blue rectangle will follow the perfect straight-line path between the Left and Right objects (nice and smoothly).

For the rest of this "tutorial", I'm going to use yet another rectangle to control the Left and Right reference rectangles using Align To behaviors.

Draw a new larger rectangle in the canvas (name it Outline). Make it roughly out around the Safe Zone range. Set it to Outline only. (You can center it by resetting the position if you like). With the new Rectangle selected, type Command-[ until the new Rectangle is below (behind) the Blue Rectangle in the Layers List.

Select the Left rectangle and add Behaviors > Basic Motion > Align To. Drag the new Rectangle into the Align To Object drop well. Change Align "Left" to Upper Left and change To: "new Rectangle" to Upper Left. Your Left reference rectangle will snap into the corner of the larger rectangle.

Do the same thing with the Right rectangle except set the Align and To parameter to Lower Right.

Now, your Slider widget will animate your Blue rectangle between the upper left corner and the lower right corner of your "master" (large) rectangle.

Since the "reference" (Left/Right) rectangles are exactly the same size as the animated Blue rectangle, the animation perfectly aligns with the corners of the larger ("Outline") rectangle.

Try changing the values of the Outline rectangle > Shape > Geometry > Size Width and Height parameters. Notice how everything automatically adjusts to the new size.

Things to publish (for FCPX) or easier use in Motion:

The slider (Rename this whatever you want in the Layers List, then publish its name in the Slider inspector).

Publish the Outline Rectangle Size parameter (turn off the visibility of the Outline rectangle).

You can publish each Align To Offsets (X and Y).

You can create and publish a Drop Down Rig and set up different corners to set up the Left and Right rectangles into different orientations. (You can turn off the Left and Right rectangle visibilities as well).

You can publish all the related visibilities (opacity) and colors.

If you leave the Left/Right Fills on and the Outline on, this would make a rather interesting Title with a text object replacing the Blue Rectangle (or more simply, link the position of a centered Text Object to the Blue Rectangle.

Here's a couple of examples:

(keyframed with pause at center)

(animated Outline rect and position slider from 0 to 100%)

Here's a copy of my development project (used for these examples)

http://fcpxtemplates.com/ngtopics/between2locations.zip

Make a duplicate for "de-constructing" and unpublish all the parameters and delete the Rigs (that will automatically un-rig all values). You'll then be free to fiddle with the inner workings.

This is a very limited use of "expressions" in Motion. Much more sophisticated mathematical structures can be built with various other types of objects and Numbers Generators can be used as interim value calculations and/or accumulators (to feed results to other Linked object parameters. The scope of all of this would probably require a book sized writing.

If you run into trouble with these instructions (always possible I skipped a step, or didn't explain it well enough) let me know.

HTH

You can Rig or just publish the Align To locations. You can add a Custom behavior to position the animated image to any location on the screen. Align To will place the image exactly on its end destination no matter where it starts out. There are Offset X & Y parameters to offset the end of animation by any distance you want. And, changing the size of the "null" rectangle will automatically compensate the animation. You could actually JUST use the null rectangle and animate its size (publish the Size parameters) and publish it's starting position (the Align To object doesn't even need its transition feature! The aligned object will happily follow the location it is aligned to wherever it is moved.)

There is a (Basic Motion >) Move behavior which will give you exact pixel placement to any location on the screen from any other location on the screen — no need for a null rectangle at all.

Move can be used between any two positions - even if they are animated! (no rectangle needed)

Motion will do math. Addition, Subtraction and Multiplication. Division by decimal multiplication, but you cannot divide one value by another, you have to know the result of a division to be useful (aggravating when the divisor needs to be variable.) It is accomplished by using Numbers generators in a "link chain" (as your "variables" and mainly used as "accumulators"). There are numerous problems with this method particularly when there is a "mismatch" in parameter/object types. So if you don't mind, I'd rather not go down this rabbit hole especially since I cannot see that it is absolutely required in this circumstance.

Combo wrote:

…have a mask which I want to move to an X equal to his width. I used the Ramp behavior but how to set the final value with the width of the object I want ? …

I'm completely lost in your description (screenshots, perhaps?) but I feel, the Behavior/Parameter/Custom could be helpful, which adds values to otherwise controlled parameters …

in-depth advice from Motion Master F.Mahoney here:

http://www.fcp.co/motion/tutorials-for-apple-motion/1939-apple-motion-s-custom-b ehavior-the-diamond-in-the-rough

Aligner "logos" => En bas à droite as well -- you want both corners to align.

Change Transition to Ralentir (Decelerate) (or whatever your "local" translation of that would be).

Align To will add an End Offset parameter and you can "fix" the timing of the transition to the end location. Set it to Length of Project - #of Frames animated.

You can publish the dimensions of the "master" rectangle for whatever the aspect of the video in FCPX will be (just in case you're doing a 2:1 project, etc...) and the alignment will always work.

hmmm, still lost in your problem (sorry for being stupid 😝 )

When you Align your logo to the rectangle, no off-sets needed, are they?

(click pic to see animation)

when, in this example, the logo is aligned-to lower right, it 'moves' automatically with the rectangles width/hight …

?