logo

Live Production Software Forums

www.vmix.com

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

Notification

Icon
Error
VMIX Titler and Graphics Tutorials?
Options
Go to last post Go to first unread
Previous Topic Next Topic
mavrick816  
#1 Posted : Saturday, March 12, 2016 5:22:46 PM(UTC)
mavrick816

Rank: Advanced Member

Groups: Registered
Joined: 11/14/2015(UTC)
Posts: 55
Location: Sacramento, CA

Thanks: 8 times
Was thanked: 4 time(s) in 3 post(s)
Is there any tutorials on how to develop your own VMIX Titlers? I'm interested in creating some "simpler" Animated graphics but not sure where to turn to? I've been able to create the static graphics and titler effects, but not sure how the animated ones were created.
Back to top
WWW

Wanna join the discussion?! Login to your vMix Forums forum account, or Register a new forum account.
Back to top  
corporatejames  
#2 Posted : Sunday, March 13, 2016 3:28:16 AM(UTC)
corporatejames

Rank: Advanced Member

Groups: Registered
Joined: 8/2/2015(UTC)
Posts: 364
Man
Australia
Location: Sydney

Thanks: 283 times
Was thanked: 76 time(s) in 62 post(s)
mavrick816 wrote:
Is there any tutorials on how to develop your own VMIX Titlers? I'm interested in creating some "simpler" Animated graphics but not sure where to turn to? I've been able to create the static graphics and titler effects, but not sure how the animated ones were created.



Use Blend for Visual Studio 2013 ( 2015 version does not include Import Photoshop and Illustrator files tool)
add VmixTitleLibrary as reference and declare it the xaml file

Default start document
Code:
<UserControl x:Class="MainWindow.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	     xmlns:my="clr-namespace:vMixTitleLibrary;assembly=vMixTitleLibrary" 
             mc:Ignorable="d" 
             d:DesignHeight="1080" d:DesignWidth="1920">

<Canvas>

</Canvas>

</UserControl>


Once you have this at the starting point you can import a Photoshop file to get your images onto the canvas or if good at using the built-in tools of Blend.
For animation on the objects and Timeline create a storyboard called Storyboard1 this will give you the timeline to create the keyframes etc for animation
similar to flash. I'm still learning how make the animation more smoove and creative so if anyone can provide more help that would be awesome.

Once you are happy with all the animation for your design to can click on the down arrow next to storyboard title bar and select duplicate. This will make a copy of
entire storyboard1. Rename it to Storyboard2 and select the down arrow again to reserve the timeline. That will give you the out for your vmix title when you deselect the overlay in the vmix.


I have been working on a design this week and learning as I go. Managed to create a dll which is required if you need to have commands or code-behind for connecting to a xml file or database. I only just managed to work this out but its a bit rough at the moment until I work out the C# or VB code. But working at the moment.

Hope this helps in the right direction. If only you have can provide more info or correct me if I have missed anything as I'm learning too.

I'm going to post a video of the finished titles in a week or two. They won't be polished but the functionality will be working.

I made a template in the Photoshop that I made different coloured panels on separate layers and imported them so they come in as images. I then animate each image separately. Once finished in Vmix I can change each image to anything I want like a background image, left-image,right-image and so forth. They animate as the original image has the xaml code and only replacing the place holder. Screenshot image attached.



corporatejames attached the following image(s):
demo-vmix.png (587kb) downloaded 90 time(s).

You cannot view/download attachments. Try to login or register.
Back to top
WWW
corporatejames  
#3 Posted : Sunday, March 13, 2016 3:37:35 AM(UTC)
corporatejames

Rank: Advanced Member

Groups: Registered
Joined: 8/2/2015(UTC)
Posts: 364
Man
Australia
Location: Sydney

Thanks: 283 times
Was thanked: 76 time(s) in 62 post(s)
For each keyframe you can change position/size of image/text, fade from 0 to 100, rotate etc. Takes a little while to fine all
options/settings under properties tab. I prefer AfterEffects but can't edit the text on the fly in Vmix like titles.
Back to top
WWW
mavrick816  
#4 Posted : Sunday, March 13, 2016 4:42:53 PM(UTC)
mavrick816

Rank: Advanced Member

Groups: Registered
Joined: 11/14/2015(UTC)
Posts: 55
Location: Sacramento, CA

Thanks: 8 times
Was thanked: 4 time(s) in 3 post(s)
Awesome info, but you just blew my mind away. I barely know my way around photoshop and after effects let alone, visual studio 13. Do you consider this advanced or general knowledge?

corporatejames wrote:
mavrick816 wrote:
Is there any tutorials on how to develop your own VMIX Titlers? I'm interested in creating some "simpler" Animated graphics but not sure where to turn to? I've been able to create the static graphics and titler effects, but not sure how the animated ones were created.



Use Blend for Visual Studio 2013 ( 2015 version does not include Import Photoshop and Illustrator files tool)
add VmixTitleLibrary as reference and declare it the xaml file

Default start document
Code:
<UserControl x:Class="MainWindow.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	     xmlns:my="clr-namespace:vMixTitleLibrary;assembly=vMixTitleLibrary" 
             mc:Ignorable="d" 
             d:DesignHeight="1080" d:DesignWidth="1920">

<Canvas>

</Canvas>

</UserControl>


Once you have this at starting point you can import a Photoshop file to get your images onto the canvas or if good at using the built-in tools of Blend.
For animation on the objects and Timeline create a storyboard called Storyboard1 this will give you the timeline to create the keyframes etc for animation
similar to flash. I'm still learning how make the animation more smoove and creative so if anyone can provide more help that would be awesome.

Once you happy with all the animation for your design to can click on the down arrow next to storyboard title bar and select duplicate. This will make a copy of
entire storyboard1. Rename it to Storyboard2 and select the down arrow again to reserve the timeline. That will give you the out for your vmix title when you deselect the overlay in the vmix.


I have been working one a design this week and learning as I go. Managed to create a dll which is required if you need to have commands or code-behind for connecting a xml file or database. I can only just managed to work out but its a bit rough at the moment until I work out the C# or VB code. But working at the moment.

Hope this helps in the right direction. If only you have can provide more info or correct me if I have missed anything as I'm learning too.

I'm going to post a video of the finished titles in a week or two. They won't be polished but the functionality will be working.

I made a template in the Photoshop that I made different coloured panels on separate layers and imported them so they come in as images. I then animate each image separately. Once finished in Vmix I can change each image to anything I want like a background image, left-image,right-image and so forth. They animate as the original image has the xaml code and only only replacing the place holder. Screenshot image attached.
Back to top
WWW
corporatejames  
#5 Posted : Sunday, March 13, 2016 7:01:03 PM(UTC)
corporatejames

Rank: Advanced Member

Groups: Registered
Joined: 8/2/2015(UTC)
Posts: 364
Man
Australia
Location: Sydney

Thanks: 283 times
Was thanked: 76 time(s) in 62 post(s)
I didn't know much a few weeks ago for visual studio and XAML. Just read up on it as wanted animated titles that I could update in Vmix
But wanted to share what I had found out and save you time looking for it. The Vmix forums are really helpful for getting you started.

I'm no expert at xaml so hoping to find someone myself so can do more advanced stuff with my ideas. But just getting hands dirty so I can build my own basic ones
I used to do a lot of Adobe Flash and development work years ago so transferred those skills to AfterEffects and now trying Blend.

Here is a example of my AfterEffects work

Youtube: Video demo Sydney Kings tv - Kings v Wildats (radio version)

My XAML titles won't have all the animation that these have but aiming for that in the future.
Be good if VMix could have the movie tag so could load video instead of images so I could have nice video backgounds like epsn and have them load with
the xaml title. I can trigger one as overlay but not as clean and be good to be to edit the field like the image and text tag.

Would be very great full if anyone can add to this and provide further information.
Back to top
WWW
tnorrell  
#6 Posted : Wednesday, March 16, 2016 12:38:36 AM(UTC)
tnorrell

Rank: Advanced Member

Groups: Registered
Joined: 12/6/2014(UTC)
Posts: 62
Location: Texas, US

Thanks: 21 times
Was thanked: 13 time(s) in 10 post(s)
@corporatejames

Don't forget to play around with triggers. If you design your videos correctly, you can still fire off XAML title overlays that will seem like they are part of the video.

for example, let's say your video elements show some fancy shiny stuff for 3 seconds before the boxes for your text/numbers show up.

In blend, design your XAML to fade in the text at the right spots starting at 3 seconds.

then, under triggers do an 'onTransitionIn' trigger that fires 'overlay1in' and brings up your XAML title.

the title will be 'in' for the entire 3 seconds, or the graphic rollout form the video, but the data in the title will magically show up at ~3 sec.

In fact i'm working on an example of this right now for a client. I'll not be able to share the output because of NDA, but it works, and you can build some pretty cool stuff. very ESPNish.
Back to top
WWW
corporatejames  
#7 Posted : Wednesday, March 16, 2016 4:23:35 AM(UTC)
corporatejames

Rank: Advanced Member

Groups: Registered
Joined: 8/2/2015(UTC)
Posts: 364
Man
Australia
Location: Sydney

Thanks: 283 times
Was thanked: 76 time(s) in 62 post(s)
tnorrell wrote:
@corporatejames

Don't forget to play around with triggers. If you design your videos correctly, you can still fire off XAML title overlays that will seem like they are part of the video.

for example, let's say your video elements show some fancy shiny stuff for 3 seconds before the boxes for your text/numbers show up.

In blend, design your XAML to fade in the text at the right spots starting at 3 seconds.

then, under triggers do an 'onTransitionIn' trigger that fires 'overlay1in' and brings up your XAML title.

the title will be 'in' for the entire 3 seconds, or the graphic rollout form the video, but the data in the title will magically show up at ~3 sec.

In fact i'm working on an example of this right now for a client. I'll not be able to share the output because of NDA, but it works, and you can build some pretty cool stuff. very ESPNish.



@tnorrell yeah already do this and quite a lot of stuff with triggers to automate my production. I have triggers timed to overlays on the scoreboard as example. But will replaced now with my new xaml scoreboard that I have build. Thanks. Yeah I'm getting a lot of ideas from ESPN, TNT, Fox and CBS Sportnet etc. I have whole broadcast document for FIBA that they used all Fiba games world wide. Has every screen and documents sizes and usage of the graphics.
Back to top
WWW
Users browsing this topic
Guest (3)
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.

Privacy Policy | Powered by YAF.NET | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.122 seconds.