Converting a Print Catalog to an Interactive Web Catalog Part 3

This tutorial is part 3 in a series. Part 1 of this tutorial can be found here. Part 2 of this tutorial can be found here.

Now that our catalog has navigation, animation, and sound we want to upload it our website as well as fix the display issues we saw in part 1 of this tutorial.

We are going to export our files to our server a full version this is so we can work out issues first then we can tweak the code as needed. It In part 2 of the tutorial I showed you the your-file-name _Resource file that InDesign adds to your file system when you export to an SWF file. This file is important to make sure your sound will work correctly. Wherever the HTML and SWF files go that folder has to go with it so that the SWF file works for the viewer. In the end, we are going to be uploading 3 files and making 2 files on our server.

The first thing we need to do is create our SWF file. This will create all the files we need for our server. Go to file > export. A save box appears, make sure your file is marked .SWF click save.

swf-save

Your Options will pop up next. Below is an image of the settings I used. It should be noted here we can solve the issue of off centered and window fitting simply by reducing the scale from 100% to a lower value like 75%, this would solve the problem. However, if you have text in your catalog it makes that very hard to read for the user. A second option would be to find a fit to width. But then certain devices are going to have a hard time seeing it as well. So I figured it was best at 100% and then maybe tweak the code to make it function for as many people and devices as I can.

Notice I have the range selected and have placed the total number of actual pages I have. Remember from part 2 of this tutorial we made a dummy page for page 1 that we didn’t want to use. So I am making concessions for that here when I save it. You want Generate HTML file checked as well as the View after exporting.

Make sure to include all interactivity and media. This ensures you have your page turn animations and the sound. Background paper color is fine because we have fixed those issues in part 2 of the tutorial.

We don’t need the interactive page curl as we have the page turn animation already. However, it isn’t a big deal if you included it. Click ok when you get the settings right.

swf-settings

Now we need to access our server and upload the files there. Your server may be set up different than mine but it should be similar in the basics. You’ll need FTP access. My website runs on WordPress so the folder setup is likely different from yours. In my case, my new folder is going to go into my uploads folder. You can make yours anywhere, just be sure to note the URL it will have when finished.

Create a folder name it exactly the same name you have your .swf file and HTML file in. It must be the same name! Do not call it something different your code in the .swf and HTML only know that name. Mine is called Burton-Catalog-Folder.

Within the folder you just made make another folder name it the same exact name as your _Resources folder is named. Mine is Burton-Catalog-VSI_Resources. Navigate to your resource folder. This is the folder you want to upload your sound file too. It is extremely important that all files are named the same name and have the same file structure as the files on your computer. Upload sound file to your _Resources folder on your server.

Return to the main folder you made (mine is Burton-Catalog-Folder). Upload both your HTML file and your SWF file. Once all your files are uploaded, make a note of the URL of the HTML file so you can place a link on your website to that file. You can test it by trying to pull it up in your browser. If your browser doesn’t pull it up then you have a problem with the URL you wrote down, a mistyping or your file structure.

My URL looks like this.
http://webgoddessdesigns.net/wp-content/uploads/Burton-Catalog-Folder/Burton-Catalog-VSI.html

godaddy-file-structure

Once all the files have been uploaded the only file we have to upload again is the HTML and that’s easy. We need to edit the HTML and add a bit of CSS to our file to get it to display correctly. The hardest stuff is done now.

Now we are pretty much done working with InDesign and we are now moving to Dreamweaver or whatever text editor you use for coding your HTML. Open the HTML file InDesign made in Dreamweaver (or other editor).

The first thing you are going to want to code is this highlighted section of the image below in the head section:

meta-tag

This is a piece of code that lets you change the date. So if you ever update the catalog you place that date up there in the code. Then when a user who has already viewed your catalog will get the fresh version and not the old version. The file gets cached and won’t show the new one without using a date.

Next, I added this to the head section. This makes sure that the video/SWF file shows up in the IE browser. Not entirely sure which versions of IE it effects but I know it is needed for IE8.

if-ie-statement
**Sorry it isn’t in a copy mode. The code wouldn’t show up on the page, even with WordPress’ code tag.

Then after the body tag area, I added a div around the movie script. This div also had inline styles attached to it. The beginning should look like this code below. As you can see we added inline style to the div. The text-align will make sure the movie is centered in the window. And that the width is 100% of the window. I also gave it an id in case I ever needed to use it in a style sheet.

movie-div-tag
** The highlighted portion is what you need to add, in the area shown in the image.
** Special note here, IF you wanted to change the body coloring this would be the area to do that in, this would mean you need to change those grey colored pages we made back in part 2 of this tutorial. This would allow for further customization of your final product.

The div ends after the closing script tag. The highlighted portion of the image below is what you will need to add.

movie-div-tag-ending

The final thing we are going to change is the size of the video itself. You’ll need to find the part of the movie code that looks like this image below. Your final sizing might be different than mine I’m not sure, but look for the part of the code that is similar to mine.
movie-size
**The highlighted part of the image is what we are going to change.

We are going to change the size of the video to 100% instead of the above code. So your code after you make your changes should look the highlighted portion of the image below.

movie-size-changed

The 100% settings we added help to make sure that screens of different sizes can see the catalog. They only need to right click the screen and choose > show all from the drop down menu.

Now save and upload your HTML again to the server. Basically, replace the HTML you currently have there with this one. I should mention that SWF files are Flash files, which means certain devices (for example Apple devices) won’t be able to view this at all. So do be aware of that issue.

I hope that this tutorial helps you guys out in some way. Share your final project with me on my Facebook, Twitter, or Google Plus page. Can’t wait to see how yours turned out.

Leave a Reply