I'd Rather Be Writing » embedding video

Embedding Videos into Madcap Flare

Tom Johnson — Thu, 19 Nov 2009 15:44:32 +0000

One of Flare’s shortcomings is the inability to easily embed video files. However, if you use the Camtasia Studio’s Express Show format as your video format (and you choose the SWF option), you can insert the video into Flare by inserting the video as if it were a picture. Here’s a two-minute screencast showing the processing for inserting a video into Flare. You can also put the video in a drop-down hotspot.

Blog Sponsors

What I’ve Been Learning in Flare

Tom Johnson — Sat, 14 Nov 2009 07:41:59 +0000

Right now I’m immersed in an online help project in which I’ve been using Madcap Flare. Here a few tips I’ve picked up in the past month or so.

Embedding Video

To embed video into Flare, you have to insert the video as an image file. As long as the video is a SWF file, it embeds directly on the page. In order to keep the Flash player buttons on the video, use Camtasia Studio’s Express Show format. Express Show packages the Flash player buttons inside the SWF file, without requiring multiple files to play the video.

Note that you have to include the height and width dimensions for the “image” (which is really a video); otherwise, the video will expand to fill the entire browser. Also, the expand-to-full-frame view won’t work inside Flare — not sure why.

With the video embedded, you can easily include the video inside a drop-down hotspot. Just make sure the video is small so that it loads quickly on the page.

Relationship Tables

I’m fascinated by relationship tables. Relationship tables give you one (or more, if desired) tables where you can manage your related links. By adding topics to the same row in the relationship table, the links can become part of the same family. Links in the same family appear on the topic in a reciprocal way. You can also specify other linking options, but the family setting is easiest to maintain.

When I first created my relationship table, I styled its display to appear on the right rather than at the bottom (similar to a sidebar on a webpage). But as I looked at the help from a 1024×768 perspective, I realized that the side display crowded out too much screen real estate (leaving me with about 400 pixels after the TOC). So I moved the relationship table to the bottom of the topic.

In the master page for the project, I also added drop-down hotspot code around the relationship table code so that it would expand when clicked. I think it’s pretty cool looking. Unfortunately the project is behind a firewall and confidential, so I can’t display it without creating Greeked text and dummy screenshots, which I don’t have time to do.

Capture

I’ve been using Flare for 2 years now, and up until last week I turned up my nose at Madcap Capture. I was perfectly happy with Snagit, so why should I bother with a new screen capture tool? Now that I’ve explored and started using Capture, I’m kicking myself for not using it earlier. Capture provides you with several distinct advantages if you’re authoring in Flare:

Shapes you add to an image remain in layers. They aren’t flattened, so you can return later and update any callout or bubble text on the screen. This is a major advantage. You can also add variables and conditional text in the callouts if necessary.
You can add nice-looking callouts and bubble captions to the images. The bubbles are vectors, so they resize nicely. You can also choose to round the corners of the callout handle in a cool way. Previously, I inserted my callouts into numbered figure captions below the image. But in browsing Madcap’s help, I realized that I was drawn to the visual experience of the caption bubble directly on the image, with its handle pointing to a specific spot that the caption explains.
Capture integrates nicely with Flare. You can initiate a screen capture from within Flare, and the image is inserted at your cursor’s position. If you initiate the screen capture from Capture, it saves the image directly into your Flare project’s Resources > Images folder (as long as you indicate that path in your Capture profile). To edit the image file, just right click the image and choose to edit it in Capture. Every aspect of the image is still editable.

Capture is robust and I’m still learning how to use it. I like to take 800 x 400 pixel screenshots and resize them to 75%. You can do this by setting your background scale to .75 and your canvas crop settings to 600 x 300 in your profile. When you add a caption bubble to the screenshot, the text in the caption retains its regular size (as long as you take the screenshot with your profile that has the background scale setting). Because the text isn’t resized, it doesn’t lose crispness. By the way, it’s nice having Doc-Guy, a Flare trainer, on our team. He gave me that last tip.

Exporting to DITA, Importing to WordPress

I’ve been fixed on the idea of authoring in Flare, exporting to DITA, and importing into WordPress using a DITA Import WordPress plugin. I finally set up a test site to do that on a secure server at work. It actually did import decently. Beyond that import, though, I haven’t done much with the idea. (The test server is the only server with the PHP/MySQL technical setup that I can publish to at work, so that’s also an obstacle.)

It’s cool that Flare is starting to handle DITA, and I know the intent is to import to DITA, not export to DITA. But sometimes when you have your content in DITA, you have more options for manipulating it.

Thumbnails

Flare now has the option to resize images as thumbnails. But not just any little thumbnails. When you move your mouse over the thumbnail, the image resizes with a lightbox effect — the background dims and the resized image seems to pop out at you.

I’m not sure how I’ll use thumbnails, but it’s a neat option that Flare now has. It might be useful in release notes, where you’re explaining a lot of new features but you don’t want to include full-size images everywhere. Or it could be useful if you’re writing a post in Sarah Maddox style, or if you have narrow columns without much room for full images.

Future Experimentations

Flare is a robust tool with a lot to learn. One thing I’d like to experiment with is incorporating jQuery effects into the topics. This ProPhotoBlogs support site seems to use a ton of jQuery. If you’re using jQuery in Flare, I’d like to hear from you. Or if you have other insider tips and tricks with Flare, I’d also like to hear about them as well.

Blog Sponsors

Embedding HD Quality Screencasts in Your Blog

Tom Johnson — Tue, 10 Feb 2009 02:10:57 +0000

If you’ve ever uploaded a screencast into a video sharing site, such as Youtube, you’ll notice that the screen quality is poor. Screencasts require a high degree of clarity to be watchable. For example, here’s a screencast I uploaded to Youtube. It’s hard to see what’s going on.

Other video sharing sites have the same problem. Here’s the same video on Viddler.

And here’s the same video on Vimeo.

Unlike the other video sharing sites, Vimeo also provides an HD version. At first I was excited about Vimeo, because the HD version is pretty clear in the compressed form. To see what I’m talking about, watch this same video on Vimeo’s site.

Pretty clear, right?

Now, here’s the catch. To embed the HD version of the video on your own site, you have to upgrade to Vimeo Plus for $59.95 a year. Then you only get 5,000 embedded plays, which means only 5,000 people can watch the HD video embedded onto your site, or one user can watch it 5,000 times. You can buy more embedded plays for more money. For example, you can buy 100,000 embedded plays for $199, which isn’t that much. But still, the costs start to add up. This is already about $260 — each year.

And of course if you’re embedding HD video, you’ll need an HD camcorder, which is another $600 (for a low-end version).

Even if you go to all this trouble, the HD embedded screencasts you post on your blog might not be so viewable at a width of 550 pixels, which is about my blog’s post width. The text will be miniature, and users will want to expand it anyway. To make it viewable at this width, you’ll probably end up relying on the pan and zoom features in Camtasia Studio. As soon as you start adding in the pan and zooms and other post-production processing, creating that simple screencast jumped from about a 5 minute operation to an hour. After a few screencasts, you’ll tell yourself you don’t have time for screencasting.

There’s a much better way to create screencasts: Jing and Screencast.com.

Here’s a sample screencast embedded with Jing.

In the compressed form, the text is hard to see, similar to the other video players. However, if you click the expand button (see image below), the player expands to show perfect pixel clarity, unlike the other video services. It also darkens the background, giving you more of a movie-viewing experience.

Brooks Andrus, one of the Jing developers, created a tutorial on how to embed Jing videos into WordPress blogs. You have to change a few parameters in the default screencast.com embed code to make it play in WordPress, but it only takes 10 seconds to change this. (It’s a bug they’re fixing.)

With both Jing Pro and Camtasia Studio, you can also capture HD quality screencasts. Just record a dimension of at least 1280 x 720 pixels. If you increase that size, maintain the same 4:3 aspect ratio. Choose the MPEG4 output (only available in Jing Pro). In both Jing Pro and Camtasia, the video output will be encoded with the H.264 codec. If you were to upload such a video to Vimeo, or embed it with the Jing wrapper as I explained above, the video would appear in HD quality.

You don’t have to use Screencast.com with Jing. Brooks also shows you how to FTP the video to your own site and embed the screencast with the Kimili flash embed plugin. This solution is useful if you want to maintain tighter control over your content.

I’ve been experimenting with Vimeo and other video-sharing services for the past couple of days. Overall, I’m pretty sold on the Jing/Screencast.com solution (or the Jing wrapper solution), for the reasons I explained in this post (cost, clarity, screen real estate). Jing and Screencast.com are also in their development infancy, so who knows, they may be working on more HD features similar to Vimeo right now anyway.

Do you agree with my analysis of screencasting solutions ? Are you embedding screencasts a different way? I’d like to hear your thoughts.