Saturday, June 21, 2014

Recording the Self-presenting Presentation

If you watched the screencast video in my last post, "Free Voice Talent ..." you may have noticed that I used a TTS voice for parts of the presentation. What is not evident is the fact that this recorded presentation was entirely automatic, including the human and TTS narration. It was a self-presenting presentation.

Here's how it is done using only ScreenFlow, Keynote, Applescript and Apple's built-in text to speech (TTS) capabilities.

We start by creating a Keynote presentation and making the presenter's notes visible with View > Show Presenter Notes which looks like this:

CreatePresentationWithNotes

Next, we create a slide in the Keynote deck using the presenter notes to script the narration for that slide. Repeat until you have laid out all visual and narrative aspects of your message.

At this point, we need to develop an Applescript application that will launch Keynote and cause the presenter notes to be read with a TTS voice. So, go to /Applications/Utilities, open Applescript Editor. Copy and paste in the following script:

property defaultSlideDuraton : 2
property pauseBeforeSpeaking : 1.5
property stoppingStatement : "[[slnc 1000]] Stopping presentation."

tell application "Keynote"
activate
try
if not (exists document 1) then error number -128

if playing is true then stop the front document

tell document 1
set the slideCount to the count of slides
start from first slide
end tell
repeat with i from 1 to the slideCount
if playing is false then
my speakSlideNotes(stoppingStatement)
error number -128
end if
tell document 1
set thisSlidesPresenterNotes to presenter notes of slide i
end tell
if thisSlidesPresenterNotes is "" then
delay defaultSlideDuraton
else
if pauseBeforeSpeaking is not 0 then
delay pauseBeforeSpeaking
end if
my speakSlideNotes(thisSlidesPresenterNotes)
end if
if i is slideCount then
exit repeat
else
if playing is false then
my speakSlideNotes(stoppingStatement)
error number -128
end if
show next
end if
end repeat

tell document 1 to stop
on error errorMessage number errorNumber
if errorNumber is not -128 then
display alert (("ERROR " & errorNumber) as string) message errorMessage
end if
end try
end tell

on speakSlideNotes(thisSlidesPresenterNotes)
if thisSlidesPresenterNotes begins with "[voice:" then
set x to the offset of "]" in thisSlidesPresenterNotes
set textToSay to text from (x + 1) to -1 of thisSlidesPresenterNotes
set thisVoiceName to text 8 thru (x - 1) of thisSlidesPresenterNotes
say textToSay using thisVoiceName
else
say thisSlidesPresenterNotes -- with waiting until completion
end if
end speakSlideNotes

Save it as a script so that you can use it at any time in the future.

At this point, you could set ScreenFlow to record and then Run the script with your Keynote presentation open and in the forefront. The default system voice will read each slide as it is presented. The presentation will automatically exit after the last slide has been narrated so you can stop the ScreenFlow recording, trim the ends in ScreenFlow and be done.

However and as we discussed in the last post, you may not be satisfied with such a plain vanilla rendition. Thus, we get into a few of the more sophisticated techniques that apply to this kind of work. You should already know about auditioning, using phonetic mis-spelling, punctuation and embedded speech commands to create a more human-sounding rendition of text. If not, review the "Free Voice Talent ..." post for the details.

To these we will add two new techniques: 1) Adjusting for video and animation. 2) Selecting voices on a per slide basis.

Adjusting for video and animation. If your presentation includes a video clip as the screencast referenced here does, you'll need to build in a delay that is equal to the duration of the video. This can be done with the embedded speech command [[slnc nnn]] where nnn is the duration of the embedded video in milliseconds. The following screenshot is of a slide containing a video with a duration of 9 minutes 16.033 seconds. That converts to 556,000 milliseconds. YMMV (Your math may vary).

DelayEqualToVideoDuration

This also applies to any transitions or animations that you may have included. Simply run the script without recording to audition the slide making adjustments to the placement and duration of the silence command. This command, as you learned from the last post, is also very useful in creating appropriate pauses between paragraphs.

Selecting voices on a per slide basis. Since there is no embedded speech command that enables selecting which voice is operative, we do this via the speakSlideNotes function in the script. This special command must be the first text encountered in the presenter notes (no leading spaces, please). Inserting [voice:Daniel] as the first element in the presenter notes for a slide will cause that voice to be used - no need to change the system default. Note the single (not double) square brackets. This is especially valuable as you may use an alternating male and a female voice to add narrative interest to your screencast. The following screenshot illustrates the use of this special command.

SelectingVoices

So that's all there is to it. Create a slide deck in Keynote, add presenters notes, audition and adjust the text of the presenter notes with the provided Applescript until the desired presentation with narration is achieved. Then, launch ScreenFlow to record the self-presenting presentation, execute the script, stop recording, trim and export.

Because voice quality and variety is so easily assured with a single take, this could be called Rapid Screencast Development (RSD).

Wednesday, June 4, 2014

Free Voice Talent for Your Next ScreenFlow Screencast

Screencasting often entails narration and many screencasters take a do-it-yourself (DIY) approach to this critical part of the screencasting process. The price (free) is usually right and ScreenFlow does a fine job of recoding from an external or built-in microphone. However, there are a few downsides to consider.

  • The quality of the microphone and the recording environment may not be as good as they ought to be.
  • Not everyone has a great “radio voice” and not everyone has a smooth manner of speaking. If that weren’t true, professional voice talent wouldn’t be so expensive.
  • Items A and B often result in having to do many “takes” and that requires time that may not be available or justifiable.
  • Even where the screencaster/narrator has a fine voice, a good recording environment and a great speaking style, there is often a need for a different voice if only to provide variety or counterpoint – important to audience engagement.

These are some of the reasons why screencasters may want to employ additional voice talent instead of or to supplement their own. The show stopper for many is the cost of professional voice talent. The voices.com website provides a good overview of the field and the costs involved.

But wait! There is a free option that only requires that you have and be able to use ScreenFlow on a MacOS X computer. Interested?

As you may already know, MacOS X has a very good text-to-speech engine built-in and ready to use with voices ranging from very human sounding (Alex) to the bizarre (Zarvox). Additional voices organized by language/accent groups can be downloaded from Apple. What’s more, you can purchase and download even more high quality voices from companies such as
Cepstral and AssistiveWare. In most MacOS X apps, one can select a body of text and then choose Edit > Speech >Start Speaking to hear those words spoken with the selected system voice. Selecting a different system voice is a simple matter of using the drop-down menu in the Text to Speech tab of the Dictation & Speech preference pane.

Less well known is the fact that this process can be extended to include creating a recording of such a reading and that this can be automated as a service that is easily accessed in any application that handles text. With narration scripted, it becomes a simple matter to add audio narration to a ScreenFlow screencast in one or more interesting voices.

Before we get into the details of how to do that, let’s take a look at an example that was created using the procedures about to be described. We start with some publicly accessible content so that the reader can follow along. I used Hubblecast 68:
The Hubble Time Machine because it was short (07m 27s), in the public domain, included a script (English) and several subtitle tracks in English and various other languages. I also discovered a great source of free soundtracks in the Zero Project used in this and other Hubblecast epodes.

Of course the video already had world class narration in English so, to make things interesting, I set out to create a Russian narrated version of this video. I used the subtitle track for Russian, a simple text file, to generate a number of audio clips identifiable by the start time of each clip. The original video alternated between a male and female narrators so I chose to mirror that in the Russian version by using two Russian voices, Yuri (male) and Katia (female). These had to be downloaded from Apple as they are not included in the basic set of voices.

So here is our demo, the Russian narrated version of Hubblecast 68: The Hubble Time Machine.



There are a number of flaws in this demo that we’ll address in the how-to section. As a proof of concept, though, it does clearly demonstrate the feasibility of easily adding other voices and other languages to a video.

I added both the English and the Russian subtitles so that you could follow the audio with one or the other. These may be accessible to you if you are looking at the video using the very latest versions of Safari on iOS or MacOS X. The Safari subtitle selector will look like this:

12.subtitle-widget


No other web browsers yet support internal subtitles so if you don't have or use Safari for some reason, download
this version of the video and play it in iTunes, QuickTime X Player, VLC or some other capable video viewer that supports subtitles. Note also that I am using the HTML video tag with MPEG-4 video and no WebM fallback so some versions of Firefox may refuse to play the video because there is no *.webm or *.ogg fallback version. The solution is to switch to any other major web browser.

So, how is this magic achieved? It’s actually pretty easy. Let’s go through the following three easy steps.

Step 1: A more thorough tutorial would have us build the four requisite Automator workflows by hand (you can get that here and here) but automation is not one of our main learning objectives so we’ll take a shortcut and download the four Automator workflows needed for this tutorial here. Once you unpack this archive, you will find four Automator workflows as follows:

1) Read the Selection Aloud (female).workflow
2) Read the Selection Aloud (male).workflow
3) Render Selection as Audio (female).workflow
4) Render Selection as Audio (male).workflow

These are easily installed by double-clicking each of them and then clicking the Install button in the resulting dialog. Note that MacOS X 10.7 and newer
may object saying that the workflow is from an unidentified developer. To circumvent this, Control-click on the workflow file and click Open from the resulting contextual menu. This is a one-time operation so the second and all subsequent uses will require only double-clicking the file. Opening the *.workflow file will yield the following dialog:


01.workflow-install-dialog

Here is a more detailed version of these instructions.

Please note that this security obstacle is very important to protecting your computer and the data handled by it. You should never download and install apps, scripts or Automator workflows from untrusted sources. While apps can be signed by the developer, scripts and Automator workflows cannot. These workflows are from http://www.macosxautomation.com and, so, I considered them trustworthy.


After installing, you'll see a completion dialogue with an Open with Automator button. Click on that to see how each workflow was assembled. The two named “Read the Selection Aloud …” are very simple whereas the two named “Render Selection as Audio …” are more complex as follows:

02.workflow-render-selection


All four workflows come preconfigured with the following voices: Daniel (Male) and Serena (Female). Note the Play button to the right of the selected voice where you may audition it. The language is English (United Kingdom). Feel free to change these as you like or need. For more choices, download additional voices.

Here's how to download new voices from Apple:
• Open System Preferences choosing the Dictation & Speech preference pane and then selecting the Text to Speech tab.
• Click on the System Voice drop down menu selecting Customize ...
• In the resulting dialog, select new voices using the checkboxes to the left of the name of each voice. Note that voices are organized and labeled by language, location (accent) and gender.
• Click on the OK button and, wait patiently for the voice to download. This can take a while.
Once the download is complete, you will be able to select new voices in the Automator workflow as described above.

For the Russian demo, I duplicated, reconfigured and renamed the workflows so that I would have separate services for rendering English and Russian text to speech. It is not at all necessary for you to follow this more complicated procedure. Simply opening the Automator workflows and changing the voice from Daniel to Yuri and from Serena to Katia would have been sufficient. Nonetheless, here's how to do it:

• The Russian voices are not installed by default so have to be downloaded as described above.
• Go to ~/Library/Services where all of your Services are kept. Note that the tilde (~) indicates your Home folder which carries the short username that you chose when your computer was first set up.
• Select the file, "Render Selection as Audio (female).workflow" and duplicate it (Cmd-D or File > Duplicate).
• Rename the duplicated file to reflect its new, specialized function. I used, "Render Selection as Audio (female-Russian).workflow."
• Double-click this file to open it in Automator.
• Change the voice to Katia using the drop down menu in the Text to Audio segment of the workflow and close the file.
• Repeat the process to create "Render Selection as Audio (male-Russian).workflow" using the voice, Yuri.
You will now have both the originally downloaded workflows and these specialized additional workflows available to you in any text handling application that supports Services. To illustrate, here's a screenshot from Pages.


03.render-text-as-audio-service


Step 2: Using the provided script, the subtitle track or other means, create a time stamped working script then use that script to create a set of audio files as follows.

Here is a snippet of the PDF script that I found on the Hubblecast resource page:

01:23
[Narrator]
4. As we can’t travel to other galaxies or star systems and view them for
ourselves, we rely on telescopes like Hubble.
One of the main scientific justifications for building Hubble was to
measure the size and age of the Universe. This task has produced
some of the telescope’s most iconic images, taken as Hubble peered
into the faraway Universe to see what galaxies looked like in the past.
01:56
[Dr. J - STUDIO 2]
5. So how is it possible that Hubble can look into the past?
Well, that’s because, just like a spacecraft, light also travels at a finite
speed. At 300,000 kilometres per second, this speed is very high, but it
is still finite. That means that, in principle, everything we see is a thing of
the past.
Now normally, in our everyday lives, it doesn’t matter, because the
distances are just too small. But when we look at the Moon, we see it as
it was about 1 second ago. The Sun we see as it was about 8 minutes
ago. For the nearest star, it’s about 4 years, and the edge of our galaxy
we see as it was about 100,000 years ago.

The equivalent female (narrator) parts of the subtitle track look like this.

English:

12
00:01:24,000 --> 00:01:30,000
As we can't travel to other galaxies or star systems and view them for ourselves

13
00:01:30,000 --> 00:01:33,000
we rely on telescopes like Hubble.

14
00:01:34,000 --> 00:01:38,000
One of the main scientific justifications for building Hubble

15
00:01:38,000 --> 00:01:43,000
was to measure the size and age of the Universe.

16
00:01:43,000 --> 00:01:48,000
This task has produced some of the telescope's most iconic images,

17
00:01:48,000 --> 00:01:55,000
taken as Hubble peered into the faraway Universe to see what galaxies looked like in the past.


Russian:

12
00:01:24,000 --> 00:01:30,000 NF
И поскольку мы не можем слетать к другим галактикам или звездным системам и посмотреть на них своими глазами

13
00:01:30,000 --> 00:01:33,000
мы полагаемся на телескопы вроде Хаббла.

14
00:01:34,000 --> 00:01:38,000
Одним из главных научных обоснований строительства Хаббла

15
00:01:38,000 --> 00:01:43,000
была необходимости измерить размер и возраст Вселенной.

16
00:01:43,000 --> 00:01:48,000
Эта задача привела к тому, что были созданы самые лучшие изображения,

17
00:01:48,000 --> 00:01:55,000
когда Хаббл вглядывался вглубь Вселенной, чтобы увидеть, как же выглядели галактики в прошлом.


So, that part of our working script for this particular female (narrator) excerpt winds up looking like this:

01:23F
И поскольку мы не можем слетать к другим галактикам или звездным системам и посмотреть на них своими глазами
мы полагаемся на телескопы вроде Хаббла.
Одним из главных научных обоснований строительства Хаббла
была необходимости измерить размер и возраст Вселенной.
Эта задача привела к тому, что были созданы самые лучшие изображения,
когда Хаббл вглядывался вглубь Вселенной, чтобы увидеть, как же выглядели галактики в прошлом.

Next, we select this text in our text editor (almost any text handling app will do) and go to the Services menu (usually in the app menu) selecting one of the following Automator workflows:
• Render Selection as Audio (female) if you have changed the voice of that Automator workflow to Katia.
• Render Selection as Audio (Russian-Female) if you have created a dedicated Automator workflow as I did.

06.services-menu-In-pages


This creates an audio file in QuickTime X Player like this with a title using the first few characters of the selected text.

04.selected-text-rendered-audio

It's auto-saved to disk (~Desktop/Audio Rendering Service/) but we will re-save it to a different location changing the name to 01-23F.m4a to indicate a start time of 1 minute, 23 seconds and the gender of the speaker (as a cross-check because we know they alternate). This filename will be very helpful in placing the audio clip when we get to ScreenFlow.

05.save-as-time-stamp-gender


However, before you start cranking out audio files like sausages, you may want to audition your script with the voices that you are using. This is what the male and female "Read the Selection Aloud ..." workflows are for. It is quite possible that you will not be fully satisfied with the way that that the Text To Speech (TTS) engine treats the selected text. You may want to tweak it a bit. Fortunately, there are ways to influence these readings and, consequently, the recordings too.

The simplest tactics involve mis-spelling words in a more phonetic fashion, using punctuation and issuing commands that the TTS engine will obey such as the silence command. Here is an example where we insert 400 millisecond periods of silence into a sentence:

Don't forget to bring your hat, [[slnc 400]] sunglasses, [[slnc 400]] sandals, [[slnc 400]] and towel.

... compare that to:

Don't forget to bring your hat, sunglasses, sandals, and towel.

... or:

Don't forget to bring your hat; sunglasses; sandals; and towel.

This
Mac Developer Library PDF document is extremely detailed and technical but you can extract from it such usable gems as those in the examples above. Just skip over the stuff that seems too complicated. Table 3-1 is where you want to focus your attention.

Once you have a complete script that reads well, decide how to organize it in segments or chunks that correspond with the gender of the speaker and the pauses that occur naturally as the video plays. An *.srt subtitle file will provide you will all the timing information you need to make sure that the audio corresponds with the video. Finally, go ahead and produce a set of audio files as described above.

Step 3: Using ScreenFlow to assemble the audio narration track and synchronize it to the video.

At this point, you should have a video file and a bunch of audio files whose names tell you where on the timeline they should start. Determine the resolution (width and height in pixels) of your video using QuickTime X Player by opening the video and doing Window > Show Movie Inspector or Cmd-I. Make sure that the video is being displayed at its actual size (View > Actual Size or Cmd-1). The first figure is the width while the second is the height. My example movie (Hubblecast 68) was 1920x1080 which is the resolution of 1080p video.

Open ScreenFlow 4.5, dismiss the configure/start recording dialog that usually opens by default on launch and do File > New Empty Document or Shift-Cmd-N to get the following dialog.

07.screenflow-new-empty-doc


Choose one of the presets or enter custom dimensions to equal the resolution of your video so that it will use all of ScreenFlow's canvas. Next, bring the video file and all of the audio files into ScreenFlow's Media Library using either drag and drop from the Finder or using the Add Media function in the Media Library. Either way, the Media Library should look something like the image below. Note how the names of the audio files cause them to be arranged sequentially. This will help assembly go more smoothly.

08.add-to-media-library


Next, drag the video file onto the canvas and center it. The video should use all of the canvas. Use the scrubber to move the playhead randomly to confirm that fact.

Since we're going to replace the English narration with Russian, we'll need to select the video track in the ScreenFlow timeline and then go to Audio Properties where we can Mute Audio. Play the movie for a few seconds to confirm that it is, indeed, silent. The next and most important task, then, is to begin adding audio files to the timeline such that the narration jibes with the visuals in the video.

Here is where our audio file naming scheme pays off. Because our first audio file is named 00-00F (female narrator starts at 0 minutes, 0 seconds), we know that it should begin to play as soon as the video starts. That's easy so we drag that file to the timeline placing it below the video and as far to the left as possible. If we drag the scrubber/playhead to the beginning of that file, the timecode readout should be zero.

09.scrubber-playhead-time-readout


Here's a closeup of the timecode readout when the scrubber/playhead is in the leftmost position.

10.close-up-time-line-readout


This timecode readout will help us place each audio file in the proper location so that the narration matches the visuals in our screencast. For example, if our next audio file is named 00-53M, we know that it should start at the 53 second mark. Simply move the scrubber until the timecode readout looks like this:


11.time-code-close-up-00-53

Then drag the file named 00-53-M.m4a to a position to the right of the scrubber/playhead, double-click the gap between them and then press the Delete key. That will place this audio sample precisely on the timeline where it ought to be. Repeat this process for the remaining audio files and optionally place a music track beneath all this with ducking turned on for the narration track.

Then, export your screencast as you normally would.

Finally, let's recapitulate these three steps in a screencast as follows:



Download the 720p version of this video
here with Control-click.

Wednesday, November 27, 2013

Enhanced Dictation in MacOS X 10.9 as a TTS Engine for Extant Audio Files

The pressure is on to take affirmative action to make screencasts and other online video more accessible. Of course, this includes eTextbooks that contain video. One important aspect of that challenge is to make video more accessible to persons who are deaf or have difficulty hearing. For video content creators, this means providing a transcript or, better, providing subtitles to that video so that dialogue may be viewed in the same context as the video. This is fast becoming de rigueur.
The problem is that many videos are created without a script that is followed closely by the speakers in that video. Indeed, many important videos are created in ad hoc fashion (interviews, panel discussions, conference presentations and the like) where scripts would be totally inappropriate.
Creating text from speech has become essential to meeting these expectations, especially where all one has to work with is the speech in the audio track of a video. Speech to text (STT) is a bit more difficult than text to speech (TTS) which has been in use much longer.
MacOS X recently introduced Dictation (speech-to-text) as a feature usable in any application that takes text as input. This is quite an advance over having to purchase a two hundred dollar application to accomplish the same end. However, the first iteration of this system required an internet connection so that speech could be uploaded to Apple's servers where it would be turned into text. This created delays and was difficult to use for substantial bodies of text. However, Dictation was given a significant boost in MacOS X 10.9 (Mavericks) with the introduction of
Enhanced Dictation which enables offline use and continuous dictation with live feedback. Enhanced Dictation is NOT enabled by default (see link above for details on how to enable it).
Still, this is a system that assumes a live speaker. There is no obviously easy way to route speech from a recorded file through Apple's Dictation system to produce usable text. That's what this post is all about. You can, in fact, route the speech in an audio file through Apple's speech-to-text subsystem and render very usable text output. It isn't intuitive or Apple-easy but it is something that anyone can accomplish with a bit of determination. Here's how.
The application at the center of this process is
Audio HiJack Pro by Rogue Amoeba ($32 USD). There are two things to set up with this app. The first is to identify the source of the audio. It could be any app that emits audio but I used QuickTime Player X. Thus, I set that app as the audio source as follows:

ss.01


This will capture the audio from anything that this app plays. My
sample audio is from NPR and contains a dramatic reading from noted actor, Sam Waterston and looks like this in QuickTime Player X:


ss.02

This configuration will grab all the audio from QuickTime Player X as it plays the "NPR Gettsyberg Address" audio file. Next, we use Audio HiJack Pro to send that audio to Soundflower (free). To do that we go to the Effects tab and choose Auxiliary Device Output from the 4FX menu.

ss.03


The Auxiliary Device Output plug-in enables us to choose the previously installed Soundflower as the recipient of the HiJacked audio as follows:

ss.04

Once installed, Soundflower becomes an input/output option in your Sound preference pane and everywhere else audio sources and destinations can be specified. In other words, it becomes an integral part of your sound system in MacOS X.

Finally, we set the Dictation input to be Soundflower as follows:

ss.05

At this point, any audio played by QuickTime Player X will be routed to Soundflower and will thus become available to any application that accepts text input and has a Start Dictation menu item. In Pages, that looks like:


ss.06

The following screencast illustrates this process from start to finish:




A very special "Thank You" to Chris Barajas at Rogue Amoeba who patiently worked me through the intricacies of the in Auxiliary Devices Output plug-in for Audio HiJack Pro.

Tuesday, September 3, 2013

Using SVG images in iBooks Author

The primary advantage of Scalable Vector Graphics (SVG) files is that a very small file can be scaled up to yield large images without the aliasing (jaggies) that appears when a bitmapped graphic is scaled up. SVG files are resolution independent, usually non-photographic and carry the suffix *.svg. There are lots of free SVG files available on the Internet and there are many applications for creating SVG files such as the free, open source Inkscape. For an excellent primer on vector graphics, see this Wikipedia article.

However, it is not possible to use SVG images directly in iBooks Author.  If you attempt to drag and drop an SVG file onto an iBooks Author project, nothing will happen. You'll get no error messages or feedback of any kind. Similarly, apps in the
iWork suite (Pages, Keynote and Numbers) will also refuse to accept SVG files. Since it is important to keep the size of iBooks Author output low for easy downloading and to avoid the 2 GB limit in the iBookstore, we need to pursue this further.

The iBooks Author application has its own Text, Shapes and Graphs menus with which a number of vector graphics can be created. Another option is to use the vector graphics created by Keynote, Numbers and Pages. These can be copied and pasted directly into an iBooks Author project. Graphics created in iBooks Author or any of the iWorks suite applications are vector graphics in PDF containers, not SVG files. PDF files can contain text, bit-mapped graphics and vector graphics. The
OmniGraffle application is a considerably more sophisticated graphics toolset and is capable of exporting both SVG vector drawings and PDF vector images. The latter are compatible with iWork suite and iBooks Author.

That's useful but there is an Internet full of already drawn
SVG images that are in the public domain or CC licensed.  It would be a shame not to have access to that vast library of free vector images.  The trick is to use this on-line conversion service to convert SVG to PDF and then drag and drop that PDF directly into an iBooks Author project or into one of the iWork apps or OmniGraffle for further manipulation.

Download an *.ibooks file
here that shows how vector graphics created in iBooks Author compare with vector graphics converted from SVG files. The following screencast uses that same multi-touch eBook.


Sunday, July 28, 2013

Using iAd Producer with iBooks Author (example: creating an external video player widget)

The iAd Producer application from Apple has grown considerably since its inception. Originally, it was a highly specialized application that created advertisements for mobile devices from Apple. Those iAds were composed of sophisticated HTML, CSS and Javascript.

Since that inception, it has been expanded to create iTunes LPs for music albums sold in the iTunes Store and iTunes Extras for video sold in the iTunes Store. These, too, rely upon HTML, CSS and Javascript web technologies. Most recently, iAd producer has added iBooks Author HTML widgets to its repertoire. Thus, the following screencast tutorial showing how easy it is to use iAd Producer to create a high quality HTML widget for iBooks Author without writing a single line of code.

This example focuses on creating an HTML widget that plays a video hosted on an external server. This keeps the size of your *.ibooks file down making for quicker downloads and avoiding becoming a burden to iPads already nearly filled to capacity with other books and media.



Try viewing this video in full screen to catch all of the details. Note that Firefox doesn't like MPEG-4 and will refuse to play this. Try any other modern web browser (Safari, Chrome, etc.).

Download the example book to an iPad to get an even better view of how this looks and feels in the hands of your audience.

Download iAd Producer (free developer registration required)

Tuesday, June 18, 2013

Danger: Do Not Duplicate an *.iba File - Use Templates Instead


The setting. I wrote four eTextbooks (of six planned) for a private iTunes U course that I am teaching. I used names such as Unit.01 Getting Started, Unit.03 Capture and so on.  These were uploaded to iTunes U via the iTunes U Course Manager. 

The bad move. Once I got the design of Unit.01 decide upon, I duplicated the *.iba file for Unit.01 and edited it to make the shell for Unit.02 and so on.  What I should have done was to create a template and work from that. Bad move.

The reason. After a bit of back and forth with some very diligent folks at Apple involving both the iTunes U and iBooks Author teams, we discovered that my bad move caused the *.iba files to have the same internal ID and that caused all of the resulting *.ibooks files exported from them to inherit that identical internal ID.  

The cure. So I opened each *.iba file and made a template from it, closing it and adding the prefix "old_" to its file name in the Finder, just to have a fallback in case something went wrong.  After that, I created a new IBA project file from the just created template and saved that under the old name (no prefix) and exporter a new *.ibooks file replacing the old , defective, identity-challenged *.ibooks file. Rinse, repeat with each of the other eTextbooks.

Testing has shown that all of these eTextbooks have regained their individual identities. Opening Unit.04 always results in opening Unit.04. Success.

The moral. Make templates, don't dupe an *.iba file.

Friday, February 8, 2013

HTML Widgets Made Easy: External Video Player Example

The iBookstore limits the size of of *.ibooks files created with iBook Author (henceforth, IBA) to 2 GB and recommends that you keep the size of your iBook file under one gigabyte if possible in order to avoid taking too much space on your readers' iPads as well as to avoid your readers having to endure long download times. Although including video that is internal to your IBA project is a simple drag and drop application using the Media Widget in IBA, that kind of video will very quickly increase the size of your iBook and may place an unwelcome burden on some of your readers.

The alternative is to include external video in your IBA project using a custom made HTML Widget. The big advantage is that a one megabyte HTML Widget can play a 70 megabyte video in your iBook. The downside, of course, is that the reader must have an active internet connection and the availability of the video must be maintained. If a video used in your iBook should become unavailable, you can provide your readers with a free upgrade correcting that issue via the iBookstore's versioning feature.

Unfortunately, many people are persuaded not to use this approach because it involves writing HTML code but this post will offer you a way around that obstacle. If you can use a text editor, you can modify an HTML widget template that plays an external video that you select for your iBook. Here's how:

As you'll learn from
this Apple support document, an HTML widget is nothing more than a collection of text files enclosed in a folder with the suffix ".wdgt" added to it. On the Mac, adding that suffix to the folder name changes the appearance of the folder into a widget icon. The minimum HTML widget contains three files: a Default.png file, an index.html file and an info.plist file. I have prepared an HTML widget that you can use as both an example and a template. It is a ZIP archive containing a complete working widget that you can add to a test IBA project. Once you have it in an IBA project you may use the Preview function to see how it works in the iBooks.app on an iPad. Download that HTML widget here and then double-click on it to extract it.

This example widget plays a video called "Open Access Explained" that is hosted on a server that I have access to. In this tutorial, I will show you how to open the widget and modify it so that it will play another video, one that is on a server that I do not have access to, a video that you choose. All I'll have to do to accomplish this feat is to open the widget, change the Default.png file and edit the text of the index.html and info.plist files so that they reference a different video. It's just that easy.

Of course that video must be playable on an iPad so no Flash. These
tech specs provide all the necessary details. The great thing about video on the iPad is that the HTML 5 video tag works without having to create multiple fallback versions of your video (*.mp4, *.ogg and *webm) as one would have to do on a web site. As long as it's using the MPEG-4 H.264 video and AAC audio CODECs, it can be in either a MOV, MP4 or M4V container. More simply, if the video plays on your iPad, it will play in this widget.

The video that I'll be modifying the widget to use in this tutorial is:
http://movies.apple.com/media/us/mac/ibooks-author/2012/tours/apple-ibooks-tour-ipad_ibooks_author-cc-us-20120314_r848-9cie.mov Because I'll be changing the widget to play another movie with different dimensions, I'll need to create a new Default.png file and change all of the references from the old video to the new video. I'll be using the BBEdit text editor but any plain text editor such as TextEdit will do just as well. Here's a screencast showing how this is done. Click HERE or click the image below.




Caveats: Some video services such as Vimeo and YouTube go to great lengths to tie their hosted video to their own web sites so that they can generate data about you and get paid for exposing advertising to you. Thus, it is just a little more difficult to use these videos in an iBook but it can be done. I may take that topic up in the next post.

NOTES:

• About the "auto play" attribute. You'll notice that I use the optional "auto play" attribute in the HTML 5 "video" tag. All HTML widgets take over the entire screen when invoked. Under iOS 6.x (tested), tapping this external video player widget will bring the poster (Default.png) image to full size atop a white background that also displays the widget's title and caption as well as a close button. A standard iOS "play" icon will be superimposed on the center. The video will begin to play automatically without the reader having to tap this play button. The time that auto play takes depends upon the size of the video and the speed of the network. The operating system tries to estimate when it can play the external video without interruption. The reader can always tap the play button prior to auto play. Simply delete the "auto play" attribute if you rather not have this feature operative.

• About the "controls" attribute. I also use the optional "controls" attribute. This provides the reader with a standard video controller with which they can control playback of the video such as audio volume and two "full screen" options as well as a scrubber for moving the play head to arbitrary points along the time line. Simply delete the "controls" attribute if you'd rather not have this feature be available to your readers. The following image shows these various controls and their effects.




Resources:

Safari HTML 5 Audio and Video Guide

iBooks Author: About HTML widget creation