Fusion

Creating a futuristic interface with the FUI Design Tool[Reactor]

When you want to create an interface that looks like this,

The FUI Design Tool, available from Reactor, is a good way to create them, and I’ll show you how!

I wondered what FUI stood for, since it was not mentioned in the tool description. When I looked it up, I found keywords such as Future User Interface and Fictional User Interface, so I understood that it was a tool for creating future-like interfaces.

A search for “FUI” on Reactor yields five different tools.

These are collectively described as the FUI Design Tool, and this article will discuss FUI Circles.

The video shown at the beginning of this article was created using FUI Circles and FUI Designer, and the settings file can be downloaded here for free use.

The interface was created using the FUI Design Tool, but the cracking effect at the end and the noise-like colors in the middle were created using PolyPlay3D, which is included in another plug-in, Krokodove.

Krokodove is available from Reactor, but it is only available in the paid version of DaVinciResolve or FusionStudio. If you are using the free version, please delete the following node structure from ImagePlane3D to Transform before MediaOut, or connect to MediaOut directly from ColorCorrector.

Let’s take a look at how to use the tool and how to create a countdown UI!

If you are wondering what Reactor is and how to install it, refer to the following article!

How to use FUI Circles

FUI Circles is a tool that can be used to combine six circles (CIRCLE SHAPE) and six lines (DASH LINES).

The initial state of the tool looks like this, with six circles in a row.

You can create shapes by arranging the size, thickness, length, angle, etc. of circles and combining them with lines.

Simply tweak the thickness, size, and color, and add animation to make it look like that.

It can also be used to quickly create motion using circles.

Parameters

The settings of FUI Circles are as follows. There are many menus, but they are not difficult to set up, so let’s go through them one by one.

CIRCLE SHAPE

This is the setting item for creating a circle.

Check SHOW/HIDE CIRCLES SHAPES at the top of the menu, and also check SHOW CIRCLE SHAPE in each CIRCLE SHAPE setting to display the circle.

By default, all six CIRCLE SHAPEs are checked, and six circles are displayed.

This item allows you to show/hide the circle, set its size, thickness, color, and angle.

These six circles are arranged so that the lower numbered shapes are on the back and the higher numbered shapes are on the front.

You will want to use the shapes in order starting with CIRCLE SHAPE 1, but since this number relates to the back and forth relationship of the shapes, please be mindful of the shape numbering depending on the situation.

This is because when I created the circles in the order of decreasing number from the center of the circle, the lines shown by the arrows in the figure were displayed.

When I create a circle with this tool, this line seems to be displayed at the starting point of the circle.

If the circle is thin, this line will not be noticeable, but if you create a thick circle as shown in the figure, this line will be noticeable, so you can avoid it by using a shape with a smaller number on the outside so that the outer line is placed on the back.

I think this is somewhat of a quirk of the tool.

Each parameter is as follows.

  • Shape X Sides:Changes the number of vertices in the shape. The default is 100 (= circle), but it can also be a triangle, rectangle, or n-square.
  • LINE X RANGE:Change the display range of the shape from the start point to the end point. You can set up an animation of the shape appearing and disappearing by hitting a keyframe here.
  • Size:You can change the size of the shape.
  • Angle:You can change the angle of a shape; if one shape is the area of influence and you want to change the angle of the whole shape, use ROTATION at the bottom of the menu.
  • Offset Animation:It could be used as an offset for Angle. (Probably)
  • Thickness:Allows you to change the thickness of the shape.
  • Red:There are two parameters called Red. The first one, Red, allows you to change the color of the shape in a menu that should be labeled “Color”.
  • Red / Green / Blue:The color of the shape can be changed using the slide bar.
  • Type:You can change the line pattern that makes up the shape from Solid, Dash, Dot, Dash Dot, and Dash Dot Dot.

DASH LINES

This is a setting item for creating lines.

As with CIRCLE SHAPE, the lines will be displayed when SHOW/HIDE DASH LINES is checked and SHOW DASH LINES is checked in each DASH LINES setting.

Unlike circles, all lines are hidden by default, so you need to adjust their appearance by displaying them yourself if necessary.

When checked, only one line is displayed at 3 o’clock, but unlike CIRCLE SHAPE, the initial position of all shape numbers is the same (they overlap).

Change the number, size, and position of the lines as needed.

This is a rough example, but if you use DASH LINE 1-4, you can add shapes as shown in the figure.

Unlike circles, the color of each DASH line cannot be changed, and the color of the line can only be set in the “LOOK” menu that appears later.

As of the current version, there is no way to change the color for each DASH line.

DASH LINE is a tool that allows you to create lines, but in the example figure, you can see the “+” symbol.

The tool comes with a set of shapes that may be used for FUI in advance, and you can combine these shapes together with lines.

Let’s take a look at each parameter.

  • Line Count : The number of lines to be displayed can be changed. The initial value is 1.
  • Offset Line Count : The offset for a line allows you to show or hide the line relative to the total number of lines.
  • Height : Allows you to change the height of the line.
  • Width : You can change the width (thickness) of the lines.
  • Rotate : You can change the angle of each line.
  • Offset Position : You can change the location (center to outside) where the line is placed around the center of the circle.
  • Offset Rotation : You can change the angle of an entire DASH LINE shape.
  • Subdivide Shape : From the name, it looks like you can change the number of divisions (vertices) of the shape, but I wasn’t sure.

However, if you check the “SHOW CUSTOM SHAPE” checkbox at the end of each shape’s settings, you can display a shape that can be used with the tool’s pre-defined FUI, and additional parameters will be displayed as follows The additional parameters are shown below.

  • Show Type : You can choose from four available shapes: TICKS, LINES, FRAMES, and OTHERS.
  • Custom Frames Selector : You can select one of the prepared shapes from each of the shape types selected in Show Type. When you change the value by manipulating the bar, the shape corresponding to the value will be displayed.
  • Offset Position : You can change where the shape is placed (center to outside) around the center of the circle.
  • Scale : You can change the size of shape.
  • Rotate : You can change the angle of each shape.

CENTER TEXT

This menu is used to display text in the center of a circle. In the video shown at the beginning of this article, it is used for the shape that is placed in the upper left corner.

As with the other menus, it will appear when SHOW CENTER TEXT is checked.

It is not difficult to use. Let’s take a look at each parameter.

  • Font Text Start : It is possible to set the character string to be prepended to the number to be displayed.
  • Font Number:You can set the number of numbers to be displayed. If you set a keyframe here, you can increase or decrease the number in the specified range.
  • Font Text End : It is possible to set the character string to be attached to the end of the number to be displayed.
  • Font Case : Allows you to change the uppercase and lowercase display of the characters set in Font Text Start and Font Text End.
  • Font Size : Allows you to change the font size of the text.
  • XPosition Offset : Allows you to change the position in the X-axis direction.
  • YPosition Offset : Allows you to change the position in the Y-axis direction.
  • Font Rotation : You can rotate the text.
  • Font : You can change the font type.
By the way, the two fonts used in this project are “DSEG7 Classic” and “DS-Digital”.

DUPLICATE

DUPLICATE allows you to duplicate a shape that you have created so far (similar to the Duplicate node).

This sample just sets the number of copies of the shape created in the previous explanations to 5 and sets keyframes for Scale and Rotation, but you can set this behavior.

The parameters are simple, as shown below.

  • Duplicate Number : Allows you to set the number of duplicates of a shape.
  • Duplicate Scale : You can change the size of the shape to be duplicated. Along with this, you can create a look like the sample.
  • Duplicate Rotation : Allows you to change the angle of the shape to be duplicated.
  • Fade Color : You can add a gradual desaturating effect to the shapes you duplicate.

LOOK

There are two things you can do with this menu.

  • Add color to the lines created with DASH LINE
  • Transparent background setting
    Check the “Draw on Transparent Background” checkbox to make it transparent.

TRANSFORMATION

This menu allows you to set the depth and X, Y, and Z axis rotation for the shape.

  • Distribute in Z : Allows you to set the depth of each shape.
  • Rotation X, Y, Z : Rotation in the X, Y, and Z axis directions can be set.
  • Scale : You can set the size of the entire shape.

It took me a long time to explain just how to use it, but this is how you can use FUI Circles.

You could probably do the same thing using Ellipse nodes or the Shape tool, but I think it would be more convenient to use FUI Circles for things that can be completed with just FUI Circles, since it combines all the settings in one tool!

Create a countdown interface with the FUI Design Tool

The next section explains how to create a countdown interface using the FUI Design Tool.

Let’s check out the main object and each of the objects we’re placing on either side of it!

Create the main object

First of all, let’s create the main object. The main object is made up of the node parts shown in the figure above.

The leftmost FUI Designer node is used to display a frame like the one shown at both ends of the screen. The FUI Designer node on the far left is used to display something like a frame that is displayed at both ends of the screen. The details are omitted here.

By the way, if you use the FUI Design Tool, you need to connect a Background node, so I have connected a Background node to the Input of the FUI Designer node.

To create the main object, two FUI Circles nodes are used. This is because one FUI Circles node alone can only create up to six circles, and I wanted to create more than six circles, so I used two nodes.

Let’s take a look at each node in isolation.

The first FUI Circles node

The first FUI Circles node creates an object as shown in the figure.

This object uses six circles and three lines, all CIRCLE SHAPE. Here are some of the points that might be useful.

The light blue gear-like part near the center

This part is created with three CIRCLE SHAPE.

A normal circle (CIRCLE SHAPE 2) is created, and then a circle set to Type “Dot” (CIRCLE SHAPE 4) is placed outside the circle to create a bumpy effect.

Inside the circle, a circle set to Type “Dash Dot Dot” (CIRCLE SHAPE 5) is placed to create a bumpy shape with a different pattern from the outside.

The part that looks like a missing circle composed of dotted lines

This part is created with DASH LINES.

If you increase the value of Line Count, the lines will be created and placed in a circular pattern, but by adjusting the Offset Line Count, you can make the lines appear as shown in the figure.

The second FUI Circles node

In the second FUI Circles node, create an object as shown in the figure.

This object uses six circles and one line.

The three blue curved areas on the outer perimeter

This shape, which could be created by setting a mask for a single circle in Ellipse, requires three circle shapes in FUI Circles, so CIRCLE SHAPE 2, 3, and 4 were combined to create this shape.

If you want to use a lot of these shapes, it would be faster to use the Ellipse or Shape tools.

The objects created so far are merged to create the final shape.

The motion of the main object when it is first displayed is achieved by duplicating it to six in the DUPLICATE setting, setting the Scale keyframe from high to low, and adding rotation in Rotation.

Create a sub object.

Now that the main object is complete, let’s see how to create the sub-objects we’re placing around it!

Objects whose numbers count up & gauge increases

This object is realized with a single FUI Circles node. It will be connected to the Transform and Glow nodes later in the process to adjust its appearance.

The following is a brief summary of the creation process.

  • Create and animate a thin circle with CIRCLE SHAPE
  • Create and animate a thick circle on top of a thin circle with CIRCLE SHAPE
  • Set the animation to count up from 0 in CENTER TEXT

Radar-like objects

This object can also be created with a single FUI Circles node.

作成方法は次のとおりです。

  • Create four circles with CIRCLE SHAPE and make the outer circle slightly thicker
  • Create a single line with DASH LINES and set the rotation animation with Offset Rotation
  • Check the Motion Blur checkbox in the Settings menu to apply blur to the rotating line.
I find it useful to be able to create objects like these using only the FUI Circles node.

An object that displays random text

Although we are not using FUI Circles, we will also discuss a few sub-objects that we have placed on the right side.

This object was created using the FUI Designer, the Transform tool, and Duplicate as shown below.

  • Show “7” frames from the Custom Frames Selector of the Show Type “Frame” in the UI FRAMES SHAPE menu of the FUI Designer
  • Text is displayed as random text with “TextScramble” Modifiers using a separate Text+ node
  • Adjust the “Yaw” value using the Transform tool to make the created object tilt in the Z-axis direction (depth). Use the other parameters to set the placement position.
  • Finally, use the Duplicate node to create four duplicates, and adjust the Offset to make each one appear slightly different.

All the objects created so far are merged and connected to the Glow node. Finally, we will explain how we are displaying the countdown in the Text+ node.

Let Text+ count down.

Create and merge countdown text in Text+ to complete the countdown interface.

You can also use “TextTimer” Modifires to count down, but this time I wanted to keep the count fixed at 0 seconds and display it for a while after the count reaches 0 seconds without becoming negative.

For this reason, I chose to write a script directly in the Frame Render Script in the Settings menu of Text+ to make it count down.

In other words, I couldn’t figure out how to use TextTimer Modifires to keep the count at “0” seconds instead of showing negative seconds after the count goes below 0, so I wrote a script to do it.

Perhaps there is a way to achieve this with TextTimer.

To count down the number of seconds according to the number of frames in the timeline, the following script is included in the Frame Render Script of the Text+ node.

min = 0
if (comp.RenderEnd-time-60)/30 > 0 then
	sec = math.floor((comp.RenderEnd-time-60)/30)
else
	sec = 0
end

count = string.format("%02d:%02d", min, sec)
Text1.StyledText = count

The script is not very flexible in terms of display, but it is designed to count down to 59 seconds or less.

Here is a brief introduction to what the script does.

  • Use the variables “min” and “sec” to calculate the number of seconds according to the number of frames, and assign it to sec. Finally, assign it as a string to the variable “count” and pass it to Text1.StyledText to display the count.
  • The value of “min” is set to “0”, so it will remain 0 even if the time is increased.
  • The sec is calculated using the Fusion composition “last frame – current frame number” to determine the number of frames remaining, and then divided by the number of frames (30) to convert the number of frames to the number of seconds (I wanted the number of seconds to be 0 before the end of the frame, so I used “-60” as an offset in the calculation).
  • if ~ else, if the number of seconds is less than or equal to 0, set it to 0 instead of minus
  • All values stored in sec are truncated to the decimal point (math.floor)
I’m still learning lua, so please forgive me if there are some oddities!

At the end

In this article, I focused on FUI Circles, but you can also use the FUI Design Tool to create a UI like this. (Be careful when you play this video, as it makes a bit loud sound.)

I haven’t been able to research how to use it yet myself, but I hope you’ll give it a try, because you can design with rulers and grids displayed!

It could also be used to create a screen for distribution on Youtube, etc.

That’s all!