Web Teacher: Help for teachers and learners of Web Design

Tips, web design book reviews, resources and observations for teaching and learning web design.

Taking Fireworks CS3's new Create Slideshow option out for a ride around the park

If you don't own Fireworks, skip down to the end for some options just for you.

When I decided to try out the Fireworks CS3 slideshow builder, I went straight to the Fireworks menus. I choose Commands > Create Slideshow. The slideshow dialog window shown below opens. I quickly discovered that it was going to be easier to create the slideshow if I had the images I wanted already open in Fireworks.

Fireworks Slideshow Dialog Box

I canceled out of the dialog and opened a batch of images. It was easy to make the slideshow when the set of images were available in Fireworks. The accordion panels on the right control all the various settings. I tried it in several different ways and created/overwrote it several times in order to get an understanding of what all the settings in the property panels on the right actually did.

Here's how the dialog box looked after I'd added some images and set up some of the properties.

Slideshow dialog box with options set

All this restarting and recreating took me about 45 minutes to get a finished product that I was happy with. In my mind, this is not too bad for the first time I use a tool. The next time I make a slideshow, that time will go down dramatically.

Fireworks generates quite a few files including scripts and the .swf file. These all get deposited on your hard drive in a folder of your choosing. With a couple of JPEGs that I'm using for the screen shots shown in the folder too, here's an image of what Fireworks generates. Fireworks put the slideshow on a page called index.html.

files generated for the slideshow

It seems to me that with Fireworks and Dreamweaver so closely intertwined now, I should have been able to import the relevant material from index.html onto the Dreamweaver-built page you are reading (slideshow.html) to discuss it all in one place. However, I couldn't find a way to do it anywhere in the menus. Since I was trying to accomplish this without reading any help files—going on what was intuitively apparent—I had to resort to copy/paste.

If you do the copy/paste routine, remember there's a link to a JavaScript in the head of the HTML file Fireworks generates. Also take note that there's an XML file containing the album image information that is needed to run the movie. Presumably because of the need for XML, the generated HTML file coming out of Fireworks uses this opening line:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Here's how my first effort turned out.

I looked at how this masterpiece page held up under some online testing. The first thing I noticed was that my usual Transitional HTML 4.01 DOCTYPE, the movie wasn't going to work in every browser. I switched to the opening html line I quoted above and it worked in every Mac browser I tested with. I didn't test in IE. Without my usual DOCTYPE, I didn't feel safe adding this to Web Teacher as a normal blog post, either. Hence, you're reading it in a separate page

The HTML validator complained loudly about the lack of a standard DOCTYPE. It also pointed out a number of errors you can expect when using a combination of JavaScript, object elements and embed elements to get a Flash movie to work in every browser.

It failed accessiblity testing because there is no alternate material or content for the Flash movie.

My conclusion is that this is a big improvement over the way I used to make slideshows. I've made them in the past in Photoshop and Flash. The ones in Photoshop were ugly (frames? save us), but that was several versions back. The ones I made in Flash were too hard to update or change. With Fireworks, in spite of my learning curve glitches and refusal to read any Help files, I ended up with something that would be useful in many situations. And it's easy to update.

Options for people who don't own Fireworks CS3

Here are a couple of Web 2.0 alternatives if you want something different or if you don't own Fireworks.

I wrote about a free online tool for making slideshows called Slide recently at BlogHer. It is an easy online application. Here's a slideshow I made using that free tool. You can make other cool image sharing doodads at Slide. There are a number of skins. Some of their offerings work with music. It uses images from Flickr or your hard drive and it generates code specific to all sorts of blogging software so you can put your work on your blog. Slide is not only free, it's really easy.

Calling itself "the end of the slideshow," Animoto takes your images and pushes and twists them into something like a music video. Photos can come from Flickr or elsewhere, and be published when Animoto has done its thing. The best I can tell without actually signing up and making something, Animoto is free.

Any comment?

Return to the originial blog post to leave comments.

Technorati Tags: , , ,