Ever wondered how pro templates are made? From user friendly UI to powerfull
effects, Fusion let's you extend the base UI functionalities
with custom controls and scripting. Sounds a bit scary? Fear not! Because even if this tutorial
is going to be a little nerdy, we're going to take you on a trip
that would change forever the way you build Fusion compositions. Let's get started! First, thank you to everyone
who has been supporting our channel. We really appreciate it. If you haven't subscribed already,
think about doing so. What are custom controls? Well, let's have a look at one of our
templates available in our store. All those UI elements, buttons, dropdown
menus, are all built using custom controls
and a little bit of code. This makes them
not only better looking and easier to use. It is allowing us to do things
that would be otherwise unfriendly, ugly, or downright impossible. In this video, we will cover most of the custom controls
available to you in Fusion. But this topic can be fairly abstract,
so we custom built a custom interactive set that you can use to practice and follow along with this tutorial
So before we get our hands dirty, there's a few things
that we are advising you to do. First, download the training package
from our store. This contains a DaVinci Resolve projects
and a manual that you will find very useful during practice. 2, This is completely optional,
but I would recommend that you download an advanced text editor
like Atom or Notepad ++. They are completly free, lightweight,
and both are capable of properly highlighting
the Lua code that Fusion is using. Don't worry, I am not going to make you code anything crazy in this tutorial,
but using the right software will make editing your templates much easier
and save a lot of time. To import the project that you downloaded. Go to the project manager, right click into an empty area
and select Import project. Navigate to where you downloaded
the package and open it. Once you opened the project, you will find in the media pool,
a composition named Radio. Double click on it to open it
automatically in the Fusion page. This Radio has been designed with custom
controls in mind, and we're going to build all the controls that will connect
and animate all the different elements. This should offer you a very visual way
to learn custom controls. Each part of the device
has been organized as a module and this is something that you'll
want to apply to your own design. This is similar to building software
and will not only keep your composition clean and easy to read,
it will make it much easier to dive back into your design, fix things,
or even extend its functionalities. You can easily navigate
between any of those modules and by opening the bookmark menu
and selecting one of them. Let's go to the control module. The centerpiece of this composition
is this ControlCenter node, and this is where we will be adding
every custom controls. There are few reasons for this: One,
We will only need to access one node to control our template. Two, custom controls actually only exists
in this instance of the node This means that if anything goes wrong
and we need to go back to a clean slate, we just need to remove this node
and replace it with a new one. Three, As all the custom controls
will be centralized into one node. If we make editing them
or fixing any mistakes, much easier. Four, building great templates
this way will be much faster and cleaner. Quick tip! While you can create your own bookmarks
to quickly navigate to any parts of your composition,
all those were automatically generated by adding an underlay tool
for every module. An Underlay is actually a tool
that can contain any number of nodes. Nodes can be moved in and out very easily, and they also provide a space to quickly
add comments. Click on the underlay itself
and all the nodes within will be automatically selected.
Super handy. Click on the ControlCenter
node to open it and use this little pin icon on the top right
to keep this tool visible at all time. As we will navigate back and forth between all those nodes,
this will speed up our workflow. You might be asking
What is this ControlCenter node? Well, it is nothing more than a Shape
Merge tool that we renamed. You could use any kind of node for the simpler, the better
and we're using this particular one because most of our composition
is built out of shapes. Time to see how controls are made. Right click on the ControlCenter
node and select Edit Controls. This tool is not an example
of great UX design and while it is often a good starting point,
it is at time to little limited or buggy. We'll start with the anatomy of a control. Let's take the Override Axis
as an example. Open this dropdown menu that contains all the controls of the
active node and select Override Axis. A control as a name,
which is what you see in the inspector. A unique ID, which is what you will use
any time you need to access it. Kind of like the IP address
of a machine inside a network. A control also has a type that defines
what kind of data it would be returning. There are three types. Number,
the most commonly used. Point, to manipulate the coordinates
of points in a space and Text that is used for text input
or importing files inside a composition. You can choose to which page
the control would be added and with those two checkboxes,
if the control can be keyframed for animation
and if the control is passive or not. This last one is often overlooked,
but it is very important that you set any decorative control
such as labels, as passive. We'll get to why shortly with an example. The Input Ctrl defines
the function of this control and how you will interact with it
in the inspector. In this case, the Override Axis
is a CheckboxControl. The view control lets you choose if you want to add a visual
overlay control to manipulate attributes like, position, size, or angle
from within the viewer window. And finally, the range and default
state of the control. But more on that in a minute. Let's move this Override Axis
control out of the way by changing the page
to Common and clicking OK. This made the control to be displayed
in the Settings page and leaves us with a clean slate. Let's get back to the Edit Controls window
to add our first custom control. I wish Blackmagic would make it possible
to add a bunch of controls or edit them without having to close
and re-open the window. This is one of the reasons why I build
most of our tools with a text editor like Atom or Notepad ++. We will start by adding a title name
RADIO CONTROLS at the top of our template. Choose number for its type, Controls
for the page and it will be the same for every control we build from now on
and for the input select LabelControl. The label control is a very simple one,
but it is essential if you want to keep your templates
clean and organized. There are also extra parameters
on the right that we will use toward the end of the tutorial
to create a collapsible section of the UI. Before we leave, we're going to
uncheck Animatable to remove the little key that appears
next to the control in the inspector. And check passive. As this control is purely decorative,
we want it to be bypassed during rendering, and this is exactly
what this option is doing. Click OK and the title is now
showing up in the inspector. Let's open the Editor
again to add another control. We'll name this one Text Input as this is
exactly what we intend to create. Press tab or click in the ID
field to generate a unique ID. Note that the space in the name
was automatically removed as would any character that would
otherwise collide with the script. Set the Type to Text
and the page as usual. For the Input Ctrl,
choose TextEditControl. I am also going to set this control
as a single line input field. Click OK. And you'll find it
added inside the Inspector. You can easily fix any mistakes
that you might have made, but to remove a control you must edit
the node inside a text editor. That or deleting the node
and starting from scratch. We'll get back to this text input later,
but for now make sure it stays empty. Next control is going to let us manipulate
the radio antenna. Open the editor and Antenna-Ctrl
for the name. Look how it swapped the minus sign, which is a forbidden character,
for an underscore to avoid any conflict. For Type, choose Number as we need
this control to return a numerical value. Page, set as usual and for
the input we'll go for a Slider. A Slider as a visually defined low and high value which
makes it perfect for the antenna. Set the range from 0 to 0.18
and the default to 0. Allowed is a very important
parameter, letting you decide if the user can type in values
that can go beyond the defined range. Surely, we don't want the antenna
to be pulled out of the radio, so we are limiting it to the actual range. Click OK! Now for the fun part, let's connect
this Slider to the antenna. Use the bookmark to travel
to the Antenna module. Select AntennaTr and create an expression
by right clicking on the Y Offset and select expression. In case you don't know what an expression
is, see it as a window to the inner working of your composition
where you can write a script in Lua code to achieve things that
would be otherwise impossible. Now there are two ways to proceed. The pro way or the easy way. We start with the easy way
as this requires no extra bit of code. Grab the + icone and pull
it to the Antenna-Ctrl. This automatically connected
them and we can now use our newly created control
to move the antenna. Sure, we could have done the same
thing using the original control and we could have even edited its range. But really, avoid messing up
with built-in controls as this is the fastest way
to composition hell. Alright, no time to lose,
let's build a new control. Again, you can use the bookmark
to jump to the Control module. This one will be a little more complex and will show you
why custom controls are so great. Open the editor and name
this one Dial-Ctrl. Keep number as type. Set the page and this time
choose ScrewControl as the input. The type of input is ideal when you need a control
to work with a very large range. But we're choosing this one primarily
for the look and feel of volume dial. Your templates layout
should be as intuitive as possible as this is the key to a
good user experience. Set Default to 0. The range from 0 to 3.6 and the same for the Alllowed range. Click OK! Using the bookmarks,
go to the Dial module. Select the DialTr node and add
an expression to the Rotation control. This time we'll type our script manually. Be very careful when typing a script
as any mistakes, a missing capital, for example, would create a bug
and very likely stop rendering. As we need to reach a control
that is nested within the ControlCenter, we start with the node name. Add a dot and type the control ID. Not its name, as they
might not be the same. and add the asterisk character
for multiply, followed by -100. And just like that, we just wrote
a simple mathematical operation. Type [Enter] or click outside of
the field to validate the script. Okay, that's sweet, but
nothing to keep you up at night. Lets add some extra brain to it
by making this LED light up whenever the dial is turned. For this, go to the Light module. Select the light node. Go to the Style page and add an
expression to the Green channel. This one will require some
simple conditional scripting. Now we don't want the LED to turn ON right away as we usually need it
in motion before the switch kicks in. We will use the condition iif()
for this purpose. And yes, there is a double "ii". Now let's see how the script is built. If the Dial control, which is inside
the ControlCenter node returns a value smaller than 0.2, then set this control
to 0, otherwise set it to 1. If you run into any issues
you can copy our script from the manual. Get used to typing them though as this is
the only way to practice and learn. Now when using the Dial-Ctrl
and after a short distance, the LED is turning green.
Okay, pretty good. We now have two different parts of
our design operated by one single control. We can do even better, I think. What about a visual clue
that music is playing on the radio? Head to the Music module, and select the NoteTr node to add an expression the X Size control. We want this expression
to change the size of this module whenever the Dial control
is returning a value above 0.7. So as before, we need the conditional code
setting by if the Dial control which is inside the ControlCenter
node, returns a value higher than 0.7, then set this control to 0.5,
otherwise set it to 0. Now, when turning the dial control, a music note is appearing
when reaching a volume above 0.7. But what about if the music gets louder? Could we add another feature
to the Dial Control? Still inside the Music module,
select the NoteDuplicate node and add an expression
to the copies control. We saw how to use the iif() expression to create an action
whenever a condition is met. But what if we would like to trow in multiple conditions like reaching
different volume thresholds? This is possible by nesting
as many iif() expressions as we need. Same as before, start with
If the Dial control, which is inside the ControlCenter, reaches a value smaller
than 1.8, then set this control to 0. But if the Dial control returns a value smaller than 2.8,
then set this control to 1. Otherwise set it to 2. Now, as you pump the volume up,
extra music notes will progressively appear
and every time a little larger. You could add extra iif() expressions
of course, and make those music notes, grow even larger. Try changing the two digits by larger
numbers and see how the script reacts. Our next custom control
will give us the option to choose between different radio stations and change the frequency
displayed on the radio screen accordingly. This is particularly handy when you want to provide
multiple presets inside a template. Name this control Radio Station. Keep Number. Page as usual and for the Input
Ctrl, ComboControl, which is a list. Lets add three random station names and you can remove or reorganize this list
by using the 3 other buttons. But wait, if the list
is made up of letters, why is it type set to numbers
and not text? This is because this control isn't returning a string or text,
but the value for each element. 0, 1, 2, etc... In programing, list are
always starting at 0, not 1. Click OK! Go to the Text Module. Select
the RadioDigit node and right click inside the text field to add an expression. This script is very similar
to the one we just created but this time we are manipulating strings. Here's the script. So first we need to tell the program
that the value inside this field is a text. Then we're going to add
some conditional expression. So if the RadioStation control,
which is inside the ControlCenter node, returns a value equal to 1,
then write "82.6". But if the RadioStation control
returns a value equal to 2, then write "105.9". Otherwise, write "183.7". There's two things in the script
that you really have to pay attention to. First, the double "==". If you were to write only one of them,
the script would bug. 2. The quotation marks, any strings of text,
must be contained into quotes. That done! And now we can switch
between stations using the dropdown list. For the next control, I would
very much like to add a series of buttons, but we are going to run
into a silly issue. Ok! Name it buttons. Set the Type as Number, the Page as usual, and for the input, choose
MultibuttonControl. Wait, that looks a lot like the
ComboControl we used for our station list. The inner workings
are fundamentally the same but it is supposed to display those elements as individual buttons
rather than one dropdown list. This makes it perfect to build visual
and intuitive controls as after all, you wouldn't like when playing music on your phone to have to open a menu
to stop or skip tracks. We're going to add three items. Like, Sub, and Off. Check Button, Name and Stretch so that the buttons, evenly
fill the width in the Inspector. Also, I would like the default state
to be set for the Off button. So 0, 1, 2... Type 2 as default. Click OK! What the heck? This is giving us another dropdown list
instead of 3 separate buttons. At least when using DaVinci Resolve
as this is working as intended when using Fusion Studio. Come on BlackMagic. Why? But the beauty of code is that those controls are pretty easy to hack
so we can get around such limitations. Now this step is completely optional. You decide if you want buttons,
in your template or not. If the answer is yes, select every nodes
and copy them, open your favorite text or code editor, in our case, Atom
and paste everything there. Look at all this code! This is our composition and that block right here is all
the custom controls that we added. Thankfully, Lua is a pretty
clean and simple language to work with, and we only need to add
one single line of code. In the manual, copy the
MBTNC_ForceButtons parameter. Using your text editor search feature,
search for buttons inside all that text. Place your cursor in front of the first
MBTNC parameter, paste and make sure that you have a coma
at the end. Select everything on this page, copy
and return to Fusion. Your nodes should still be selected. So use the [Backspace] key to delete them
all and replace them by the code. that we just modified. You have to reassign the MediaOut
by dragging it to the viewer. Go back to the ControlCenter
to enjoy your new buttons and don't forget to repin
this node to keep it opened. Was that part scary? We do have plans for a video,
about advance scripting, so if this is something
that you be interested in, please tell us in a comment. Those buttons might be pretty. But right now they don't do much.
We're going to change that. First, we'll make that one
button at a time can be pressed. Let's go to the Buttons module,
select the Button1 node and add an expression
to the Y Offset control. For the script, we want
that if the Buttons control inside the ControlCenter is equal to 0, then set this control at 0.122,
otherwise set it at 0.129. Now select this script and copy it. Select the Button2 node. Add an expression to the Y Offset and paste the same expression here. Next go to the Text module. Select the NeonSign node
and as we did for the radio screen, right click in the text
field to add a new expression. So again, we first need to specify
that we're dealing with text, then add some conditional code. If the Buttons control inside
the ControlCenter is equal to 0, then write "Like". otherwise, if the Buttons control is equal
to 1, then write "Subscribe". Else, get the value from
the Text Input control that we created inside the ControlCenter. Okay, let's try those buttons now. Like Subscribe This is working great! The Off button also has
a double function now. Type something in that text
input field that we first created and it will be displayed
in the same neon fashion. Not bad for a single line of script. Back to adding controls with a new one to control
that white background element. For this, we'll use the RangeControl input. You would usually use it to define a two values range, but there is so much that can
be done with this particular one that we could dedicate a whole video
to build crazy things with it. The most important thing to know is that you must actually create
two separate controls that will be automatically stitched
together into a single one. Let's start with the left control. Set default to 180, Range from -180 to 180 and the same for the Allowed range. Choose and Low for the ID. This will set this control
as the low range value. Click OK and re-open the
editor to check which group was assigned to the left control. Okay! Let's repeat the same process
for the right control by selecting NewControl in the ID menu. Change the name to Right,
the default value to -180 and the ID to High. Click OK! Head to the Background module and select the Left Rotation node. Right click on the Rotation control
and add an expression. You can easily connect it to the left control
but using the pull and drop technique. But to get the negative value that we need
for what the left control is returning, we need to add a minus sign
in front of the expression. Now for the right control. Copy the expression that we just created. Select the RightRotation
node and as before, add an expression to the Rotation control. Paste the script that you just
copied and simply change Left for Right, making
sure that you use a capital "R". Done! With that newly created RangeControl,
we can now very easily manipulate the background. Adjust the right, the left or even drag the middle element
to move both sides simultaneously. Next, the checkbox. This is a super handy control that returns the value of 0 or 1 one,
depending if it's checked or not. Perfect when you want to add
features like some resources hungry effects that you
might prefer disabled by default. We're going to name is control Reflection. Choose CheckboxControl
and the range from 0 to 1. You can actually select Tristate
to give this checkbox well... 3 different states. In that case the control would return
a value of -1 for the third state. Imagine an effect that can reach
an extra level of awesomeness by activating the ultra mode. Click OK! and go to the Reflection module
to select the Reflection node. Right click on the Blend control to add an
expression and add the following script. If the Reflection control
inside the ControlCenter returns a value equal to 1, then set the Blend control to
0.26, otherwise set it to 0. Now by using the checkbox, you can activate and deactivate
this reflection effect at will. The last control will let us change
the color of the radio, but I would like it to have nested
in its own separate section where we could tuck away all these
controls, taking a lot of UI space. To achieve this, we first
need to add a LabelControl, naming it Design Control and giving it the default value of 0
to have it closed by default. The Show Arrow checkbox
is what we need to select for this label to be able to collapse
and expand in a dropdown menu fashion. We will see at the end of this tutorial
that there is a little bug when using this feature
inside to Macro editor. But I'll show you how to fix this. This parameter right here,
let you add x number of controls nested under this label. You might have to try a few times
to get it right with your own design but in this case I know that there is
4 controls that we need to hide so type 4. Also, make sure that this control
is set to passive to have the label bypassed during rendering
as opening or collapsing this control would otherwise force
any control nested inside to render again. Click OK! Let's add the last control
or maybe I should say the last 3 controls as we will need to add
one for each color channel the red, the green and the blue. You could add a fourth one
if you needed the alpha channel. First let's create the control
for the red channel. We'll give the same name to all 3. Let's say Frame Color. But we must make sure that we give
each of them their own unique ID. In this case Red. Choose ColorControl as input, set group as and ID as Red. In this list, you will find all the
different channels that you can display. You can leave the color space to HSV,
which stands for Hue, Saturation, and Value. Click OK and repeat this process
for the two other channels. The green one and the blue one. Making sure that we set
them inside the same group. Look at how we can now collapse and expand the whole thing
thanks to the Label nest. Connecting each channel
is going to be a real piece of cake. Go to the Frame module
and select the FrameColor node. Switch to the style page and there, add
an expression to the RGB channels. You just need to pull the + icon
for each of them to the one matching the ControlCenter. The Red, Green and Blue. Test the control
to make sure that everything is working and that you can change the radio color. Now that everything is functional,
I'm going to show you how to easily build
the template out of this composition. You should also to check our video
about how to build simple templates with their own custom thumbnail. You will find the link in the description. Before saving our template, reset every
custom control to its original state. We also make sure that the image loader is empty
to avoid any broken link. We'll actually release in a
few days a follow up video about how to pack all your media
aside of your templates. Select all the nodes except the MediaOut,
right click on any of them and go to Macro. Create Macro. Now, instead of chasing controls
all over the composition as you normally would, most of what we need
is contained within the ControlCenter. You just have to select every control,
that you want exposed in your template. Wait! Why is our Design Control label missing? Blackmagic... You did leave another bug
inside your Macro Editor. For whatever reason it is not possible
at the moment, to expose a label, that has been set as a control nest
from within the macro editor and the label will simply not show up. If you really want those nice and handy
menus inside your templates, it's actually pretty easy to fix, but must be done
manually, after saving the macro. Don't forget to go to the Image
Tool and under File select clip You can also change its title
from Filename to Image. I'm going to name the macro Radio. Click on File, and Save as Group. By default, Fusion is offering you
to save it inside the macro folder, but if you want to make this
a template available in the Edit page, you must save it inside
the Template and Edit Folder. Effects ,Titles, Generators or Transitions depends on what you are building,
but there's a simple rule. An Effect or a Transition
can only be applied over a clip. So if you want to be able
to place your composition directly on the timeline, save it in
the Generators or Titles folder. The template is now directly available inside the Effects library,
but we still have to fix our label. So right click on the template
and select Show Folder. We're going to open the settings file
inside a text editor, so we can add a few lines to our code. It is always a very good idea
to make a backup of your settings file before touching anything so you
can recover if something goes wrong and go back to the initial code. All the inputs that you see here
between curly brackets are what is exposing the controls
selected inside the macro editor. An Input, starts with an ID and
finishes after the comma following the closing curly bracket. The comma is actually what separates
each input and forgetting one can make quite a mess. You can directly copy the code
provided in our manual and paste it after the Input9 block. The ID can be whatever you like. SourceOp is the node
containing the control. Source is the ID of the control itself. Page, where you want
this control to be visible and Default, the
default state of your control. In this case, 0 for closed. You can choose in which
order your controls are displayed in the template by
reorganizing those inputs. You don't even have to rename them, but
just be careful to not break any formatting. Save those modifications and that's it. Now if I go to the Effects library, Generator, I can add the template to any timeline and see that the UI
is now working perfectly. And there you go! You have it! We hope you enjoyed this video
and that you found some precious information
about how to use custom controls and make better compositions. Give it a like to help us
with the algorithm, and we'll see you in the next video. See ya!
