Creating an interactive hot spot and downloading pdf files

  • 1
  • Question
  • Updated 1 year ago
Hello. I want to create an interactive hotspot at the end of my video using Camtasia 9, and I want the learner to be able to download two pdf files when he/she clicks on that hotspot. So, I do not want the hotspot to lead them to a URL, but to two pdf documents that I want to be part of the scorm file. Is that possible in Camtasia 9? And if it is, how do I do it? Thanks! 
Photo of Nenad Radovic

Nenad Radovic

  • 3 Posts
  • 0 Reply Likes

Posted 1 year ago

  • 1
Photo of Rick Stone

Rick Stone

  • 4483 Posts
  • 1999 Reply Likes
Hi there

Kayakman has a video showing how to link to files.

Click here to see that video

But your mention of SCORM seems to suggest that you may not be able to configure this. SCORM usually means you are uploading to a Learning Management System (LMS) and as such, I'm wondering if you are uploading a zip package or just the MP4.

If it's just the MP4, there will be no linking of files. 

Cheers... Rick :)
Photo of Nenad Radovic

Nenad Radovic

  • 3 Posts
  • 0 Reply Likes
Hi Rick, 
Thank you for your response :) I need to upload a zip package to an LMS, that is correct, and the video that you have shared with me is really informative and helpful, so thank you for that! I have followed the instructions in the video, but one problem that I ran into is that in the video the steps are performed using Camtasia 8, while I use Camtasia 9. Now, when I do everything according to the instructions (including editing the http reference in the camproj file in Beyond Compare 4), and try to access the pdf files using hot spots, I get an error...It seems that even though I erased that http reference in Beyond Compare, it still appears in my interactive hot spot setting in Camtasia, in the URL field. Now, I hate to bother you any further, but if you have any suggestion, answer, or piece of advice, I would appreciate it immensely!  :)
Photo of kayakman

kayakman, Champion

  • 6247 Posts
  • 1831 Reply Likes
CS9's Smart Player does not support relative URLs; CS8's player did; that is why you are seeing the error after editing the project file; even editing the URLs in the production's resulting config files will still result in the error

hotspots supporting relative URLs was a great functionality; wish they would bring it back ...,
Photo of Rick Stone

Rick Stone

  • 4483 Posts
  • 1999 Reply Likes
If memory serves, Camtasia 9 changes that linking playing field a bit. Again, because this is SCORM, you need some way to package things inside the zip I believe. One way you might work past the issue would be to create a few HTML pages that you might include. One might serve as a "menu" of sorts, that allows opening the two PDF documents. Then you would have two different HTML pages that each would be configured to perform a redirect to actually handle opening the PDF documents.

Of course I don't have your system available to test, but here is the code you might consider using to create the additional HTML pages. Just create a new blank document using Windows Notepad, then copy the text below and paste into Notepad. Save the Notepad file using a name such as Menu.htm (for the menu page) and PDF1.htm (for the first PDF page) and PDF2.htm (for the second PDF page). Then configure the hotspot to open Menu.htm.

You will also likely need to ensure the three pages (and the PDF documents) are included inside the zip package.

For the "Menu" page:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
</head>

<body>
<h1>Menu</h1>
<p><a href="PDF_Redirect_1.htm">Open PDF 1</a></p>
<p><a href="PDF_Redirect_2.htm">Open PDF 2</a></p>
</body>
</html>
For  each "redirect" page:
(Note that you will need to replace the code with the actual PDF file name.)
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta HTTP-EQUIV=refresh CONTENT="0;URL=Replace_This_With_PDF_FileName.pdf">
<title>PDF Redirect</title>
</head>

<body>
<h1>PDF Redirector</h1>
<p>This topic should open a PDF document</p>
</body>
</html>
Sure, it's another workaround as some here will gleefully point out with great disdain. But it should get you headed where you want to end up.

Cheers... Rick :)
Photo of Dubie

Dubie

  • 961 Posts
  • 740 Reply Likes
Rick,

Not to hijack the thread but..

How did you get the code in a box here on the forum?

If you don't want to post here you can email me if you wish at
demo@demotestsite.info

Thanks
(Edited)
Photo of Dubie

Dubie

  • 961 Posts
  • 740 Reply Likes
I agree with Rick that because of Camtasia's linking restrictions a redirect is probably the best option.

I know very little of the whole SCORM stuff but if a link to a redirect page will work, than how you write the redirect code makes a difference.

If you just link to a PDF then dependent on the browser it may only open the PDF in a new tab for viewing and not download it.

So if you just want the PDF to direct download we have a couple options.

You say you have two PDF's.
So if you are only using one hotspot to download them then as Rick states a landing page would
be best.

Let's clean up Rick's code a bit first though  (No offense Rick but xhtml is old school)
Let's go HTML5

Open Notepad put this code and save as Whatever.htm

Landing Page Code:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
 <title> new document </title>
  <meta name="description" content="" />
  <meta name="author" content="">
<link rel="stylesheet" href="CSS File Location Here">
 </head>

 <body>
 <h1>Menu</h1>
<p><a href="PDF_Redirect_1.htm">Download PDF 1</a>
<br />
<a href="PDF_Redirect_2.htm">Download PDF 2</a></p>

 </body>
</html>


So now for our page that redirects to the PDF and downloads it.

The easiest method is using a .php page.
With a .php redirect we can just link to the PDF and it should download

In notepad put this code and then save as WhateverName.php

**The pdf and this file need to be in the same location and you
need to make a separate redirect page for each pdf

php code:

<!--Change MyCool.pdf to the name of your pdf-->
<?php
header("Content-disposition: attachment; filename=MyCool.pdf");
header("Content-type: application/pdf");
readfile("MyCool.pdf");
?>


Your links in the landing page would than be

<p><a href="PDF_Redirect_1.php">Download PDF 1</a></p>
<p><a href="PDF_Redirect_2.php">Download PDF 2</a></p>


If you are making a separate hotspot for each pdf then your hotspot link can go directly
to a new redirect.php for each one

yourwebsite.com/downloads/pdf/pdf_1.php
yourwebsite.com/downloads/pdf/pdf_2.php

Here's a example link of a php redirect to a directory on my server
It's one of my cover designs and a pdf template pdf
http://demotestsite.info/test/imagine


Now a html redirect.

A html redirect will open the pdf to view but not download.

To direct download a pdf with a html redirect we have to make a zip file of the pdf
That forces the browser to download it instead opening it to read.

In notepad put this code and then save as WhateverName.htm

**The zip file and this file need to be in the same location
and you need to make a separate redirect page for each pdf


html code:

<!doctype html>
<html>
 <head>
<meta http-equiv="refresh" content="0; URL=http://Full Path to .zip"; />
<link href="CSS File Location Here" rel="stylesheet" type="text/css">
 </head>
 <body>
 </body>
</html>


Change the URL= to the direct full path to your pdf zip file


Your links in the landing page would than be

<p><a href="PDF_Redirect_1.htm">Download PDF 1</a></p>
<p><a href="PDF_Redirect_2.htm">Download PDF 2</a></p>

Then same as before

If you are making a separate hotspot for each zip fi;e than you need to make a .htm file for each zip
file and then your hotspot link can go directly to the .htm

yourwebsite.com/downloads/pdf/pdf_1.htm
yourwebsite.com/downloads/pdf/pdf_2.htm

Here's a example link of a html redirect to a directory on my server
http://demotestsite.info/test/imagine2
*same pdf as the other link but the download is a zip file.

Good luck with the project :)
(Edited)
Photo of Rick Stone

Rick Stone

  • 4483 Posts
  • 1999 Reply Likes
Hi Dubie

I'm a bit of a propellerhead but not totally.

I've used another product that Adobe now owns to create my HTML. In fact, I'm headed out today to facilitate a class tomorrow and Thursday on how to use this product. The product is called "RoboHelp" and I've used it for more than 20 years.

So what I did on the three HTML pages was to create them using RoboHelp, then I lifted the code bits for the pages and pasted here in the forum.

So yeah, I suppose it may be "yesteryear" type code, but as far as I am aware, it should work for this simple setup. ;)

Cheers... Rick :)
Photo of Nenad Radovic

Nenad Radovic

  • 3 Posts
  • 0 Reply Likes
Thanks Dubie, and thank you Rick one more time! I really appreciate your help! I will try out this and see how it goes, but I do have to check with our client and with my boss if this is something that they would accept for this specific project. All the best guys! :)