Jump to: Board index » General » Fusion

Underlining text, making it fade in and out, drawing lines

Learn about 3D compositing, animation, broadcast design and VFX workflows.
  • Author
  • Message
Offline

Wouter Bouwens

  • Posts: 244
  • Joined: Sun Dec 03, 2017 7:53 pm
  • Location: Alkmaar, Netherlands

Underlining text, making it fade in and out, drawing lines

PostWed Aug 08, 2018 2:25 pm

Hi,
I have 3 questions about Fusion. I use fusion within Resolve, so I am not sure if I needed to post this in the fusion section of the Resolve 15 beta section.
The questions are as follows:

1: When I have a text node, and I type text, and I want to underline the entire sentence, it only underlines the seperate words. Is there a way to underline the entire sentence?

2: I have my text attached to a planar transform, so it moves with a house within a panning shot. I want to make the text fade in and fade out again, but I cannot find any way to do that?

3: I would like to draw a line from the underlined and tracked text to the house. Again, I cannot find a way. I made a paint node, but have no idea how to paint with it. Whatever I do, I don't get a brush but I get a red circle with a line across it, the "forbidden" sign so to speak.

Any help would be greatly appreciated!!
CPU: Intel Core I9 10850K
GPU: MSI Suprim X Geforce 3080
Motherboard: MSI Z590-A Pro
RAM: 32 GB Gskil Ripjaws 3600
SSD: Samsung EVO 970 M.2 NVME 1TB
OS: Windows 10 Home
Offline
User avatar

Bryan Ray

  • Posts: 2478
  • Joined: Mon Nov 28, 2016 5:32 am
  • Location: Los Angeles, CA, USA

Re: Underlining text, making it fade in and out, drawing lin

PostWed Aug 08, 2018 4:15 pm

Wouter Bouwens wrote:1: When I have a text node, and I type text, and I want to underline the entire sentence, it only underlines the seperate words. Is there a way to underline the entire sentence?


I'd probably be inclined to do the underline with a separate node. Either a spline, or another Text+ tool containing only underscore ( ___ ) characters.

2: I have my text attached to a planar transform, so it moves with a house within a panning shot. I want to make the text fade in and fade out again, but I cannot find any way to do that?


In the Merge you're using to combine the text with the footage, animate the Blend control.

3: I would like to draw a line from the underlined and tracked text to the house. Again, I cannot find a way. I made a paint node, but have no idea how to paint with it. Whatever I do, I don't get a brush but I get a red circle with a line across it, the "forbidden" sign so to speak.


I'd do this with a Polygon Mask tool. Create the Polygon, plug its output to the Effect Mask input of a Background tool—this Background is what you'll use to choose the color. Click in two places in the Viewer to create a straight line. The Polygon has some in-Viewer controls. Press the button for "Modify Only." It should look like a plain arrow (no '+' or 'x' next to it). In this mode, you can move the points of the Polygon around without adding new ones. Merge the Background over your existing composite. In the Polygon node, there is a control called 'Border Width.' That controls how thick the line will be.

The Polygon is animated by default, so you can keyframe its endpoint by hand, or you can Publish them by selecting the points in a Viewer and pressing Shift+P. That removes the animation but gives you a Point control at the bottom of the Polygon's control panel for each point. Those controls can then be connected to a Tracker.

I don't know what's going on with your Paint node—that's not a behavior I've seen before in standalone Fusion. I'd have to see how your flow was set up to make a guess. In any case, here is a sample of the things I've described. Just Copy this code (make sure you get all of it, including the curly braces at beginning and end) and Paste it into your node graph. By the way, that 'Select All' link in the Code window is probably still broken, so you'll have to select it the old-fashioned way.

Code: Select all
{
   Tools = ordered() {
      Text1 = TextPlus {
         Inputs = {
            GlobalOut = Input { Value = 30, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            Font = Input { Value = "Open Sans", },
            StyledText = Input { Value = "This is some underlined text.", },
            Style = Input { Value = "Bold", },
            ManualFontKerningPlacement = Input {
               Value = StyledText {
                  Array = {
                  },
                  Value = ""
               },
            },
            ShadingGradient1 = Input {
               Value = Gradient {
                  Colors = {
                     [0] = { 0, 0, 0, 1 },
                     [1] = { 1, 1, 1, 1 }
                  }
               },
            },
         },
         ViewInfo = OperatorInfo { Pos = { 630.877, 118.548 } },
      },
      CornerPositioner1 = CornerPositioner {
         Inputs = {
            Input = Input {
               SourceOp = "Merge1",
               Source = "Output",
            },
         },
         ViewInfo = OperatorInfo { Pos = { 973.303, 221.81 } },
      },
      ColorCorrector1 = ColorCorrector {
         CtrlWZoom = false,
         Inputs = {
            Channel = Input { Value = 1, },
            MasterRedGain = Input { Value = 0.8, },
            ColorRanges = Input {
               Value = ColorCurves {
                  Curves = {
                     {
                        Points = {
                           { 0, 1 },
                           { 0.4, 0.2 },
                           { 0.6, 0 },
                           { 1, 0 }
                        }
                     },
                     {
                        Points = {
                           { 0, 0 },
                           { 0.4, 0 },
                           { 0.6, 0.2 },
                           { 1, 1 }
                        }
                     }
                  }
               },
            },
            HistogramIgnoreTransparent = Input { Value = 1, },
            Input = Input {
               SourceOp = "CornerPositioner1",
               Source = "Output",
            },
         },
         ViewInfo = OperatorInfo { Pos = { 981.092, 286.006 } },
      },
      Merge1 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Text1",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "Text2",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, },
         },
         ViewInfo = OperatorInfo { Pos = { 739.812, 221.81 } },
      },
      Text2 = TextPlus {
         Inputs = {
            GlobalOut = Input { Value = 30, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            Font = Input { Value = "Open Sans", },
            StyledText = Input { Value = "___________________________________", },
            Style = Input { Value = "Light", },
            ManualFontKerningPlacement = Input {
               Value = StyledText {
                  Array = {
                  },
                  Value = ""
               },
            },
            ShadingGradient1 = Input {
               Value = Gradient {
                  Colors = {
                     [0] = { 0, 0, 0, 1 },
                     [1] = { 1, 1, 1, 1 }
                  }
               },
            },
         },
         ViewInfo = OperatorInfo { Pos = { 629.812, 221.81 } },
      },
      Note2 = Note {
         Inputs = {
            Comments = Input { Value = "Precompose your Text and effects here so they all get the same transformation from the planar positioner.", }
         },
         ViewInfo = StickyNoteInfo {
            Pos = { 741.562, 83.7367 },
            Flags = {
               Expanded = true
            },
            Size = { 160.869, 127.136 }
         },
      },
      Note3 = Note {
         Inputs = {
            Comments = Input { Value = "By making the underline a separate node, you get independent control over its style.", }
         },
         ViewInfo = StickyNoteInfo {
            Pos = { 436.029, 184.872 },
            Flags = {
               Expanded = true
            },
            Size = { 193.871, 88.8109 }
         },
      },
      Merge3 = Merge {
         Inputs = {
            Background = Input {
               SourceOp = "Merge2",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "Background2",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, },
         },
         ViewInfo = OperatorInfo { Pos = { 1299.08, 352.871 } },
      },
      standInForFootage = Background {
         NameSet = true,
         Inputs = {
            GlobalOut = Input { Value = 30, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftRed = Input { Value = 0.0731707317073171, },
            TopLeftGreen = Input { Value = 0.128048780487805, },
            TopLeftBlue = Input { Value = 0.109756097560976, },
            Gradient = Input {
               Value = Gradient {
                  Colors = {
                     [0] = { 0, 0, 0, 1 },
                     [1] = { 1, 1, 1, 1 }
                  }
               },
            },
         },
         ViewInfo = OperatorInfo { Pos = { 537, 356 } },
      },
      Merge2 = Merge {
         Inputs = {
            Blend = Input {
               SourceOp = "Merge2Blend",
               Source = "Value",
            },
            Background = Input {
               SourceOp = "standInForFootage",
               Source = "Output",
            },
            Foreground = Input {
               SourceOp = "ColorCorrector1",
               Source = "Output",
            },
            PerformDepthMerge = Input { Value = 0, },
         },
         ViewInfo = OperatorInfo { Pos = { 973.491, 355 } },
      },
      Merge2Blend = BezierSpline {
         SplineColor = { Red = 205, Green = 205, Blue = 205 },
         NameSet = true,
         KeyFrames = {
            [6] = { 1, RH = { 10.3333333333333, 0.666666666666667 }, Flags = { Linear = true } },
            [19] = { 0, LH = { 14.6666666666667, 0.333333333333333 }, Flags = { Linear = true } }
         }
      },
      Tracker1 = Tracker {
         Trackers = {
            {
               PatternTime = 5,
               PatternX = 0.736572884118466,
               PatternY = 0.561363638124683
            },
            {
               PatternTime = 5,
               PatternX = 0.421419437340153,
               PatternY = 0.0954545454545454
            }
         },
         Inputs = {
            Input = Input {
               SourceOp = "standInForFootage",
               Source = "Output",
            },
            TrackerList = Input { Value = 1, },
            Name1 = Input { Value = "Tracker 1", },
            PatternCenter1 = Input { Value = { 0.736572884118466, 0.561363638124683 }, },
            TrackedCenter1 = Input { Value = { 0.7365728841185, 0.5613636381247 }, },
            Name2 = Input { Value = "Tracker 2", },
            PatternCenter2 = Input { Value = { 0.421419437340153, 0.0954545454545454 }, },
         },
         ViewInfo = OperatorInfo { Pos = { 652.625, 390.122 } },
      },
      Background2 = Background {
         Inputs = {
            GlobalOut = Input { Value = 30, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            TopLeftRed = Input { Value = 0.678890811232205, },
            TopLeftGreen = Input { Value = 0.974505848018508, },
            TopLeftBlue = Input { Value = 1, },
            Gradient = Input {
               Value = Gradient {
                  Colors = {
                     [0] = { 0, 0, 0, 1 },
                     [1] = { 1, 1, 1, 1 }
                  }
               },
            },
            EffectMask = Input {
               SourceOp = "Polygon1",
               Source = "Mask",
            }
         },
         ViewInfo = OperatorInfo { Pos = { 1294.08, 404.871 } },
      },
      Note4 = Note {
         Inputs = {
            Comments = Input { Value = "A more complex indicator, such as an arrow, would require a different approach. But for a simple line connector, this works just fine.", }
         },
         ViewInfo = StickyNoteInfo {
            Pos = { 1384.57, 406.304 },
            Flags = {
               Expanded = true
            },
            Size = { 216.227, 102.65 }
         },
      },
      Note1 = Note {
         Inputs = {
            Comments = Input { Value = "This Merge has an animated Blend control.", }
         },
         ViewInfo = StickyNoteInfo {
            Pos = { 964.059, 418.014 },
            Flags = {
               Expanded = true
            },
            Size = { 122.544, 80.2943 }
         },
      },
      Polygon1 = PolylineMask {
         DrawMode = "ModifyOnly",
         DrawMode2 = "InsertAndModify",
         Inputs = {
            BorderWidth = Input { Value = 0.00576170212765957, },
            Solid = Input { Value = 0, },
            MaskWidth = Input { Value = 1920, },
            MaskHeight = Input { Value = 1080, },
            PixelAspect = Input { Value = { 1, 1 }, },
            ClippingMode = Input { Value = FuID { "None" }, },
            Polyline = Input {
               SourceOp = "Polygon1Polyline",
               Source = "Value",
            },
            Polyline2 = Input {
               Value = Polyline {
               },
               Disabled = true,
            },
            Point0 = Input {
               SourceOp = "Tracker1",
               Source = "Position1",
            },
            Point1 = Input {
               SourceOp = "Tracker1",
               Source = "Position2",
            },
         },
         ViewInfo = OperatorInfo { Pos = { 1293.6, 437.617 } },
      },
      Polygon1Polyline = BezierSpline {
         SplineColor = { Red = 173, Green = 255, Blue = 47 },
         NameSet = true,
         KeyFrames = {
            [2] = { 0, RH = { 2.66666666666667, 0.333333333333333 }, Flags = { Linear = true, LockedY = true }, Value = Polyline {
                  Points = {
                     { Linear = true, X = 0.335038363933563, Y = -0.365909099578857, RX = -0.0328218266050326, RY = 0.14242424590118, PublishID = "Point1" },
                     { Linear = true, X = 0.236572884118466, Y = 0.0613636381246827, LX = 0.0328218266050326, LY = -0.14242424590118, PublishID = "Point0" }
                  }
               } },
            [4] = { 1, LH = { 3.33333333333333, 0.666666666666667 }, RH = { 4.33333333333333, 1.33333333333333 }, Flags = { Linear = true, LockedY = true }, Value = Polyline {
                  Points = {
                     { Linear = true, X = 0.200287724547374, Y = -0.192755690487948, RX = 0.0120950531903639, RY = 0.084706442870877, PublishID = "Point1" },
                     { Linear = true, X = 0.236572884118466, Y = 0.0613636381246827, LX = -0.0120950531903639, LY = -0.084706442870877, PublishID = "Point0" }
                  }
               } },
            [5] = { 2, LH = { 4.66666666666667, 1.66666666666667 }, RH = { 9.33333333333333, 2.33333333333333 }, Flags = { Linear = true, LockedY = true }, Value = Polyline {
                  Points = {
                     { Linear = true, X = -0.0785805626598465, Y = -0.404545454545455, RX = 0.105051148926104, RY = 0.155303030890046, PublishID = "Point1" },
                     { Linear = true, X = 0.236572884118466, Y = 0.0613636381246827, LX = -0.105051148926104, LY = -0.155303030890046, PublishID = "Point0" }
                  }
               } },
            [18] = { 3, LH = { 13.6666666666667, 2.66666666666667 }, Flags = { Linear = true, LockedY = true }, Value = Polyline {
                  Points = {
                     { Linear = true, X = 0.0664961644450722, Y = -0.36363637230613, RX = 0.0566922398911311, RY = 0.141666670143604, PublishID = "Point1" },
                     { Linear = true, X = 0.236572884118466, Y = 0.0613636381246827, LX = -0.0566922398911311, LY = -0.141666670143604, PublishID = "Point0" }
                  }
               } }
         }
      }
   }
}
Bryan Ray
http://www.bryanray.name
http://www.sidefx.com
Offline

Frank Feijen

  • Posts: 167
  • Joined: Tue Dec 13, 2016 10:04 am
  • Location: Vilvoorde, Belgium

Re: Underlining text, making it fade in and out, drawing lin

PostThu Aug 09, 2018 11:46 am

I'd do the underlining and fading via the shading options of your text node. That way it adjusts dynamically with your text.
Code: Select all
{
   Tools = ordered() {
      Text1 = TextPlus {
         CtrlWZoom = false,
         Inputs = {
            GlobalOut = Input { Value = 273, },
            Width = Input { Value = 1920, },
            Height = Input { Value = 1080, },
            ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
            Font = Input { Value = "Open Sans", },
            StyledText = Input { Value = "some text stuff", },
            Style = Input { Value = "Bold", },
            ManualFontKerningPlacement = Input {
               Value = StyledText {
                  Array = {
                  },
                  Value = ""
               },
            },
            Opacity1 = Input {
               SourceOp = "Text1Opacity",
               Source = "Value",
            },
            Enabled2 = Input { Value = 1, },
            ElementShape2 = Input { Value = 2, },
            Level2 = Input { Value = 0, },
            ExtendHorizontal2 = Input { Value = 0.355, },
            ExtendVertical2 = Input { Value = -0.1776, },
            Transform2 = Input { Value = 1, },
            Offset2 = Input { Value = { 0, -0.03 }, },
            SizeX2 = Input {
               SourceOp = "Text1SizeX",
               Source = "Value",
            },
         },
         ViewInfo = OperatorInfo { Pos = { 2145, 1039.5 } },
      },
      Text1Opacity = BezierSpline {
         SplineColor = { Red = 179, Green = 28, Blue = 244 },
         NameSet = true,
         KeyFrames = {
            [0] = { 0, RH = { 8.33333333333333, 0.333333333333333 }, Flags = { Linear = true } },
            [25] = { 1, LH = { 16.6666666666667, 0.666666666666667 }, Flags = { Linear = true } }
         }
      },
      Text1SizeX = BezierSpline {
         SplineColor = { Red = 185, Green = 253, Blue = 240 },
         NameSet = true,
         KeyFrames = {
            [0] = { 0, RH = { 8.33333333333333, 0.333333333333333 }, Flags = { Linear = true } },
            [25] = { 1, LH = { 16.6666666666667, 0.666666666666667 }, Flags = { Linear = true } }
         }
      }
   }
}
Offline

Wouter Bouwens

  • Posts: 244
  • Joined: Sun Dec 03, 2017 7:53 pm
  • Location: Alkmaar, Netherlands

Re: Underlining text, making it fade in and out, drawing lin

PostThu Aug 09, 2018 12:12 pm

Thank you so much! I will try tonight!
Dankje! Ik ga het vanavond proberen! (same as above only in dutch/flemmisch) :)
CPU: Intel Core I9 10850K
GPU: MSI Suprim X Geforce 3080
Motherboard: MSI Z590-A Pro
RAM: 32 GB Gskil Ripjaws 3600
SSD: Samsung EVO 970 M.2 NVME 1TB
OS: Windows 10 Home
Offline

Frank Feijen

  • Posts: 167
  • Joined: Tue Dec 13, 2016 10:04 am
  • Location: Vilvoorde, Belgium

Re: Underlining text, making it fade in and out, drawing lin

PostThu Aug 09, 2018 12:38 pm

:D
Offline
User avatar

Bryan Ray

  • Posts: 2478
  • Joined: Mon Nov 28, 2016 5:32 am
  • Location: Los Angeles, CA, USA

Re: Underlining text, making it fade in and out, drawing lin

PostThu Aug 09, 2018 2:52 pm

Wow, I've clearly underestimated the Shading tab! I had no idea that border mode existed.
Bryan Ray
http://www.bryanray.name
http://www.sidefx.com

Return to Fusion

Who is online

Users browsing this forum: No registered users and 28 guests