creating custom frames with Flare

[lpevzner]

Hi all,

What I'm trying to do is create a help document with a more complex frame structure than just the standard TOC on the left and content on the right paradigm. I want an additional frame along the top that contains a clickable diagram, so users can browse the help not just using the standard TOC, but also this graphical diagram. Is there an easy way to add this extra frame with Flare? RoboHelp has this capability (go to File->New->Frameset to create a new frameset), but Flare does not.

If anybody has tried doing something along these lines and has any tips or advice, I would very much appreciate it.

Thanks,
Lev

[LTinker68]

You can do the same thing in Flare, just not the same way you'd do it in RH. In Flare, create a masterpage. Insert a breadcrumbsProxy, if you like, and a bodyProxy. In the masterpage, insert a blank paragraph where you want the graphic to be inserted, then insert the graphic. Add an image map and hyperlinks to the image. Save the masterpage. In the WebHelp target, specify that masterpage (that is, if you're using more than one; if you're only using one, then the default option should be fine).

Build the output. That graphic will appear in every single topic. Click on an area of the image where you know there's a hotspot, and you'll go to the appropriate destination.

NOTE: Since you're not going to want that image in your print output, then you'll want to condition out that paragraph in the masterpage.

[SteveS]

NOTE: Since you're not going to want that image in your print output, then you'll want to condition out that paragraph in the masterpage.

...or you can use a seperate print masterpage

[LTinker68]

Thought about mentioning that, but I figured I'd wait to see if he came back with more questions.

[SteveS]

Thats the trouble when there's more than 1 way to skin a cat, someone will always suggest one of the other ways

Oh, and welcome to the forums Lev.

You'll soon get used to the MVPs...

[lpevzner]

Thank you for the responses and the warm welcome! I hope to hear much more from the MadCap MVPs!

I played around the the master pages a bit, and it looks to me as though this is more of a way to do headers and footers within your Web Help. These headers and footers can be really complex of course, like an imagemap. However, what I would like to be able to do is more flexible and dynamic than that, and I'm not sure it can be accomplished with master pages. It's sort of a multi-pane help browser.

I created a PowerPoint presentation that illustrates the type of workflow I would like to create, but it didn't let me attach a PowerPoint file unfortunately, so I converted the 9 slides into gif images. These are attached, please let me know if you aren't able to see them for some reason. Is something like this possible with Flare? It is possible with the RoboHelp frameset feature, but I have not been able to figure out how to do it with Flare so far.

Thanks,
Lev

Slide1:

slide1.gif

Slide2:

slide2.gif

Slide3:

slide3.gif

[lpevzner]

slide4:

slide4.gif

slide5:

slide5.gif

slide6:

slide6.gif

[lpevzner]

slide7:

slide7.gif

slide8:

slide8.gif

slide9:

slilde9.gif

ps: if this is a bad/annoying way to post something like this, I apologize, that is not my intention. Please let me know how I should do it in the future.

[RamonS]

You can attach the images to your post or resize them.
Not that I am an expert in this in any way, but if I'd be asked to make something like this happen I'd look at div containers that can be positioned on the page and use ECMAScript to show / hide them. Or even cheesier just use the image map that you already mentioned and load the topics for the applicable steps. Using plain topics makes for quite some work, especially when you want to do things like this often.
Another option that comes to mind is to create a simulation using Mimic. You can add clickable areas to a background that you made with a drawing tool (I use OpenOffice.org Draw for stuff like that) and add the other content through Mimic. That way you have one topic for a process that contains a very slick presentation (just think about all the transitions and colorings and other effects). That should work out well as long as your processes are sequential and not too complex, for example having a step cause a branch to five different ways that merge at different points in the process isn't that trivial to do. The drawback with that approach is that you'd need Mimic.

[lpevzner]

Ramon,

Sounds good, next time I will either make the images smaller or just attach them instead of inlining.

Thanks for the ideas on my question! The simulation idea sounds great, but unfortunately I don't have Mimic and I do have some forking processes.

It really sounds to me like HTML framesets are the most elegant way to create the sort of multi-paned Web Help I'm trying to create. Using plain topics, as you mentioned, can get cumbersome, especially if you want to do a lot of these (which, ideally, I do). And it sounds like Flare does not support adding framesets to your pages, is that right?

It does look like there are the beginnings of some frameset support. For instance, when creating a hyperlink or cross-reference, there is a "Target Frame" drop-down, and the Flare documentation even says, when describing the "Top Frame" option: "The destination file will open in the Help file window, removing all other framesets. You might use this option, for example, if the destination topic has its own frameset." Similar frame options appear in the Browse Sequence Properties dialog, and according to the Flare Help also in the TOC Properties dialog, though I can't seem to see the Advanced tab in that dialog.

Anyhow, I think I'm going to spend a couple of days to try and figure this out. If anyone has some tips, I would really appreciate it. And if I find an adequate solution, I will of course share it here so others could use it.

Thanks for your help,
Lev

[LTinker68]

Why exactly do you want to use a frameset in your topic area? Is it just to keep a heading "pane", so to speak, that stays locked in place as the user scrolls down in the content below that pane? Is there some advantage to the heading being locked in that way, because the examples you included didn't really provide a lot of info at the top portion that would require the topic title/heading being locked in place.

There is a way to do it with DIVs, but I'm still trying to figure out exactly what you're trying to do. Because if the heading isn't going to be locked, if you just want the same topic heading to appear on multiple topics, then you don't need to use framesets or even DIVs -- you just retype the same heading on each topic.

[lpevzner]

LTinker,

There is definitely an advantage to the heading with the steps and the sidebar with the substeps staying in place rather than moving as you scroll -- it makes navigation easier for the user, and it puts things in context. It's the same idea as the table of contents. There is a reason the TOC is in a separate frame. You don't want your TOC to scroll down as you scroll down your topic, because 1) you don't want to have to scroll back up to change topics, and 2) you want to see that TOC hierarchy for reference. It's the same exact idea with my extra panes. Just think of them as sort of a more visual supplement to the TOC.

An additional reason for the TOC being in a separate frame is that it's a simpler, more elegant solution. Rather than including a fancy div in every single topic, or retyping text in every single topic -- you just do it in a separate frame, hyperlink accordingly, and forget about it. Again, same idea for my extra panes.

Please let me know if this makes it more clear, or if there are still points of confusion. And I am by no means dead set on doing frames -- if there is an equally effective way to accomplish something like this that is easily done with Flare, I would love to hear that solution.

Thanks much,
Lev

[lpevzner]

Hi guys,

I just tried writing up a simple frameset htm page and just putting it into the TOC, and that seems to work pretty well. Basically, I created a file called frametest.htm with the following code in it:

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
<head>
<title>frametest</title>
</head>
<FRAMESET ROWS="26%,*" FRAMEBORDER="1">
<FRAME NAME="process" SRC="diagram.htm" FRAMEBORDER="1" SCROLLING="auto" BORDERCOLOR="#000000" />
<FRAMESET COLS="35%,65%" FRAMEBORDER="1">
<FRAME NAME="substeps" SRC="substeps1.htm" FRAMEBORDER="1" SCROLLING="auto" BORDERCOLOR="#000000" />
<FRAME NAME="content" SRC="welcome.htm" FRAMEBORDER="1" SCROLLING="auto" BORDERCOLOR="#000000" />
</FRAMESET>
</FRAMESET>
<body />
</html>

Then I added frametest.htm to the table of contents, and created pages for substeps, content, etc. just as regular html pages. When you create hyperlinks/x-refs, you just have to make sure they have the right target frames specified, but you can actually do that in the UI by typing in the correct frame name in the Target Frame field when creating a hyperlink/x-ref.

The attached image shows the result. When you click on frametest in the TOC, you get the 3-pane frameset shown. Then you can click on the steps and substeps to get desired results. This is obviously just a simple mock-up, but I think I'll be able to do most of what I'm looking for this way, and it'll be simpler and cleaner than other methods.

Thanks all for your help,
Lev

[RamonS]

That really does seem to be the easiest way. Feel free to post it in the "Procedural Steps, Tips and Tricks" forum and mention what exactly one has to enter for a link. I guess for quite some times frames are supported although there is always talk to drop that in favor of divs.