Movie Maker 2 and Photo Story
PapaJohn's Newsletter #52 - May 7, 2005
First Anniversary Issue
 

 
Introducing Custom Titles and Credits
 
BrickWallWelcome to the first anniversary issue of the newsletter. When I started a year ago, a number of people wondered if there were enough topics to do them weekly... I usually look out just a few weeks from today, but the trend is such that there's no end to the nooks and crannies of interest to users of Movie Maker and PhotoStory.
 
Microsoft did such a great job developing Movie Maker and Photo Story that it's easy to get started, and stay with, them over many years. But beyond the features provided, they provided some hooks into the internals by publishing info to make custom video effects and transitions. By now, most users are aware of the third party add-on packages that use those hooks.
 
What makes the theme of this issue exciting is that it's not as much about what Microsoft provided, but what the community of users found, published and is developing.
 
When Rehan found titling DLLs inside the main Movie Maker executable, he explored what was thrilling for him, but wasn't sure if it was OK with Microsoft to be using resources internal to Movie Maker... a check with Microsoft resulted in a very positive thumbs-up, encouraging everyone to keep exploring. There's a synergy going on that's extremely positive.
 
Go to Rehan's website (when there, see Tips: Custom Titles and Credits) and read the detailed page about it. I read it when he first posted it, and have since read every post by Rehan, Dave (dlk), glow and others on the subject. But until now I hadn't tried one myself.
 
I started Sunday, so by the time you get this issue I'll have only a 5 day head start on those who haven't looked into doing custom titling... not much time, so it'll be easy for you to catch up.Dave's Coffee Cup
 
To help me get started, Dave (dlk), contributed a clip that illustrates what you can do with custom titling. He took a picture of his coffee cup and made the scrolling text go through the handle rather than over it.
 
As my first exercise, I took Dave's clip and tweaked it just a little... instead of the text flowing smoothly from right to left, I made it pile up in the handle, and only after it was all there, let it continue toward the left. Here's a link to the tweaked clip:
 
Dave's Coffee Cup Clip Tweaked by PapaJohn
 
This newsletter isn't targeted at the programmers and serious hackers who know much more than I do, and are already into more complex uses. It's for others with the interest, modest computer skills, and the motivation to try it.
 

 
Here's a short video to commemorate the first anniversary issue, on the neptune hosting service.
 
Newsletter First Anniversary Video
 
It's a short one that features the list of newsletter topics since issue #1, and my first custom text title overlays.
 
 
... before getting into it, a historical note...
 

 

Recent History...
 
There's a lengthy mother thread on the Windows Movie Makers forum about custom titling. It started right after the new year.
 
Instead of ending with my initial response, glow was challenged by the subject and became the catalyst to get it from Rehan's private back burner into the open, and into the eager hands of programmers and hackers who took it from there.
 
And it was Dean Rowe of Microsoft who turned the light bright green for all of us.
 

 
Transitions, Effects and Titles forum > Q: Can you use an XML file to alter in-built titles?
 
Rehan Site
The exploration of custom titles and credits is still in the early phases, led by 3 high-level geeks - Rehan, glow and dlk... I hope this newsletter will help get it out to many more. I included in the sketch of posts two first time posters coming out of the woodwork with this topic.
 
 
.... on to the main topic
 

 
Custom Text Clips
 
Rehan's web site has lots of programming-type technical info about the subject. My learning style is usually experiential, picking one of the items and playing with it. I was glad to see Rehan ended the page with two examples... embedding a logo in the lower right corner of a video, and putting a CNN style ticker tape at the very bottom of the video rather than part way up. I started there to be sure I could make them work... and they did.
 
Putting a transparent logo on a video seems to have more mass appeal than moving the ticker tape to the bottom of the screen, so I focused on it... and found it infinitely versatile and useful, powerful and easy to implement.
 
Instead of just putting a logo in the corner... I found it more interesting to tweak the xml file parameters so it would do the logo and lots of other stuff at the same time. Before doing Dave's cup, let's look at a few things to get a good idea about how this works:
  • the xml file
  • images to use with it (transparent png files)... like Rehan's partially transparent logo
  • where to put the xml file and associated images 

 
The Custom XML File
 Added Text Animations
The custom XML file is the key to adding additional text animation choices in the title wizard of Movie Maker... this image shows my first two personal ones in the pick list. They come from a single custom XML file.
 
I started with Rehan's XML file for placing a logo in the lower right of a video, and tweaked it a bit.
 
You can download mine, and use Notepad to change the parts I bolded to make it your own. It's a fairly simple but structured text file. The only change you need is to change PapaJohn to your own name... and look at the other bolded items in the XML info below, the ones that name and point to the associated images.
 
Note that the name of the file doesn't show up in the MM2 picklist... the list gets the names and descriptions from inside the XML file. Compare the picture above right to the bolded contents of the XML below to see how they correlate.
 
You don't need to any more of the details... unless you want more than two added choices. I only have two because that's how many I needed to tweak the coffee cup clip.
 

 
<TransitionsAndEffects Version="1.0">
 
<Titles>
<TitleDLL guid="{353359C1-39E1-491b-9951-464FD8AB071C}">
 
<Title name="PapaJohn Fun Text Overlay 1" iconid="13" >
 <Param name="InternalName" value="TitleStandard"/>
 <Param name="Description" value="Superimpose image 1"/>
 <Param name="LogoBitmapFilename" value="Fun1.png"/>
 <Param name="LogoRect" value="0.00 0.00 1.00 1.00"/>
 
<Paragraph> 
  <Param name="IsOneLine" value="true"/>
  <Param name="BoundingRect" value="1.00 1.00 1.00 1.00"/>
  <Param name="MaxCharacterCount" value="32"/>
 
</Paragraph>
</Title>

<Title name="PapaJohn Fun Text Overlay 2" iconid="13" >
 <Param name="InternalName" value="TitleStandard"/>
 <Param name="Description" value="Superimpose image 2"/>
 <Param name="LogoBitmapFilename" value="Fun2.png"/>
 <Param name="LogoRect" value="0.00 0.00 1.00 1.00"/>
 
<Paragraph>
  <Param name="IsOneLine" value="true"/>
  <Param name="BoundingRect" value="1.00 1.00 1.00 1.00"/>
  <Param name="MaxCharacterCount" value="32"/>
 </Paragraph>
</Title>
</TitleDLL>
</Titles>
</TransitionsAndEffects>
 

 
... if you want more than two in the pick list, copy the section of the XML file that I've highlighted in red and paste it just below it... you can see the pattern. If you want to use 8 different animations and images in the same movie project, you'll need 8 different sections of the XML file.
 

 
Images to Use - Partially Transparent PNGs
 
What images does the XML file point to? Where do you get them? Unless you can see though part of an image, you can't see the underlying video, so how do you make just part of the overlay image transparent?
 
You make them yourself using Paint and IrfanView. Start with any picture you want and make part of it transparent or invisible....
 
Rehan's website says you can make transparent png files using PhotoShop or PaintShopPro. True, but they cost a bit... we'll do them with Paint and IrfanView, two of the free tools in our toolbox. Make any image with Paint and save the partially transparent image with IrfanView.
 
The images will have .png extensions, and you'll move them into the c:\Program Files\Movie Maker\Shared\ folder alongside the news.png and paint.png files, the famous newspaper and paint drip overlay files that came with Movie Maker 2.
 
Let's take a quick look at making an image with Paint and then making it partially transparent with IrfanView.
 

 
Doodle in Paint
Open Paint and set the Image > Attributes to 640x480 pixels, our standard 4:3 aspect ratio size. Scribble something on the canvas with a paint brush, or use the paint spray can, or draw something... or a bit of each.
 
... and copy/paste some image into it, something like a logo. I'll use a small still image of Dave's coffee cup (an MM2 snapshot that was resized by IrfanView) and put it in the upper right corner.... this is in Paint.
 
Save the file in Paint to a BMP to preserve full pixel quality (use another format if you want)...
 

 
Open the saved image with IrfanView, and then save it as a PNG file.
 
When you save an image as a PNG file, you'll get a dialog window that includes an option to save it with part of it being transparent. All you need to do is check the option at the upper part of that dialog window, and then pick the color you want to be transparent in the next window presented to you.
 
Click anyplace on the white area of the picture and it'll finish the saving process to get your PNG file, with the whiteness being transparent. Doodle Over CupCompare the image above left with the overlying image on the cup clip and note that any pixel of the image that is white is now transparent... the areas of white don't have to be contiguous.
 

 
Name the new image Fun1.png to align with the first one being referenced in the custom XML file, move it to the Movie Maker\Shared folder, open Movie Maker and apply the animation over some video clip.
 
Here's what it looks like when placed over the clip of Dave's coffee cup... it's working.
 

 
Note a few things about what we just did
  • We used a 640x480 canvas size in Paint. See how it aligns with the video. You could have used any image that is that size.
  • We didn't do anything special in Paint to make the color we are going to pick for the transparency... we just picked the white canvas color.
  • We started with Rehan's code for applying a logo in the lower right corner of the video... but tweaking the code applies a full image over the whole video... in this quick check, we have the cup logo in the upper right corner, a frame of our choice (the doodling), and a pointer to a URL...  you can put anything at all in the image and locate it however you want. No need to count pixels or use a calculator to position things. Just eyeball the locations in Paint.
  • IrfanView is great to get you started down the path of using partially transparent overlays, but it doesn't support the varying shades of transparencies that higher level software such as PhotoShop or PaintShopPro support. When you go beyond what IrfanView provides, you can get one of those software packages. 

 
Installing and Using the XML File and Associated Images
 
Place the custom XML file in your c:\Program Files\Movie Maker\Shared\AddOnTFX folder (if the folder doesn't exist, create it manually). When Movie Maker starts up the next time, it'll automatically see it and include the added animation choices in the pick list.
 
If the associated images that the XML file points to are already there, you'll be all set to preview them.
 
Place the associated PNG image files in your c:\Program Files\Movie Maker\Shared\ folder... one level up from the XML file. The folder was created during installation of Movie Maker and will already have the news and paint PNG files in it. 
 

 
If you want to try it with two of my sample png files, here's a zip file with Fun1 and Fun2 png files in it. Just take them out of the zip file and put them in the Movie Maker\Shared folder. If your XML file is in place, you're all set to preview or use them. 
 
I made them from two MM2 snapshots of an airshow in Chicago, using Paint and IrfanView to color the backgrounds, pick the transparent color and save them as png files. I named them Fun1.png and Fun2.png to align with the existing XML file.
 
Here's what they look like when used as title overlays with one of pictures from last week's newsletter about the Civil War project. It shows a developing project in PhotoStory 3. The picture at the left is on the video track of Movie Maker's timeline, and the other two snapshots show what the video looks like when the two overlays are superimposed.
 
Collage
 
In addition to the airplanes and helicopter images, I included my Do Amazing Things book cover as a logo... just for the demo... I wouldn't have left that big whitish dot on the battlefield in the middle picture... that's the moon over Chicago with the 6 planes. It looks better when I used it at the end of the anniversary clip.
 
These two, combined with the coffee cup sample we'll now go into, are just a warm-up to show you the powerful feature of using custom title overlays.
 
Hint: to easily make the background color uniform when prepping it for the saving to png file transparent color selection, I changed the images to 4 colors for the 6 airplanes, and 2 colors for the helicopter (using IrfanView). That left minimal cleanup work in Paint. Then back to full color to add the book logo in Paint.
 
If you have my sample XML file and the 2 associated sample png files in the right folders, open Movie Maker, check that they're in the list of animations, and give them a try... then you're ready to make your own by replacing the png files with yours.
 
Start with a snapshot from a video clip from Movie Maker, a blank canvas in Paint, a still picture of a frame, a scanned image... whatever. Work on the image as a BMP at 640x480 pixels, moving it around whatever apps you use. The BMP format will retain full quality. When finished with it, save it as a png file with IrfanView and pick the color to use for transparency.
 

 
The Coffee Cup Clip
 
Dave's clip was a 13 second video of fairly high quality... 720x480, 616 kbps. It was a great use of title overlays... what better clip to explore the subject with? You saw it in the introductory paragraph.
 
Let's use it as the source file and have some fun with it, using the Fun1.png title overlay to stop the text from flowing out the other side of the handle, and when it has stopped flowing in, use the Fun2.png to let it start coming out the left side.
 

 
Plan the EffectCup Plan
 
Dave has the cup flowing continuously through the handle.
 
If we hide the left side of the picture with a title overlay, we won't see the text streaming under the overlay. Similarly, when we want the text to start going out the handle, we'll hide the part of the video to the right.
 
Of course we can't stop the text in the video itself, so we'll have it play the clip twice on the timeline, the first time to get the text flowing into the handle, and the second time to have it come out.
 
It's a pretty simple plan, but enough to illustrate custom title overlays.
 

 
Coffee Cup - no titleMake the two png files
 
The easiest and best way to start is with a snapshot taken by MM2 of the video clip, from either the start of it or the end, when there's no scrolling text.
 
To hide the flowing text at the left side of the cup, we'll use the whole picture as the title overlay, with the transparent area cutout to see the text flowing at the right.
 
Open this starting image in Paint, draw a rectangle to the right of the cup, use Edit > Cut to remove that part of the picture, and then use the paint bucket to fill it with red.Fun1 Image
 
Save it as a bmp file with Paint, and then open the bmp in IrfanView. We're only going into IrfanView to get the transparency option applied when saving it as Fun1.png. Paint can save a file as a png, but it doesn't provide the option to select a color as transparent.
 
Why red? Remember the doodle overlay above, when we saw that the pixels becoming transparent don't have to be contiguous. The cutout rectangle in Paint is black. If we left it that color and used black as the transparent color, then any other pixels in the image that have the same black color will also be transparent.
 
This wouldn't be an issue with this example, as the image used for the overlay is the same as the one on the video track. But it would be an issue if the underlying clip was a video file and you could see through the black space between the boards of the table, when you didn't plan to. It's a good practice to pick a color for the transparency that isn't in, or is minimally in, the part of the image you don't want to see through.
 

 
Fun2 CutoutMake the Fun2.png the same way, with a rectangular section of the left side transparent.
 
The saved png file still looks red... but it has an embedded tag in it telling Movie Maker to treat the redness as if it's invisible. If you forgot the transparency tag, or it's not working for another reason, you'll notice it when you check it in your project.
 
Copy these two new png files to your Movie Maker\Shared folder. The XML file should already be in the AddOnTFX subfolder.
 

 
Make the Movie Maker Project
 
Dave's coffee4 wmv file is on the timeline twice, trimmed to have the text flow as we want it for this sample.
 
The Fun1 overlay is used first, followed by Fun2... not much to see in this snapshot of the project. Preview the project and you'll see the overlays working as planned.
MM2 Project
 

 
Conclusions and Closing
 
With your new power to customize text and use image overlays, you also assume a new responsibility... if it doesn't work, or there are problems later, it's yours to resolve. I'll use the example of Rehan's repositioned CNN-type ticker to illustrate a couple potential 'gotchas' to avoid...
You might find yourself joining the many posters who are complaining that the well positioned text and logos on their work are not showing up, or not fully, when they see the DVD on a TV. It seems the part of the image cropped off varies by the TV, so it might be too tricky to do anything more than live within the well established 'TV-Safe zone'.
The second point isn't limited to custom text clips. It's a potential whenever using 3rd party or add-on items. Such projects need closer management if you might go back to them someday. Maybe that day is tonight, when you take your project home from work to finish... don't forget the customized special extras.
 
There's a growing library of custom developed transitions, effects and text clips. Today that library is on Pegson's website, while the focus of discussions about new and developing ones are on the forums at Windows Movie Makers. The experts on that forum have been super supportive of anyone's request for a new or tweaked one. The library at Pegson's has about 100 customized items, but only 3 of them so far are about custom titling.
 
Thank you for your support during this first year... as we go into the second one, I look forward to exploring custom titling some more.
 

 
Have a great week...
 
PapaJohn