USER MANUAL

Style setting board is divided in three areas that help you cut down the difficulty level a little: a red area, a blue one and a grey. The grey area consists of commands for the entire menu, all styles together. The red area consists of commands for the selected style and the blue area consists of commands for the selected menu mode of the selected style. You begin setting up the menu in the grey area and then go over to the red area and in the end comes the blue area. In order to minimize the error marginal than can be triggered by unauthorized personnel trying to manipulate the settings, or if somebody makes a wrong setting or any other scenario, the setting tools does not save any of the changes automatically. No changes are made in real time.

No settings are saved automatically when you change something to the menu!

In order to save your settings, you'll have to press the big green button called "Generate source" which creates the XML-structure containing all settings and then displays it on the screen in the white text area on the right side of the screen. When you've done that, you select all the text and copy it to the clipboard and paste it into your "style.xml" file. Save the file and you  are done. This "unconventional" procedure minimizes the risc of somebody making the wrong settings and the results can be seen as soon as you save your file.

Some of the changes can be seen, in the setting board, directly when you press one of the black arrows. If you fill in the values by hand, the changes are made when you press ENTER or the designated SET button. Text fields are often paired. For example x and y coordinates for the text background can be set in the same time by pressing the SET button, so you can fill both field before you press SET. All coordinates are in pixels.

In order to change colors, you'll have to fill in the hex-code for the RGB color you wish to use, without the #-sign. It doesn't matter if you use CAPS-LOCK or not. Press ENTER or SET to see the changes.

Or, you can pick the text field with the hex-code and chose a color from the color palette on the right side of the setting board and the changes are made directly. If you need to see the colors closer, press the lens button.

Some text fields are for filenames. If you write only the filename (ex. "image.jpg") it's presupposed that the file "image.jpg" lies in a directory called "images" in the same directory as your menu application. You can use relative addresses such as "../../image.jpg". The files must exist on the same server in order to be found by the application. You cannot use "http://www.internetpage.com/images/image.jpg".

Main settings: the grey area

This area is divided in two: one for scrollbar settings and one for settings like menu positioning, menu background and transparency, sounds and autocollapse function. Autocollapse is a function you can use to collapse open submenus when another submenu is opened.

When beginning to set your menu, you usually begin setting the scrollbars. You can activate the custom scrolls or use your browser's scrolls. If you activate the custom scrolls, you will benefit of advanced, cool looking scrolls. This is useful if you need to constrain the work area of the menu to a table cell or layer, and you do not wish the menu to resize itself. Try both settings to see the results. Change the scrollbars to any .JPG or .SWF you like (.SWF recommended). You can even use dynamic sequences in order to make the scrolls even more personal and cool. The same goes for all four scroll buttons. Here is an example.

Remember: when you need to change the horizontal scrollbar, first you'll have to press the button named "Horizontal".

Scroll speed sets the speed used when you press one of the directional buttons up/down/left/right. It can be useful when the size of the menu demands another scroll speed. Menus used on a PocketPC, menus with big letters or when distance between rows is big. Try the settings for best performance.

Scroll corner is the small square on the bottom right side of the screen that appears when both the horizontal and the vertical scrolls are visible. It has a shadow that can change its intensity (alpha) and its color can be changed.

The area "Main settings" are for the whole menu.

First we have "Auto collapse". Activate this function by checking the box.

Padding changes the menu's position. Notice: this is the only case when you'll have to press the SET button even when you change the position using the arrows. This is only because this setting is for everything on the screen.

Submenu position describes the position of the opened submenus.

Back color is the menu's background color. You can even change the menu transparency by changing the alpha value. If you wish to use a transparent menu, you'll have to change the "wmode" from "window" to "transparent" in the page source. Here is the information about setting the source code for your page.

Enable sound. Sound is important in some cases and this application gives you the possibility to use sounds to enhance your menus. Press the little speaker icon to listen to the sounds. If no sound is heard, the path to your sound file is incorrect.
Notice: Sound files are not referred to the "images" directory. It refers to the same location as the menu application.

Style settings: the red area

This area is for the selected style ONLY. Because of the fact that you can use an unlimited number of styles with your menus, it's important to know which style you work with. Read the style number displayed in the text field! When you press on a menu row using another style, the style number filed will flash a few times.

When you create a new style by pressing the "Add new style" button, the application duplicates the selected style and positions it at the end of the style list. So if you have 12 styles and chose style nr. 6 and press the "Add new style" button, you will clone nr. 6 and gives the new style the number 13.

Delete the selected style by pressing "Delete this style". Make sure you have enough styles left on your list in order for the application to function correctly. If you have an advanced menu using 6 styles, for example, you should not have only 5 styles on your list. If you notice any anomalies after deleting a style, create a new one  immediately. This might help you a little, but it doesn't fix anything. Remember: there is no undo function available!

Expansion refers to the navigation icons. It is usually a plus/minus sign, or small arrows and it means there are submenus available. It shows when a menu is open and it can be used to close or open submenus.

Show icon deals with the icon display. All menu rows can have an icon and here you can chose to display it or not, change the position and activate the hover or click events that trigger the change of the icons. Notice: select the icon you want to set "menu" or "item" icons.

Textfield width is the width of the row. It's not the width of the text itself. It's an invisible (if you wish) text field and it can decide the width of the menu, depending of the row background settings (blue area). "100%", "Text field", "text width" and "Right margin". If the row background width is set to "100%", the application will ignore the text field width set here and draws the rows as wide as the menu designated area permits.

Hit area size refers to the area where the mouse pointer lays over the rows. It's a distance in pixels beginning at the text fields first pixel. You can write any number you wish or write the text 100% if you wish to use the whole designated width. You can write 0 in case you wish to create headlines with selectable text. Remember: if you write 0, you cannot select the rows using this style! You can leave a few pixels available for row selection until you finish setting the menu, and then change it to 0.

Row padding is a number describing the distance between rows. This setting lays here because every style can have its different row padding.

Double click. Here you can activate this function for menus and items separately.

Add text padding activates a function that helps you with the design considerably. If you activate this function and move down the text in the blue area, the application will automatically add the same amount of pixels below the moved text. It this way the text will automatically center itself vertically. Remember: if you use text padding you'll have to set the row height (blue area) to a number lower than the text y coordinate in order for the results to be correct. Meanwhile it's noticeable that you can even try with a high row height in order to create a "different" look.

Enable pop-up activates the function that displays row pop-ups. Here you can even change the text and background color. There are four alternatives:
 

  1. "Popup text" is the row description found in the menu XML-data.
  2. Item Name” is the same of the row text.
  3. ItemID” is the ID of the row found in the XML-data (useful when developing menus using database).
  4. ParentID”  is the parent ID of the row found in the XML-data (useful when developing menus using database).

You can have one, two, three or all alternatives at once. The info is displayed in the order you activate them. Deactivate a variable by clicking on it again. Below you can read the order of the data. If there is no pop-up info in the XML-data, this field will not be displayed.

Row settings: the blue area

Here are all the settings for the menu rows, the visual display options

On top there are eight very important buttons. These buttons selects the menu mode you are working with:

Menu/Item” for normal mode
Hover” for rollover mode
Selected” for selected row mode
Hover sel.” for roll over selected mode.

The top row is for menus and the bottom row is for items. Notice: when you select a row in the menu, the normal mode is selected automatically.

Above these eight buttons are another two, very important, buttons. They are the Copy and Paste buttons. In order to make things easier when designing your menus, you can use the Copy/Paste function to copy row settings from one menu mode to another within the selected style, or between styles.
Select a menu mode, press the copy button, select another menu mode and press the paste button to paste the settings. If you wish to copy the settings to another style: select the menu mode you wish to copy, press the copy button, chose another style, press on the menu mode you wish to copy the setting to and then press the paste button. Or, if you don't know the number of the style you need to copy the settings to, you can press on the row you wish to copy the setting to and then select the menu mode before you press the paste button.
If you wish to abort the operation, press the copy button again.

   

The blue area is divided in three sections: Font settings, Background settings and Border settings.

Font settings
When you select a font from the list, you can see the result immediately. Tip: press the up/down buttons on your keyboard to browse between the different fonts in the list. Notice: not all the fonts in the list can be rendered by Flash, and not all the users can have the same fonts installed, so try using only standard fonts. If you want special fonts to be embedded in the application, contact BitWorks for a special custom made version of the application.

Press "Textfield" in order to show the text field, and then you can change its color.

If you need to create a headline and you want the text to be selectable, check the Selectable text box. Notice: if you activate this, you will not be able to select this row by clicking on its text. If the setting for the hit area is 100%, then you will be able to press on this row. Tip: set the this option when you are done with the menu settings.

Wrap decides if the text should brake in several lines if it doesn't fit the designated space.

Notice: Selectable text and Wrap can only be set under normal mode and the changes are valid for all modes at once.

Background settings

Height” is the row height. If this number is lower than the text height, it will have no effect.

Width” is the row width, and in some cases, even the whole menu width. There are four options: ”100%”, ”Text field”, ”Text width” and ”Right margin”.  

Text field” draws the rows with the same width as Textfield width set in the red area. This means that the menu rows will always have this width and if the Submenu position in the grey area is set to a number greater than zero, the menu will increase in width.

Right margin” sets the maximum menu width to the value of Textfield width set in the red area.

100%” draws the menu rows with the with designated menu area.

Text width” draws the background as wide as the text itself is.

The designated area of the menu is the area where the menu resides. It can be a table cell, layer, frame or whatever you wish.

Row background activates the display of the row background. You can change its position, color and transparency (alpha) here.

Padding is a function that automatically cuts the background height with the same amount of pixels when it's moved down in order to create an interesting effect.
Here is an example of how the background, which is grey, had been moved down with 11 pixels and the function automatically adjusted its height.

Background object is an object that lies between the text and its background (not the text field) and has a powerful impact to the design. You can put any .JPG image or .SWF sequence and create amazing cool menus with no equal on the internet. It can be anything from static images, blinking rows, burning menu rows, snow effect, fading effect, rolling backgrounds or advanced scripted .SWF sequences to create burning cursors, color changing menus and much, much more. Here are some examples.

Scale to fit is another interesting function. It resizes the background object so it fits on the menu row. This let's you create amazing backgrounds with virtually any size, and use them on your menus. Notice: in order for the application to resize the background object correctly, the file contents must cover the entire area. Below we can see a button that doesn't cover the entire area and will not be resized correctly. Tip: if you have a sequence that cannot use the whole area (something script based), you can draw an invisible square that covers the whole area.

Borders

If you wish to create rows with borders, you have two alternatives: simple and double borders.

Inside refers to the inside line of the border. When you have simple borders, this line is the visible line. You can change line thickness, line color and line transparency (Line Alpha). A line thickness of zero pixels is rendered as a one pixel thick line on any resolution.

When you select the double border, you'll activate more buttons. Distance referes to the amount of pixels between the lines.

Check filled if you want to fill the area between the lines with a color of your choice. Change the fill transparency for a better effect.