How to import DVD Video into iMovie ‘08

First, why I needed to know this.

I have clients from time to time who have self produced videos on a DVD they would like to add to their websites, either progressively streaming off of their hosting server or through one of the myriad of video sharing sites (ala YouTube, Blip.TV, Vimeo etc.)

In the past, when we were a PC only web shop it frankly was easy.  Rip the VOB file you need as an AVI (with something as simple as Pinnacle), convert to FLV and that was it basically.

However on the MAC (Specifically MacBook Pro with Mac OS X 10.5.6) I found it a bit more of a challenge without investing in more apps for a purpose that doesn’t come up all that often.  Let’s face it, I’m cheap.  It shouldn’t be that hard.

Let me be clear, I’m not talking about commercial, copyrighted material. These are in-house production quality videos that my client,  XYZ company, shot of someone using their auger system, of making a cappuccino, or whatever.

That said, I found this solution in bits and pieces on a various forums  and was able to create my own work-flow that I will now share.

The Problem

Basically with DVD video you have files called VOB (video object files).  You may have several VOB files on the same disc if you have chapters of several smaller videos on the same disc.  OK, that said,  the problem is getting iMovie, let’s say, to recognize a VOB.  It won’t.  Hence you cannot import it. The image to the right show these files.  Notice the dark color of the files.  When you look at them in iMovie they will be grayed out, meaning they are not a valid file type for iMovie as such.

The Solution

The key then is simply getting the VOB file in a format iMovie will import.  It’s actually very simple.  You just need to make a disk image (.dmg).  Here’s how.

1. Insert your DVD
2. Open the Disk Utility (Applications/Utilities/Disk Utility)
3. Your DVD should show up in the upper left hand corner under yo other drives (HDD, any external, etc.)
4. Highlight it and choose New Image from the toolbar.
5. I used the default settings in the drop down and save it to the desktop (or wherever you choose)
6. Click SAVE.

Let Disk Utility chew on that a few minutes and presto-chango you have a disk image (.dmg) of your DVD.

Now, with iMovie open, you have to “mount” the disk image by double-clicking on the .dmg file (the disk image file) you created.

Next  iMovie’s IMPORT window will pop-up and you will notice that the disk image is recognized as ….a camera!  How about that.

Now choose IMPORT ALL and get to editing once it is in iMovie.  That’s it!

Assuming you know how to export, you’ll end up with a .M4V file that can be uploaded and let  YouTube, Vimeo, et al, do the rest.

One note: Occasionally  you may get errors when importing and from my experience this is most often because the disk I am working from is a bad/damaged copy.

Hope this is helpful in getting you going the right direction.

______________________________

DISCLAIMER: Note that this is relating my own experience using iMovie 08 and this process.  This may or may not work with other versions of iMovie.  Be sure and check the comments as several others have tried other solutions with other versions of iMovie and found work-arounds.  The idea for this was a collaborative place to share ideas.

Wordpress MU and You

This will be an on-going post about my adventures into Wordpress Multi User.

First what is it?

Wordpress MU is basically just a Wordpress install with one unique feature: you can host 1000’s of blogs within your site.  It is a different package though with it’s own set of rules and procedures.

Uses?

One example I found that makes it easiest to understand was a Home school group. There was an admin account which one fearless individual agreed to manage (and there is a lot to manage). Then after the site is set up and the template set for the additional users, each home-school family could set up their own site to posts about their unique situations.

Why would would you do this?

Using the home school group, the benefits include:

• Spreading the costs out to each family or user or even offering to provide a free website.
• Each user who sets up a blog doesn’t need to get a domain as each site is defined simply as a sub-domain or categorically (e.g. smithfamily.my_site.com or www.my_site.com/smithfamily)
• You can now also build a social networking feature into your site using a great plugin called Buddy Press and with Facebook Connect/Twitter Connect features you can quickly build your own niche network.

But it’s not for the newbie or faint of heart (i.e. have some cash and a lot of free time ready)

Even though Wordpress and the MU code are free here are things t consider:

• You cannot use cheap shared hosting.  Forget it.
• You will need at the least a VPS (Virtual Private Server) and possibly Dedicated server.
  • This solution suddenly takes you from the relatively undemanding role of web designer/blogger to server admin. In other words you are now drinking from the proverbial fire hose.  Think about it.All those neat features you have on your current shared server may still be available, but you will have to configure them. Again…think about it.
  • But there is some consolation: This can be managed or not managed.Managed solutions will give you a human being on the other end to help you and watch over the server to some degree.  Un-managed is for the true geek or person with unique skills in setting up a server environment.
• Costs:
  • A managed VPS costs vary widely: from $29.00  to $499 per month last I checked.  The point is it can get real expensive real fast.
  • You also need to think about bandwidth.  Even though most can and do provide copious amounts of bandwidth (e.g. 100gb -750gb/mo) a DNS attack could turn a sunny day with pink unicorns into a rainy day with wart nosed trolls real fast.
  • Your time costs.  Do you feel like a slave to your computer now?  Try managing 500 other people’s blogs, and support issues (“I typed in my password a hundred times and it still doesn’t work” or “How do I insert pictures into my blog” or “Can I install this or that plugin on my site”)  You get the idea.Also you may have dealt with spam on your traditional WP blog.  With Wordpress MU you now enter to new world of Sploggers or Spam Bloggers.  I have heard of sites having Spam Blog Bots setting up hundreds of blogs on their MU installs in one HOUR!

All this to say, I have weighed the issues and am going ahead for a new project I have been eyeing for quite a while.

For more information I recommend Andrea and Ron Rennicks site Wordpress MU Tutorials.

Good luck and if you do decide to go this route let me know….misery loves company:-)

Transparency to CSS Drop-Down Menus

This is really a very simple thing.  Ready?

(NOTE: Before you start tweaking your CSS file, make a copy you can revert to or look at in case something goes awry.  You should know that and probably do, but just over communicating that concept)

Let’s make sure we are on the same page.  Visit this site by clicking the image (right) and scroll over the blue nav bar (actually referred to in the CSS stylesheet as “subnav”).  What you will see is that the nav background in the drop-down menu is semi-transparent.  In other words you can see some of the page behind the nav menu as if the nav drop down was a colored gel sheet. First a medium blue then a dark gray on the roll-over.  This website also uses the same idea.

The CSS out of the box (common WordPress menu style with drop down) was a solid color and the code for the drop down menu looked like this (key is the “li ” called the selector):

For the subnav bar drop down:

#subnav li a:hover, #subnav li a:active {
background: #000066;
color: #FFFFFF;
display: block;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 6px 13px 6px 13px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #000066;
width: 150px;
float: none;
margin: 0px;
padding: 6px 10px 6px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#subnav li li a:hover, #subnav li li a:active {
background: #006699;
margin: 0px;
padding: 6px 10px 6px 10px;
}

Note the property, “background”.  The two colors shown are a darker and lighter hue of blue.  But I wanted them to be semi-transparent just for the effect.  Kinda trendy these days.

By looking at the code just previous to this I discovered that the height of the subnav was coded to be 24 pixels.  Simple.  See below:

#subnavbar {
background: #003366;
width: 960px;
height: 24px;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}

OK, so the detective work is done.  Now to make this semi-transparent.

So, next step is to create a transparent .PNG file in Fireworks, Photoshop, Illustrator, whatever you’re comfortable with. Make it, of course, 24 x 150 pixels?  No.  Well, yeah you could, but why?  Just make it the correct height (24px) and wide enough you can see it.  I made mine 10px wide.

For now,  just make your simple 10px X 24px rectangle.  I made mine blue (#006699) and changed the transparency to 80%. Save it with a unique name you can remember.  Then make a second one that is a darker (or lighter depending on your font colors).  I made the second one black (#000000) with 80% transparency so it actually looks kind of gray.  Again save.

Now go back to the same code as above and change it like so:

#subnav li a:hover, #subnav li a:active {
background-image:url(images/sunav_bkd_trans_rec.png);
color: #FFFFFF;
display: block;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 6pEditx 13px 6px 13px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background-image:url(images/sunav_bkd_trans_rec.png);
width: 150px;
float: none;
margin: 0px;
padding: 6px 10px 6px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#subnav li li a:hover, #subnav li li a:active {
background-image:url(images/sunav_bkd_trans_gray.png);
margin: 0px;
padding: 6px 10px 6px 10px;
}

(NOTE: Depending on the menu style you may need to simply call the image via “background: url(images/yourimage.png);” On this website I had to use that.  So try that if “background-image :” doesn’t work)

You’re done!

Now upload the new CSS and two new .PNG image files and check out your fancy transparent menu in CSS.

Now that wasn’t hard, was it?

Of course your CSS file may be slightly different but not much.  That is the great thing about CSS: it is a standard and most items like drop downs are fairly consistent site to site.  Just gotta know what to look for and be willing to try this then try that.  Eventually it will be second nature.

Enjoy!

_____________________

(PS: Checked it in IE7, FF & Safari)