Soundslides

Publishing Your Project To The Web

Once you have made all of the edits to your slideshow, you can now publish your project for the Web. There are several ways to do this depending on your system. We will attempt to explain some of the more popular routes to publishing a SoundSlides project.

Video export plugin (Mac OSX only)

By far, the easiest way to publish a SoundSlides project to the Web is to use the new SoundSlides video export plug-in. The plugin will create a self-contained video file of your slideshow that can be uploaded to most popular Content Management Systems, or even uploaded to YouTube.

However, if you use the video export plug-in, you will lose many of the standard features of SoundSlides in your slideshow, including captions, headlines, titles and movement of slides.

Detailed instruction on how to use the plugin, and the download location, can be found on the SoundSlides plug-in page.

http://support.soundslides.com/index.php?pg=kb.page&id=41

It is currently only available for the Mac OS for a cost of $19.95 (Dec 2008)

Uploading a SoundSlides project to a Content Management System or a blog

There are several ways to integrate your SoundSlides project into a Content Management System. The process can vary depending on how the system is setup. For each case however, there are some fundamental similarities to this process.

Step one will always be clicking the Export button after you have completed the project.

Export for Web button

This will generate a folder called publish_to_web which has all of the files necessary to display a project. You can rename this folder if you wish, but it is important to keep all of the contents of this folder intact for the project to work.

Soundslides export files

You will need to upload this entire folder and its contents to your Web server. In most organizations, this will require the help of an administrator. If you have FTP access to the Web server, then you can upload the files yourself, but it is critical to make sure all of the files and sub-folders get uploaded and the names are preserved.

Next, find the URL to the publish_to_web folder, based on where you uploaded it to.

Example: http://multimedia.journalism.berkeley.edu/media/upload/tutorials/soundslides/publish_to_web/

Copy the URL to your clipboard. The SoundSlides Web site make available a very handy utility for generating Flash embed code for inserting the project into your content management system. Visit the Web site:

http://www4.soundslides.com/apps/utilities/

And paste in the URL to your slideshow (i.e. publish_to_web folder)

Pasting in the URL for SoundSlides to generate embed code

The SoundSlides Web utility will automatically generate some Flash embed code based on the URL you submit. After clicking Continue, the site will also allow you to specify the size of the slideshow. SoundSlides, by default, exports the slideshow in several sizes. If you are going to embed the slideshow into a smaller column or a post, it is likely that you will have to reduce the size using those options.

SoundSlides site generating embed code

Copy the code, and you can paste it in to any form on your Content Management System that accepts HTML. MySpace and Facebook are sites that accept this code as well.

Some content management systems have an html mode or require you to place <code> ... </code> tags around external code. You should do this if your system requires it. See example below:

Pasting embed code into the CMS

Uploading your SoundSlides project into WordPress

While the method above will work for importing a slideshow into WordPress blogs, there are several third-party plugins that allow you to upload your slideshow project to the server as a zip file.

The SoJ SoundSlides plugin allows you to compress the contents of your publish_to_web folder (not the folder itself) to a .zip file, and then upload that single .zip file in the same manner you would an image to your blog. The plugin will automatically extract the files to create your publish_to_web folder.

The WP-SoundSlides plugin is a little more polished, but requires that the user has FTP access to the Web server. In this case, you would upload your publish_to_web folder, and use a new button on your formatting bar to insert the project into a post.

The SoundSlides Web site also contains tutorials on how to embed a slideshow into a post manually using the methods described above. They include tutorials for both WordPress and Blogger.

Uploading to a static Web page

A static Web site refers to a Web site that was built manually. You may have used a program like Dreamweaver to do this. It's considered "static" because the content is not automatically updated, as the case with a Content Management System. There are three methods to uploading your SoundSlides project to a static Web site.

Method 1) Linking to the SoundSlides project

Soundslides actually creates a pre-built Web page for you when you export. If you need a simple way to get your SoundSlides project up on the Web, then you can simply link to the generated Web page. 

Click the "EXPORT" button at the bottom of your project window. (This is necessary)

Export for Web button

Once you click this button, SoundSlides will gather all of your images and audio, and create a "Publish_to_Web" folder inside your main project folder.

The contents of your publish_to_web folder will look something like this:

Soundslides export files

The entire contents of your publish_to_web folder IS your final exported project. The files may vary from those listed above. For example, you might see a custom folder if you elected to specify a custom size.

Simply create a link to the index.html file that is inside your publish_to_web folder. This eliminates an enormous amount of hassle of embedding the actual project within your page.

To do this in Dreamweaver, highlight the text you want to link to your Soundslides project (you can also highlight elements like a photo), then click the folder icon on your property inspector and choose the index.html inside your publish_to_web folder.

Example:

Linking to Soundslides project folder

It's important to note: You MUST include all the files in your publish_to_web folder on the server you are publishing your Web project to. 

Method 2) Copy-and-paste the embed code

This method is considerably more difficult, especially for people who have never dealt with HTML code. If you need to embed your Soundslides project in a Web page, here's one way to do it:

First, upload your publish_to_web folder and its contents to the Web server you will be using. Next, find the URL to your project and visit the following site:

http://www4.soundslides.com/apps/utilities/

Paste in the URL to your slideshow (i.e. publish_to_web folder)

Pasting in the URL for SoundSlides to generate embed code

The SoundSlides Web utility will automatically generate some Flash embed code based on the URL you submit. After clicking Continue, the site will also allow you to specify the size of the slideshow. SoundSlides, by default, exports the slideshow in several sizes. If you are going to embed the slideshow into a smaller column or a post, it is likely that you will have to reduce the size using those options.

SoundSlides site generating embed code

Copy the embed code.

In Dreamweaver click on the "Split" view icon.

Split option in Dreamweaver

You will notice that your main project area splits into two segments; one for code and one for the design. Whenever you click in the design portion of your Web site (the bottom area), the cursor will automatically move to that corresponding location in your code at the top. This is how you find the spot in your code that you need to paste in the Soundslide's <embed> tags for your project.

Split view in Dreamweaver

Once you have found the location where you want to paste your project, paste in the embed code from the SoundSlides utility site into the code window at the top. In Dreamweaver, you will not see the slideshow appear at the bottom, rather you will see a grey box that serves as a placeholder for your slideshow.

Method 3) Using Dreamweaver's Embed function

Dreamweaver has some pre-built Flash embed options built into it. With these tools, you can embed a Soundslides presentation. This method is a little tricky and is designed for advanced users of Dreamweaver.

In Dreamweaver, click on the INSERT menu at the top of the screen, then select MEDIA --> FLASH.

A dialogue box will appear asking for your flash file. Navigate to your publish_to_web folder and select your SOUNDSLIDER.SWF file (not the index.html file).

IMPORTANT! Do not click OK, instead, you must set two parameters for Soundslides to work correctly. Press the "Parameters" button. This will allow you to add two very important parameters: The size of your slide show, and the method it uses to process data.

Setting parameters for Soundslides

For the parameters you want to set:

"size" with a value of "1"

"format" with a value of "txt" (or XML if you are using the latest version of soundslides)

(note: If you wanted to use the smaller version of your project, set the size to value "0")

Click OK. 

You are almost there, just one last step. Dreamweaver cannot determine the size of this Flash project since it is dynamic (flexible). So you will have to set the size yourself. In the property inspector, set the size to 640 width and 533 height. (note: if you are importing the smaller version of your project, you will have to set the size to 420 by 383.)

Set the size of Soundslides

Test your movie. Remember, you will need to keep all of the files in your publish_to_web folder intact in order for your slide show to work.

Comments

1) Milan Andric, February 5, 2008 at 2:21 p.m. [Link]

There's also a tutorial for publishing to wordpress here:

http://www2.soundslides.com/support/index.php?pg=kb.page&id=71

Add your comment

Login to post a comment.