Windows Movie Maker tips, tutorials, forums and more...

Visit the Windows Movie Maker forums

Community Forums
Downloads/Add-ons

Getting Started
Learn Movie Maker 2
Capture Video
Improve Video Capture
Saving Projects

Editing Video
Video Editing
Video Trimming
Video Effects
Using Transitions

Adding Sounds
Adding Music
Adding Narration
Multiple Audio Tracks
Controlling Volume

Photos
Taking Pictures
Making Slideshows
Advanced Titles
Photo Story 3

Exporting Movies
Saving Movies
CD-Rom Backup
Create a DVD

More Articles
All Articles
Movie Maker 2 Review
Movie Maker Tutorials
What are Codecs?
Streaming Video
Create a Movie CD
Using Photo Story 2

PapaJohn
MM2 Newsletter Archive

Download Windows Media Player 11

Digital Media BooksView Books about Digital Media

PapaJohn's Newsletter #147

Hack a Website Page


Much of today's computer action revolves around the internet... and the future holds more and more of it. Thinking of those I know, just about everyone has an inernet service provider, most have higher bandwidth broadband speed, some have websites, but few know how to make or maintain their own website page(s). Maybe this newsletter will help you jump in. You have everything you need... 

You could spend time reading books and doing online research, or jump right in and start hacking... starting with a website page already online and working. That's the route I prefer, 'hacking' .

In my somewhat dated Webster's dictionary the first meaning of 'hack' is to

 '... cut with repeated irregular or unskillful blows...'.  Yes, that's me and website development!!!

Today's Wikipedia says one meaning of 'hacker' is a software designer and programmer who builds programs and systems that garner the respect of one's peers. A hacker can also be a programmer who hacks or reaches a goal by employing a series of modifications to exploit or extend existing code or resources. Yes, that's me again!!!


Website pages you respect are those to hack... this post on Mark Coffman's WindowsPhotoStory.com forum had me looking at a website page used to automatically play a large size Photo Story. It was a minimalist design, sleek with mostly blackness, nothing much more than the playing story... here's the link to the page.

Revelations

With the broadband capabilities expanding and my thinking more and more about putting high quality photo stories online, the page got a moment of respect followed by a half hour of hacking, to get it up and running on my website in this new page

Photo Story 3 - Distributing

I invite everyone to now hack my page and make your own. I'll help you the best I can by providing some info about the html code... one of the languages of the internet... that makes the page and story display on everyone's browser (except Macs that can't see stories because they can't get the needed codec).

That lead me to this newsletter, to present my irregular and unskillful blows. It was quick, easy, fun, and spontaneous.

Before getting into more details, here are...

... a few notes...


Notes...

Microsoft Expression... the new encoder will be released on Monday... by the time you read this, one of these links might lead you to a download.

Expression - Intro/Overview

Expression Media Encoder

Vista Corner

The Vista Readiness Advisor wouldn't get through checking my XP laptop until I disabled the Norton protection system. With that off, the advisor told me the system won't run the aeroglass feature of Vista unless I upgrade the video card (very unlikely event).

Sticky Note... Making Movies with Vista! a six page article in the Spring 2007 Special Edition of MaximumPC, is on bookstands now to May 29, 2007. Starting on page 78... the article covers the movie making process from camcorder tape to viewing on a standard video DVD.

Microsoft Home Magazine

Cindy Waxer, a writer for the magazine interviewed me via phone on Wednesday... for an article about Movie Maker 2 in an upcoming issue.

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


Website Tools

The tools I use to maintain my website are...

  • Notepad is my editor... I try more sophisticated software at times, but keep going back to the basics and simplicity of Notepad. I'll explore Expression Web as one of my next projects... I'll use it to take screen shots of nicely displayed html code for this newsletter, but go back to Notepad afterwards.  
  • IE7 to explore online websites that let me look at and copy the html code... if I like a page and it lets me see the code, I'll check it for ideas. Many today use Firefox, which may display a website somewhat differently.
  • Elements of Web Design by Darcy DiNucci with Maria Giudice & Lynne Stiles is my favorite book about design and code. I'm using the 2nd edition of 1998. I use the tried and true basics...
  • Online info about specific website code, as needed... when my book about the basics isn't sufficient.
  • An Internet Service Provider (ISP) to put my website on... I've been using the 1&1 service for almost 2 years for my papajohn.org site. I also have some website space at Charter, my ISP.
  • Total Commander is the utility I use to upload and download files (ftp) to and from my website 1&1 server.

My Firefox browser opened the page we'll be using, but said I needed a missing plugin for the Windows Media Player. That was followed by a statement about a plug-in not being available, with an offer for me to set it up myself. That's enough for now... as I use IE7, I'll leave the rest of this story to those of you who use Firefox.

Firefox


A Website Page to Explore

View SourceAs I've already hacked the page with the embedded player, let's walk through my page so you can better understand what it reads like now, to hack it further for your use.

Start by opening the code behind the page... click anywhere on the background space or regular text of a page... not on a picture or a link. Choose 'View Source' and the code for the page will open in Notepad. Here's the link to the page to use.

Photo Story 3 - Distributing

Once open, save it to a folder on your hard drive, as you won't be able to make changes to my website page. Your page should be just as functional but without things like pictures and a story file. You'll need to add your own.


General Notes about a Page of Code

The info might look pretty unorganized and messy in Notepad.... try to ignore all the extra spaces and the overall structure... your browser ignores them as it assembles the page from the essential code, treating the extra info as just background noise..

A single space is important in many cases, like the separation between two words. But beyond the single space, more spaces don't change a thing. Put a dozen spaces between two words and your browser will use the first one and ignore the rest.

Software that specializes in making web pages does a better job than notepad in displaying the same info in a nicely formatted way. For my screen shots of the code, I'm using the new Expression Web software... which gives the code line numbers, some color coding, structure (things like indents and paragraph splits), and even tips on what needs fixing. As I don't have such tips in Notepad, I obviously ignore them, yet browsers seem to know what to do.

Let's go through the page in sections.... above the header, the header, the body, a table, the embedded player, some text, and the closing. I'll show the code, make some comments, and show the part of the page that my IE7 browser displays from the code. Different browsers on different systems may see it differently.

In html language, tags are used... they start with < > characters, and need closure with </ > characters. For starters, the tag of <html> is the first thing opened, and the last thing closed... scroll all the way to the bottom of the page to see the closing </html> tag.


Above the Header

I'm not sure who this part of the page is for. Maybe it tells the browser what kind of code to expect. My website pages don't have anything above the opening <html> tags.

DocType

This link is a reference site about the language noted. It says the version of code is known as "loose" hypertext markup language. It has info about a hundred or so tags that constitute the language. The page we're looking at uses 16 of them.

<html>

<head>

<body>

<center>

<table>

<tbody> - table body

<tr> - table row container

<td> - table data cell

<img>

<a> - anchor for a link

<div> - a defined part of a document

<object>

<param>

<font>

<p> - start new paragraph

<hr> - horizontal line

There's no need to study them unless you get stuck on something and want to get some insight into what it means. Hacking usually means making an educated guess at a change, and then seeing if the browser view of the page confirms your guess. If not, undo what you did and try something else.


the Header...

...starts with <head> and closes with </head>... a header is info for things like search engines, not anything that shows up on the page being viewed in a browser. It could say anything. My header is tied into last week's newsletter, where it was first used. 

Header


the Body...

...is where the action is... the things you can tweak as you test the page to see if you want to use it, and turn it into one of your own.

The body starts with the <body> tag.

Some or many html tags can have more things in it... optional settings such as specific colors to use. If you don't select things like that yourself the browser will use its defaults.

Body Opening

The body ends when you see the </body> tag all the way down toward the bottom of this page.

As the page is just about all black, you know by reading the code that the RGB colors of zero mean there is no color, so it's as black as it can be. As the scale of RGB colors goes from 0 to 255, change them all to 255 and it'll be a pure white page. Make each of the 3 numbers different and you'll have some kind of color.

Some tags use, as the links do, colors in hexadecimal system numbers, not RGB... they are the colors of links on the page before being viewed, during viewing, and after viewing so you can tell which ones you've used.

Here's a website to convert RGB to hexadecimal colors, or vice-versa.

Andy Langton's Color Converter

Here's where things get interactive. I have at least a couple windows open, moving back and forth between them. In Notepad, I'll tweak an item in the html code for the page, save it (Control-S keys), then press the F-5 key of the browser to refresh the view to see what happened.

If you like the change, keep it... if not, change it some more or move on to trying something else... over and over as you hack your way through the page.


a Table with 3 Images

This is the first thing you see on the page after the blackness of the body. It's called a table as it has cells of info. In this case, one row of 3 cells, each one holding an image. On many of my website pages I have a table with a single cell holding my commentary about the page, with text and pictures mixed. A cell isn't limited to a single thing like a picture.

The table is centered on the page, with the 3 boxes each getting 1/3 of the overall table's width of 800 pixels.

The page I hacked it from used the table for a couple controls, as it had hidden those under the player... back, wait a bit, and play again... I put images in the boxes and used the two controls to simply refresh the page if pressed.

If you don't understand what a different setting will do, change it and take a look

Table

My images are usually jpg or gif... gif if I want to use transparency of part of it, like for these.

By the time I finished with the table, the images used for the 3 buttons had been replaced by 3 of my own.

Tweaking Code


the Embedded Media Player

Here's the part of the code that embeds the Windows Media Player... don't change anything that you don't understand... or change anything you want if you don't mind starting over from your last backup.

My sample story is 800x600 pixels.... I started with that, but saw the code to embed the player was about the overall player dimensions, and needed room for the player controls and displays at the bottom. The site I was hacking from didn't make the controls visible, but I wanted them. 

I measured the amount needed as 68 pixels high... that's how I got to the 800 width by 668 height. The video actually expands to fill the player size, and will look distorted if you stay too far from the pixel dimensions...

You can see in the code the player is associated with some Microsoft site.

Player

The section in the center above has the settings that effect the viewing... I'm able to change, even remove the embed section at the bottom totally, without any apparent change in performance. 

I don't know what the bottom section does, but as the page is working OK, I tend to leave it alone. The better hackers who follow me can make things right.

Player


some Text and the Page Ending

This is the final part of the page as it is today. Some text under the player, followed by a horizontal dividing line.

Verdana is my standard text, an older tried and true good looking font for web pages... the 3 fonts that follow it tell the browser that... if the system doesn't have Verdana, use Arial... if not that, try Helvetica... etc. It's the priority sequence for font types the browser should be following. You can change it at any time with a new font tag.

Size 3 is what I usually use... smaller numbers make for smaller fonts... try changing the number and use the size you prefer.

For lines like this, higher numbers for the size make thicker lines... my site is full of lines that are zero to 4 in size.

Text

One of the features of Expression Web is the squiggly underlines. Put the cursor over any of them and a 'tool tip' will give you advice. For the one I'm pointing to the tip is that HTML 4.01 Transitional code doesn't permit use of the attribute 'color'.

OK, I'll try changing it to red anyway... and it now looks red. Maybe it means that page isn't really in that language. We learned at least that Expression Web reads that first line of the page.

Here's the bottom section of the page... with the text still in white but the line changed to red.

Text

At the bottom of the page, the </body> closes it... followed by </html> to end the web page code.


Conclusion and Closing... and What's Next?

Website's are easy and fun to do... if you haven't tried one yet, there's noting to lose but a little time. Your ISP already gives you some space. This page would only use a few MB, mostly for the story. If you don't have that much space, put the story on YouTube and embed the YouTube html code in place of the player code above.

Have a great week and enjoy your video work...

PapaJohn


I look forward to comments and discussion about this and other newsletters on the forums at:

Windows Movie Makers.net

Have a great week...

PapaJohn

Movie Maker and Photo Story 3 - www.papajohn.org
Photo Story 2 - www.papajohn..org/PhotoStory2/PS.html


Products and Services

I'm involved in anything and everything that supports the users of Movie Maker and Photo Story, and adding more regularly. Some are free and others reasonably priced.


Radio and Podcasting

theDVShowTheDVShow is the only weekly Podcast having more useful information about desktop video editing and production than anywhere else on the Web. Digital video editing, nonlinear editing, streaming media, software releases, tutorials, business tips, technical help, download of the day and news on the latest products to make everything easier. It's where professional and consumer desktop video users go to stay on the cutting edge. 

Call the phone mail machine to get your technical question answered on the air... call (206)-203-3516

The radio broadcast is from Boston, and the website has downloadable podcast files. The June 19th 2005 podcast was the first 'bi-weekly' show with a segment about Movie Maker 2. The frequency of radio Q&A sessions about Movie Maker has fallen off as submitted questions are minimal.  Maybe Vista will perk it up a bit.


Do Amazing ThingsBooks

Movie Maker 2 - Do Amazing Things (with its online companion on www.papajohn.org ), published by Microsoft Press...

Movie Maker 2 - Zero to Hero - with support on the publisher's forum -  Friends of Ed

Learning VirtualDub - published by Packt Publishing in April 2005, is the first book about VirtualDub software. I wrote the introductory chapter about downloading and setting up the software: VirtualDub, VDubMod and AVISynth.

Virtual Dub

A large percentage of book sales are of electronic copies. The Packt Publishing Website page  for the book provides a full table of contents and chapter summaries... and a link to a full free online copy of Chapter 3, Capture Preprocessing.


Magazines - MaximumPC

A six page article Making Movies with Vista is in the Spring 2007 Special Edition (page 78), on bookstands now until May 29, 2007. It covers the movie making process from camcorder tape to viewing it on a standard video DVD.

The 2006 Summer Special edition included a 7 page tutorial about Photo Story 3.

The November 2005 edition had a well done reworked 6 page reprint of the article about Movie Maker, starting on page 42 after the Happy 20th Birthday article for Windows.

The Winter 2005 quarterly special had a 7 page tutorial Make a Killer Home Movie with Maker 2. The special edition of the video made for it is  on my website as a file download.


Websites

Movie Maker and Photo Story - www.papajohn.org - the site's goals are: doing amazing things, providing a detailed tutorial for PhotoStory 3, and helping you solve Movie Maker problems.

It's been expanded to include the version 6 of Movie Maker in Vista, along with the new Photo Gallery and DVD Maker apps.

PhotoStory 2 - www.papajohn.org/photostory2/PS2.html - a detailed tutorial about using the earlier version. It's been a long time since I've updated anything on it, but it still gets pretty good viewer traffic.


Online Support - Forums and Newsgroups

I'm a regular or moderator on many online forums and newsgroups, the key ones being:

Forums are open to all for viewing, but require registration of those who want to post. Moderators actively participate to ensure the forum discussions move forward and stay on track.

Movie Maker and Photo Story forums at Windows Movie Makers

Newsgroups are wide open for all to view and post... moderation is collective by the participants.

Windows Vista newsgroup - microsoft.public.windows.vista.music_pictures_video

Windows XP Movie Maker newsgroup - microsoft.public.windowsxp.moviemaker

Photo Story 2 newsgroup -  microsoft.public.plus

Photo Story 3 newsgroup -  microsoft.public.windowsxp.photos


Weekly Newsletters

Movie Maker/Photo Story newsletter. The subscription is $20 for 52 issues, and a link to subscribe is on the main page of  www.papajohn.org or the Products and Services page.

Topics for upcoming newsletters (always subject to change):

#148 - May 5 (open)

#149 - May 12 (open)

#150 - May 19 (3rd anniversary issue... I count in 50's)

Newsletters issued more than 6 weeks ago are posted by Rob Morris to an Archive Site on his Windows Movie Makers' website. Links from my website pages to specific newsletters make it easier for viewers to see the content of both while browsing a topic.

Drop an email to suggest a newsletter subject...


Software

Add-On Transitions and Effects

Transition Maker 2  (TM2) is a utility for the ultimate in making your own personal and custom transitions for Movie Maker 2. It's a joint product from Patrick Leabo, the programmer, and myself.

I've beta tested some of the Pixelan packages , including the new packages for Vista, and think very highly of their people and products.

ProDAD's Adorage packages for Movie Maker 2 are additional sources of very professionally developed transitions and effects. Here are links

TransiitonsEffectsPackage for Movie Maker - Volume 1 

PapaJohn's Transitions - Volume 2

PapaJohn's Video Effects - Volume 3


Music

I use a lot of professional background music for movies and stories that was created by Randon Myles, and act as his agent in selling tunes individually. 

There are 62 tunes available from 4 of his many albums... at 99 cents per tune (MP3 or WMA format). Here's a Sample - 45 seconds from 'Groove 2'. The 4 albums are: In the Fields of the on-Feretin , Music for Film Volume III, the Emerald Way, and the Fourth Door.

I don't have a full set of online samples yet, but if you hear something you like in one of my videos, there's a good chance it was done by Randon. Send an email if you are interested.


Personal Database

With more info to manage, consider additional tools that help.

My personal database has been an ongoing project over many years, and is now available to others. A tutorial about using it is on the Managing > Personal Database page of my site, and more info is in the database package itself.

It's free for the asking to regular newsletter subscribers... send an email request and I'll return it with the zipped file, which is less than 1 MB.

To others it's $10. To order, use the button on the top of the Managing > Personal Database page.

On my list of things to do is a video tutorial about how to use it.


Online Galleries Neptune Gallery

neptune Mediashare is the preferred file download service for Movie Maker users... there's a  'PapaJohn Expert Zone' where I keep many of my samples and personal videos. 

Check it at N eptune and the Distributing > Neptune page of the website, where there's a developing tutorial about how to use the service.

Mydeo... and mydeo is the preferred video streaming service. Many of the video samples for newsletter are on it.

Normal sized photo stories stream as well as or better than movies.


Training

In conjunction with the Portage, Michigan library , I offer free training sessions about Movie Maker and Photo Story, an intro session and a workshop. Upcoming classes are 7-8:30 PM on:

May 17

The classroom has a large screen overhead projection system... and individual laptops for each attendee. You learn by doing, with some coaching.


Other fee-based services

If you can't save a movie because your project has become too complex, e-mail a copy and I'll divide it into manageable sub-projects, and provide detailed instructions about how to render the parts and assemble them into your final movie. $49.95 (no cost if it's not the right solution or doesn't work) - for details, see the sidebar on the Problem Solving > Can't Save a Movie page of www.papajohn.org

Movie Maker 2/Photo Story training and support services start at $75 per hour - send an email -  PapaJohn@CharterMi.net and I'll help you determine your needs, and work with you to plan and implement them.

Wedding combo website/video packages - check the Living Projects section of the website for samples of what you can expect for the online portion of a package.


© 2007 - PapaJohn; Microsoft is a registered trademark of Microsoft Corporation in the United States and/or other countries.

About John 'PapaJohn' Buechler from Microsoft.com
John 'PapaJohn' Buechler John "PapaJohn" Buechler, of Kalamazoo, Mich., goes by PapaJohn online. An avid user of Movie Maker since its first release, and a regular supporter of the community of Movie Maker users, John received a 2003 MVP award from Microsoft for that support. In March 2003, he started a comprehensive website about Movie Maker 2 at www.PapaJohn.org. He maintains the website, writes books and articles, teaches, and provides support services - all for the community of Movie Maker 2 users. An engineer by formal education, John is a computer database and multimedia expert by business and personal experience. He co-authored the first book about Movie Maker 2 and is actively working on a second one. You can find his advice in the Windows XP Movie Maker newsgroup and in the Windows Movie Makers Forums.

This newsletter is republished with permission of John "PapaJohn" Buechler.
Please note that this is an archive of newsletters and some information may become outdated. PapaJohn, and the webmaster of this site, provides this information "AS IS" with no warranties.

Visit - PapaJohn's Movie Maker 2 and Photo Story 2 Newsletter Index

 

 

Download more Movie Maker Effects!



Microsoft is a registered trademark of Microsoft Corporation in the United States and/or other countries.