Converting a Print Catalog to an Interactive Web Catalog Part 2

This is part 2 of my tutorial on converting a print catalog to a web catalog with interactions. Part 1 can be found here. Part 3 can be found here.

Your file should be similar to the one pictured below, notice I have my layout adjusted for button placement. If you choose to add height or width to your canvas yours will be a bit different. The point is the file needs to be ready to add buttons at this point of this tutorial.

catalog-ready-buttons

Adding Buttons

You are going to want to make this part as easy as possible especially if you have a rather large document. I made a new layer in my layers panel and called it navigation. This way all my navigation was on the same layer and I could click it on and off at a click of the switch. Next select master pages in your pages panel. We are going to add buttons here first because if you used your master pages wisely then this will complete most of you navigation throughout the catalog. In my case it completed all my navigations except for the front and back pages. Make sure if you’re adding sound that you have that file downloaded and ready to use because we are going to add this with our buttons.

I made 1 file in Photoshop for my buttons, you maybe using the InDesign pre-made buttons instead but the details will be similar. When I placed my file I turned on or off the layers of my Photoshop file, as needed depending on which part of my navigation I was placing. Notice the image below, there is a show import options check box, if you check this box (in the image mine is unchecked) then when you import the Photoshop file you can choose which layer is or is not showing. This I thought was a handy dandy trick. At this point I am just placing or importing the pieces I need for my navigation. Don’t worry about the button options yet we will get to those right now just get the look you want down pat. With my master pages selected I placed my navigation file into my document, making sure my navigation layer is selected so they would be on the layer I needed them to be. Adjusting the placement so that the image falls in the middle of the 2-page spread.

import options

Now that we have our images for our navigation in place, the next thing you want to do is import the sound file. We want this inside the document so that when we make out buttons function the sound is going to be an option. All you really care about at this point is that InDesign knows there is a sound file attached to the document. Place the sound file somewhere near the navigation file, it doesn’t matter really where because we are going to make sure it doesn’t show up anywhere. The user will not see this file at all. When I imported mine it looked like an empty box with no pictures. If yours has an image you are going to want to get rid of that. Which can be done from the media button on the right of your screen. I went even further in hiding this file and placed it on my background layer but that isn’t necessary. We just don’t want that to show to the user. Your file should look similar as the image below.

buttons-placed-no-nav

Now you need to select an object you want to make into a button. I am selecting the next page button the one on the right. Then I select the button feature panel on the right hand side of your screen. (See image below). When you open the button options panel look at the bottom right there is a little icon that looks like a round corner box with an arrow in it. This makes your object into a button click that icon. (See image below).

convert-to-button-options

Notice after you click convert the options panel changes as well as the outline of your image. The image now has a dotted line instead of solid this indicts you have converted it to a button. (See image below). Now we add functions to our buttons. First name your button in the name line. I called the one I’m working on here next or next page. The event should say “on release” which is what we want. It means when the user releases their mouse button whatever function you assign this button is going to happen.

Now we are going to choose the plus sign near the word actions. This is going to allow us to add an action to our button, in my case I added next page. Now click that plus sign again and add the sound file too. The sound should be an option in the panel if you placed the file from the previous step I gave you. Mine was automatically selected, as it was my only sound file. You may have to manually select yours.

convert-to-button-options-2

Repeat the steps for the previous page button as well. My center button went to a specific page in my catalog, in my example I mentioned in part one of this tutorial it went to my table of contents page. In this example I am choosing for it to go to the cover, as there isn’t a table of contents in this catalog. Leave the center button out if you like or just repeat the steps and choose which page you want it to go to. Check all you pages and make sure that the buttons look the way you want them to and aren’t covering any of your content up. If you find a page that needs adjusting just use the override master page option on that page and place the buttons differently or move the content. Do remember if you move the buttons this will make it different then the rest of your pages, so I would probably alter the content and not the buttons.

Now that you have the buttons made for most of your catalog you need to fix the front and back page buttons. The steps are the same as what we just did only you do it on those pages rather than the master page. In addition, you will need to use override master pages option mentioned before in this tutorial.

At this point you should test your file. You don’t need to test all the pages just a few. You want to make sure your sound and buttons are working correctly. Just like we did in part 1 of this tutorial make a .swf file for a few of your pages so you can see how well you’re doing.

If you tested this by making a swf file with sound, this next part applies to you. Take a look after you saved a .swf file at your folder. Notice that InDesign added a new folder in there. (See image below). Mine is called Burton-Catalog-VSI_Resources. Yours of course will be named something else. But it will say _Resources. This file is and will be important when we get to the uploading the file(s) to your website. So it is important you note the file and the name. This is only if you added sound to your catalog.

file structure

At this point we have dealt with the following problems:

  • white area next to your front page – or blank areas looking white in swf
  • navigation
  • page animations
  • page turning sound

We still have these issues to deal with:

  • scroll bars on the HTML File
  • file is off centered
  • doesn’t fit the window correctly

Part 3 of this tutorial will deal with the HTML, CSS and uploading of this to a website. At this point we only have the problems of the appearance in the browser. Hope to have that part for you early next week.

Leave a Reply