PapaJohn's Movie Maker 2 and Photo Story

Newsletter #92 - Feb 25, 2006

Moving Overlay Images

Skilled users are finding many ways to apply custom xml files for new effects, transitions and titles. They are doing some great things, and there was a big leap forward a few weeks ago when they found ways to make overlay images move.

If you didn't use the links in last week's newsletter to see the sample clips of moving image overlays, here they are again as the warm-ups for this week's issue.

Sailboat - goes virtually anywhere you want it to

Office with Birds - virtual birds fly around my virtual office

Scrolling Credits - combine anything you want in the way of text and graphics, and have it scroll smoothly as part of your closing credits

Airshow Intro - 6 planes, the moon, and some clouds move one by one into place before the movement starts...

What each of these have in common is the use of video clips with one or more moving overlay images.

There are different ways to achieve most anything with Movie Maker, and I try to specialize in things that are not only visually impressive but really easy to implement.

Each of these samples was made the same way:

make overlay images... png files with most of the image transparent
copy and tweak a small xml file that points to the png files and provides the movement settings
add the moving overlay images as text overlays in Movie Maker...

Newsletter #77 was a tutorial about using Paint.NET to make overlay images with transparency. In this issue, we'll focus on the part of the xml file that defines the movement. This, as many other extras with Movie Maker, opens limitless possibilities for adding WOW type visual candy to your projects.

... before getting into it, here are a few notes...

Notes...

After last week's newsletter about background music, a reader asked about the audio files that come with Pinnacle Studio, the ones used by the software to generate background music. He noted that the files have SCS extensions, but when renamed to WAV, they work fine in Movie Maker... he assumes they are free to use. I agree and should have noted that the computer generated music of software such as Pinnacle Studio and Photo Story 3 is one source of free music.

This week's topic involves custom xml files, something the Persian Gal had been working on as part of my website... we exchanged emails this week and concluded her efforts should stay in her school work, and my efforts should include the continued development of the Persian Page on the site. It's now the XML - Persian Page but divided into 4 pages... and will expand as the sub-topics within the XML area are added.

The Vista Corner...

The 5308 build was released this week... I installed it and started my look-around. It's pre-beta software so running into bugs is normal and expected. What's most exciting is that it's the first build with all the features that will be in the final version.

That warrants another newsletter about Vista... next week we'll take a look at the features in it, at least the ones that relate to Movie Maker and Photo Story.... things like an MPEG-2 codec package downloadable from Microsoft, and the new DVD making app.

.... back to the main topic...

Moving Image Overlays

Instead of starting with the making of the overlay images, let's work backwards from a custom moving overlay title animation to see where it comes from. If you understand one, you understand them all.

Custom moving images and other overlays show up in the picklist of choices for title animations. Movie Maker gets the list of animations when it checks the contents of the AddOnTFX folder each time it starts up.

Here's the first of the 4 custom title animations used to make the 'Office with Birds' sample. Selecting it in the list results in it previewing in the monitor.

This one is a California condor moving in from off-screen at the upper left and exiting off-screen at the right, just above the middle of the window. The XML file tells Movie Maker which image to use and how to make it move.

So far, overlay images move only in a straight line at a constant speed. You set the starting and ending points by settings in the XML file. You adjust the speed by changing the clip's duration on the timeline, the same way you change the speed of a title overlay... longer clips go slower and shorter ones go faster.

The custom XML files for moving overlays are in the c:\Program Files\Movie Maker\Shared\AddOnTFX folder. If the folder doesn't exist, create it manually.

An XML file can contain one or more title animations. I made one file for each of the sample videos.

The one for the birds has a file name of 'PapaJohn-MovingOverlay.xml', and it contains 4 sections for title animations, one for each of the items in the title animation list.

Going the next step into the file, using Notepad to open it, here's the full text of the XML file for the flying birds, the file named 'PapaJohn-MovingOverlay.xml'. The name of the file doesn't have any relationship to the contents of the file... Movie Maker doesn't use the file name as it gets the animation names from inside the file.

XML files need to be structured exactly when it comes to the names and symbols, so copy and paste is the best way to not make typos. The indentations are not needed... they are there just to help you read it and make it easier to see the sections.

This XML file has 4 sections, one for each of the moving overlays. The sections differ only in what is marked in bold below...

Notepad is the tool of choice when making or editing XML files... you don't want any special formatting codes that apps like Word or WordPad put in.

</TitleDLL>
</Titles>
</TransitionsAndEffects>

Going another step down, this time into the first section of the XML file to see how the settings relate to the moving bird. Here's a copy of the 5 lines with some bold text, the things that make them differ from one section to the other... let's go over them one at a time.

The PapaJohn - Moving overlay 1 is the name that shows up in the list of animations in Movie Maker, this one being in the left column... you can see it in the animation list in Movie Maker above.
Overlay moves across screen shows up in the second column of the list... I left this name the same for the 4 bird images as overlays 1 thru 4 were enough to know which was which.
MovingOverlay1.png is the name of the image file...

If you don't tell it differently, Movie Maker assumes the custom images pointed to are in the c:\Program Files\Movie Maker\Shared folder... that's where I put mine.

The MovingOverlay1.png image is 68x132 pixels (here it is full size... the black area around the condor is marked in the PNG file as being transparent.

This moving overlay image works best if the blackness around the bird is marked as transparent... which is what you need something like Paint.NET or Photoshop to do. IrfanView can do it too but Paint.NET does it better. See newsletter #77 for the details of using Paint.NET.

Now for the trickiest part of the process, figuring out what numbers to put into the XML file to define the starting and ending points for the overlay image. It's the location of the lower right corner of the overlay image that counts.

This positioning guide shows numbers between zero and 1 are on the screen... negative numbers are off-screen to the top or the left. And numbers greater than 1 are off-screen to the right or bottom. The middle of the window is the 0.5, 0.5 position.

X-Axis (horizontal)... The first of the two numbers for the entrance position of the first bird defines where the lower right corner of the overlay image will be at the beginning.

I used a negative number of -0.2 for the starting point, making it start somewhat off-screen to the left.

Y-Axis (vertical)... The second of the two numbers is where the lower right corner starts relative to the top of the video track. The entrance position of 0.2 set the location 2/10ths of the way down from the top of the screen.

Check the sample and the picture here to see how the condor flying across the video relates to these entrance and exit positions. I have to confess that at this point in making the sample, I wasn't sure if or how the size of the overlay image effected the selection of the numbers, so I was kind of winging it.

The positions of the overlays in the clips with the birds and the sailboat only need to be close, not exact. Tweak the numbers until the movement is what you want.

The scrolling credits and the sample of the airplanes need to be exact.

Tip: when changing your settings in the XML file you need to go through the full cycle of then opening Movie Maker so it reads the new settings, and re-applying the animation to the project, so the project file picks up the new settings from Movie Maker.

What size overlay images?

All 4 sample videos were made with the intention of rendering them to movies of 640x480 pixels.

The sizes of the sailboat and condor images were not important... sized to look appropriate in the project previews. I did all cropping and resizing with IrfanView.

The condors were different size images, crops slightly larger than the birds themselves... the 3rd and 4th ones were two copies of the same image. The images are 68x132, 85x159, and 169x78 pixels.

The 3rd sample, the scrolling text, was the first one where the size of the overlay was important to leave just a little border at the left and right... not knowing how the image sizes varied with the movie size, I did it purely by trial and error... and ended up not knowing much more than I started with, but I was happy the effect worked pretty good.

For the airshow opening clip, I needed to better understand the relationship between the sizes of the overlay images and the rendered movie.

For the 6 planes, the moon, and the clouds to fit together into a composite image, each of the 8 overlays had to both end up in the same position and fill the working window.

I played with the first one until I understood that, for the XML code used, the overlay images needed to be 320x240 pixels when rendered to a 640x480 pixel movie.... I'd prefer using overlay images of 640x480 to avoid re-sampling upwards in size, but that's for when I figure it out another day.

The strip at the left shows each of the overlays in the sequence used (here you're seeing negatives of the overlays to be easier to see the little items in the whiteness).

The whiteness shown here is the transparent area in the overlay PNG files... so all you see are the little planes, moon and clouds moving into position.

Here are just the lines of the code that define the entrance and exit positions (each item entered off-screen and ended up at the same position, squarely positioned over the movie window):

1 - entered at -1.5 -1.5 and exited at 0.5 0.5

2 - entered at 0.5 -1.5 and exited at 0.5 0.5

3 - entered at 1.5 -1.5 and exited at 0.5 0.5

4 - entered at -1.5 0.5 and exited at 0.5 0.5

5 - entered at 1.5 0.5 and exited at 0.5 0.5

6 - entered at -1.5 1.5 and exited at 0.5 0.5

7 - entered at 0.5 1.5 and exited at 0.5 0.5

8 - entered at 1.5 1.5 and exited at 0.5 0.5

From the positioning grid above you know that only numbers between zero and one are on screen... numbers less than zero or greater than one are off-screen. Each of the eight overlays start off screen... and end up at the same 0.5 0.5 position, the middle of the working window.

Conclusions and Closing

Custom XML files are so much fun they can be addictive... I want into the making of one with movement for my website and had to force myself to stop after making these four. There were more in my mind but it was time to go on to something else.

First came transparent overlays, and now moving ones... someday there will be movement along curves, then changing sizes as it moves, then ??? That's what XML is all about, no end to the extensibility of its uses.

Jump in to any depth you want. But be aware the whole library of Movie Maker XML commands is changing with Vista... none of the custom effects, transitions and overlays tested in Vista so far still work, and the new library of info hasn't been released for easy translation.

Have a great week...

PapaJohn