Welcome 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.
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:
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.
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?
-
(3/7 - glow) Well this is my 100th post and in cracking the
ton I have to raise my bat to you. You've done a great job! I've been reading
your earlier posts and notice that you've been harbouring this "secret" for
almost a year and just teasing the forum. Glad you've finally spilled the
beans :-)
-
(3/11 - DeanRowe - Development Lead,
Windows Movie Maker, Microsoft) Looks like some of you have been
having fun with MovieMaker :-). As you can see we didn't really go to any
lengths to hide any of this stuff but it's totally undocumented and I don't
see us having the bandwidth to document it at this stage. So I should point
out that of course this is all unsupported and subject to change in a future
version. Having said that though if you do have questions, I will attempt to
answer them (though I offer no guarantees)... Cheers
-
(3/11 - Rehan) Dean, welcome to the forums. It feels really
great to have you with us.
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 Custom XML
File
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.
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.
Compare 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.
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 Effect
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.
Make 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.
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.
Make 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.
