logo

Live Production Software Forums


Welcome Guest! To enable all features please Login or Register.

Notification

Icon
Error

Options
Go to last post Go to first unread
phab  
#1 Posted : Saturday, October 20, 2018 6:42:10 AM(UTC)
phab

Rank: Advanced Member

Groups: Registered
Joined: 9/23/2015(UTC)
Posts: 60
Location: Paris

Was thanked: 10 time(s) in 9 post(s)
Hi all, i am a french

I animated a title with Google Web Designer : https://www.google.com/webdesigner/
An example in attachment ( live anim title.zip (21kb) downloaded 51 time(s).)

Two questions :

how to play this animation (html5) in Vmix overlay ?

how to modify by the browser chrome this texts "name", "surname" and "test & test" ?


merci à tous ;)
Phab
thanks 1 user thanked phab for this useful post.
markleman on 2/26/2019(UTC)
phab  
#2 Posted : Saturday, October 20, 2018 8:10:47 PM(UTC)
phab

Rank: Advanced Member

Groups: Registered
Joined: 9/23/2015(UTC)
Posts: 60
Location: Paris

Was thanked: 10 time(s) in 9 post(s)
Here's my test with OBS Studio :


Best regard
Phab
ThomasK  
#3 Posted : Saturday, October 20, 2018 8:50:10 PM(UTC)
ThomasK

Rank: Advanced Member

Groups: Registered
Joined: 8/11/2018(UTC)
Posts: 60
Man
Austria

Thanks: 33 times
Was thanked: 6 time(s) in 6 post(s)
How is OBS studio integrating the google web designer? So far not visible in the video.
phab  
#4 Posted : Saturday, October 20, 2018 10:04:59 PM(UTC)
phab

Rank: Advanced Member

Groups: Registered
Joined: 9/23/2015(UTC)
Posts: 60
Location: Paris

Was thanked: 10 time(s) in 9 post(s)
Hi ThomasK,

it's really simple, using the browser and a keyboard shortcut to play the title.

Look at my tutorial :


Best Regard,
Phab
jammerxd  
#5 Posted : Thursday, November 1, 2018 3:52:53 PM(UTC)
jammerxd

Rank: Advanced Member

Groups: Registered
Joined: 12/25/2015(UTC)
Posts: 33

Thanks: 1 times
Was thanked: 2 time(s) in 2 post(s)
Can you upload the source html for the title or give a better detail of how to make them in Google Web Designer?
phab  
#6 Posted : Sunday, November 11, 2018 8:49:38 AM(UTC)
phab

Rank: Advanced Member

Groups: Registered
Joined: 9/23/2015(UTC)
Posts: 60
Location: Paris

Was thanked: 10 time(s) in 9 post(s)
Hi jammerxd,

here is another tutorial on title animation and attached source html TEST6.zip (14kb) downloaded 14 time(s).



phab

thanks 1 user thanked phab for this useful post.
kjones9999 on 11/13/2018(UTC)
r5dad  
#7 Posted : Wednesday, November 21, 2018 2:34:41 AM(UTC)
r5dad

Rank: Advanced Member

Groups: Registered
Joined: 10/20/2016(UTC)
Posts: 57
Location: Virginia-USA

Thanks: 5 times
Was thanked: 6 time(s) in 4 post(s)
This looks cool, and after only 5 minutes of fiddling around (before watching video) I was also able to make an animation.

While I was able to get this to work in vMix using a web source, I did run into a few problems that hopefully someone here will help us overcome.

The animation plays once when you add the source and does not repeat. Even when "Loop" is enabled.

Right click the source and select "Reload" will blank the screen while the page is refreshed and the animation plays one time and stops.

I added a trigger to the input, "On Transition In" or "On Overlay In" and told the input to reload the web page. This works, however the last frame of the animation is live for a split second before the trigger starts. This also creates a short delay from the time you cut to the time the animation actually plays.

After thinking about it for a while, I think the best way would be to build the entire in/wait/out sequence with a few blank frames at the end of the sequence. In this way, the default state is stopped on the last frame which is blank and therefore nothing appears on screen when taking the animation. Then the trigger will reload the page, start the animation, go in its entirety, and stop at the end. This will take some practice with timing on your part as it will need an extra second to reload the page. I also tried an "OnCompletion" to clear the overlay, but I don't think web sources ever "complete." This means you'll always have that overlay on after an animation, but it shouldn't cause any problems that I can see, unless someone reloads the page without clearing the overlay. If you have a dedicated overlay specific to this effect, you can always set a master duration for after the effect completes to clear the overlay.

If anyone has a better way, please share!

Of course, when version 22 comes out with the new title designer, it may become easier just to learn the new designer. But this is still a cool alternative, if we can get that dead space to go away.

Thanks for sharing!
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.