Pimp Your Soundslide from Travis Pratt on Vimeo.
This tutorial will show you an easy way to customize an HTML5 Soundslides shell. This knowledge is helpful for a couple of reasons; first, it allows you to control the look and feel of your Soundslides presentation, while giving you the ability to customize and brand your Soundslides player page. Previously you could have Soundslides.com convert your Soundslides project into a video using their generator. The generator caused undesirable video compression resulting in pixelated images and choppy transitions. Using Soundslides’ new “html5_compatible” shell you can maintain smooth transitions and gain Ipad and Iphone functionality.
The following tutorial is for users who have a working knowledge of Soundslides, basic Photoshop skills and a rudimentary knowledge of HTML and CSS. If you don’t have these skills you can follow the links to find the software and some quick training.
Soundslides is a Flash-based software that allows you to combine still images and audio to create a quick multimedia presentation. The software was designed by Joe Weiss in 2005 and has become an industry standard for creating quick presentations. I would like to emphasize the word “quick,” because the software is billed as “Ridiculously simple storytelling,” and is not the type of software you want to use for creating an over the top presentation. It is useful “slap it together” software for recording some audio, and assembling shoot photos while on deadline.
You can download a free trial and find out all you need to know at www.support.soundslides.com. If you can’t find an answer on the support site, post your question in the forums and Mr. Weiss will get back to you, sometimes on the same day. If by chance you think of something useful that should be included in Soundslides, he’ll probably build it. That’s the kind of guy he is and that’s how Soundslides became what it is today. However, If you’re looking for finite control over your presentation you may want to look at Apple’s Final Cut Pro, or Adobe’s Flash software.
Adobe Photoshop is where we’ll create the graphics we will use in our Soundslides project. You can download a free trial at www.adobe.com/photoshop or use another graphics editor to do the job. Another Adobe software we will be using today is Dreamweaver. We will you use Dreamweaver to edit some of the code used in the Soundslides presentation. You can also download a free trial at www.adobe.com/dreamweaver or use another code editor of your choice. If you want to learn more about these Adobe software checkout Lynda.com’s training library, they have lots of useful tutorials.

In order to speed things up while getting started in Photoshop I created the graphics used in this tutorial in advance. I created a header that brands my Soundslides and a background image that will dress things up a bit. The header graphic I created is 620px x 60px, this is good starting point for creating a custom header. You can determine your own specific size to suit your design. The background I created is 2560px x 1440px. I chose this size because it’s probably the largest resolution used by an average user. It’s important to save your header as header.gif because we will use this specific file name later in our code. For the background we will use Photoshop’s “Save to Web” feature which will reduce the file size of our background image. This will help the file load faster for the user.
- Go to File/Save for Web/
- Click on 4-up
- Make adjustments to reduce the file size of the image
- Save the image as background.gif
Once you have saved your image as a .gif go ahead and close Photoshop.
When you open Soundslides the program will prompt you to create a new project. This project will hold the files used build to build the presentation, including a folder of .jpegs and a .mp3. Once you’re inside of the software find the “Templates” tab in the upper right hand corner. Under the “Templates” tab you will edit the interface and tweak the final look of your presentation. This is also where you will the find “Shells” tab. In this tutorial we want to focus on the new “html5_compatible” shell. So what is the “html5_compatible” shell.
“This shell is the same as the default Soundslide player, except it uses a standards-friendly W3C-valid method to embed Flash content, SWFObject 2.1. It also uses an HTML5 version as the fallback when displayed on an Apple iPad or iPhone.”
Knowing this “Shell” is so powerful let’s take a look under the hood of Soundslides and see what is housed in the “Soundslides” folder with the “Applications” folder residing on your computers hard drive. Opening the “Shells” folder we can find the same shells that we are able to load in the Soundslides program. If you open the“html5_compatible” folder you will find all the files that make this particular Soundslides shell so useful. In this folder you will find the Flash, Javascript, HTML, CSS and JQuery files used to make the presentation work.
Before you start editing these files, back out of the “html5_compatible” folder and make a duplicate of the shell. This will allow you to work on a copy of the shell, just in case yous accidentally crew something up, you will maintain the original.
Simply copy and paste this folder inside of the “Shells” folder and you will now have a folder called “html5_compatible copy.” In order to prevent confusion between the two folders, Rename this folder as “html5_pimped.” Now you have a copy of this shell and are ready to get started with the customization.
1. Open a new Finder window and copy and paste the graphics files, we created earlier in Photoshop, into the “_files” folder that is located within your “html5_pimped” shell.
2. Drag and drop the “index.html” file on the Dreamweaver icon, this will allow us to edit the HTML and do some CSS styling.
3. Within the “index.html” file replace the “background color” CSS, at line 9, with the following code:
body{
margin:0;
background-image:url('_files/background.gif');
}
4. Add the following code at line at 116, just below the div id=”slideshow” tag
<div id="top"><img src="_files/header.gif"></div>
(You have now inserted our header file and our background file.)
5. Finally, add the following CSS between your style tags at the top of the page, where you previously inserted your background image. This code will add style to your new header and space out the Soundslide player.
#top {
background: #FFF;
padding: 50px;
height: 50px;
border-bottom:solid 5px #000;
}
body{
margin:0;
background-image:url('_files/background.gif');
}
#slideshow {
margin-top:100px;
}
6. Save your styled “index.html” document and close Dreamweaver.
7. Open Soundslides and return to the “Templates” tab and click on “Shells” just below. We will now select our newly created “html5_pimped” shell. This is also a good time to select our “Display” settings. I’ve selected the following:

8. Now save, test and export our Soundslides project. Once you export the “publish_to_web” folder will appear. This is the folder that you will upload to your server. The folder is located in your original project file that you created when you began. I generally copy and pase the contents of the “publish_to_web” folder into a new folder on my desktop and give it a more specific browser friendly name.

Once you’ve uploaded and tested the flash version on your computer, check to see if the HTML5 works on an Ipone or an Ipad. If you prefer to embed your Soundslide into a blog post you can use the following URL to grab the embed code for the project.
www.yourwebsite.com/publish_to_web/index.html?embedcode