Hi everyone, it's Simon from MotionVFX. As you all know the NAB Show in April is canceled due to the global
health hazard and we were left with lots of cool stuff we wanted to show there.
We planned several sessions and multiple events we wanted to attend and
we are really disappointed that we won't be able to meet all of you in person to
share our enthusiasm, but we are not giving up and, hey, we can still meet
online and share some of the digital magic we have prepared. We are a company
that loves the Apple Motion and Final Cut Pro ecosystem and our products have
been setting trends and pushing the boundaries of these apps for years. Our
mission is to empower video content creators by providing them with the best
tools available. We are always looking for innovative solutions and
rising the quality levels to deliver tools of the future. We were really
looking forward to showing you the outcome of our latest projects and
efforts in person but the current situation made it impossible. So, here are some of
our hand-picked, favorite bits to share with you behind the screen our passion for
motion designing and time-saving graphic tools that profoundly facilitate your
workflow. [Music playing] With that said, we want to reach out to our
fans, clients and supporters who ask a lot of questions concerning the
know-how, workflow and creation of our templates and plugins. We want to sneak
you a peek of how our content is created to help you get a better grasp of the
magnificent software that motion and Final Cut Pro is. We also love to fix
problems and deliver solutions to make your motion designing and video editing
easier, and that's what we hope to do today. We wish to share some of our
experience and knowledge to ignite the spark of inspiration in content creators
and contribute to the whole Motion and Final Cut Pro community. So, okay let's
get started! Let's get this show on the road. Okay, so
what we will be working today on is such an intro, where you can see the animated
logo with additional lines, typography for your YouTube channel or intro, for your
video... So, this kind of design perfectly fits into contemporary trends. It's
really modern and universal at the same time. So, let's get started! So, let's start
with opening motion right now. A window will appear, in which you can choose what
kind of file you want to create. So, in motion, generally, you can create a project,
effect, generator, transition or a title. In this situation we'll choose a title,
because we work in 4K Ultra HD resolution and 24 frames per second. So,
let's choose that option right now and we are going to set the duration of the
project to something like 5 seconds to keep it concise and very dynamic. So, once
everything is ready, we just click open to start working with Motion. I'm going
to scale my working space up to fill the screen and fit my viewport. In this
situation you can also use the Shift + Z shortcut. By default, every title has a
text layer that we won't need at this moment, so let's delete that. It's also a good idea to keep the layers tidy from the very
start, and that's what we are going to do in every our product. So, in this
situation let's rename that folder to know what's what later. To create a new
group I use right click then new group or I can use a shortcut, which is
CMD + Shift + N. We'll call it Background and put a Color Solid inside that will work
as a background for our title. Now, let's choose a suitable Generator from the
Add Object menu. You can find it right here. As you can see there's a huge
variety of different Generators built in Motion that generate diverse shapes and
effects. But right now, we'll go for a simple Color Solid. Next, let's go to the
Inspector to change the default blue color into something more suitable. Here,
in the Inspector, you'll find all sorts of transformation controls for every
layer in your project. I'm going to go here, and just move it a little bit, so
you can play with position, rotations, scales, blending, shadows all of those
things. In the Generators Tab you can change our color to something different.
There are different ways of setting the right color. Choose the one you feel is
the best for you. I will go with white, but make it a little bit darker to get a
subtler look. So, with our background ready it's time to add a logotype. Let's
create a new group and import a previously prepared graphic. So, as you can see here
our logo is a bit huge, so let's scale it down, let's say by half. So, what I want to do
here, I want to animate the logo to reveal itself in two halves. For that, I
will need to have two clones of the logotype. As you can see, one of the
clones will be the upper half and the other will be the bottom. And we will
try to create some kind of reveal effect here, so, to create it we will need a mask
for those two clones. I just double-click on it and change the name to Mask.
Now, I want to move it a little bit so let's move it vertically to make it
divide our viewport in half. Remember that we are working in 4K resolution, so
in the resolution we have here it will be exactly 1080 pixels. Now, let's add an
Image Mask to both of our clones and drop our newly created Color Solid as
the mask's source. In one of our clones we will need to select the Invert Mask
checkbox. That's the situation we want to have to make the upper half of our logo
visible. Okay, let's try some animation here. Let's select one of the clones and
add some keyframes to its Y position and see how it looks. With our playhead on
the first keyframe, let's increase the Y position value a little bit to make the
half of our logo disappear behind the mask. And to polish the animation I'll
adjust the Bezier handles to make them a little bit longer.
To move forward, we'll select the keyframes and copy them to preserve the length of the
Bezier handles. So, we'll paste them on the second clone and invert the values. Everything looks neat, but let's move
one of the animations in time to diversify the reveal effect a little
bit. To play my animation I just click Spacebar. Yeah, okay, so let's add some
more elements to see if we can make it even more interesting. So, right now we
are going to create another group and create some additional elements, like
simple geometrical animated shapes. So here, I will draw a straight line shape
using the Bezier tool. So, shapes in Motion have numerous cool options, but
for a simple line let's limit our adjustments to choosing the type of ends
and color. Let's change some color to, let's say, something like black and we are going to
change the width to something like 4. To make sure everything is orderly, I'll set
the exact positions of the lines control points to the opposite values. Now, we'll
create an animation of the last point offset to make our line appear from one
end to another. Let's add some keyframes here, and another one. So I set the first
keyframe's value to zero and adjust the handles to make the animation smooth.
So, let's repeat the process for the first point offset to make the line disappear
after a couple of frames. I set the keyframes a little further in
time and again, smoothing the animation with handles, just like before. So, here's
the situation. I'll create three clones of our line. The really cool thing is
that they will keep the animation of the original one. And what I want to do here is,
I want to animate them along the diagonals of a square. So, I rotate them in the
Z-axis by multiples of 45 degrees. While I'm selecting them all I change
their Anchor Point's Y-value to make them spread evenly. That's quite a nice animation,
isn't it? So, I'm going to move the whole group with the lines in the timeline to
make them appear right after the logo. Okay, good! Now, I want to enrich my
composition a bit by adding a small caption for a slogan or description.
I will rename it to something like, let's say, Description Text then I select the text
tool and I click somewhere in the viewport. So, after that the Text Tab will
appear in the Inspector. Here we can type in our text and adjust various
formatting settings. I like working with the Work Sans font. Typography is an art of its own and it doesn't mean just picking the right font. We need to consider
harmony, contrast, alignment and many other things that constitute
well-crafted captions. Text, like any other layer, has the same transform
properties to set it in the desired place in our scene. So, I'm going to move
my text a little bit here in the scene to make it more interesting.
I'll move the whole group in the right position to something like minus 750 and
I'm going to change the color of the description. So, I'll go to Text and
then to Appearance, because the text is white right now, so I'm going to change
it to something like, yeah, let's choose that kind of color. And having that color
ready I will add the chosen color to my color swatches for further use. Now, let's
add some more elements, so we'll be working with the Bezier tool and we'll
create an underline for our description. So, here I'm going to set the lines
parameters identically to the previous lines to keep our design concise.
So, let's make it a little bit wider, I think 1500 pixels will be fine, and let's
reset its position in group, so it lands under our caption. Go to Shape -> Style and
I think I'm going to make it a little thinner. Now, I'll make a clone of the
caption that will serve as a mask for our newly created line. So, to make the
mask work as we intend, we'll use a different technique here. We'll alter its
shape using a filter and, as you know, Motion has an extensive library of
various filters. For now, what I'm looking for is a Min/Max filter and we are going
to apply it to our clone. So, switch the Mode to Maximum and adjust the Radius.
Now, our clone starts to look more like a rectangle and what I'm doing next I'm
adding an Image Mask to my line and using our modified clone as the mask's
source. Okay, it seems like our mask works but the line is visible only where the
clone is and here we are looking for an opposite effect. Let's invert the mask.
There you go. And to add some margin, we'll widen the clone on the X scale. I'm
naming my layers to keep everything tidy and clear, as you see. Now, we'll animate
the line to make it appear smoothly. I go to Shape and I create a keyframe in the
Last Point Offset. I want to set the first one to 0% and smooth the curve
with the Bezier handles, like we did before. Good animation can become a selling
point for a project. Don't use linear keyframes. They look
artificial and harsh. Besides, it's just plain lazy. Since we are animating the line, it will be good to animate the text as well is what
I think. Let's select it and trim it a little bit. And now, we'll go to the
library and search for some behaviors like text behaviors to make it even more
interesting so we can start with animating the text and see what we can
do with the really cool behaviors we have here. But to make it more
interesting, I'll be using Sequence Text behavior, which really allows you to
create your own animation from scratch by modifying a few options. Let's see how
it works. You can find Sequence Text behavior in the Text Animation folder.
After applying the behavior go to the Behaviors Tab where you'll find all
the settings that allow you to build the animation. So, let's set the duration of
the behavior, because by default, it has the duration of the entire layer. So, here
we'll add the first parameter we want to animate. I will just go to Parameters,
click add. We can choose between basic transformation parameters plus character
offset. Let's just pick position for now and see what we can do with it. And if we
set the X position to minus, let's say, something like 400, every letter in our text will
be moving from that position. We also have control over the range of the
movement and, to be honest, I have a particular animation in my mind. So, I'll
set the Range to Word and the Spread parameter to zero to make the moves look
somewhat, a little bit glitchy, yes, something like that. I will also duplicate this
behavior and use it as a base for another animation. I will remove the
position parameter and add opacity instead. So, let's shorten it a little bit
and switch back to Character range to make it appear letter by letter.
That's the idea I have in my mind, so let's see if we can achieve that. I really
encourage you to experiment with those settings, because you can create totally
different variations of your animations just with a couple of clicks. And there
you go. So, I once again duplicate the behavior,
but this time, it will be used to animate the scale of the text at the end of the
animation sequence. Let's set the scale to something like 70%, move the behavior
further in the timeline and make it a bit longer, yeah, just like that.
We love using behaviors in every Motion project. It really makes our life much,
much easier. You really should spend some time to
experiment with the Sequence Text, because it's really, really cool and once
you get bored with all the ready-made presets, you can create really stunning things.
Just experiment! That looks really, really cool! Yeah, I like it! Composition is key to great design. You
can't have a good project without it. So, when we have our project looking clear,
let's create another group and then let's rename it to something like Lines.
So, here again we'll be using the Bezier tool to draw a line and this time we are
going to make it just a little longer. So, let's reset its parameters. I do
similar things as we did before. I change the Start Cup and End Cap and my Width
and we are going to change some colors as well. Looks like I'm repeating myself,
and just like before, I'm animating the Last Point Offset of the line to make
it appear. And this time I will additionally animate the Width of the
line to make it thinner with time. Let's create some keyframe here
and a keyframe there, and let's drag some handles to make it smooth. And what i'm
doing here, I'm also animating the First Point Offset to make the line disappear
after a while. So, you can see how with couple of clicks we can create really,
really amazing animation. That reminds me old computer games where we had a couple
of pixels on the screen. So, now let's move the line to the side and create its
clone that will keep the animation of the original one. Let's change its position
and some rotation here to something like 180 and i'm going to group the two lines
together and create yet another clone. And this time it will be a clone of the
entire group, so let's double click on it and rename it to something like Horizontal
Lines. And let's move it on the timeline and see how it works. And remember that
the clone is using its source so it actually keeps the animation of the
original layer. Let's add some dynamism, and to crank it up I will animate the
scale towards the end of the movement. So let's create a keyframe here and another one
here. Let's change it to something like 600. Scaling the
cloned lines will optically speed up the animation. To boost the composition even
more I will add another line in the middle that will stretch during the
cloned lines' animation. Again, let's reset its
parameters, go to Shape, deselect Fill and select correct color, set the Width to 4 and add some keyframes here. I'm matching
the lines' parameters with the others and animating the First and Last Point
offset to make the line appear and go. And I'll make the line a little longer
by moving it's control points. So now, when we press Spacebar,
you'll see that our animation sequence looks quite nice. Okay,
now let's turn our other elements back on and set them on the timeline to
appear just after our animated lines disappear. Our intro already looks quite
lively but I would want to add yet another element. A replicator. So, right-
click, create a new group and let's call it Replicator. In that new group I'll put
a circle shape, yes, something from the center just like that. I'll set its Radius to a
much smaller value and give it the gray color we saved before. So, now when we
have that little circle set in our scene, I'm going to replicate it, and to do that
I'm going to find the top right corner, where you can find the Replicator button.
Hitting it will replicate the currently selected element. So let's increase the
size of the Replicator and deselect it for a moment to disable the on-screen
controls and see how it looks. And as you can see, here we have our group of points
and to animate them, to animate the Replicators, you can use a behavior that
works similarly to Sequence Text we discussed before. This time it's called
Sequence Replicator and you can find it in the Library Tab. And to apply it, just
make sure you have the Replicator selected and then click Apply. So, just
like before, we chose the parameter we want to animate. In this case, all we need
is opacity. So, let's change the duration of the
behavior as well. By default the animation is set to To, so the dots
start to disappear. To make them appear instead, we need to switch to From. I'll
set the Spread to something like 0, just like in our text behavior. With
Replicator selected, we can set the direction according to which the cells
of the Replicator build up. But to make it more interesting let's change the
Center, which is the default option, to something like Upper Left instead. And now you can
see that the dots show up from the top-left corner.
So, what I want to do here, I want to animate the size of the Replicator. In
the duration of a single frame, we will change this size from 700 to 2000
pixels. When you create such short animations, we need to consider motion
blur as well, which as we see, appears in this frame. So, let's turn it off. To avoid
that, we need to change the interpolation of the keyframes to Constant. So, let's
turn off motion blur and check out how our animation looks like. So, I have those
two keyframes here and I will duplicate them and paste them at the end of the
intro to make the Replicator go back to its previous size. To reverse the
animation, let's select the keyframes and choose Reverse Keyframes.
It seems like our Replicator is ready. Now, turn on all the other elements and make
them work together in time. Good timing can really make a difference and make
the animation special and engaging. So, let's adjust a few elements here, maybe
move some keyframes, there you go! All right, to finalize the look we'll
animate the background to make it harmonize with the video beneath. So, I'll
create some keyframes here to animate the position of the Color Solid and move
it off-screen. Let's smoothen the curve with the
handles, just like we did before, and duplicate the whole element. So, I'll move
the duplicated element further in time and give the first one the dark color we
kept in our color swatches. There you go. So, let's move all the other elements in
the timeline to make them animate in after the background appears. Our intro
looks good! We have the background, we have some additional animations and our
logo appears in whole around two seconds after the start. So, I'll move the
Replicator's keyframes a little bit to the left to leave some time for the
outro animation. So, let's make things a little bit tidy. I will now create a new
group and put all my content inside. There you go. We can now animate the
whole group to move from our intro back to the video below. Yeah, let's make some
keyframes here in the Y position and try to keep all the animation handles at
the same length to make the whole composition have a similar flow. Just
beautiful. Once our animations are ready we may
want to use it not only for the logo, but maybe also for some typography. For
example as an interlude between two different shots. And to make that
possible, we'll create a Rig. So let's create a new group here and let's move
our logo and change the source of its clones to
the group instead of the logo itself. So now I will add a text layer to the group.
It will work as our title. Let's go to format and let's type something like episode 01. So I'm playing with its formatting a little bit, like changing this size and I
want to give it a nice purple color, matching our logo details. Matching
colors makes certain elements stand out and other just blend in
It's one of the crucial points in designing and it will decide on the overall
mode of your project and how it will be received. I'll put it right in the center
of our screen. Of course, you can use guides to make it easier and more
accurate. You can turn overlays on from the View Menu and then just drag the guides
to where you want them to be. So, right now it's much easier to align our text. And let's align it to the center and
change its tracking to make it look tighter. Something like -5
maybe. Okay. now let's turn this group off and turn
the clones back on. It seems like we need to correct their scale after we changed
their source. So, let's go to.. so, let's select the first group, go to properties
and let's change the scale to 100%, then select the second one and let's do the
same. Okay, so let's make some rigging, and rigging allows users to modify a complex
group of parameters with a small set of controls. So, now we'll add a simple Rig
to our project and you can find it in the Add Object menu. You can also use a
shortcut shown on the screen. So, here we have a couple of options and we will add
a pop-up Rig that will give us a list of possible choices. Let's name the first
one Typography and the second one Logo. So, now when we have a Rig, the Rig doesn't
work without parameters, so let's select the Text here and click and choose Add
to pop-up. Do the same with the Logo, just click,
choose Add to Rig, Rig and Add to pop-up. Now let's get back to the Rig and set
the parameters according to the presets. In the Logo mode, we need to set the
opacity of the Text to 0%, and the other way round, for the typography preset. Rigs
can be applied to control much more complicated and complex systems, but for
this example this will do. It looks like our intro is ready! We can now
clean up and remove the guides to keep everything spotless. OK, let's go to Final
Cut Pro. If we now drag and drop our Intro on the Final Cut Pro X
timeline you can see that in published parameters on the right side we don't
have anything. So now, when we have everything ready, it's time to publish
some of the parameters for further use inside Final Cut Pro X. So, let's select
the Text group and let's go to the parameters where we can change our text
and let's click and choose Publish, so we will be able to change our text in
the Final Cut Pro. Let's publish a few more parameters here. Font, size, tracking,
offset, color and similar parameters are the easiest way to personalize the text
for your current purpose. So, we are going to publish a couple of
more elements here. Let's go to Bezier as well and publish that parameter. A great
way to modify a few comparable parameters at once is linking. So, I
select the Bezier and click on it and choose Add Parameter Behavior and then
choose Link. I select my Bezier 1 and just drag it and drop it to the source object.
It might look really complicated here, but once you get it, it's really
useful. Of course we don't need every single parameter visible in Final Cut Pro, so
we just publish a couple of them to be able to modify them in Final Cut Pro. So,
I'm doing a few more publishes here, I'm publishing all the necessary colors from
the scene like, Lines, Background, Replicator, etc. And, of course, we can't forget about
our pop-up Rig. All our published parameters can be viewed by selecting
the Project Panel. The same list will be visible in Final Cut Pro X's Inspector
once we put our intro in the timeline. We can move a few parameters here like on the
top and just rename them to make it more accessible in Final Cut Pro. So, let's
rename the parameters in the list to make sure we know what's what. All right! It's time to save our project.
So, let's name it My Intro and save it. OK, let's go to Final Cut Pro. First,
let's put some footage in the timeline. Titles are usually put upon the current
edit, to join video and motion design. You can find our intro in the Titles Tab,
in the folder where we saved it. We called it Designs. I'll drag my intro and
I will just drop it on my timeline. There we go. On the right, inside the Inspector
we have the list of published parameters we prepared earlier in Motion. They look
exactly the same. So, here we can easily customize the whole content, having
access to all the parameters we published. Let's edit the description just
a little bit. And you can see how easy it is right now. And let's copy the color in
here. So, our customized intro looks really,
really great, but we cannot see the underlying video. We need to publish the
opacity parameter for the Background to make it just a little bit more
transparent. So, let's make it very quick. Right-click on the title layer and
choose open in Motion. That brings our Motion project back. And here we can
easily publish the missing opacity for our Background group. So, there it is, okay,
so, let's rename it to make it easy to find and we can go back to Final Cut Pro.
To refresh the changes in Final Cut Pro we can use a very clever trick here, that
will do everything quickly and effortlessly. So, let's cut and paste your layer
and the freshly published parameters will appear in the list. Now we can add
some transparency to our background and see just a little bit of our video as
well. All right! We made it! Cool! Okay, that's about it for now folks! I hope you
liked that quick lesson and that we managed to awake your creativity and
passion to edit, design and contribute to Final Cut Pro ecosystem. Stick around
for more as we are currently working on some amazing plugins that will probably
shake the industry again, and open some new doors for even more efficient and
spectacular creations. In the meantime please visit our store and explore a
whole universe or Final Cut Pro plugins and Motion templates. Stay tuned, stay safe
and see you soon!
