Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The VideoBrush is one of my favorite brushes. Let me show you how easy it is to create and paint with this fun tool. In this demonstration, I'll start in Expression Blend in a project called CreatingEffectsWithOtherBrushes. I'm going to start by modifying this LiveDemo.xaml file. In order to create a video brush I need a MediaElement. Expression Blend makes it super easy to add MediaElement. Find the media file in your project and drag it over to your designer surface. That's all I need to do. This media element becomes the source for my video brush.
I'm going to make it small and put it down here in the corner. Next, I'm going to generate my brush. To do that, I go to Tools>Make Brush Resource>Make VideoBrush. I need to give it an identifying key, I will call mine travelBrush and I pick a scope for this brush. I'm going to keep it in the current document. What that means that this brush is only available in this UserControl. Next, I will create some UI. I'm going to draw an Ellipse and then I'm going to paint this ellipse with that VideoBrush.
VideoBrush lives over here in the Brush Resource section. Let me click here and then pick my travelBrush. And just that easily I have added a video painting to this ellipse. Let's see what it looks like. Press F5 to run the application.
[Music] That was easy. Now you can paint other brushes. I've got an example here in UsingVideoBrush. Let me maximize my window and then move it up so it's easier to see. Here I have a star shape, it's being painted with a video brush. I also have two arrows that are being painted with the same brush. I have also set the Opacity level on the star shape. There are also a Start and Stop buttons so that I can control the Start and Stop of the video. Press F5.
[Music] [Music] place, to create special effects. Before I continue, let me go back to LiveDemo and set Autoplay defaults on this video. Video brushes work on text, too. I'm going to create two text blocks with the same text, Explore California.
My plan this to make a reflection of the first text block with the second text block. First thing I need to do is paint with the VideoBrush. Click here, go to my Brush Resources and choose this reflectionBrush. Nice. Do it again, and then I will use a couple of tricks inside Expression Blend and make a reflection. I will start by scrolling down to this Transform section and then clicking here on the Flip tab. And I can click on this button Flip Y axis, then I will move the text up.
Click on Translate and use the Y axis. I'll apply a Transform, call this Skew Transform and then you need to slide it to the right slightly, go back over here to Translate and slide it over. Let's see what this looks like. [Music] I like that.
This next example is called Mosaic. The way I created this example is I wrote a few lines of code. To see that code I am going to switch to Visual Studio. And then I'm going to open the MosaicPage and show you that, on the main UI, I built my UI out of a WrapPanel. I'm going to load some rectangles into this WrapPanel. And I do that in my code behind. Here I have a loop. I loop through these items 200 times, I create a rectangle.
I create a transformation. Once I am done with the transformation, I assign it to the RenderTransform property of the rectangle. Then this line of code is where I get the video brush. One of my resources on this page has a name. I'm assigning that name resource to this Fill property and then I take the rectangle and I added to my wrapPanel. This Rotation transformation does a 90 degree transform for each item as I added to the WrapPanel. This gives me a very interesting effect.
[Music] For my last demonstration I want to show you Pixel Shaders and the Media Element. To do that I'm going to open this page, ShadersPage. I have applied a pixel shader to this media element. This pixel shader is called the MagnifyEffect. You get these effects by going to the Assets pane in Expression Blend and then scrolling down to the Effects section and then picking from this list. You just drag these on to your Artboard. I chose the MagnifyEffect, added it to my mediaElement and then I can come over here and modify properties of that effect.
I like that, let's see what this looks like, press F5. Here we go. [Music] Very effective! It has a high frame rate, its very performant. You have seen a lot of brushes in this chapter. Have fun decorating your next user control with one of them.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 103232 Viewers
61 Video lessons · 89966 Viewers
71 Video lessons · 73543 Viewers
56 Video lessons · 105085 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.