I'd Rather Be Writing » Flash

How to Embed Video on a Web Page

Tom Johnson — Sat, 16 Jan 2010 16:50:29 +0000

To embed video on a web page, you don’t need to upload your video to youtube, vimeo, or some other video sharing service. A lot of times in a corporate setting, uploading your videos to a third-party site isn’t appropriate or allowed. Does this mean you have to resign yourself to a basic WMV output that opens up in the Windows Media Player? No. You can grab the embed code from Camtasia Studio’s html output and copy it to a custom page to embed your video.

When you produce your video from Camtasia Studio (or from another video editing tool), make sure you select the Embed Video into HTML option.

To embed the video on a web page, select the embed in HTML option

In the output, you’ll see an HTML file. Open the HTML file up in a text editor such as Notepad++. You’ll see two sets of object embed code. Copy the first set, which begins with

and ends with

. It will look something like this:

Object embed code

I know there’s another section of embed code that actually says “Users looking for simple object / embed tags can copy and paste the needed tags below …” However, as of this post’s date, that code has a bug that prevents the first frame from appearing in Internet Explorer. I told Techsmith’s support about this bug, so hopefully they’ll fix it in an upcoming release.

Now that you have the embed code, do two more things. Upload your video output files to your server. They don’t need to be in the same folder as your web page at all. In fact, you can have them on another server entirely.

After you upload your video files to a server, change the paths in the code to reference the location of the files. For example, if the path to the files is http://idratherbewriting.com/wp-content/uploads/2010/01, add this path before the video file names. You have to include the URL in three places.

Changing reference paths of the video content

Now that you’ve updated the paths to reference the location of the video, just insert the object embed code into the page where you want to display it. As an example, I’ll paste my sample code below. (By the way, the 15 second video below doesn’t have any sound or show anything in particular — it’s just a sample of an embedded video.)

Now your video is embedded directly on a web page, which makes it easy to view.

Blog Sponsors

Two New Tools I’m Learning

Tom Johnson — Tue, 07 Jul 2009 13:10:21 +0000

Sometimes I can hardly believe I’ve gotten along for so many years as a technical communicator without a thorough understanding of Adobe Illustrator and Adobe Flash. They seem critical to technical communication.

Why Illustrator

With vector images (which Illustrator allows you to create), your images in quick reference guides will look sharp and crisp. The more quick reference guides I create, the more I realize how necessary images and diagrams are in giving the guides appeal. A good image makes or breaks the quick reference guide. If your image is pixilated or fuzzy, it lowers the value of your deliverable.

With vector images that you create through Illustrator, you don’t have to worry so much about size, because vectors scale without losing quality. You can also insert them as linked images in InDesign without having to export them to another format (such as JPG, PNG, or GIF). As linked images, you can continue to tweak and adjust the originals by dragging points. The images are versatile and can be easily updated based on different needs.

The main reason I’m learning Illustrator is simply that illustrations are powerful in technical instructions — it’s one of the most helpful skills you can develop. People may not read help, but they certainly stare at the visual images in help content. If you can master a tool that allows you to create sharp looking images demonstrating conceptual topics, your content will be engaging and visually attractive.

Why Flash

Video tutorials are also an important learning tool for understanding software. It amazes me how many technical communicators simply omit video. When I want to learn software, I prefer video tutorials over written instruction, so it’s natural that I see video as an essential deliverable. In fact, even outside of software, videos are helpful. When I recarpeted my daughter’s bedroom, I knew I needed a kicker to stretch the carpet, but I had no idea how to use it. A few Bob Vila videos clarified everything.

While Camtasia Studio is great for recording the screen, video tutorials that consist only of screen recording will tire readers. Often video tutorials have some conceptual information to relay to readers. This conceptual information is best illustrated through diagrams and other visuals — which you can create in Illustrator or other graphics tools (see my colleague’s post about this strategy). But Camtasia can only handle these images as static images — which is why I want to learn Flash, so I can create some animation and then pull the animated images into the Camtasia Studio timeline.

I don’t want to create anything super dynamic, just a bit of motion. As I’ve written about previously, I love the Michael Pick videos on WordPress.tv. Flash is the tool that will help me give my video tutorials a bit more life and movement.

The way I see it, both Illustrator and Flash can work powerfully together. I know I could spend a lifetime learning either of these tools, but hopefully little by little I’ll master what I need.

Blog Sponsors

Introduction to Technical Writing (podcast)

Tom Johnson — Wed, 25 Mar 2009 01:00:33 +0000

Download MP3 (to download, right-click and select Save Target As)
Length: 43 min.

In this podcast, I talk with Ricardo Amigo, a translator and podcaster in Mexico City and Costa Rica, about the field of technical writing. This podcast is more of a reverse interview. Instead of me asking the questions, Ricardo interviews me. The general topic is the field of technical writing, including all of the following:

My path into technical writing
Structured authoring
XML and DITA
Information architecture
Usability — for documentation and software interfaces
Publication formats for help material
Breaking into technical writing
Tools for help authoring
The growth of technical writing
Creativity and technical writing
A typical day as a technical writer
Translation techniques and tools
Simplified technical English

Ricardo’s company is called Amigo Audio, and they principally do translation. For example, if you need your manual or software interface translated, Amigo Audio can help. You can contact Ricardo Amigo at sinpapel@yahoo.com. Additionally, you can read more about their translation services at Amigo Audio.

Blog Sponsors

WordPress Tip: Rotating Flash Tag Clouds

Tom Johnson — Thu, 19 Feb 2009 07:50:29 +0000

The rotating flash tag cloud provides a curious approach to tags, no doubt more novel than useful, but still interesting and somewhat worthwhile. The flash cloud shows only 80 tags (any more and it’s unreadable).

My rotating WordPress tag cloud (click to view the flash version)

You can also create a comprehensive set of tags that function as an index. Both arrangements lack usability. I’m never quite sure what to do with tags. My approach has been to treat them like index keywords, so I often tag each post with a handful of freeform tags that come to mind.

However you approach the organization of your content, making 697 posts (the number of posts on my blog) findable on a website that people don’t spend more than 5 minutes browsing is a formidable challenge. Common organization schemes, beyond tag clouds (whether “cumulus” or flat, list or other), include category lists, date-based archives, related posts, random posts, most popular posts, most popular posts by category, indexes, category indexes, top 10, article series links, manual arrangements of links, and a search box.

Despite all of these methods, none seems to be especially compelling. Ninety percent of users arrive at the from search or feed, scan the posts on the home page, perhaps the related links on the post they landed on, and then click away. They see less than 5% of the total site content. What do you feel is the best method for organizing blog content?

Blog Sponsors

TiltViewer – About

Tom Johnson — Wed, 04 Feb 2009 19:31:46 +0000

TiltViewer

Pretty amazing viewer for graphics.

Blog Sponsors

Use FTP? Here's the Jing Wrapper and Embed Code – Jing Blog

Tom Johnson — Fri, 30 Jan 2009 22:17:11 +0000

Use FTP? Here’s the Jing Wrapper and Embed Code – Jing Blog.

Blog Sponsors

Understanding the Jing Pro Video Formats – Jing Help Center

Tom Johnson — Fri, 30 Jan 2009 15:23:59 +0000

Understanding SWF versus MPEG-4 Formats in Jing Pro

I was confused by the difference between SWF and MPEG-4 before I read this explanation (which includes video examples).

Blog Sponsors

Podcast: XSL, Flash, and Live Blogging — Interview with Sarah O’Keefe

Tom Johnson — Sun, 18 May 2008 05:19:23 +0000

Download MP3
Duration: 15 min.

In this podcast, Sarah O’Keefe talks about XSL, Flash, and live blogging. XSL (extensible stylesheet language) is a programming language that transforms XML content into a specific format, such as HTML. She explains what you can do with XSL, why it’s unique, and how the output is created.

Sarah also presented on Flash. Flash comes easier for people who are visual thinkers, she says. She recommends people learn Adobe Illustrator first, because many of the concepts transfer to Flash. Flash is basically Illustrator with a timeline — a collection of images that combine to form a motion. Flash can be good for animating conceptual topics you’re trying to clarify.

Sarah recently used Flash in a white paper she wrote titled “Friend of Foe: Web 2.0 in Technical Communication.” She embedded Flash videos in the PDF to illustrate concepts and engage readers (although some readers didn’t realize they were supposed to click the Play button).

Finally, Sarah talks about live blogging — the process of posting notes and writeups in almost real time from sessions you attend. Why live blog? She says it’s fun, keeps your attention, and helps you focus on the main point of the presentation.

She also relates some unexpected experiences of presenters who read her live blogs and confronted her about some of her observations.

Sara’s blog is at Palimpsest: http://scriptorium.com/palimpsest/. Her company is called Scriptorium.

Here are a few of Sarah’s latest posts from Doc Train: