Recently in How To Category

Mac users:  Do you have the latest versions of iTunes (9.2), iBooks, and the operating systems for your iPhone and iPod Touch (iOS 4) and your iPad (iOS 3)?  If you do, you can do this...

You can easily place a PDF file of anything you can make a PDF file from (web page, documents, images, etc.) on you portable device.

If you make an alias of the iTunes application icon and place it in your ~/Library/PDF Services folder (where ~ = your user account), you can choose to print any document or webpage as a PDF directly to your portable device the next time you sync.

[Simply select the print command and click on the PDF button on the bottom left and then choose iTunes from the drop down list.  When you go to sync your portable device, be certain that, in iTunes, with your device selected, the "Books" tab is selected and you have checked "Sync Books."  Then simply sync your device.  Poof!  The PDF file(s) appear in iBooks on your device.]

I've tried this, and it actually works!  Nifty.

Other little scripts are available to do similar things with various twists.  Check out this link at Doug's AppleScripts for iTunes.

This is as much to help me remember this as it is to share the info with all humanoids on in interwebs...

This is the post production process I used when creating the Malaga Cove time lapse shorts.  After importing the footage from the camera into the computer:

1. QuickTime Pro 7 ›› File ›› Open Image Sequence...
2. Make sure images are in their chronological shot order
3. Select the first image and click "Open"
4. Select 24 frames per second and click "OK"
5. After the huge file is created, make sure you are displaying it at 100%
6. File ›› Export ›› Export: Movie to QuickTime movie [bottom left drop down]
7. Select "Options..."
   1. In the Movie Setting Dialogue, ›› Settings...
      1. Compression Type: Apple ProRes 422 (LT)
      2. Frame Rate: 24 fps
      3. OK
   2. Back in the Movie Setting Dialogue, ›› Size...
      1. Dimensions: Current [Make certain it is the full frame size of the original photos if you wish to pan and crop in Final Cut Pro.]
      2. OK
   3. Select "OK"
   4. Name the file and save it.
8. Create a sequence in Final Cut Pro with these settings:
   1. Frame Size: 1440 x 1080 [HD (1440 x 1080) (16:9)
   2. Pixel Aspect Ration: HD (1440 x 1080)
   3. Editing Timebase: 24 fps
9. Import your media and design your project — the fun part!
10. Once the project is completed in Final Cut Pro ›› Export ›› Using QuickTime Conversion...
    1. Format: MPEG-4
    2. Options
       1. Video Format: H.264
       2. Data Rate: I usually use over 4,000kbits/sec [The higher the number the larger the file size but the better the visual quality.]
       3. Image Size: I usually export three different sizes (three different exports): 1920 x 1080 HD, 1280 x 720 HD, and 640 x 360
       4. Frame Rate: 24fps

Related articles:

• Malaga Cove Sunrise (Time Lapse) (timtyson.us)
• Malaga Cover Time Lapse (Noon) (timtyson.us)

This time lapse, from yesterday, is better than my first because I used manual focus! :)

It's also more interesting because you can see the stars moving through the sky as well as the fog come rolling in off of the ocean during the night. You can even see the moving fog outside during the day! (Look closely. You can see it.) Because this is a time lapse, the fog appears to be moving very rapidly. The truth is, it was going down the street faster than you could comfortably walk!

The downside of the fog: during the day this caused variance in the brightness of the individual shots in the time lapse. I experimented with removing that with a filter that averaged exposure values over time. It worked amazingly well but dulled the fog's motion outside the window. So, I decided to leave it as shot.

You can view full screen by clicking on the full screen icon in the timeline. (It only appears, in the bottom right, when you mouse over the movie.)

Notes to myself on workflow:

• To resize the finished video file, export from FCP with QuickTime conversion out of FCP at the desired size using H.264
• THEN export that file out of MPEG Streamclip at 100% as an mp4 file for the web.
• Otherwise MPEG Streamclip takes insanely f-o-r-e-v-e-r!

This will only be remarkable to me: a proof of concept—use the Canon EOS 5dMkII DSLR to create a filmic look.

I shot this using a 70 - 200mm f2.8L in native 24fps, ISO 100, f2.8, 1/50th, using the Vari-ND to stop the exposure down, shooting at full 1920x1080 HD resolution using the superflat profile. The short little clip was then imported onto my hard drive via ShotPut Pro from my FireWire 800 card reader. I used MPEG Streamclip to transcode the H.264 file using Apple's ProRes 422LT codec and then dropped it into FCP. (I know firsthand that FCP doesn't play well with H.264 files!)

(Unfortunately I had not yet downloaded Canon's free EOS Movie E1 import plugin for FCP which was released today. I'm eager to try it. Interesting post here about that workflow.)

I then did a little color grading in FCP, added titles and a short music clip, and simply exported the file using ProRes 422LT at full size. Then, using MPEG Streamclip to prepare it for the web, I exported the 1920x1080 (137.4MB) file to 720x405 while converting it to an mp4, using the H.264 codec, at 100% quality, with multipass and better downscaling. The exported file is only 5.4MB! Maybe one day I'll compare which delivers a faster QuickTime conversion export: FCP or MPEG Streamclip. (Everyone says it's the latter.)

I'm posting the finished product here. It's very short! The only thing special: it's a first for me, and it worked straight away!

Philip Bloom showed a different cut of this short, Above Skywalker, in the Bonner Theater a couple of weeks ago. It looks magnificent on the large HD screen. I especially like the slider shot during the night time lapse about 30 seconds in (and at 4.20). The macro shots are nice too. Well... The whole thing is. Though I wish the slider shot on the floor of the porch hadn't hit the cutting room floor.

What he didn't tell us was that he shot this in 24p with the new 5dMkII Canon firmware upgrade,released today. The aspect ratio also makes this look really cinematic. I wonder if he used the same plugin he use in his post on How to export and upload 2:35 video to Vimeo.

Be sure to watch this full screen.

Ok, this post will bore my mother. She will skip it.

You may find reading this post easier over at my developing WordPress blog as it uses color-coded and indented syntax structure that highlights the area of code under consideration and allows you to easily copy and paste the code from the page.

But I need to write this so I can remember what I've done when I transition my work blog over to WordPress. This post is about getting my favorite lightbox utility to work in WordPress and customizing it's appearance.

The lightbox is, of course, mediaboxAdv by John Einselen over at iaaian7. mediaboxAdv opens a significant number of file formats, including video and HTML "windows", in a lightbox popup on top of the dimmed web page window.

The successful implementation of mediaboxAdv via the Mootools framework in WordPress is provided by Cheon Nii, at CheonNii's blog. Cheon adapted the mediaboxAdv javascript into the Lightbox M plugin. (Fortunately Cheon uses enough English to make his download understandable for me. I couldn't figure out his native language to translate it.) WordPress has huge issues running Mootools as other plugins frequently seem to use javascript frameworks that conflict with Mootools. Cheon's plugin seems to get around this successfully and can be configured to only implement the javascript code on the pages that require it.

The totally cool customization solution comes from Enric, at Sonic Bite Desarrollo y Diseño Web. I used Google translate to translate it to English. He describes how to include a logo-styled image overlay in a corner on top of the lightbox popup. Great for branding. Nice touch.

The Process

1. Download and install the Lightbox M plugin.
2. Using your FTP client, open the mediaboxAdv-1.2.0.js file (in wp-content --> plugins --> lightbox-m --> js folder)
3. At line 32 in mediaboxAdv-1.2.0.js, add line 1 of the code below (lines 2 - 10 should already be in mediaboxAdv-1.2.0.js. Roroland will become a div for the logo element.
   
   new Element("div", {id: "roroland"}).injectInside(center);
image = new Element("div", {id: "mbImage"}).injectInside(center);
bottom = new Element("div", {id: "mbBottom"}).injectInside(center).adopt(
new Element("a", {id: "mbCloseLink", href: "#"}).addEvent("click", close),
nextLink = new Element("a", {id: "mbNextLink", href: "#"}).addEvent("click", next),
prevLink = new Element("a", {id: "mbPrevLink", href: "#"}).addEvent("click", previous),
title = new Element("div", {id: "mbTitle"}),
number = new Element("div", {id: "mbNumber"}),
caption = new Element("div", {id: "mbCaption"})
);
    
   
4. Open the mediaboxAdvBlack.css file (or the mediaboxAdvWhite.css file if that's the one you are using in the Lightbox M settings panel) and add the custom div below. I just added mine to the bottom of the css file.
   
   /* custom div containing logo */
#roroland {
position: absolute;
z-index: 9999;
width:100px;
height: 113px ;
top:-30px;
left:-40px;
background-image: url(../images/logo.png);
background-repeat:no-repeat;
}
    
   
5. Find the block of code below, in the same css file in step 4, and change it to the block of code in the lower code window. This comments out the css that would otherwise hide any portion of your logo image that extends beyond the boundaries of the lightbox popup.
   
   #mbCenter {
position: absolute;
z-index: 9999;
left: 50%;
overflow: hidden;
background-color: #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 10px 40px rgba(0,0,0,0.70);
-webkit-box-shadow: 0px 10px 40px rgba(0,0,0,0.70);
} 

#mbCenter {
position: absolute;
z-index: 9999;
left: 50%;
/* overflow: hidden; THIS IS COMMENTED OUT TO DISPLAY THE LOGO WHICH PARTIALLY APPEARS OUTSIDE THE MEDIABAXADVACED LIGHTBOX */
background-color: #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 10px 40px rgba(0,0,0,0.70);
-webkit-box-shadow: 0px 10px 40px rgba(0,0,0,0.70);
} 
    
   
6. In an application like Photoshop, create your logo image using a transparent background.
7. Save it as a png-24 file, preserving the transparency, with the name "logo.png" --without the quotation marks, of course.
8. Using your FTP client, upload the logo.png file to the wp-content --> plugins --> lightbox-m --> images folder.
9. Go to wp-content --> plugins -->lightbox-m and edit the lightbox.php file by adding a single line of code to the $lightbox_files = Array statement at line 26. We need to include the logo image in the array. If you used a different name for your logo image, change the name here accordingly. So, this block of code (notice you have to scroll down to see it all):
   
   $lightbox_files = Array(
'css/mediaboxAdvBlack.css',
'css/mediaboxAdvWhite.css',
'images/50.gif',
'images/80.png',
'images/BlackClose.gif',
'images/BlackLoading.gif',
'images/BlackNext.gif',
'images/BlackPrevious.gif',
'images/MinimalClose.png',
'images/MinimalLoading.gif',
'images/MinimalNext.png',
'images/MinimalPrevious.png',
'images/WhiteClose.gif',
'images/WhiteLoading.gif',
'images/WhiteNext.gif',
'images/WhitePrevious.gif',
'js/mediaboxAdv-1.2.0.js',
'js/mootools-1.2.4-core-yc.js',
'swf/NonverBlaster.swf',
'swf/player.swf',
'lightbox.php'
); 
   
   should become this block of code (notice you have to scroll down to see it all):
   
   $lightbox_files = Array(
'css/mediaboxAdvBlack.css',
'css/mediaboxAdvWhite.css',
'images/50.gif',
'images/80.png',
'images/BlackClose.gif',
'images/BlackLoading.gif',
'images/BlackNext.gif',
'images/BlackPrevious.gif',
'images/MinimalClose.png',
'images/MinimalLoading.gif',
'images/MinimalNext.png',
'images/MinimalPrevious.png',
'images/WhiteClose.gif',
'images/WhiteLoading.gif',
'images/WhiteNext.gif',
'images/WhitePrevious.gif',
'images/logo.png',
'js/mediaboxAdv-1.2.0.js',
'js/mootools-1.2.4-core-yc.js',
'swf/NonverBlaster.swf',
'swf/player.swf',
'lightbox.php'
); 
   
   
10. If you use a different name for your logo file, you must update the name in the background-image statement of the roroland div added in step 4.

Now, quite frankly, I don't like my logo image at all at the moment. I'll tweak that later. Just figuring all of this out to get it to work was challenging enough for one day.

Configuring WordPress for Implementation

• After doing the above 10 steps, make sure your Lightbox M plugin is activated.
• At the present time, I export a photo out of Lightroom at 1024 pixels wide, which, based on my visitors' stats, will fill most of my viewers monitors. [This means they will not see all of my logo image unless I adjust the css. Oh well... The world needs more giant monitors!]
• I went to the Media Settings in my WordPress Admin console (You get there from the left column of the Dashboard.) to configure the media settings.
• Since the main body section of my blog is 680 pixels wide, I use a maximum image size of 620. 620 plus a 10 pixel margin on each side plus the 20 pixel margin of the main text area (each side) equals the 680 pixel width of the body area. [Note to self: the 620 image size does not work well when embedded in an indented bulleted list (see below) as it doesn't accommodate the additional indentation.] I have the following media settings (Click to see full size image):
   
  
  
   
  
• I have the following Lightbox M settings (Click to see full size image):
   
  
  
  
  
• And these are the settings I use in the Upload/Insert dialog that appears when I place an image on the server and into a post.
   
  
  
  
  
• The only part of the implementation that is awkward, when placing a picture in a post, is having to copy the title="Top_Line_Title::Bottom_Line_Title" information from the HTML image source code into the hyperlink code as well to have the title also appear in the bottom left corner of the lightbox popup. You don't have to do this, but I really like it.
• I also write my titles in the format shown in the above step and here: title="Top_Line_Title::Bottom_Line_Title." to use both top and bottom lines of the title area in the popup window. The double colons do not appear in the popup lightbox but rather separate the title into two lines at that point.

Again, unless you are into such things, you will not have made it to the end of this post. But it has taken me weeks to sort through all of the weird variables and plugins that are out there for WordPress in my undying effort to figure out how to get the mediaboxAdv plugin to work—a must for my transition from MovableType to WordPress.

Now that I better understand WordPress and the whole media toolset it offers, along with so many other features, I am really getting into WordPress!! And a special thanks to John Einselen, Cheon Nii, and Enric for freely and kindly sharing their expertise with the web community. I could never have done any of this without their brains! You guys are Awesome! Awesome! Awesome!

If you watched the City of Lakes trailer, you probably missed the extensive use of slider and dolly shots. They add so much subtle visual interest while increasing perspective, presence and focus! Here is a do-it-yourself from Friedhelm Fischer to build a camslider for about $100. The full post can be found at Friedhelm Fischer's blog.

• 1 MANFROTTO 501PL camera plate - Price: approx. 22 $ - buy best click here
• 1 IGUS DryLin® W shuttle plate - WK-16-60-10-1 100mm / 3.94 inch - Price: approx. 65 $ - Order now click here
• 1 IGUS DryLin® W rail - WS-16-60 1000mm / 39.37 inch - Price: approx. 85 $ - Order now click here
• 1 M5 bold with a shim and a 8mm / 0.31 inch nut - Price: approx. 1-2 $ - DIY market next to you

• 1 MANFROTTO 701HDV PRO FLUID VIDEO MINI HEAD - Price: approx.125 $ - buy best click here
• 1 MANFROTTO 501HDV HEAD - Price: approx. 185 $ - buy best click here
• 1 MANFROTTO 055XPROB Pro Tripod Legs - Price: approx. 180 $ - buy best click here

Neil Smith, at hdiRAWworks, arranged for Philip Bloom to conduct a Canon HD-DSLR masterclass yesterday here in LA. This was the first time I've ever attended such a thing, and I rather enjoyed it and learned a lot too. The little tidbits you pick up are also interesting: like why the Canon 5Dmkii will only shoot video for 12 minutes. I always thought it was just a storage capacity issue. No. (We live in such a weird world.)

Philip showed several of his shorts, which, of course, are amazing. I've embedded a few of them here at tt.us from time to time. While they look great on the computer screen, they were stunning on the big screen with the HD projector.

He spoke of many things related to his craft, but I suppose I learned the most from his talk about setup, actually using the DSLR for video. I've never bothered with custom camera settings before but have already imported the superflat settings he recommended and am eager to try the workflow: shooting with the increased dynamic range, though visually initially less "interesting," and then grading the footage in post. It makes sense as I do the equivalent process with still photography all the time. We just can't get raw data out of the 5D. Philip says: "Yet..." (See Luka Crnkovic-Dodig's post: How to increase the Canon 7D/5D dynamic range, which includes this link to the superflat settings file, among others.)

In my own casual exploration through this space, I've ended up with a lot of the same software and equipment, and now have a better understanding of implementation and process for video and timelapse using my 5Dmkii. It's now time to play, play, play!  I'm also eager to explore timelapse.

Aside from being brilliant at what he does, Philip is very personable and has a great sense of humor. He also comes across as completely genuine and open about what he recommends and why. If you ever have the opportunity to attend one of his masterclasses, jump at it! I'm glad I stepped outside of my comfort zone.

Related articles:

• Canon Rebel T2i DSLR: 18MP and Legit 1080p Video for $899 [Digital Cameras] (gizmodo.com)
• Canon EOS 7D digital SLR (go.theregister.com)
• Canon's EOS 1D Mark V DSLR defying death, launching tomorrow? (engadget.com)
• The First Clips Shot on the Canon T2i Look As Good as the 7D [Photography] (gizmodo.com)
• Gorgeous (timtyson.us)

How many times have I cursed the Caps Lock key. I've wished I could pluck if from my keyboard more than once.

Well... turns out, you can with a simple keyboard preference change!

Go to System Preferences and select Keyboard. In this window, click on Modifier Keys...

Now click next to "Caps Lock" and select "No Action". Easy!

I follow @PhilipBloom on Twitter. He does such amazing work. He has been in Dubai for the past several days shooting this video, Sky. This short timelapse beautifully captures the radiance of the city. And the music, Xibalba by Clint Mansell, is perfect for it.

I appreciate Philip's willingness to share how he does this with HD-DSLRs. It's so helpful to those of us who love to dabble. You can read about the process at his blog, here.

Be sure to watch this in full screen mode. It's beautiful.

He also has a uStream account and broadcast live from his iPhone today. I haven't tried that yet, but it's on my list!

Image via CrunchBase

Here's a great shortcut for downloading YouTube videos when using the Safari browser.

1. Go to the YouTube page with the video on it.  
2. [Command] + [Option] + [A] to bring up the Activity window in Safari.  
3. Under the Address Column find the YouTube page.  
4. Under that column, look for the largest file size, which will be the video file itself.  
5. Double click it to download it.  Done.

I love stumbling upon a cool technology trick.

Working out compression settings for video distribution is part art, part science, and a whole lot of witchcraft. Compression is just often difficult and can be very frustrating.

Well, tonight I learned that if you take a movie file that has already been compressed (select one, of course, that looks really good because it was well compressed) and drop it into the "Custom" folder under the "Settings" tab in Compressor 3.5 (part of Final Cut Pro Studio), Compressor will think about that file for a second (depending on the speed of your machine) and then create a custom preset of the compression settings used to create that finished project! And the description tag becomes the name of the movie project you dropped into Compressor.

Sweet!

Compressor reads the metadata from the file and figures out how the file was compressed and then returns those settings as a preset you can use for your own project compression. Now, even with good compression settings, if you have poor quality source video, you will get poor results. But the problem is often the opposite way around: you have a great project and can't get the compression output to serve a good finished product.

And here's another little tidbit: if you take a Compressor Droplet (a little preset "stand alone application"), right click on it, select "show package contents," open the "Settings" folder and drop the .setting file onto the "Custom" folder under the "Settings" tab in Compressor 3.5, Compressor will again create a custom preset of the compression settings used in the droplet.

Why would you ever want to do the later? You can't get to the setting details of a droplet any other way. So if you want to tweak them but don't have the original settings saved as a preset in Compressor, this lets you get to those settings as well as save the settings as a preset in Compressor if you choose. It's just one of those things you will never need until you do--and then you will be pulling your hair out trying to figure out how to do this. :o)

Thanks to Brian Gary and the helpful folks at rippletraining, just a few miles from my home, for these two helpful tips.

I use John Einselen's MediaboxAdvanced, from iaian7, on my site for the media shadowboxes. I love it!

I've had two issues that needed attention. This is a "note to self" on how I fixed them in case I do site upgrades that might break the fixes, and I can't quickly find the resources to these solutions.

Problem 1: Volume Inadequate on NonverBlaster Player (Solution Works)

I was having the same problem today and I tried making some changes in mediaboxAdv-1.1.7.js and it worked for me. I hope this works for you as well.

In the JS file, you can find the settings for NonverBlaster as below (seach for "FLV, MP4")

------------------------------
// FLV, MP4
                        } else if (URL.match(/\.flv|\.mp4/i) || mediaType == 'video') {
                                mediaType = 'obj';
                                mediaWidth = mediaWidth || options.defaultWidth;
                                mediaHeight = mediaHeight || options.defaultHeight;
                                if (options.useNB) {
                                preload = new Swiff(''+options.NBpath+'?mediaURL='+URL
+'&allowSmoothing=true&autoPlay='+options.autoplay
+'&buffer=6&showTimecode='+options.showTimecode+'&loop='+options.NBloop
+'&controlColor='+options.controlColor
+'&controlBackColor='+options.controlBackColor
+'&scaleIfFullScreen=true&showScalingButton=true&crop=false', {
                                        id: 'MediaboxSWF',     ...
------------------------------

You can set the default volume by adding [&defaultVolume=100] right
after [crop=false].
like this.

------------------------------
...   &showScalingButton=true&crop=false&defaultVolume=100', {
                                        id: 'MediaboxSWF',   ...
------------------------------

[Source: NonverBlaster default volume too low - mediaboxAdvanced | Google Groups.]

What doesn't solve the problem: uncommenting the global media options volume parameter in line 93 or adding a defaultVolume parameter to the NonverBlaster section of code at line 110.

Problem 2: MP4s and FLVs Not Playing

From your server, open up the mediaboxAdvanced javascript file in a text or code editor, and update the options to reflect your desired settings. Make sure you update the file path to the JW media player with the correct path to your server."

[Source: iaian7 » code » webcode » mediaboxadvanced.]

What he inadvertently left out: also be certain to update the file path to the NonverBlaster.swf file too!

This tutorial needs a slightly faster pace, but Helen does a great job answering some questions I've grappled with in frustration concerning changing the crop orientation while using a fixed aspect ratio in Lightroom. I could never figure it out. It's so easy when you know the magic trick!

Each of these keyboard shortcuts works with the [Command] + [Shift] keys:

• K - Network
• C - Computer
  
• A - Applications
• H - Home
  
• D - Desktop
• O - Documents folder
• U - Utilities

And, for the record, I knew Desktop, Applications, and Utilities but have always wanted one for Documents! Having one for the computer hard drive is also nice!

Photo credit: alcomm @ Flickr

Some nifty Photoshop CS4 little known tools!

Other programs in the series can be found at AdobeTV