Pencil animation (or line animation)

[JimScott]

@Saeta

One question: Why can't I create an automatic animation of a dashed line?

I did a Forum search & this Demo of an animated dashed line by @h_classen showed up - note his answer in this post which references another link:

Line Dash Animate with Line Draw

you are right …

I have attached that referenced file here: apollo8_animatedDash.hype.zip (609.4 KB)

Also some other useful info in both threads.

[MaxZieb (Loves Hype)]

First: That looks great already!

• you can use invisible lines to reposition the hand if the offset between two lines creates a big jump OR even easier you can just animate the hand as you want. As long as there is no marked line progressing the hand is free to be animated with Hype.
• the object positioned by the lineObserver can be anything … so you could just have it position a group (1) and inside the group the hand image (2) can be moved around until the pencil point is aligned with the group corner. That way you don't have to adjust x and y for the pen.

[Saeta (Saeta Hernando)]

Thank you very much for your response.
My fault for not looking in the forum (tiredness makes me lazy)

[Saeta (Saeta Hernando)]

Thanks Max, I hadn't thought about it. Great solution! (both)

[MaxZieb (Loves Hype)]

Your welcome.

Another trick comes to mind:

• You can make the hand and pen a symbol and then use symbol actions from the main timeline to run any symbol timeline using symbol actions. That way the hand can have a set of reusable "gestures" or "actions" that can be added to any motion without having to repeat the animation work.

[h_classen (Hans-Gerd Claßen)]

Reveal a svgpath with dash and gap

https://www2.aachener-zeitung.de/zva/karlo/test/revealSVGPathStrokeDashGap/ revealSVGPathStrokeDashGap.hype.zip (25.9 KB) This little tool enables the reveal of a svgpath with dash and gap. It works great with Hypes morphing –> thx to @MaxZieb for his hypespecific MutationObserver … even offers an easy way to do primitive charts … //// setup: add a class of revealPath to a Hype-Vectorshape add two data-attributes to it: data-dashpercent -> integer between 0 - 100 data-gappercent -> inte…

This approach was to reveal a dotted path ...

[Saeta (Saeta Hernando)]

That looks great.
This way you can give the arm some naturalness, at least support and lift the pencil tip from the paper. That's enough to make a more dynamic global animation

[Saeta (Saeta Hernando)]

It is absolutely stunning.
It can give a very interesting creative game.

The timer is a blast

Thank you very much for your contribution.

[jonathan (Jonathan Deutsch)]

@Saeta

@jonathan, One question: Why can't I create an automatic animation of a dashed line?

The technical reason is that the line draw and line dash use the same property under the hood. My recollection is that the solutions that were developed in the forums would likely be the way forward to allowing both in Hype for a future release .

I'm glad to see everyone contributing on here - looks like with all these techniques combined a hand drawn pencil animation look has come together!

[Saeta (Saeta Hernando)]

Thank you for the technical explanation. Now I understand it better.

[Saeta (Saeta Hernando)]

With all that I have learned here I have made an animation with Hype for the header of some videos that I am working on.

Logo_Animado-720

I have also taken the opportunity to test the buttons. I have put one of "Repaly" but it gives a failure: the pencil line effect is lost with the "Replay", although it works if you reload the page.

En enlace está aquí:
https://artesaeta.com/Animation/Logo_Animado.html

[Saeta (Saeta Hernando)]

I have been doing tests and only "reload" the pencil style if the button action is "Go to Url (same web address)" reloading the page, instead of "Jump to the Scene1". But I don't know if that's right.

[jonathan (Jonathan Deutsch)]

That looks great!

Any chance you would be willing to share a zip of this .hype document? I think that would be the easiest route to investigate why the filter effect for the pencil isn't showing up.

[Saeta (Saeta Hernando)]

Yes. Here it is @jonathan . It's my first job with Hype so there may be a few bugs. The animation is entirely handmade.

Many thanks for the help

[MaxZieb (Loves Hype)]

Looking great! Basically, the enabler creates SVGs with effect definitions and a unique id for each of the pencils. Currently, I am not checking if the enabler already did that job and it reruns. I guess that would be the source of the problem. You can fix it if you add the enabler to a first scene you never revisit. But the pencils (and the enabler) do need some love and some refactoring. I am currently investigating patterns and in that go… maybe I'll see to it that pencils are also "cleaned" up and extracted into a CDN file rather than being rendered as an "enabler" (in a rectangle) on stage…

[Saeta (Saeta Hernando)]

Sorry, the ZIP file is not complete. I renamed the file in the folder while the file was open in Hzpe and all the SVGs disappeared. I managed to recover a backup. I was quite shocked to see that all that was missing.
I am sharing it again in case it helps to see better what is going on. Sorry for the inconvenience.

[Saeta (Saeta Hernando)]

@MaxZieb

Looking great! Basically, the enabler creates SVGs with effect definitions and a unique id for each of the pencils. Currently, I am not checking if the enabler already did that job and it reruns. I guess that would be the source of the problem. You can fix it if you add the enabler to a first scene you never revisit. But the pencils (and the enabler) do need some love and some refactoring. I am currently investigating patterns and in that go… maybe I'll see to it that pencils are also "cleaned" up and extracted into a CDN file rather than being rendered as an "enabler" (in a rectangle) on stage…

Thank you very much for the explanation. As I don't know how to program I simply copied the previous molds trying to understand the logic, but not much more.

I also found that the image of the hand is too heavy. I did the test with an image in print resolution and forgot to change it for the image with screen resolution. That slows it down a lot.

[h_classen (Hans-Gerd Claßen)]

amazing animation!

[Saeta (Saeta Hernando)]

I have a problem with the video export of this project.
As you can see in the file, I have already set the measurements of the scene thinking about the output to HD video (1920x1080) but when exporting, the video obtained does not have the sharpness that it should. In fact there is almost no difference with the export to 720px.

I have tried exporting with both Codex and I have also done a test doubling the export size. The problem remains.

However, when exporting GIF or PNG the result is much sharper, but they are formats that do not solve anything for me in this project.

I looked in the forums and found the same problem in this post.

Exporting video images blur?

[image] I’m having an issue I can’t fix. When I export a video file from Hype the preview looks great as it slowly renders the video. The final video is quite blurred? all images imported into Hype are @x2 quality so should look high resolution? I have tweaked the export settings increasing the bitrate but we get the same result? Any ideas would be welcome. [image]

Although it is old it explains perfectly the result. I'm following @jonathan 's advice to make the scheme bigger. It doesn't sound logical to me with the size of my scene but I'm trying to see what happens.

I think the problem is when converting from SVG to video format, perhaps because of compression.

An interesting solution might be to export each frame in numbered PNG, just as Flash did. It is not the most agile but it allows to solve some problems. Now I think that maybe you could export with transparent PNG as well.

[h_classen (Hans-Gerd Claßen)]

yeah it's a pitfall, but working with a doubled scenesize brought the expected results for some videos i did in the past ...