How to create mutiple arrows in Hitfilm Express

vanny_f
vanny_f Website User Posts: 59 Just Starting Out*

Hi all,

what is a good way of creating mutiple arrows that have different length and that all start from the same point in Hitfilm Express. I tried to just create the single arrows in MS Power Point and then make a screenshot of them. This approach has 2 drawbacks. First of all it is diffcult to adjust the length of the arrows as they do not scale accordingly. Second, when inserting a png-file the arrows are surrounded by white background and this makes it difficult to let them all start from one point and do not interfere with other elements in the animation.


Do you have any ideas? I'd appreciate every comment.

Comments

  • Andy001z
    Andy001z Moderator, Website User, Ambassador, Imerge Beta Tester, HitFilm Beta Tester Posts: 3,134 Ambassador

    Make a new composite shot, make it a solid colour (not black) and then use masks to make the arrow.

    Now use this comp in a new comp, use the scale and handles of the layer to make it angle and the size and length you want.

    Beauty of this you can use the same master arrow comp over and over.

    Good luck.

  • Triem23
    Triem23 Moderator Moderator, Website User, Ambassador, Imerge Beta Tester, HitFilm Beta Tester Posts: 19,935 Ambassador

    Several points.

    You should be able to create a PNG with a transparent BG. I don't use PowerPoint, but a photo app can do it.

    But forget that nonsense. We're gonna do it all in Hitfilm...

    In Hitfilm create a plane. It can be small - like 50x50. Use a poly mask to make a triangle. This is the arrowhead.

    You'll need a point rig. One point for the origin, one point for each arrowhead.

    You'll duplicate your arrowhead plane, of course, and parent each arrowhead to a point. From here you'll be animating each arrowhead point.

    Let's make the lines. Create a plane and add the correct effects. You have two choices here - Lightsword and Lightning/Electricity. In both filters you'll want to turn off the glows. In Lightning you'll want trunks, wave scale and twitch all set to 0. In both Lightsword and Lightning you'll set the Start/Hilt points to use the Origin point layer and the End/Tip points to the respective arrowhead point layer.

    Now, dragging your arrowheads around will drag the lines correctly.

    I'd create a single lightning/Lightsword effect first and dial it in. Then you can duplicate the effect several times on the same plane, type end/tip point into the search filter for the layer Controls and quickly relink to each arrowhead.

    Depending on your FG/BG colors you might need to mess around with composting modes. The lightning/lightsword effects have blend modes built in. I'd probably just set blend to ADD and use white on a black plane. For now set the plane's layer blend to ADD. And have the arrowheads as white as well. We'll fix color in a minute.

    Once I'm happy with the arrows I'd select all my arrowhead planes and points along with my lines layer, right click and convert the whole thing to an embedded Comp Shot. Once the arrows are in their own comp, in the arrow Comp I'd add a Grade Layer with a Demult effect. This kills the black BG and leaves only the white arrows. In the main Comp make sure the arrow Comp layer is back in Normal blend mode. Now a Fill Color effect colors all the arrows at once. Could even add a Drop Shadow effect to all the arrows at once as well.

  • vanny_f
    vanny_f Website User Posts: 59 Just Starting Out*

    Thanks Triem 23 for your answer,

    you wrote "In Hitfilm create a plane. It can be small - like 50x50. Use a poly mask to make a triangle. This is the arrowhead.

    You'll need a point rig. One point for the origin, one point for each arrowhead.

    You'll duplicate your arrowhead plane, of course, and parent each arrowhead to a point. From here you'll be animating each arrowhead point."

    --> I have some question about your first part of the descripton:

    1) How can I use a polymask and how can I make a triangle with it?

    2) What is a point rig and how can I create one?

    3) How can I parrent each arrowhead point? What do you mean by that?

  • Triem23
    Triem23 Moderator Moderator, Website User, Ambassador, Imerge Beta Tester, HitFilm Beta Tester Posts: 19,935 Ambassador

    Poly masks. Assuming you're in Hitfilm 15+ you can select the polygon mask tool (it's the hexagon icon, top left of the Viewer) and, in the pop up controls, set number of sides to 3. Holding CTRL and double clicking the mask icon should then created a triangle that fills the entire plane. 50x50 is a guess, but, if you need a smaller head you can scale it down. For a larger head make a larger plane.

    A "point rig" is a a generic term. Point layers create points (called "nulls" in some software). Points are invisible objects that only contain position, scale and rotation data. A "rig" refers to the "an apparatus designed for a specific purpose" definition of the word rig, so, we're just discussing using a series of point layers to define a system of lines. Points are also useful on animation for moving things together and many effects can use point layers for position data.

    Parenting is a method of using one layer to control another... A "child" layer is connected to a "parent" layer. A child can move on its own, but it also always follows its parent.

    Each layer in a Comp has a drop down menu at its right edge that says "none." This is a parenting menu. Open this up and selecting a layer defines the "parent." each arrowhead should be parented to its own point.

    Now in the lightning or Lightsword effect (whichever you use) by selecting the same point layer for the Start/Hilt location of each instance of lightning/Lightsword you can now control the center of All your lines by moving a single point. By selecting each arrowhead's parent point for the lightning/Lightsword end point moving a point layer will move the arrowhead and the end of its line together.

    Points also allow you to chain effects together. Let's say you wanted one particular line to have a light flare at some point. The Hotspot of the flare can be assigned to that arrowhead's parent point. Now moving that single point moves the arrowhead, the line segment AND the flare all at the same time.

    Wait, let's do another thing - maybe we parent all the arrowhead points to the center point. Now if I move the center all the arrowheads move with it. Maybe you decide you want all the arrowheads to be larger or smaller... Changing the scale on the center point will change the scale of all its children (the arrowhead points). The arrowhead points will pass that scale to the arrowhead graphics. Changing the scale of the center point now scales all the arrowheads at once! (It will also move them all, since the distance between the points is also scaled up).

    Point rigs and parenting are also the key to a lot of complex animation.

    Skip to 25:30 in this video for the section on points and parenting.

    At 26:42 in this video is a section on "skeleton rigs." In this example I'm using points and the lightning effect to visualize how a dalek is rigged, but it will also show you how to set up a lightning effect to points, just like I'm suggesting you do with the arrow lines.


  • vanny_f
    vanny_f Website User Posts: 59 Just Starting Out*

    Thanks Triem23 for your detailed answer,

    basically I can neither find a hexagon icon for the polymask in my Hitfilm express menu nor a lightsword effect (see screenshot).


    Further I think that your described approach is quite complex for me as a beginner (who does not spent too much time with Hitfilm). So I think I will not be able to use your suggested approach succesfully without spending many hours on it. This is why I will try to use a simpler approach by just creating the arrows in MS Power Point and then insert them as jpegs. This will not look as good as your solution but it will be okay for my purposes (as my goal is not to make high quality animations).

  • vanny_f
    vanny_f Website User Posts: 59 Just Starting Out*

    @Triem23 : You also mentioned that I can import images without backgrounds? Bascially I tried this but whenever I save the image as a image in MS Power Point and insert it in Hitfilm express it has a dark background as you can see in the screenshot.

    This is why I just make a screenshot of Power Point and cut out the arrow. By doing so there is a white background around the arrows as you can see in the screenshot

    Any idea how I can easily get rid of those?

  • Triem23
    Triem23 Moderator Moderator, Website User, Ambassador, Imerge Beta Tester, HitFilm Beta Tester Posts: 19,935 Ambassador

    I don't use PowerPoint. Try those videos?

    I made the assumption you were on Hitfilm 16. 15 doesn't have a polygonal mask. It does have a Freehand Mask, which is how you would draw your own arrowhead.

    The freehand mask is also how you would separate your arrow from your non transparent background.

    To answer your question from your other thread, "nesting" or "embedding" or "precomping" are all terms for putting a Composite inside a Composite.

  • vanny_f
    vanny_f Website User Posts: 59 Just Starting Out*

    Thanks Triem23 for your answer and the videos, I really appreciate your help.

    I will have a look at all of them and try what they suggest. Basically I have a question regarding the polynomial mask. Is this something like a drawing tool that I can directly use? Meaning that I draw something there and I directly have it as an object (as if I was using a drawing programm like Inkscape or Paint)? Or do I also have to adjust something regarding the masks and change some parameters etc.? If I can directly draw something in Hitfilm 16 I would consider upgrading but if I have to mess around with the objects until I can directly use them, I would prefer just using a drawing programm and importing the drawings?

  • Triem23
    Triem23 Moderator Moderator, Website User, Ambassador, Imerge Beta Tester, HitFilm Beta Tester Posts: 19,935 Ambassador

    The HF16 polygonal mask creates specific polygonal shapes - I think between 3 and 20 sides - with other options for curvature.

    The freehand mask can create any shape.

    Using the freehand mask is similar to using the vector drawing tools in Illustrator or Photoshop.

    Bear in mind a mask is a vector shape, but a mask is applied to a PLANE and that plane's pixel dimensions are set when the plane is created. You can't mask a shape on a plane and blow it up 1000% with perfectly clean edges. The pixels will anti alias.

    A masked plane can be moved, scaled, rotated etc like any video/photo media inside Hitfilm

  • vanny_f
    vanny_f Website User Posts: 59 Just Starting Out*

    Hi all,

    can anyone tell me why there is always a black background when I insert a transparend png-file that I created with Power Point (I watched all the videos posted by Triem23 about how to create a png-file with transparent background in Power Point).

    Here you see a screenshot

    Any idea how I can get rid of the black background? The black background should just be transparend (and not white)?

  • vanny_f
    vanny_f Website User Posts: 59 Just Starting Out*

    Any comments to my last comment about the (not)transparent background? I'd highly apprciate any further comments from you.

  • Triem23
    Triem23 Moderator Moderator, Website User, Ambassador, Imerge Beta Tester, HitFilm Beta Tester Posts: 19,935 Ambassador
    edited July 4

    Vanny, between @Andy001z and myself, we've already given you literally every possible answer:

    • Export from PowerPoint with a transparent background. I even found you a tutorial on how to do that.
    • Use a different photo editor to cut the background.
    • Use Luminance Key to remove white or black backgrounds
    • Use masking tools to draw around the arrows you import.
    • Draw your own arrows on a plane with masking tools. *I gave you a tutorial on how to do this.*
    • Create arrows procedurally (which requires masking), which I talked through in detail. (In fact, I built the rig. Works fine. Just figured out how to optimize it. Note to self - align head layer to center point.)
    • I suppose you can try Hue/RGB Key and Chroma Key.


  • vanny_f
    vanny_f Website User Posts: 59 Just Starting Out*

    Thanks for your answers. I now found out what the problem was with the black background.Hitfilm Express has problems with 24-bit images (not other programm I use has problems with them). I read it here in this thread: https://community.fxhome.com/discussion/40297/i-made-a-png-with-a-transparent-background-but-it-in-hitfilm-it-has-a-black-backgroundv

    The solution is to upload the image here https://pixlr.com/de/x/ and then save it again.

  • Stargazer54
    Stargazer54 Moderator Moderator, Website User, Ambassador, HitFilm Beta Tester Posts: 3,321 Ambassador

    @vann_f Technically a 24 bit image has no transparency and HF will have no issues with that. Transparency in an image requires it to be a 32 bit image. The extra 8 bits (also known as the Alpha channel) define how transparent the background is (could be 50% grey for instance). Any image that is only 24 bit (or lower) will never have transparency.

    However, as you found, you can reprocess the 24 bit image to make it 32 bit with an imaging processing program. Personally I use Photoshop, but there are plenty of other free options as you pointed out. Another one that gets a lot of use is Gimp https://www.gimp.org/.

  • vanny_f
    vanny_f Website User Posts: 59 Just Starting Out*

    Thanks Stargazer54 for your answer and explanation and thanks for the suggestion of Gimp,

    just out of interest: what does the 24-bit basically mean (or the 32-bit)? Is every pixel of the image encoded with 24-bit (or 32-bit)?

  • Triem23
    Triem23 Moderator Moderator, Website User, Ambassador, Imerge Beta Tester, HitFilm Beta Tester Posts: 19,935 Ambassador

    Pixel images are made of 3 or 4 "channels." Each channel contains one type of data.

    24 bit images contain 3 channels - Red, Green, Blue - each with 256 values from none to full giving about 16.7 million color combinations. 24-bit images are opaque.

    32-bit images contain the red, green and blue data and add a 4th channel, "alpha," which contains 256 levels of opacity data from transparent to opaque.

    Yes, every pixel is encoded with the 3 or 4 channels of data.

    Your initial 24 bit image wasn't transparent because 24-bit images contain no transparency.

    I refer you, again, to the three different videos I linked for you on June 27 showing how to export your elements from PowerPoint with transparency. Otherwise, you can continue to upload your images to the online processor (that would be the second method I suggested - using a photo editor to remove the background) if you wish.

    On June 25 you wrote:

    First of all it is diffcult to adjust the length of the arrows as they do not scale accordingly .

    Exporting Images from PowerPoint, transparent or not, will continue to have this issue. Scaling the image will always deform the arrowhead. The solution here is still to create a separate element and use Lightning or Lightsword to create a procedural shaft and use a masked plane to create an arrowhead, then use points to connect them. I'll probably just build this as a project now and upload it to Dropbox.

  • vanny_f
    vanny_f Website User Posts: 59 Just Starting Out*

    Thanks Triem23 for your answer and explanation,

    I watched all your 3 videos about how to export an Image in PowerPoint with a transparent background. The point is that when doing it exactly as it is told there, the image is only transparent when inserting it again in PowerPoint. When inserting it to Paint or HitfilmExpress, it still has no transparent background and in Hitfilm Express it is listed as a 24-bit image.

    Nevertheless, I now managed to create the png-images with a transparent background and everything looks okay now.

    I also managed to solve the scaling problem with the arrows. I just create multiple arrows with different length but same hight in Power Point and export them (and make them transparent by using another program). Then I just add them in Hitfilm Express. The results is fully sufficient for me and this way is also quite easy and intuitive. Here you can see a screenshot.