Pencil animation (or line animation)

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. :scream:
I am sharing it again in case it helps to see better what is going on. Sorry for the inconvenience.

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.

amazing animation!

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.

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.

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

1 Like

There is a Runtime called HYPE.video.js in the package and one could use it for that…

Added and needed API for frame exports is ...
heartbeatForVideoExport with the signature (currentTime)

@jonathan wrote about it here:

Transparent Video background export is possible with puppeteer and headless chrome:

1 Like

Thank you very much, guys, for your contributions.

@MaxZieb Thank you very much, :pray: but without knowing how to program I prefer not to go into that field (although I will take a look). I'll keep this information for when I know more. :wink:

Every day I spend using Hype I like it more but, what makes me fall in love is the community here supporting everybody. :slightly_smiling_face:
Thank you very, very much for all the support, really.

2 Likes

@h_classen The trick of preparing the scene with a larger size than the final video output works very well. :grinning:

It is simply something that you have to take into account if you want to export the animation to video. For other direct web projects, it is not necessary.

The final size I used is 3840 x 2160 px

1 Like

The zip from above has the scene size of 1920x1080, so if this is your video export setting then you will get the same pixels as on your retina screen with that choice since it is a 2x factor.

I wasn't quite certain from your messages if you were just hitting the fact that on a Retina screen Hype will show the scene at @2x vs. a video export dimensions are in @1x pixels. If you have shots of the same resolution of a PNG export vs. a video export that shows a difference, please feel free to send that along. The video export really just uses the same data as the PNG export, so the only difference is compression inherent to the video format.

Thank you for your response. I am out of the studio until Saturday. On my return I compare the quality of the PNG and the video to see if there is a real difference or not.

Enviado desde myMail para iOS

1 Like

I'm back now.
I've been able to see that there's no difference in the visual quality of the animated PNG and the MP4, although there are colour differences. The Gif also has its own colour, but that's normal.

I share the examples of the three files. The resolution of all of them is 1920 x 1080 px
MP4:

PNG:

GIF:

Wow, I just saw that the GIF is at a lower resolution :thinking:

1 Like

Great.

There are unfortunately going to be color differences even in mp4 compared to the PNG, since mp4 is a compressed format.
The video export shares the same scale factor among all formats, so it isn't clear why GIF would be different, but perhaps it is just from when it was exported at a different time?

Yes, @jonathan . We visual artists are already used to all those colour changes in digital. The colour depends on the compression of the files, the screens and the programmes used to display them. For example, Moyilla Fierfox saturates the colours a lot and in Safari they look more "correct".

This is a quality of the digital world that must be taken into account and not be frightened by it. It is better to learn to live with this inevitable characteristic. I believe that this also gives more value to original works made in a traditional way.

On the other hand, yes, the GIF is exported with another resolution, it is not a fault. I simply didn't remember that detail with all the tests I did.

Another issue that has brought me to mind with Hype is working with audio.
I think I've read all the threads on this subject and this is the summary I've understood about the subject of audio in Hzpe.
Hype is web-oriented and search engines impose their logic. This can be summed up by the fact that audios that are not activated by the viewer are not accepted. So any sound effect that accompanies the animation automatically cannot be included.

I have also seen that the best way to implement audio in Hype and synchronize it with the animation is with the MP4a format. This way it is imported as if it were a video file that runs alongside the animation. That can go great for voiceovers.

At the moment, as this project is more geared towards video output than the web, I decided to do the audio editing in the DaVinci Resolve video editor. In my case the animation is the one that rules over the audio and not the other way around. In other cases where the audio is the one that commands over the animation I will try to work with MP4a.

Is this summary correct? Do you plan to make improvements in the audio work within Hype? Is it worth the effort? I think it would be a good point in favour of using Hype.

Here I leave you the finished video. I've also saved the two scenes separately from Hype, to give you more room to manoeuvre with the videos.
The audio is from the DaVinci library and others that I recorded myself, like the handwriting and the brush stroke.

1 Like

Hype is essentially for the web … if your after full precision video animation production then you probably would use something like After Effects. Hype can do all these things too but is aimed at the browser. If you are not looking at building for the web you can and should give After Effects a try. It is truly great once you get into it. It is a lot of fun and compelling. Plugins like Lottie in combination with Rubberhose make it a joy for animation. I love Hype but you must pick your battles wisely. I like challenges, improving on them and to solve them. So, implementing things is fun and using them even more. If you are pressed for time take the established routines instead of fighting with your tool set.

Yes, from your description I think you have summarized the deficiencies and workarounds. While we do not make promises on features, this is a weak point that we would definitely like to improve in the future.

The animation looks great!

Thank you very much for your comments.

Max, I agree with you that using Hype only for video animation doesn't make any sense. There are more complete tools for it, like AE, Harmony or Moho.

I really love Hype, for the interactive part it offers and I have simply been testing the limits to know what I can or cannot do with this tool, within what I am most proficient at, which is animation.

As you say, I try to choose my battles wisely and for that it is necessary to know the field. AE or Harmony are too closed for what I want to do, which are interactive educational activities and stories. That's where I find the great potential of Hype.

Now that I know the "limits" for Hype's animation I see more clearly its strengths (at least some of them). It's time to start practicing interaction (with the programming I don't dare yet). :wink:

@jonathan, a deficiency that has a solution is simply a change of perspective, details are polished over time :wink:

You are really doing a fantastic job with this application, which is charming for all its potential and its ease of use, even if it needs your learning time.

Thank you very much for all the support and ongoing support to this entire creative community. I am learning a lot from all of you :slightly_smiling_face: :beers:

2 Likes

Starting the test for the web I see that there are serious differences in how the pen effect is interpreted in different browsers. I have tested it in Chrome, Safari and Firefox. In the first two it runs great but Firefox makes a very ugly interpretation of the line. He widens it.

I guess it's a problem of the browser and its interpretation of SVG, so I guess the solution is complicated because it doesn't depend on Hype. At least I put the problem on record.

I leave you a small video sample for you to see.

By the way, I still have to speed up that writing quite a bit. :face_with_monocle:

Yeah - unfortunately it looks like this is a different interpretation of how the filter effects work between browsers. There's a lot chained together with magic variables so it would take a bit of time to figure out if there's a singular or multiple cause to the differences.

Should be as easy as selecting the all the animation bars and resize dragging them, if you simply want to scale it all together.

1 Like

Thanks @jonathan for the comment.

I understand it's a lot of work and I really don't think it's worth the effort since it depends more on the browser than on Hype.

I simply made the comment to report this "bug" so that other colleagues interested in this effect can take it into account and evaluate whether they prefer to use the effect or not. :slightly_smiling_face:

(Yes, I have the speed thing corrected, it was just a thought out loud) :sweat_smile:

1 Like