How to create a script for stroke reveal

Hello everybody,

I am looking for a solution to create a script that automates the process of creating the stroke reveal effect. See this tutorial:

Someone to help me? I never did a script …

Thanks! Mica

1 Like

I also had the idea to create a script which would ease the work of creating the stroke reveal effect.

Before we start to create some script, we have to think about some problems like where will you add the waypoints for it, or how to create the stroke reveal effect for selective advanced outline, it’s not always correct to assume that you have want the effect for all advanced outline. And if you have more than 2 width point how should you deal with it (maybe ignoring that layer would be good).

As you have not specified what you will use this script for, as you are suggesting the tutorial it seems you just want stroke reveal effect, even if you create any plugin you still would have to manually displace the waypoints yourself.

I don’t think a plugin would be helpful for this case. If you are going to create any plugin, you need to take into consideration of above problems and create some solution for it which can get a bit complicated.

Maybe you should create a custom syntax denoting which outlines to select, how to animate them, duration for animation (of the stroke effect), delay between layers, there is a lot of input that you can expect from user. For now a solution is to rename layers and take any kind input/information from the user. For now rather than creating such complicated programs lets just take some time and animate the outlines.

If Synfig provides a way to take input for plugins then that would be really useful for plugin developers, for now it is complicated for both developers and users to provide some information for the plugin.I have already made a request (and it is not easy for developers too, to create some UI for plugins to use). I think this is really important, because plugins are easy to develop and small scripts can save a lot of time.

2 Likes

I actually used veermetri05’s ‘Make advanced outline’ plugin (thank you for script and inspiration) and modified it to make my own ‘Make stroke animation’ plugin. Unfortunately, I cannot attach the zip, so here’s the script.

import xml.etree.ElementTree as ET
import random, string
import uuid
import sys
import copy
tree = ET.parse(sys.argv[1])
root = tree.getroot()
rootChildren = list(root.iter('layer'))

def get_id():
    return uuid.uuid4().hex

for child in rootChildren:
    if "outline" in str(child.attrib['type']) and "_xa" not in str(child.attrib['desc']) :

        if str(child.attrib['type']) == "outline" : 
            child.attrib['type'] = "advanced_outline"
            for index, item in enumerate(list(child)):
                    if(item.attrib["name"] == "sharp_cusps"):
                        item.remove(list(item)[0])
                        item.attrib["name"] = "cusp_type"
                        integer = ET.SubElement(item, "integer").set("value", "0")
                    if(item.attrib["name"] == "round_tip[0]"):
                        item.remove(list(item)[0])
                        integer = ET.SubElement(item, "integer").set("value", "1")
                        item.attrib["name"] = "start_tip"
                    if(item.attrib["name"] == "round_tip[1]"):
                        item.remove(list(item)[0])
                        ET.SubElement(item, "integer").set("value", "1")
                        item.attrib["name"] = "end_tip"
                    if(item.attrib["name"] == "homogeneous_width"):
                        item.attrib["name"] = "homogeneous"

        child.extend([ET.fromstring("""        <param name="wplist">
          <wplist type="width_point" loop="false">
            <entry>
              <composite guid=\"""" + str(get_id()) + """\" type="width_point">
                <position>
                  <real value="0.0000000000"/>
                </position>
                <width>
                  <real value="1.0000000000"/>
                </width>
                <side_before>
                  <integer value="0"/>
                </side_before>
                <side_after>
                  <integer value="0"/>
                </side_after>
                <lower_bound>
                  <real value="0.0000000000" static="true"/>
                </lower_bound>
                <upper_bound>
                  <real value="1.0000000000" static="true"/>
                </upper_bound>
              </composite>
            </entry>
            <entry>
              <composite guid=\"""" + str(get_id()) + """\" type="width_point">
                <position>
                  <animated type="real">
                    <waypoint time="1f" before="clamped" after="clamped">
                      <real guid=\"""" + str(get_id()) + """\" value="0.0000000000"/>
                    </waypoint>
                    <waypoint time="5s" before="clamped" after="clamped">
                      <real guid=\"""" + str(get_id()) + """\" value="1.0000000000"/>
                    </waypoint>
                  </animated>
                </position>
                <width>
                  <animated type="real">
                    <waypoint time="0" before="clamped" after="clamped">
                      <real guid=\"""" + str(get_id()) + """\" value="0.0000000000"/>
                    </waypoint>
                    <waypoint time="1f" before="clamped" after="clamped">
                      <real guid=\"""" + str(get_id()) + """\" value="1.0000000000"/>
                    </waypoint>
                  </animated>
                </width>
                <side_before>
                  <integer value="0"/>
                </side_before>
                <side_after>
                  <integer value="1"/>
                </side_after>
                <lower_bound>
                  <real value="0.0000000000" static="true"/>
                </lower_bound>
                <upper_bound>
                  <real value="1.0000000000" static="true"/>
                </upper_bound>
              </composite>
            </entry>
          </wplist>
        </param>"""), ET.fromstring("""        <param name="dash_enabled">
          <bool value="false"/>
        </param>"""), ET.fromstring("""        <param name="dilist">
          <dilist type="dash_item" loop="false">
            <entry>
              <composite guid=\"""" + str(get_id()) + """\" type="dash_item">
                <offset>
                  <real value="0.1000000000"/>
                </offset>
                <length>
                  <real value="0.1000000000"/>
                </length>
                <side_before>
                  <integer value="4"/>
                </side_before>
                <side_after>
                  <integer value="4"/>
                </side_after>
              </composite>
            </entry>
          </dilist>
        </param>"""), ET.fromstring("""        <param name="dash_offset">
          <real value="0.0000000000"/>
        </param>""")])

        for bline in child.iter("bline"):
            if bline.attrib["loop"] == "true":
                bline.set("loop", "false")
                entry = bline.find("entry")
                entry_rpt = copy.deepcopy(entry)
                composite = entry_rpt.find("composite")
                composite.set("guid", get_id())
                bline.extend([entry_rpt])

tr2ee = ET.ElementTree(root)
with open(sys.argv[1], "wb") as fh:
    tr2ee.write(fh)

What it does:

  1. As in the original plugin, all outlines are converted to advanced outlines (required for stroke reveal) EXCEPT in the new plugin, any layers that have ‘_xa’ (for ‘no animation’) in their names will not be converted.

  2. All advanced outlines, including previous advanced outlines without ‘_xa’ in their names, will have a stroke reveal of 5 seconds, starting from 0 seconds. As Synfig doesn’t have a way to interact with plugins, that’s the default unless you edit the python file (you can see the ‘5s’ in the script). However, you can easily drag the waypoints in the Time Track Panel after the plugin runs.

  3. Closed outlines will be converted to open outlines with a copy of the first point added to the end so that the animation will complete the loop. Otherwise it will stop at the second last point.

Since this plugin might mess up your current animation or change stroke widths, etc., do save a copy of your drawing before you run it.

Here is an example: an animated stroke reveal of the borders on the world map (svg file from Wikimedia Commons). Just imagine trying to manually change every stroke !!!

For info, changes that I made to veermetri05’s script:

  • Detection of ‘_xa’ in the layer’s name.
  • Changing of the cusps, tip, etc. is moved before adding the advanced outlines.
  • Added the animated tags between the position and width tags.
  • Convert any closed loop to open loops and copy the first point to the end.

Do try it out. Hope that it helps with your animation. If you can make better adjustments, please do.

7 Likes

Hello,

Thank you both for your answers!
Why am I trying to automate the line revelation effect? Originally it was to make animated explanatory videos of the whiteboard-animation type.
At present I have only found paid and proprietary software to do this.
In addition, as my cartoons contain a lot of lines, it is very laborious to do it by hand.
So thank you very much to you Scribbleed! This is exactly what I was thinking! But for now I can’t get it to work …

I get the message: Traceback (most recent call last):
File"home/michael/snap/synfigstudio/11/.config/synfig/plugins/-Animation de ligne/animer-la-ligne.py", line 121, in if bline.attrib[“loop”]==“true”:
KeyError:‘loop’

For info, being French I called the script animer-la-ligne.py and the Animation de ligne folder.
To create the script I copied and renamed the Make advanced outline folder. Then I copied the script you give there without modifying anything.

Do you have any idea why this isn’t working with me?

Thank you so much!

Be sure the attribute loop exists in your file.
It must be true or false, but it should be present.

Thanks for pointing it out, should have done some error checking. Just change the ‘blines’ lines to

    for bline in child.iter("bline"):
        if "loop" in bline.attrib:
            if bline.attrib["loop"] == "true":
                bline.set("loop", "false")
                entry = bline.find("entry")
                entry_rpt = copy.deepcopy(entry)
                composite = entry_rpt.find("composite")
                composite.set("guid", get_id())
                bline.extend([entry_rpt])

Note: after you run the plugin, the converted outlines will ‘disappear’ because in the first frame, it should not appear. Click the play button to see the stroke reveal.

Have fun!

Really cool, thanks for your contribution.

As you are ignoring layers with _xa you can just extend it. And also take input for timing.

Example,

_10s_nameOfLayer
_15f_nameOfLayer

You can use regex to parse names of layers and get the inputs.
Maybe even add a support to displace by renaming the group.

“_displace_20f_nameOfGroup”
---->"_10f_layer1"
---->"_20f_layer2"
---->"…"

So in this example, layer1’s animation would be of 10f then there would be a constant displacement of 20f and then layer2’s animation for 20f and so on

f=frames, s=seconds

I don’t think this is really necessary, but if would ease the work a lot.

You’re welcome. You also have a good idea there to extend the layer names, but I’ll leave it to better python programmers if they want to modify the script above. Have to balance it too, whether it saves more time to change layer names or just drag the waypoints after the script runs. In my case, I wanted a script to modify a lot of layers, so adding ‘_xa’ was for a few ones I didn’t want was easier. Some other users might just want to change one or two layers instead, so maybe can use another script that does the opposite.

Ideally, I can imagine a Synfig feature where you can select layers and run a plugin just for those layers, maybe also with a GUI. Similarly, one could make scripts to apply a default animation such as zoom, flash, rotate. But again, it depends whether if it’s faster using the plugin and adjusting the animation after, or directly making the animation yourself, with the least keyboard input.