Using Conveyor Version 2

The basic concept

A Conveyor presentation consists of a main or background image onto which you can place hotspots, areas that can be clicked-on to link to other files, such as:

• a page
• a picture
• a sound file
• a movie
• a web page

On the page below is an introductory tour (and User Guide), written by one of our development team, that walks you through the process of making a simple Conveyor v.2 presentation.

After you have taken the 'tour' but before you try the system for yourself, do please read the additional advice offered in What a Conveyor v.2 Presentation Looks Like, Planning a Presentation, Useful Software and System Requirements.

The information set out in the tour (User Guide) below and in the four links we have provided in this section should enable you to have a trouble-free and enjoyable authoring experience.

 - - - -

Conveyor v.2 - Introductory Tour and User Guide

Hi, my name is John, and I am going to take a guide book for a historic house and turn it into an interactive presentation. Helpfully, I have most of the original artwork, images and text that were used to make the guide book. The basis for my presentation is an artist's drawing of the historic house with one of the side walls missing to reveal the rooms and other spaces inside.

I am going to use this drawing as the Main Picture for my presentation and then add hotspots over some of the rooms that will link to pages containing more information about them. First I need to login to my Conveyor account.

Login

To login to an account, or to register for a new one, go to the home page of the Conveyor website at: www.getconveyor.com. If you do not already have an account simply complete the registration form and click on 'Register' to create one. If you already have an account then click on the 'Login' link.

Beginning a new project

Once logged in we can see the Projects page. At the top there is a list of my previous projects, while below is the dialogue box where I can start my new project.

To begin my new project I write the name of my project, 'Town House'.

Next, I need to choose the Main Picture for my project, which is going to be the drawing of the house I mentioned earlier. To do this I click on the 'Browse' button and then locate the digital image of the drawing on my hard drive. When I have done this the path to the image will appear.

Finally, I click on 'Build this project'.

There is now a short delay while the system uploads my image into my project.

Once this is done, I am shown the Project Editing page which contains my Main Picture and a number of controls along the top:

• Projects
• Files
• New hotspot
• Change main picture
• Preview

We will look at how to use these controls as we make the presentation.

First though, I am a bit concerned because my Main Picture appears too large for my presentation. To check this, I click on 'Preview', which lets me see my presentation as it will appear when it is finished. This loads into a new tab in my browser.

Now that Preview has loaded I can see that the Main Picture of the house is too large and does not fit into the browser window. As a result, the system had added a Navigator Tool to the bottom of the page.

Navigator tool

The Navigator Tool consists of a miniature version of my Main Picture on top of which is a red rectangle, which represents the browser window. By grabbing the rectangle and dragging it from side to side, or up and down, I can move the Main Picture around in the browser window. This is very useful if you deliberately choose to use a large image, perhaps one that is very long, like a panorama picture, or one that includes a lot of detail.

Changing the main image

For this presentation, though, I want the Main Picture to fit into the browser window without the need to move it around, so I need to change the image file for a smaller version. I have one on my hard drive that is 1100 x 750 pixels in size, which should be fine.

So I close the tab with the Preview in it and return to the Project Editing page, where I click on 'Change main picture'.

The 'Picture Picker' dialogue appears. As before, I click on the 'Browse' button and locate the image on my hard drive. When I have done this the path to the image will appear in the field in Box 1. Then I add a title in Box 2, a description in Box 3 and click 'Use this file'.

Once the new Main Picture image has loaded it appears to be the correct size. To confirm it, I click on 'Preview'. The preview appears in a new tab and I can see that the Main Picture now fits the browser window and the system has not added the Navigator Tool because it is not needed this time.

Note: If I now grab the corner of the browser window and drag it down to a size that is smaller than the Main Picture, the system will add the Navigator Tool to the bottom of the window, while if I drag the window back to its largest size again, the Navigator Tool will disappear.

Having satisfied myself that the Main Picture fits the browser window, it is time to add some more content to the presentation, so I close the Preview tab and return to the Project Editing page.

Adding hotspots

I want to add a link from one of the room in the Main Picture to a page with more information about the room.

To do this I click on the 'New hotspot' link and a default-sized hotspot appears in the middle of the screen. The hotspot can be moved by clicking inside it and dragging it around to different positions on the Main Picture. The size and shape of the hotspot can be changed by clicking and dragging the corner handles. The screenshot below shows the hotspot roughly positioned over the Drawing Room on the first floor of the house.

Linking to a page

I want the hotspot to link to a new page so I click on the option 'It should show some writing' and, when the Page Picker dialogue opens, enter the title 'Drawing Room' and then click 'Create a page'.

The system takes a few moments to make the link and open my new blank Drawing Room page.

Now I can see my blank page.

Adding text and images

I am going to use some of the text content from the original Guide Book file, so I select the words I want to use and copy and paste them into the blank page.

To add an image, I place the cursor where the image is to appear and click on the 'Insert Image' button in the editing toolbar, circled in the picture below.

The 'Upload file' dialogue box opens and I browse my hard drive to find the correct image. Once it has been selected, I add a title and a description of the image and click 'Use this file'.

Now the page has text and an image. 

With the text and image in place, this is a good time to edit the text, if required. Here some of the text has been removed so that the whole page will be visible without needing to scroll it up and down.

Previewing a page

Having made and edited the page, it would be useful to see how it will appear in the final presentation. To do this, I click the 'Preview' link, wait for the presentation to load, then click on the hotspot on my Main Picture. The Drawing Room page loads and looks like this.

Let's take a moment now to review our progress… 

So far, I have made a new project, swapped one Main Picture image for another, added a hotspot, linked it to a page, added text and an image and checked that it works in preview mode. 

The Firefox browser and using tabs

We recommend using the Firefox browser when making a Conveyor presentation. If you are using Firefox, the Preview page will open in a new window or a new tab, depending on your personal browser settings. These can be changed by going to the 'Preferences' link in the Firefox drop-down menu and selecting 'Tabs'. I use the setting: 'New pages should open in a new tab', as this makes it easier to manage multiple pages, rather than having windows popping up all over the place. 

Getting back to editing mode

To get back to editing the project I can either click on the appropriate tab or, if it is lost somewhere, I can return to the www.getconveyor.org home page and click on the 'My Folder' link, shown below.

This will load the Projects page. Then I can select 'Edit', which will load the main image, then click on the hotspot I made earlier and then click on the Drawing Room link that appears in the box next to it.

Linking to a new page

Having managed to get back to the Drawing Room page, I am now going to link it to a new page.

First, I add the link text to the bottom of the Drawing Room page - in this case, the word 'More' - then I select the word with my cursor and click on 'Int Link' (internal link) in the tool bar. When the 'Int Link' dialoge box appears I select the tab 'Create a new page', enter a title for the new page, and click on 'Create a page'.

When the page reloads the word 'More' is now a link.

Using the Files menu

To locate my new page I click on the 'Files' link in the menu bar at the top of the screen and the Files Menu loads. Before opening the new page, I am going to do a few other things while I am here.

The File Menu is where you organize files by adding, opening or deleting them. So first, I want to delete the large Main Picture image 'Town House' that I decided not to use because it was too big for the presentation. So I select it using the check box and click 'Delete this file'.

The file has been removed from the list. Next, I want to upload two files for use later. One is a sound file and the other is a video file. So I click on 'New sound' and the 'Upload new file' chooser opens. as before, I browse to find the file on my hard drive, add a title and description and click 'Use this file.

Then I click on 'New video' and do the same thing.

Now both of my new files appear in the File Menu list.

Completing my new page

With the files nicely organized, it is time to open the new page, so I click on 'Drawing Room - more' and the page opens.

Next, I add some text and an image using the same method as for the first page. A line of text has also been added at the bottom of the page instructing the user to, 'Click on the picture to hear some music'.

Linking a picture to a sound file

Now I want to link the picture to the sound file uploaded earlier. So I click on the picture and then click on 'Int link' (internal link) and the internal link file chooser opens.

I click on 'Drawing Room tune' and the file chooser disappears and the image now has a border indicating that it is a link.

Linking a hotspot to a video file

There is one more thing to do, which is to add a video file linked directly from the Main Picture. So I close the page window by clicking on the X in the top right corner and return to the Main Picture, then click on 'New Hotspot' and resize and position the hotspot over the Wine Cellar area.

Next I click on 'It should play a movie' and the Movie Picker window opens. Then I select the 'Uploaded files' tab and click on the link to 'Wine cellar movie' and the Movie Picker window closes.

Now the hotspot controls show that 'This hotspot currently links to: Wine cellar movie'.

Previewing the presentation

To recap, I have made a short presentation based on a Main Picture, linked this to a page, added content to the page, linked this page to another page, added more content, linked a picture to a sound file and linked directly to a video file from the Main Picture. So let's see what it looks like.

Click on 'Preview' and the Main Picture loads.

Then click on the Drawing Room hotspot and the page loads.

Click on the 'More' link and the second page loads.

Click on the picture and the sound file plays.

Close the window and click on the Wine Cellar area and the video plays.

Downloading the presentation

The presentation, together with its images, sound and video files, has been assembled, stored and previewed on the Getconveyor website. Having now made the presentation, it can be downloaded to my computer and played off-line.

To do this, I return to the Projects page, find the Town House project and click on 'Download'.

Depending on the type of computer being used, a system dialogue box may open asking where to save the file. Just choose somewhere convenient on your hard drive and click OK.

The download will appear as a .zip file. Click on the .zip file to un-archive it and a folder should appear. Open the folder and the contents will look like this.

To play the presentation on your own computer simply drag the file 'index.html' into an open browser window. The presentation should now play, complete with all the hotspots linking to pages and images, sounds and video files.

That's all there is to it. Now you see how easy it is to make a presentation using Conveyor v.2, why not try it for yourself?