Tools for creating a tutorial site?

  • 1
  • Question
  • Updated 2 months ago
Not necessarily Camtasia related, but I want to  create a site similar to this one that has a table of contents on the left, and a video player on the right showing the selected video.

Anyone know of any useful tools for this type of thing?


Photo of timgrote

timgrote

  • 2 Posts
  • 0 Reply Likes

Posted 2 months ago

  • 1
Photo of Daniela

Daniela

  • 19 Posts
  • 11 Reply Likes
You can make a table of contents with Camtasia by using markers and producing the video with the smart player, though I you cannot nest the "chapters" like that, they are all on one level.

https://support.techsmith.com/hc/en-us/articles/229134667-Camtasia-Windows-Use-Markers-to-Create-Tab...

Photo of Dubie

Dubie

  • 962 Posts
  • 742 Reply Likes
The TOC can be nested. You just need to set it up and enter the marker text correctly in editing.



Here I customized the TOC



:)
Photo of kayakman

kayakman, Champion

  • 6250 Posts
  • 1834 Reply Likes
this is how I package some of my tutorial collections ...

http://www.cookbookplus.com/Videos/CookBookPlusDesktop2014/Menues/CookBookPlusDesktopVideosMenu/Cook...

the menu is 100% made with Camtasia, as are all the tutorials
Photo of kayakman

kayakman, Champion

  • 6250 Posts
  • 1834 Reply Likes
the menu was designed to auto-play then pause at 2 seconds, ready to use

Chrome now blocks auto play videos; you may need to use the player's start button

or use Edge

but it does work just fine
Photo of bnystrom

bnystrom

  • 187 Posts
  • 88 Reply Likes
I was using the player's start button and the video halts frequently, I get a white overlay on top of your gray/black menu and the "X" to close it doesn't work. There's no soundtrack.



It doesn't work in Edge, either. 
(Edited)
Photo of Dubie

Dubie

  • 962 Posts
  • 742 Reply Likes
The white overlay is the TOC search and the X is to cancel the search.

To close the TOC you have to use the button in the player controls.



When you click the play button it is just running through the TOC menu only
 Not how I would have set it up But...

You need to close the TOC and then use the Hotspots ( the white shapes menu) on the page to play the video.

:)
(Edited)
Photo of kayakman

kayakman, Champion

  • 6250 Posts
  • 1834 Reply Likes
thanks for helping to clarify, Dubie

this example uses a 500px wide TOC, mostly a transparent TOC background; when the menu is armed [at the 2 second point], it halts play, and the player's play button is no longer used; before Chrome broke autoplay, users never touched the regular play button, just the hotspot buttons; you can then click any TOC item to navigate to a submenu, you can then just click an item [to right of TOC boundry] to play it, leaving the TOC open, if desired.

FYI, one you've touched a TOC item, you can close it using esc key
(Edited)
Photo of kayakman

kayakman, Champion

  • 6250 Posts
  • 1834 Reply Likes
another example, a generic menu, on screencast.com ...

Example Button Style Menu 75 Main Menu Buttons 75 Sub Menus Each With 75 Go-To-URL Buttons 5,770 In Total
http://www.screencast.com/t/3vR3jGjpZX
Photo of pjonesCET

pjonesCET

  • 355 Posts
  • 65 Reply Likes
For Website design  RapidWeaver 8.
Photo of kayakman

kayakman, Champion

  • 6250 Posts
  • 1834 Reply Likes
recent changes to Chrome have totally messed up viewing videos set to auto-play [unfortunately, I have published thousands of videos configured to auto-play]

this can be "fixed" on a per-system basis

open Chrome, and put this in address bar ...

chrome://flags/#autoplay-policy

change the auto play policy to no user gesture required


Photo of Rick Stone

Rick Stone

  • 4492 Posts
  • 2002 Reply Likes
I've used a tool that allows this for more than 20 years. It's expensive. It's an Adobe tool named "RoboHelp".  And you can see an output at the link below:

http://www.moacr.com

It's an amazing tool that makes it super easy to do.

If you have any questions or would like to hear more, feel free to contact me at my personal email. rickstone1975 (at) gmail (dot) com

Note that I'm a horrible self promoter. I'm simply an enthusiastic user. I won't be trying to sell you on anything. I only want to offer helpful information.

Cheers... Rick :)
Photo of timgrote

timgrote

  • 2 Posts
  • 0 Reply Likes
Thanks for the discussion everyone. Some good ideas here. Looks like I screwed up the link in the main post. The site I wanted to link to was: https://www.querystorm.com/tutorials.html

To be clear some things up, I'm looking for a table of contents on the left that updated the video player on the right. The videos are short how to videos. The table of contents just updates the player to one of the short videos. The idea of an overlay table of contents on a longer video is cool, but I think overall would be more difficult to edit. Smaller clips will be just as user friendly, and maybe better for social networking posts as well.

I don't want to build it by hand, it would be nice to add a page with embedded player and have it show up in the TOC. I may take a crack at it with MKDocs (https://www.mkdocs.org/) if nothing obvious shows up here. I'll post back with whatever the result is.


Photo of kayakman

kayakman, Champion

  • 6250 Posts
  • 1834 Reply Likes
depending on how many tutorials you have in the collection, and what their total playing time is, you might be able to put them all into the same project, separated by markers, then produce to MP4 with controller, with a TOC; that way, Camtasia would do all the work for you

perhaps look at the design structure of this tutorial ...

http://www.screencast.com/t/BBnRZSJMo8e

each TOC item is its own chapter; stop-at-end, click-to continue hotspots are used at the end of each chapter to moderate the playback experience; clicking a TOC item will jump to and start that chapter; this tutorial also uses marquee line timer callouts to indicate which chapter is currently playing and indicates play progress during each chapter's play, and also enables granular navigation withing each chapter

with CS2018, you should be able to handle many separate chapters with total aggregate playing times of up to 2 to 3 hours in duration

if you hosted on your own web site, you could also produce using separate files from markers, which breaks up the resulting MP4 into separate chapter clips as opposed to one long clip

perhaps something to consider?
Photo of kayakman

kayakman, Champion

  • 6250 Posts
  • 1834 Reply Likes
another button-style menu example ...

http://www.screencast.com/t/rRo7uquk

note: the TOC is not needed for menu navigation