Macromedia's RoboHelp has an impressive array of features and capabilities. Her we test them out in the creation of Web accessible help files for a very handy utility called ColorMania. BlackSun's ColorMania allows users to magnify a portion of the screen and at the same time pick up the color code of where the current cursor/mouse location is pointing to. This is very useful in finding the colors used a picture or drawing . The code can then be copied to the clipboard for use in other programs like Dreamweaver or Visual Studio where the color information is required for coding purposes. ColorMania is so handy we decided to create a help system for it.

RoboHelp Starter

We have chosen WebHelp in particular because it supports cross platform and cross browser deployments – which we want to test having a Linux website and Safari, Opera, and Firefox browsers to use. In addition, RoboHelp advertises multi-source capability. This means that the same source code can be used to produce different helpfile formats . So we plan to generate FlashHelp after doing the WebHelp and hope to demo both for readers.

We have deliberately used lowercase in the name and title, “colormania”, because the project will be located on a Linux server which is case sensitive. So we err on the side of using lowercase all the time.

We have also entered the title of the first topic and have checked the WebSearch option even though the help file will only be 4-5 topics or pages in length. Again this is as much a test help file in which we hope to tryout as many RoboHelp features as possible.

After adding the image of ColorMania we type in the intro text telling users a little about ColorMania and what it can do.

After that we change the background color making it a light silver color. The menu commands are : Format | Topic Borders and Shading.. and the color code is #DDDDDD.

We now have our first help page or topic completed and we have used the WYSIWYG tab all the time. Now as noted, RoboHelp uses HTML as its base coding and then translates that into appropriate files for actual use. Users can see that by clicking on the TrueCode tab.


In the screenshot above, users can see the TrueCode view of the helpfile. In the underlying HTML, users can see how RoboHelp has implemented the background color as a CSS stylesheet. This is a bias in RoboHelp that turns out to be very useful when making CSS templates to apply to many topics/help pages.

Lets now take a look at the Intro page that we have just finished. From the screenshot below we can see
the new heading, the image we added and the change of the background color to light silver. Note the Project Manager pane on the left has a small hint windows that explains what the pane is used for.(RoboHelp does this for many of its other dialogs and windows)

In fact, the Project Pane is a treeview of all the resources used in the helpfile. Always make sure the Topic object is expanded out so you can quickly navigate to the next topic by double clicking on a topic/page name. Broken links shows which links have been broken after you delete one or more topics. Images show which images have been used in the help system and provide a shortcut for reusing images. Don't worry about the TOC-Table of Contents tab nor the Glossary tab nor the Index tab for now - they are setup and completed when you have finished entering most if not all of your topics or help pages.

However the tools tab is worth exploring right away for at least 5 of the tools available there on. First, the Multi-File Find and Replace Utility is very similar to its Dreamweaver counterpart. It will look through all files in a folder (and sub-folder if directed plus a wildcard filter for filenames qualification) and find a text string and replace it with a designated refill text. This is a very fast and powerful utility – use it with care.

The ReSize utility does exactly that to images of all types - .gif, .jpg, .shg, .bmp, .pcx . What is truly remarkable is the fidelity with which ReSize does its job. I know a lot of very high priced Paint programs that would be hard pressed to match ReSize in the fidelity of both its downsizing and upsizings. Truly an impressive utility!

Software Video camera on the other hand is a disappointment. It does great screen video captures with a number of options. But the screen must be reduced to 256 colors. Check out Snagit or Camtasia Studio as alternatives with no such screen color restrictions.

Graphics Locator can be quite helpful because it will find all the graphics files in a directory/folder and all its subfolders. It is very fast and shows all the files in alphabetical order list. Click on a file name in the list and a preview is shown in the thumbnail view to the right. Then click the Copy button to copy a file to a user chosen folder. Nifty.
Fifth and finally, there is the Smart Publisher utility. This utility or wizard allows a user to move by FTP a folder and its files to a website. In effect it allows users to publish their WebHelp, WebHelpPro and FlashHelp files to the appropriate deployment websites. Again a handy utility.

Filling in the next three help pages – Color Codes, Color Matchings and BlackSun follows the same cycle. Click the New Topics toolbar button (the fourth button from the left ) or right mouse click in the Project Manager pane or Topics Window and choose the New Topic item from the popup menu. The result is the new topic dialog seen below:

This wizard has six tabs the most important of which is the first. The topic title is automatically used to generate the filename for the topic. If you are using templates for the various page or topic types then the pulldown is available - but only some users will have templates.

The next most important tab is the Index. Sometimes it helps to list the key concepts for a topic first in the Index tab. This shortens the time spent creating an index at the end of the project.

Finally, the Appearance tab allows the user to apply a specific CSS style sheet to the topic. In effect, this is another way to apply a quick and dirty template to a page or topic. Web developers familiar with CSS and stylesheets will find this a most useful capability because almost all the styling for a topic can be set with one or two sheets. Then making changes to the overall style of a Helpfile system is simplified because the change is made in one stylesheet rather than dozens of topics.

Next change the heading title and add the image to the topic. Finally, add the description of what the topic and image are designed to tell about this aspect of the ColorMania program. It is as if we finish each topic in splendid isolation. But there is the question of navigation between the topics and help pages. For that, RoboHelp has a number of options.

Navigation

TOC links, once you have entered all the topics, are easy to create. The hint advisory at the bottom of the TOC screenshot describes the simple sequence. Just click o the Show topic button (or click the Topics tab). Then just drag and drop the topics to the TOC pane. If you want to change the order of a topic just drag and drop it up ad down in the TOC. Or use the arrow keys at the top of the screen. Finally, to add a Book container for several related topics just click the starred Book icon in the ttoolbar at the top of the TOC pane and follow the wizard. Simple – no need to use the Auto-create TOC button.

In contrast, Index creation, unless you have faithfully added words each time you created a new Topic, does profit from use of the Smart Index Wizard (see button at bottom of screenshot at left). What this wizard does is goes through each topic looking for distinctive words and adds them to a conditional list of Index words. Users then get to confirm with a check mark all the words they wanted added into the Index and then the next topic is analyzed until all the topics have been indexed.

But even with the help of the wizard, users will have to do three things essentially by themselves. First, they will have to add any indenting or sub-keywords as we see in the screenshot at the left where “Color Codes” have been made a sub-keyword of “ColorMania” and in turn the individual codes are sub-keywords of “Color Codes”. Its long and sometimes tedious work but certainly adds polish to your helpfile.

The second task is to eliminate the inevitable extraneous keywords brought in by the Smart Wizard. To delete any keyword from the index just highlight it, right click with the mouse, and then choose Cut or Delete from the popup menu. But be careful, if you delete a keyword with with one or more sub-keywords, the sub-keywords are deleted too.

The final Index creation task is easy to do. For some keywords you may want to point to more than one topic and let the user decide which one is relevant. Each keyword already has one Topic associated with it. To add another, just click on the keyword that you want to add another Topic to. Then click on the Topic tab . And then drag and drop the Topic you want to Topics for: pne at the bottom of the Index window (see screenshot at left).

Currently I measure the effectiveness of many major software systems by the usefulness of their help systems. In turn I measure the effectiveness of the help system by how well the indexing is done. The whole problem is that concepts like “color code” can have a whole array of subsidiary meanings – HTML Hex, RGB, CMY, etc. Unless you add these to your Index, people won't know where to lookup the right topic and help.

Hyperlinks

Being a web developer really helps with RoboHelp because web designers know that there most important task is to get people to the right pages – and so they are used to using hyperlinks in their many forms to do that. Hyperlinks on the Web and in RoboHelp work nearly identically the same. There are 3 major variations:
1)external hyperlink – takes the user to a new and external website or mail address;
2)new page hyperlink – overwrites the existing page with a new page or Topic;
3)same page/frame hyperlink - maintains any frames and writes page/Topic to a specific one.
What this last hyperlink does is very important in two or multi-pane helps systems. It allows the new topic to appear in the same frame as the old one – preserving the multi-pane setup. In the screenshot below this is
exactly what we are doing - making sure the Topic appears in the Same Frame.

Once you understand the types of hyperlinks, creating a hyperlink is as easy to do as in web development. First, position the mouse cursor on the page and type in the link name (“BlackSun popup” in the screen shot). Then highlight this text and then click the Insert | Hyperlink ( or CTL+K or the Hyperlink icon in the toolbar) and the hyperlink dialog shown in the screenshot above pops up. If you want to link to another topic, they are in the list of topics in the list at the bottom left. Just click on a topic and it appears in the Linkto: field. If you want to go to an external address, then just type that address in the Linkto: field. Then don't forget to choose where the Topic will display in the Display in frame: pulldown. Finally, click Okay and the hyperlink is done.

In our ColorMania sample help system we have added explicit hyper link navigation to the bottom of each topic. This is not necessary as the TOC, Browse sequence and Index options are all available for navigation. But this allows the ColorMania helpfile to be quickly adapted for use in a single pane help system.

So now that we have the TOC, Index, and hyperlink navigation setup – the helps system is nearly done ready to be generated. So onto deployment.

Deployment

RoboHelp really shines on the deployment side. What used to be a thankless and tedious process has been wizarded and script-generated away for each of the 7 major help type files that RoboHelp can deliver.

In the screenshot at the left the WebHelp wizard is in action. It is important to select a distinctive name for the output folder so that the folder and all its content can be FTP-ed up to your website. Also select the default topic and skin.

RoboHelp also offer conditional build expressions > the basic idea is that users tag certain text lines or complete topics to not appear in a particular build of the helpfiles. All other topics and text do appear in the final build. Thus there could be one build for develiopers which has all the material; and another for end-users which excludes the special help material useful to developers only. Il explore these useful settings in a later review of RoboHelp.

Click on the From Gallery button in the Select Skin field on the first page of the WebHelp wizard as seen in the screenshot at the top left. The Skin Gallery dialog pops up and offers 11 skins for the look and feel of your Web Help system. Go to the RoboHelp developers corner at the Macromedia website and you can see how to develop your own skins (its primarily CSS work if you are doing styling, JavaScript and XML if you are adding buttons). Also there are additional skins available there as well. Choose a skin from the list and click the OK button and the Gallery dialog disappears. Then click the Next button on the first page of the WebHelp Wizard to move to the second page of the WebHelp wizard. As well you can preview the look of the selected skin. Also the skin can be edited in the project tree under the skins file folder. Combined with styles and templates, Robohelp provides a full set of Help file formating options.

The second page of the wizard allows the user to determine which control buttons will appear in the Help browser window. We retain the important Content, Index, Glossary and Search buttons but drop the Web Search. We add a check mark for Browse Sequences (but nothing happens – there appears to be a bug here). We want to show a navigation pane link in the Topics but no Search input field in the toolbar. Clicking the Next button gets us to the third page of the wizard.

The third page allows us to control two things. First, is whether the code will use any Java Applets for running the Navigation bar. Given that the latest Java is still verboten on Windows, go with DHTML or pure HTML only as the choice. This actually works best across browsers and is faster than Java on start up. Having said that - there are some real advantages to Java applets. The JRE-Java Runtime Engine is now a very fast download of less than 5 minutes and there is a growing number of stock market, financial and graphics routines that use JavaApplets. Finally, Sun has just introduced JavaFX which allows development of RIA-Rich Internet Applications that support animations, video along with online and offline operation. So watch the market turn on this in the next few years as Java and Flash considerably simplify cross platform and cross browser development (see our story RIA Morphs for more details).
The next question is whether to optimize speed for Web internet or for intranet/LAN use. Let usage determine this; but if there is any usage on the external Web err on the side of caution and go with Web optimized.

After negotiating through these 3 pages of the WebHelp deployment wizard you could go to a fourth page but that is associated with advanced server side options so you can click the Finish button and watch RoboHelp generate about 2 help pages a second on a 2.8GHz Pentium celeron with 700MB of memory and ample disk space. That means a hundred page help system will be done in about a minute. Not too bad. And the output is first class – check the Colormania WebHelp here.

Now for the coup de grace on deployment. To switch to using FlashHelp just click on File | Preference Settings. When the dialog pops up make sure the General tab is showing. Then from the Primary Output /Layout choose FlashHelp. Then just click on File | generate Primary Layout(FlashHelp). Fill in the blanks on the Wizard nd watch RoboHelp generate a Flash layout in roughly the same time it takes to do Web Help. See the FlashHelp example here (you must have Flash Player 6 or later).So this is what RoboHelp means by multiple output, single source development. Very nifty. Again, see the HTML Help example here.

Summary

So we have reviewed the claimed virtuosity of RoboHelp in the first overview and in this first sample have found that RoboHelp meets most of its promise for the creation of WebHelp and FlashHelp. We have just touched the surface of the type of customizations that are possible. Also we have not verified the Microsoft Word+RoboHelp interface nor the use of WinHTML Help or Win 2000 Help. A second implementation review will look at these as we build WinHelp files to show how to replace that great security hazard, Internet Explorer of any stripe including the “new” IE7, with FireFox. But so far, RoboHelp has done an outstanding job on delivering some very snappy looking Web based and cross platform, cross browser (we have tested in IE, Opera, Mozilla and FireFox with no problems). And the good news is that users who are HTML+CSS savvy or feel at home with Macromedia Dreamweaver will take to RoboHelp very quickly. So top kudos so far to RoboHelp.