It's kinda my thing for Photics.TV — to use Line Drawing to create nice video intros. This was the previous example — Line Draw Option — Three Times In One Video 😄
That was tough and took a lot of time, so you think I would have quit while I was ahead. And on Monday morning, I was thinking of skipping this effect. But nope, I put in the extra hours to get it done...
- SteelSeries Nimbus+ — https://youtu.be/wocG-WloQ54
…you can see it right at the beginning. I created that intro video with Hype. Even the pulsing red lights were partially done with Hype. (I used Final Cut Pro to change the color from white to red, as that's the actual color. It was a tough internal debate. I also used FCP to give the lights a bit of a glow with a blur.)
This is the adventure part of the story. I knew this one was going to be trouble, as it's more complex than the Pocket Tripod Pro and the Wallet Ninja. However, I had no idea how bad it would get.
First, my 2018 Mac Mini simply could not work with the document anymore. There were just too many vector shapes. It started to lag really bad. Lag is a softer description, this was more like beachball freezing. It certainly could not export the video.
So, I switched to my M1 Mac. It could keep up with the complexity of the Hype Document. Although, it would do this wobbling graphics thing...
However, the M1 too could not export the document. It would just get to a certain point and then freeze. What was wrong? The project would play in Safari, so why can't it just screenshot it and make the video.
That's when I wondered, hey, couldn't I do the same thing as what Hype's doing? It's basically taking a screenshot and then putting it in a video.
Unfortunately, my Mac Mini wasn't powerful enough to screen record the browser without lagging. As for the M1 MacBook Air, it's the wrong screen ratio. I didn't feel like juggling with external monitors and cables. So, to solve the lagging on the Mac Mini, I just decided to slowdown the playback of the Hype project.
To control the speed of the timeline, I added the following JavaScript code…
var x = 0;
setInterval(function(){
x = x + 0.01;
hypeDocument.goToTimeInTimelineNamed(x, "Main Timeline");
}, 1000);
That way, I could make a proper screen recording. I would just speed it up in Final Cut Pro — by a mere 5634%
So, this ~20 second video clip was 20 minutes long. That's 4K too! However, this wasn't accomplished in one shot. No, that would have been easy. Instead, things like email notification would mess up the recording…
I pulled the Ethernet cable, only to be thwarted by the screensaver. But eventually, I got it to work. I'm really happy with how the video turned out.
So, what did we learn?
- While not new information, obviously it would be nicer if Hype could import SVG files or even auto-trace artwork. I had to manually create the line-draw effect, which takes time. (Although, since it is so difficult to create this effect, it is rare. I'm thinking that Tumult will probably make this easier one day. And when that happens, this effect will be on-par with page curls and lens flares. )
- In situations like this, there's something wrong with the way Hype makes the videos from the animation. If I could get it done manually, then Hype should be better able to do it automatically.
- I suspect that part of the application lag has to do with screenshots. I mentioned here... Free Hype Templates 🏗 - #87 by Photics ...that I thought it was a good idea to have the option to turn off the automatic screenshot/thumbnails. Perhaps the lag is Hype trying to create a screenshot, but it can't because it's too intense.
I think this effect is something cool to mention in the next Hype Newsletter. However, I'm not sure if I'd recommend that someone else do what I just did. HA HA!
I think the effect looks great though. That's why I used it twice though, once at the beginning and again at the end. Heh, it's a 16 minute video, so maybe you forgot about it from 15 minutes ago.