Fader Tool Layout | WebReference

Fader Tool Layout

The Fader Dynomat Tool Layout

Left
P
a
n
e
l
Fader Preview
Work Space
Code
The Tool window is divided into four sections, as shown on the left. Scroll through this page to read about them in order, or click a section to move to the relevant text directly.

The Left Panel

The left panel contains the buttons necessary for all the overhead tasks, like choosing what code to generate, copying the generated code, and exiting the tool, among others:

Click to exit the tool, when you have completed your code generation and have successfully transferred the code to your text editor.
Click to show this help window. IE5 users receive a Modeless Dialog, allowing them to continue working while the dialog is visible. All others receive a regular browser window. If the help window is hidden, clicking this button will bring it back into focus.
Click to update fader preview and start fader looping, to test code you have generated. Fader parameter changes will be immediately visible in the fader preview, but array and timing changes will come into effect only after you click this button.
Click to display parameter-variable generation options in the work space. Since parameter generation appears in the work space by default, you will need this button to return to parameter generation after you have worked with array generation options.
Click to display array generation options in the work space.
Click to toggle display of complete code or current code in the code textarea. The current code is the code you are presently working on (parameters or arrays). The complete code includes all HTML necessary for a web page that includes the fader. It is recommended that you copy this complete code to your editor, but while you are working, a cleaner textarea, with only current options visible, is advisable.
IE4+Win:

All others:
This button has two different displays and functions, depending on the browser used. For IE4+Win users, clicking the button copies the code visible in the textarea to the system clipboard. A simple paste into any editor, successfully transfers the code.
All other browsers require an extra step. Clicking the button highlights the code in the textarea. Follow the onscreen instruction to manually copy the code to the system clipboard.

The Fader Preview

A live, updateable fader appears in this area. Upon tool load, it displays sample items. These items can be deleted and new ones substituted in the array-generation work space. All parameter changes are immediately reflected. Timing and array changes are not. Click the Refresh button in the Left Panel to apply all code modifications to the fader preview.



The Work Space

The Work Space can display either parameter-generation options or array-generation options.

Parameter-Generation Options

These options are divided, in the interests of space, into four sections, displayed when the corresponding button is clicked:

Click to display options enabling the creation of parameters relevant to the fader box, that is the fader object itself, including dimensions and borders.
Click to display options enabling the creation of parameters relevant to the fader text display, that is font selection and styling, link styling, etc.
Click to display options enabling the creation of parameters relevant to fader timing, that is loop count, transition duration, end behavior, etc, and
display behavior, that is, fade/flip, headline count, etc.
Click to display options enabling the creation of parameters relevant to the Navigator transition workaround using the semi-tranparent GIF.
Array-Generation Options

There are two, mutually-exclusive, screens for creating the headline arrays:

Click to create your own URL prefix and arNews array.
Click to include a headline array provided by Internetnews.com
Custom

The arrays are created by selecting an item in the array item display, entering Text and URL values in the two input fields and clicking the Update Item button.

The four relevant buttons are:

Click to delete the selected array item.
Click to append a new item at the end of the array. This item then becomes the current item and you may enter text in the input fields and Update it.
Click to insert a new item before the selected item. This item then becomes the current item and you may enter text in the input fields and Update it.
Click to update the selected array item with the contents of the two input fields.

The Code Display

This section has only one element, a textarea. When you are creating parameters, the textarea displays the parameters you have created. When you are updating the array, the textarea displays the prefix and array.

You may choose to have the textarea display the complete page code, by clicking the Show All button in the Left Panel.



top