Build the presentation

Overview

Next we’ll build the presentation with all of the visuals and audio for the video.

jhVids videos use a purely visual format that emphasizes screenshots and images over text and bullet points.

Tools

jhVids offers multiple tool options for building your presentation.

Option 1: jhVids Builder

The fastest and easiest option to use is jhVids Builder.

This is a progressive web app that takes your presentation’s component elements that you gathered in previous steps — images, text, and basic configuration — and plays your presentation in the browser.

This application requires the Chrome or Edge browser.

You then use a video capture tool like SnagIt or Camtasia to capture the video as it plays in the browser. You’ll trim any dead space from the beginning and/or end before saving the video file from your video capture tool.

Set up the video assets for jhVids Builder

First, create a new folder on your hard drive.

In that folder, create a config file named config.json.

The config.json file includes the following settings:

• title: The video’s title
• category: A short category name for this video
• date: The date for this video’s content
• musicApproach: One of background or intro-outro.
  • Use a value of background if you would like one music clip to play in the background throughout the video.
    • The background music clip will loop if the presentation is longer than the music clip. If this is the case for your video, be sure to use a background music clip that was designed to loop, i.e. the beginning and end of the clip line up seamlessly.
  • Use a value of intro-outro to have an intro music clip played at the beginning of the presentation and a separate outro clip played at the end, but no background music played during the slideshow.
• backgroundMusicVolume is the volume level to use for the background music clip, expressed as a floating value between 0 and 1.
  • E.g. a volume level of 0.66 plays the music clip at 66% volume.
  • This value is only used if musicApproach is set to a value of background.
• introMusicVolume is the volume level to use for the intro music clip, expressed as a floating value between 0 and 1.
  • E.g. a volume level of 0.25 plays the music clip at 25% volume.
  • This value is only used if musicApproach is set to a value of intro-outro.
• outroMusicVolume is the volume level to use for the outro music clip, expressed as a floating value between 0 and 1.
  • E.g. a volume level of 0.5 plays the music clip at 50% volume.
  • This value is only used if musicApproach is set to a value of intro-outro.
• fadeFromBlackSeconds specifies the number of seconds for which to display the initial fade from black.
  • This delay gives you time to start your video capture software before the presentation starts.
  • A value of around 3 seconds is typically good here.
• introSeconds specifies the number of seconds for which to display the intro title slide.
  • A value of between 5 to 7 seconds typically provides enough time for the intro music to play before the initial slide’s voiceover begins, but you might want to experiment with this number to get the best result for your presentation’s music.
• outroSeconds specifies the number of seconds for which to display the outro (final) slide, before fading to black.
  • A value around 4 seconds typically works well, but you might want to experiment with this number to get the best result for your presentation’s music.
• fadeToBlackSeconds specifies the number of seconds for which to display the final fade to black.
  • A value of around 3 seconds is typically good here.

Then add each of the following files in that same folder:

• title-image.xxx
  • This is an image that displays in a circle within the title slide.
  • xxx is an image file extension, such as png, jpg, gif, or webp.
  • The image should relate to the topic of the video.
  • This image ideally should not include text. Only the center portion of the image displays within the circle, so any text might be cut off.
• music-background.xxx
  • A music clip played in the background throughout the video if musicApproach in config.json is set to a value of background.
  • xxx is an audio file extension, such as m4a or wav.
  • The volume for this audio clip is specified by backgroundMusicVolume in config.json.
  • The background music clip will loop if the presentation is longer than the music clip. If this is the case for your video, be sure to use a background music clip that was designed to loop, i.e. the beginning and end of the clip line up seamlessly.
  • Check out our collection of available background music clips.
• music-intro.xxx
  • A short music clip played at the beginning of the video if musicApproach in config.json is set to a value of intro-outro.
  • xxx is an audio file extension, such as m4a or wav.
  • The volume for this audio clip is specified by introMusicVolume in config.json.
  • Check out our collection of available intro music clips.
• music-outro.xxx
  • A short music clip played at the end of the video if musicApproach in config.json is set to a value of intro-outro.
  • xxx is an audio file extension, such as m4a or wav.
  • The volume for this audio clip is specified by outroMusicVolume in config.json.
  • Check out our collection of available outro music clips.
• slide-image-n.xxx
  • The image file for slide n, where n starts with 1.
  • xxx is an image file extension, such as png, jpg, gif, or webp.
  • For example, slide-image-03.png would define a PNG background image to use for slide number 3.
  • This image must have a 16:9 aspect ratio in order to fully display.
• slide-text-n.txt
  • The text that will EVENTUALLY be read as the voiceover for slide n, where n starts with 1.
  • For example, slide-text-02.txt contains the text to read as the voiceover for slide number 3.
  • These .txt files are optional today, but will be used as the text-to-speech source for each slide in the future, so it’s a good practice to start including these files today so you’re ready for the text-to-speech support in the future.
• slide-audio-n.xxx
  • The audio voiceover clip for slide n, where n starts with 1.
  • Today you must use a text-to-speech app to manually create these audio clips, but in the future these will be auto-generated by the jhVids Builder app. We’re waiting on Digital Ground Control to set up the GCP environment needed for this.
  • xxx is an audio file extension, such as m4a or wav.
  • For example, slide-audio-02.wav would define a WAV audio file to use as the voiceover for slide number 2.
  • The audio clip for each slide always plays at 100% volume. This acts as a baseline against which you can set your intro/outro or background music volume levels. Background music must never overpower your audio clips.

Play the video with jhVids Builder

• Open the jhVids Builder web app.
• Press the Open slideshow button.
• A folder selection dialog box displays. Open the folder that contains your video files.
• The browser displays a popup asking for permission to view files in that folder. Press the button that grants access to that folder.
• After a moment, you’ll see the information for your video displayed in the screen.
• Press the Start the show button to play your slideshow.
  • If you’re ready to capture your video, you’ll need to start SnagIt or Camtasia to capture the browser before pressing this button.
  • You may need to resize your browser window so that its output is at a 16:9 ratio. Displaying the browser full screen can often help with this.
• Press the Close this slideshow button to close this slideshow.

Option 2: PowerPoint

A more complex option is to use the desktop version of Microsoft Powerpoint for this step, where you build a presentation in PowerPoint, set up the background music, add the slide images, add the slide audio clips, then export the presentation to video. This is the more complicated option, but it allows you to manually add animations within a slide.

The instructions below assume that you’re using Powerpoint for this step. All Jack Henry employees already have a license for PowerPoint. If you don’t have PowerPoint already installed, you can download it from office.com.

Download and save the jhVids PowerPoint example presentation to your local drive.

Open the example presentation in PowerPoint. The first slide you see is the fade-from-black slide. This implements the opening fade from black and starts playing the intro music.

• Click on and delete the yellow instruction box, but leave the rest of the side as it is.
• Move to the next slide in the presentation.

The next slide is the title slide:

• This slide came from Jack Henry Marketing, so we’re trying to stay consistent with their styling.
• Click the “type of presentation” box and enter text to describe what type of presentation this is.
• Click the “presentation name” box and enter a title for your presentation.
• Click the “Click icon to add picture” text and select an image to display in the circle. You can use one of the images from your presentation if you like. Make sure that the selected image looks good in the circle mask.
• Click the date at the bottom and enter a date value that makes sense to you.
• Click on and delete the yellow instruction box, but leave the rest of the side as it is.
• Move to the next slide in the presentation.

The next slide is an example slide that already has a background image and audio clip, illustrating how those work.

• Notice that the background image is at a 16:9 aspect ratio and fills the entire slide background.
• Notice that the audio clip hides when the presentation displays.
• Notice that in the Transitions tab, the page transition is set to Fade, with a duration of 0.7 seconds, On Mouse Click is unchecked, and After is checked with a value of 00.00.
• Delete this entire slide from the presentation as its only an example.
• Move to the next slide in the presentation.

The next slide is an animation example slide that illustrates how PowerPoint animations can be used to add even more life to your presentation.

• Go to the Animations tab in the PowerPoint ribbon and press the Animation Pane button.
• Examine each animation in the animation pane and see how they’re configured.
• Learn more about PowerPoint’s powerful animation support.
• Delete this entire slide from the presentation as its only an example.
• Move to the next slide in the presentation.

The next slide is a blank slide.

• Insert the background image for the slide using Insert > Picture:
  • Crop the image to a 16:9 aspect ratio:
    • Click Picture Format in the ribbon.
    • Click the small arrow to the right of the Crop button and select Aspect Ratio from the popup menu, then select 16:9 under Landscape.
    • A crop preview displays. Move the image around as needed to get the best coverage, then click outside of the image to select that crop.
  • Align the image’s top-left corner with the top-left corner of the slide.
  • Holding down the Shift key, grab the image’s bottom-right resize handle and drag it down to the bottom-right corner of the slide.
  • You should now have a background image that fully covers the slide background.
• Insert the audio clip for the slide with Insert > Audio:
  • Use the Audio from file… option and select the Audio - Slide XX.m4a file that you previously created for this slide.
  • You’ll see a large audio icon in the center of the slide. Click that icon, then click Playback in the ribbon.
  • Check the Hide During Show checkbox, otherwise that icon will be visible in your presentation.
  • Switch to the Transitions tab in the ribbon.
  • Select the Fade transition for the slide.
  • Make sure that Duration is set to 00.70 seconds. This is how long the fade transition takes.
  • Make sure that On Mouse Click is not checked. We want the slide to move forward after a set number of seconds, not when we click the slide.
  • In After, enter a value of 00.00. This will cause the slide to display for as long as the audio clip plays, which is typically what we want.
  • If the audio clip has too much dead space at its beginning or end, Go to Audio Format | Playback and press the Trim Audio button. Use the popup to trim off any unwanted dead space.
• Click on and delete the yellow instruction box.
• Duplicate this process for each slide in your presentation.
• When you’re done with all slides for your presentation, move to the next slide in the presentation.

The next-to-last slide is the outro slide that displays the Jack Henry logo and plays the outro music:

• Click on and delete the yellow instruction box, but leave the rest of the side as it is.
• Move to the next slide in the presentation.

The last slide is the final fade-to-black slide:

• Click on and delete the yellow instruction box, but leave the rest of the side as it is.
• Save your changes to the presentation. Your presentation is now complete.

Option 3: Traditional video production tools

Alternatively, if you’re comfortable with traditional video production (most people are not) and are looking for more high-end video production features, then obviously feel free to use Adobe Premiere, iMovie, or any other video production tool for this stage. The jhVids workflow was designed to help teams that are not experienced with traditional video production, but most of its steps can be included in a more traditional video production workflow too.