|
Instruction |
|
| STEP 1 |
| First of all you need screen-shots for all your help sequences. |
| Just imaging that you are showing how to do something with |
| your program and shoot windows one after another. It's really easy |
| procedure and usually can be done with just few mouse clicks |
| You can use any image editing program for that. If you do not have any |
| we recommend you to down-load one of those free tools from the WWW: |
|
| You have to save them at the same directory where the help_1.htm is |
| as GIFs or JPGs. You are free to use any names you like, but we |
| would recommend you to follow our simple convention - first 1-2 digits - |
| sequence number and last digit - image number. So your first sequence |
| will be named: |
|
| and 99th one: |
|
| Few tips |
| Please keep in mind that all those images will have to be sent to |
| users of your help. Generally, the smaller images are the faster |
| customers will see a help sequence. So if you can show you |
| sequence on a small window, do it. The good news is - |
| your customers will have to wait for a help sequence |
| only once. All next calls to the same sequence will use |
| down-loaded images from the temporary Internet directory |
| and using on-line help will be as fast as using common program help |
| If you want your customers to use this help off-line, size of images |
| doesn't matter. |
| STEP 2 |
| Open a Help template (help_1.htm, help_2.htm, or help_3.htm) |
| of your choice and replace those xxxxxxxxxx with |
| your questions. Delete all unused question place holders |
| STEP 3 |
| Open magic help.js file with Notepad and get rid of all unused pictures |
| and mouse positions. The rule is easy: if you have, say, three pictures |
| in the first sequence - it has to be three image names and three |
| numbers for X and Y coordinates respectively. All redundant items after |
| have to be deleted. So |
|
| becomes: |
|
| Few tips |
| It is the most important part of the process. Make sure all strings start from |
| '#', have this character between image names or coordinates and end with it |
| as well. We selected this character because it is the last one to be used in |
| a file name. If you still have an image name with this uncommon character |
| you have to rename this file, or Applet will not work properly |
| You have certainly noticed yet that first triplet corresponds to the first |
| help sequence, second triplet to the second help sequence etc. |
| We have reserved places for seven images in a sequence. If you |
| have more just add as many items in those triplets as required. Do not |
| forget to separate them with '#' !!! There is no limit in the number of |
| images at all. But remember that all your images will have to be sent |
| to your web-site customers so the less images you can use the better |
| STEP 4 |
| This is the most pleasant part of the work. Just run you help sequences |
| one by one. If you click current image the mouse will stop and on the |
| status-bar you will see the coordinated of the click. So click image in that |
| place where mouse supposed to go and write the coordinates from the |
| status-bar. Your goal is to write those coordinates accurately in the |
| help.js file. In the example above |
|
| mouse will go on image 11.gif to X=201 and Y=37; on image 12.gif - |
| to X=246 and Y=142 etc. You have to specify only one set of coordinates |
| because mouse goes from the last position on previous image to the |
| new position of the current one etc. etc. |
| STEP 5 |
| When you first open the help page you see default sequence which comes |
| directly from the page helpwind.htm rather than from the help.js file. Just |
| open this page in the Notepad and set-up the images and coordinates |
| using the same syntax as you used for common help sequences. It's a |
| good place to promote your product because your users will see each |
| time they load the help |
|
|
| That's it. Your animated help is ready |