Getting Started

Ulead Button.Applet is a powerful applet-producing design tool for creating buttons on Web pages. The buttons that you make with Button.Applet will move, glow, and change according to the movement of a mouse or any other pointing device.

When you first start Ulead Button.Applet you can define the basic size and color of your button. Once these are set, it only takes a few clicks to make a row of buttons that can fit together on your Web page.

You can then adjust and modify each individual button. Change the shape, color, and text. Import GIF or JPEG files to be used as patterns, customize the way the buttons appear when clicked on, or adjust the effects of the buttons when the user's mouse passes over them. Make the text glow with neon, apply shadows, gradients, or change the text color.

And when you’re done, you can output the complete Java code direct to your HTML editor.

Limitations of Button.Applet:

1.	GIF Animations may display incorrectly in this version when used with the JDK1.0.2 java virtual machine.

2.	Many effects may not function correctly when viewed on the Macintosh platform.

  Creating a new Applet


  New

Creates a new project.

  Creating a new Applet

  Getting started


  Open

Opens a previously saved project file.

  Getting started


  Applet Wizard

Opens the Applet  Wizard which takes you through the applet making process, step by step.

  Getting started


  Save

Saves the existing project.

  Getting started


Save As

Saves a previously saved project file with a new name.

  Getting started


  Output HTML

Generates the HTML code within the <Applet> tag, ready to paste into your HTML document.

  Using your Applet

  Getting started


Recent Files

Displays the most recently opened files.

  Getting started


Exit

Closes Button.Applet. If you have any unsaved project files open, you are prompted to save them now.

  Getting started


Undo

Undoes the previous command.

  Getting started


  Cut

Cuts the selected button and places it in the Windows clipboard.

  Getting started


  Copy

Copy Current Copies the currently selected button.

Copy Checked Button Copies all checked buttons.

  Getting started


  Copy HTML

Copies the <Applet> tag HTML code to the Windows clipboard. Switch to your HTML editor and paste the code in.

  Using your Applet

  Getting started


  Paste

Pastes button data from the Windows clipboard.

  Getting started


  Insert Button

Inserts a new button into the project.

  Creating buttons

  Getting started


  Delete Button

Removes the selected button from the project.

  Creating buttons

  Getting started


  Move Button Up

Moves the selected button up one level.

  Creating buttons

  Getting started


  Move Button Down

Moves the selected button down one level.

  Creating buttons

  Getting started


Previous Button

Selects the previous button in the list on the left panel.

  Creating buttons

  Getting started


Next Button

Selects the next button in the list on the left panel.

  Creating buttons

  Getting started


  Global Attribute Change

Applies an attribute change to all buttons. Once in the Global Attribute Change dialog box, you can select to apply the attribute change to all buttons, or only to checked buttons.

  Streamlining your work

  Global Attribute Change dialog box

  Getting started


Preview in Browser

Displays a preview of the Applet in your default web browser.

  Previewing your Applet

  Getting started


  Layout

Displays the Layout dialog box. In this dialog box, you can select how buttons in the applet are displayed.

  Workspace

  Layout dialog box

  Getting started


Toolbar

Toggles between hiding and displaying the Toolbar.

  Standard Toolbar

  Getting started


Order Now!

Launches your default web browser, pointed to the Ulead Applet.Button purchasing web page.

  Getting started


Help

Runs the Button.Applet online help.

  Getting started


Getting Started

Displays an introduction from the Button.Applet online help. This topic provides an overview of the functions of Button.Applet and gets you started creating your own Applet for your web pages.

  Getting started


Web Utilities Home

Launches your default web browser, pointed to the Ulead Web Utilities web page.

  Getting started


About

Displays copyright and version information about Button.Applet.

  Getting started


  Preview in Internet Explorer

Launches Internet Explorer and displays the Applet.

  Previewing your Applet

  Getting started


  Preview in Netscape Navigator

Launches Netscape Navigator and displays the Applet.

  Previewing your Applet

  Getting started


  Context Sensitive Help

Click the help button and then click anywhere on the workspace for context sensitive help.

  Getting started


Button.Applet Workspace

Standard Toolbar

Left Panel

Right Panel


Workspace - Standard Toolbar

The Standard Toolbar contains shortcuts to common menu commands and tools to make working with Button.Applet faster and easier. Click below for more information.

  Getting started


Workspace - Left Panel

Click below for more information.

  Getting started

  Global Attribute Change

  Streamlining your work


Displays the Applet dialog box in the Right Panel. Use this dialog box to select attributes for the entire Applet.


Displays the Button dialog box in the Right Panel. Use this dialog box to select attributes for individual buttons.


Use the checkbox to select buttons to be included in Global Attribute Changes.


Workspace - Right Panel

Depending on what you have selected in the Left Panel, the Right Panel of the Workspace will either display the Applet dialog box or the Button dialog box.

Use the Applet dialog box to choose attributes for the entire Applet, such as the Applet size and color, and Applet border options.

Use the Button dialog box to select attributes for individual buttons within the Applet, such as button size, position and color; text to be displayed on the button and text effects when the user performs a preset action such as passing their mouse over the button.

  Applet dialog box

  Button dialog box

  Getting started


Applet dialog box - General tab
Applet dialog box
  General tab	  Advanced tab

Specifies general attributes for the entire Applet, including the Applet size and background color.

  Creating a new Applet


Applet dialog box - Advanced tab
Applet dialog box
  General tab	  Advanced tab

Specifies more advanced attributes for the entire Applet, including the spacing between the Applet and the remainder of your web page and border options.

  Creating a new Applet


Button dialog box - General tab
Button dialog box
  General tab	  Shape tab
  Label tab 	  Advanced tab

Specifies general attributes for individual buttons within the Applet, including button size, position, color, and the target URL to be opened when the user clicks on the button.

  Creating buttons


Button dialog box - Shape tab
Button dialog box
  General tab	  Shape tab
  Label tab 	  Advanced tab

Specifies the general shape and border for the button. Create custom buttons by selecting Import Mask from the Shape list to import a previously saved transparent GIF image file. When you import the GIF, all areas previously selected as transparent will also become transparent on the Applet button, displaying the Applet background color or image.

  Creating buttons


Button dialog box - Label tab
Button dialog box
  General tab	  Shape tab
  Label tab	  Advanced tab

Enter text and select font options for individual buttons within the Applet. Use the Text effect group to select effects when the user carries out a selected action. These effects include applying a two-color gradient, change of color, neon effect, shadow or emboss effect to the text.

  Creating buttons


Button dialog box - Advanced tab
Button dialog box
  General tab 	  Shape tab
  Label tab 	  Advanced tab

Add advanced features to individual buttons within the Applet, such as status bar text, ToolTips and sound. All these options take effect when the user passes their mouse over the button.

  Creating buttons


Gradient Fill dialog box

Applies a two color gradient fill. Select the style of gradient and click the color previews to change the gradient colors.

  Editing buttons


Emboss dialog box

Applies an emboss effect. Select the direction of light in degrees (a value of 90 simulates a light directly above the object) and the strength of the effect by adjusting the thickness value. The higher the value, the stronger the effect.

  Editing buttons


Target dialog box

Select display options for the target URL for your button.

  Editing buttons


Neon dialog box

Applies a neon effect to the text. Click the color preview to select a new neon color and choose the direction of the neon glow.

  Editing buttons


Shadow dialog box

Applies a drop shadow to text. Click the color preview to select a new shadow color and choose a shadow direction, the distance the shadow is offset from the text and the transparency of the image. The higher the value, the more transparent the shadow is.

  Editing buttons


Layout dialog box

Displays a visual representation of the Applet. Click and drag the buttons to reposition them. Select multiple buttons to use the Align, Distribute and Center functions on the Toolbar. Click Grid for Snap to Grid options and click Preview to view the Applet in your default browser.

  Customizing the layout of your Applet


Grid dialog box

Selects options for the grid in the Layout dialog box. Select Snap to Grid to make aligning buttons manually easier. Increase or decrease the size of the grid by changing the values in the Horizontal and Vertical spaces boxes.

  Customizing the layout of your Applet


Global Attribute Change dialog box

Select attributes to globally apply to a buttons within the Applet. Choose to apply the changes either to all buttons in the Applet or only those selected in the Left Panel.

  Streamlining your work


Button Face dialog box

This is where you define how a button face is replaced when a user moves his or her mouse cursor over it. The options range from simple colors to gradient colors to using an image file.

  Creating roll-over mouse effects


Creating a new Applet - General Tab
Creating a new Applet
  General Tab	  Advanced Tab

When you first open Ulead Button.Applet, the Applet dialog box is displayed in the right half of the workspace. Use the General and Advanced tabs in this dialog box to set up the basic structure of the Applet as a whole.

1.	Select the height and width of the Applet (in pixels).

2.	Click the color preview to select a default background color. If you choose to display a centered or offset image file, this color will be displayed in the remaining areas of your Applet.

3.	Select background options. Click Options  [image]  to choose Gradient colors and the style of the gradient fill. If you are using an image file as the background and choose the Fit display option, make sure your image is not so small that the quality deteriorates when it is resized.

4.	If you are using a simple image you may want to add an emboss effect to the background. This adds depth and texture to the image. Click Options  [image]  to adjust the lighting and strength of the effect.

  Applet dialog box - General tab


Creating a new Applet - Advanced Tab
Creating a new Applet
  General Tab	  Advanced Tab

When you first open Ulead Button.Applet, the Applet dialog box is displayed in the right half of the workspace. Use the General and Advanced tabs in this dialog box to set up the basic structure of the Applet as a whole.

1.	To add extra space between your Applet and the rest of your web page, select Horizontal and Vertical spacing. This function is similar to the <cellpadding> command in regular HTML. The higher the value, the greater the space.

2.	If the user browsing your web pages is using an old browser, it may not recognize the Applet code, and simply display a plain gray box. Make your Applet user-friendly by selecting Alternate text and adding a short description about the Applet. This will be displayed instead of the gray box.

3.	Give your Applet more emphasis by adding a border. Select Applet border to create a simple bevel edged border around the entire Applet.

4.	Select Pressed to invert the border. Select Use fade effect border to blend the edges of your border. Adjust the degree of change by increasing or decreasing the Change color value.

5.	To create Applet hints that appear in the user's web browser status bar, select the Applet hints options Show Status Bar Text and enter your text string.

6.	Select Change Cursor Shape to make a user's mouse cursor take on the shape of a hand when the hotspot is moused over. (This is similar to what happens by default in most browsers when you mouse over a hyperlink.)

  Applet dialog box - Advanced tab


Creating buttons

When you first begin working with an Applet, one default button is included with the project. Adding more buttons is quick and simple: Select Insert buttons from the Edit menu, or press Ins. Once you have added a button, switch to the General tab in the Button dialog box to select basic attributes.

To re-order buttons, select Move Button Up [Ctrl + B] or Move Button Down [Ctrl + D] from the Edit menu.

  Button dialog box


Editing Buttons - Basic
Editing buttons
  Basic	  Advanced

Layout

Use the General tab to adjust the position of the buttons by entering x and y co-ordinates. The uppermost left corner of the Applet represents 0,0.

Select Layout from the View menu to switch to a visual representation of the Applet. Press Ctrl and select multiple buttons to use the align, distribute and center functions on the Toolbar, or click  [image]  to use the Grid and align buttons manually. Click Preview to view the Applet in your default browser.

Shape

Select the Shape tab from the Button dialog box and from the Shape list select a new shape for your button. Alternatively, select Import Mask to create an irregularly shaped button. The mask creates transparent areas on the button depending on the arrangement of black and white in the mask. For example, all white areas in the mask will be fully transparent, while all black areas will be completely opaque.

Color

Click the Color box in the Button General layout tab to select the default button color. If you choose to use an image on the face of a button that is smaller than the button itself, this color will be displayed in the remaining areas.

Create a gradient fill on the button by selecting Gradient fill. Click Options  [image]  to select the two colors to use in the gradient and select a gradient style.

To give your buttons more impact, try filling the button face with an image. Select Image file and click browse  [image]  to select a previously saved GIF or JPG file. For best results, use a file that is roughly the same size as the button.

Text

Use the Label tab to add text to your buttons:

Button.Applet lets you add up to 256 characters to your buttons. Select Anti-aliasing to blend the edges of your text with the color of the button. This removes the jaggy edges that can occur with text.

Select a font size and style from Helvetica, Courier, Times Roman and Dialog. These are the four basic fonts supported by Java. Click the Color preview to select a new font color, bearing in mind the color or image you have selected for your button.

  Button dialog box


Rectangle	Rounded at two sides
Rounded Rectangle	Ellipse


Editing buttons - Advanced
Editing buttons
  Basic 	  Advanced

Text Effects

Use the Label tab in the Button dialog box to apply text effects to your buttons.

In the Advanced group, select an event:

Button up Occurs when the user releases the button.

Mouse over Occurs when the user passes their mouse over the button.

Button down Occurs when the user clicks on the button.

Once you have selected an event, select an effect from the list:

Change color Changes the color of the text. Click Options to select a new text color. This effect not available for the Button up event.

Gradient Applies a selected two-color gradient fill. Click Options to select the gradient colors and the direction of the gradient.

Emboss Applies an emboss effect to the text, creating depth and texture. Click Options to select a light direction and adjust the strength of the embossing.

Neon Applies a neon glow around the edges of the text. Click Options to select a neon color and choose the direction of the glow.

Shadow Applies a drop shadow to the text. Click Options to select the shadow color, direction, transparency and offset.

Border Effects

You can create a special type of MouseOver effect using a button's border - when you MouseOver the button, the border shifts according to the type of effect you've selected, making it more interactive.

Standard Does nothing to the border, leaving it static and unmoving.

Raise makes the button appear to raise up when you MouseOver it. This is the same effect found in Office97 and Windows98 toolbar buttons.

Shrink makes the button appear pressed when you MouseOver it, creating the opposite effect of Raise.

  Button dialog box


Using masks to create a button shape

In addition to choosing a regular shape from the list on the Shape tab, you can also apply a mask to your button to create irregularly shaped buttons.

1.	In your image editing program, create and save a transparent GIF image.

2.	Switch to Button.Applet and select the Shape tab from the Button dialog box.

3.	From the Shape list, select Import Mask.

4.	Click Browse  [image]  to open the GIF image file you just created. All areas in the GIF that you selected as transparent will be also transparent on the button, displaying the background color or image of the Applet.

  Button dialog box


Customizing the layout of your Applet - Visually
  Using co-ordinates	  Visually

1.	Select Layout [Ctrl + L] from the View menu to display the Layout dialog box.

2.	Select the buttons you want to reposition or resize. To select multiple buttons, press Ctrl as you select the buttons.

3.	To make manually adjusting the position and size of buttons easier, click Grid to open the Snap to Grid dialog box. Select Snap to Grid to make Applet buttons “snap” to the gridlines on the layout map. The Horizontal and Vertical Spaces values determine the size of the grid.

4.	To reposition buttons, click and drag around the Applet workspace.

5.	Resize buttons by clicking and dragging on the sizing handles of each button. To make all buttons the same size, select multiple buttons by pressing Ctrl and clicking on each button to select them. Click Make Same Size  [image]  on the Toolbar.

6.	In addition to resizing, try using the Align, Center and Distribute buttons to automatically arrange the buttons:

Aligns the left, right, top or bottom edges of all selected buttons.

Centers all selected buttons horizontally or vertically.

Equally distributes the amount of vertical or horizontal space between all selected buttons.

Resizes buttons so they are the same width and/or height.

If you have overlapping buttons, use the Layer buttons to move buttons up and down through the layers of the Applet. (The number of layers depends on the number of buttons in the Applet).

Zooms in or out on the layout.

Toggles between hiding and showing the gridlines.

7.	To preview the layout, select Layout [Ctrl + L] from the View menu to display the Layout dialog box, or select Preview in Browser [Ctrl + P] from the View menu to launch your default browser.

  Button dialog box - General Tab

  Layout dialog box

  Left Panel


Customizing the layout of your Applet - Using co-ordinates
  Using co-ordinates	  Visually

1.	Click a button in the button list on the Left Panel to display the Button dialog box.

2.	In the General tab, enter the x and y position values.

3.	Enter the width and height values, using pixels.

4.	To preview the layout, select Layout [Ctrl + L] from the View menu to display the Layout dialog box, or select Preview in Browser [Ctrl + P] from the View menu to launch your default browser.


Selecting a target URL

1.	In the Button dialog box, select the General tab. The URL text box is located in the first section of this dialog box. Enter the web site URL address of the page you want the user to go to when they click a selected button in your Applet.

2.	Click Options  [image]  to select display options for the destination page:

Current frame Opens the selected page in the same frame as your Applet.

Parent frame Opens the selected page in the main frame of the web page.

Top-most frame Displays the selected page in the upper-most frame of the current window.

Unamed window Displays the selected page in a new, unamed browser window.

Named window Displays the selected page in a new, named browser window.

  Button dialog box

  Target dialog box


Previewing your Applet

Periodically, you may like to view a graphical representation of your Applet. There are two ways to do this:

Select Layout [Ctrl + L] from the View menu. A wireframe image of the Applet is displayed. Click and drag buttons to re-position them, or press Ctrl and select multiple buttons to use the Align, Distribute and Center functions from the Toolbar.

If you are already in Layout mode, click Preview to display the Applet in your default browser. The Applet will be displayed as the end user will see it. Alternatively, select Preview in browser [Ctrl + P] from the View menu.

  Layout dialog box


Outputting the HTML code

As a stand-alone page Select Output HTML from the File menu. The Output HTML dialog box will open and you will be prompted to save the code as a new HTML document. Save this in the same folder as your other HTML documents. To use the Applet you will simply need to link to the new page from an existing page, or use it in a frame on another page.

As part of another page Select Copy HTML from the Edit menu. This copies the HTML code required for the Applet and pastes it to the Windows clipboard. Switch to your HTML editor and simply paste in the code where you want the Applet to appear.

  Using your Applet


Using your Applet
  General	  Button.Applet & FrontPage

In addition to inserting the necessary HTML in your web page source code, you also need to upload additional files to enable the Applet.

There are two methods to choose from:

Basic

1.	Select the necessary class files and any image or audio files the Applet uses. All the class files you will need are located in the Button.Applet program folder.

2.	Upload the .class files into the appropriate folder on your server. Place the files in the same folder as the HTML document containing the Applet. Upload any image or audio files required by the Applet into the appropriate folder.

The method outlined above is fine if all your HTML documents that use Applets are in the same folder. However, if you have HTML files in multiple folders that use Applets, you may prefer to edit the HTML code so that you only need to upload class files once.

Advanced

1.	Open the HTML document containing the Applet in your HTML editor.

2.	Inside the <Applet> </Applet> tags, add the following syntax: CODEBASE=codebaseURL (where “codebaseURL” is the location of the Applet). The location can be relative or absolute. The absolute URL is used as is, without modification, and is not affected by the document's BASE tag. When the CODEBASE= attribute is relative, it is relative to the document URL (or BASE tag, if defined)

3.	You must also make sure that you use the <code>, <width> and <height> tags in the HTML document. <code> specifies the name of the Applet, and the <height> and <width> tags specify the size of the Applet.

4.	Upload the required class files.

5.	For each subsequent HTML document that uses Applets, simply add the line in step 2 within the <Applet> tags.

  Sample HTML using the CODEBASE command


Using your Applet
  General	  Button.Applet & FrontPage

The first time you run FrontPage after installing Ulead Button.Applet, run FrontPage Explorer. From the Tool menu, select Recalculate Links. Once you have done this, follow the steps below to use Button.Applet with FrontPage:

1.	Run the FrontPage HTML editor. From the Insert menu, select FrontPage Component (for FrontPage98 users) or WebBot Component (for FrontPage97 users). Ulead Button.Applet should be displayed in the menu. Select to insert a Ulead Button.Applet. You will be prompted to download the component into the bootcache directory the first time you use Ulead Button.Applet.

2.	After you have finished making the changes in Ulead Button.Applet, click Save to keep your settings.

3.	Ulead Button.Applet will copy the required files to the current FrontPage web server, and then back to the FrontPage Editor.

4.	There are two ways to preview the web page containing your new Applet:

To preview in an external browser, first save the document you are working on. Next, click Preview in Browser on the Standard Toolbar. This launches your default browser and displays the HTML page you were working on.

Alternatively, to preview your HTML page within FrontPage, save the HTML document and close the document. Re-open the document and click the Preview tab at the bottom of the workspace.

Note:

Ulead Button.Applet copies the required files (Java class files [*.class], image files [*.jpg,*.gif], and a project file [*.uab]) to the current web server after you insert an Applet. If you delete an Applet from FrontPage, you will need to delete the unnecessary files (*.class, *.gif, *.jpg and *.uab) manually. Remember to check that these files are not used by any other Applets in your web pages first.

Ulead Button.Applet works in a project environment, and saves all Applet projects in a *.uab file. This file should remain on your server until you delete the Applet, or you will not be able to modify the applet using FrontPage.


Sample HTML using the CODEBASE command

Click a highlighted item for more information:

<APPLET

ALIGN=Left

ALT="Ulead Button.Applet"

CODE=AppletFileName

CODEBASE=http://www.ulead.com/Applet/class

HEIGHT=pixels

HSPACE=pixels

NAME=navbuttons

TITLE=Navigation Panel

VSPACE=10

WIDTH=10>

<PARAM NAME=image1 value="1,100,100,UleadGradient,6|UleadTwoColorRender|1|6850af|3db1c2|0">

<PARAM NAME=image2 value="1,100,26,UleadGradient,6|UleadTwoColorRender|1|a044bb|ffff80|0">

<PARAM NAME=buttontype1 value="3,25,100,26,0">

<PARAM NAME=face1 value="8080ff,2,4,0,0,,">

<PARAM NAME=border1 value="2,0,3,808080,20,UleadInsideEmboss,">

<PARAM NAME=border2 value="2,1,3,808080,20,UleadInsideEmboss,">

<PARAM NAME=button1 value="0,0,1,,,,,0,0,1,1,0,1,UleadAntiAlias,1,1,1,0,1,1,1,0,2">

<PARAM NAME=number value="1,1,2,0">

<PARAM NAME=background value="ffffff,1,4,0,0,0,Ulead Button.Applet v1.0,,,0">

</APPLET>


Alt

If your Applet is displayed by a browser that does not support Java Applets, this text will be displayed in place of the Applet.


Code

Specifies the name of the Java Applet.


Codebase

Specifies the URL of the Applet (the folder in which the Applet is located).


Name

Identifies the Applet from other Applets within the HTML document.


Param Name

Describes Applet-specific attributes. These include Applet size and color, button size and color and Applet effects.


Streamlining your work

If you want to make the same changes to multiple buttons, save time by using the Global Attribute Change feature:

1.	Select the button you want to use as a template for the other buttons.

2.	From the Left Panel, select all the buttons you want to apply the changes or effects to. If you want to apply the changes to all the buttons in the Applet, you can skip this step.

3.	Click Global Attribute Change  [image]  on the Toolbar or select Global Attribute Change [Ctrl + G] from the Edit menu.

4.	Select the attributes you want to copy from the selected button to the others.

5.	Choose whether you want to apply the change to all images in the Applet or only to the ones you checked in Step 2.

6.	Click OK.

  Global Attribute Change dialog box


Advanced techniques

Status Bar text Add extra hints for your users by displaying text in the status bar of their browser. Select Show status bar text on the Advanced tab of the Button dialog box and enter your text in the text box.

Show hints Add tooltips to your buttons so that when the user passes their mouse over the button a tooltip with the button’s name or a brief description is displayed. Select Show hints on the Advanced tab and enter the hint in the text box.

Play audio file To play an audio file when the user passes their mouse over your button, select Play audio file on the Advanced tab. Click Browse  [image]  to select a previously saved *.au file. Remember to keep the length of the file very brief or it may become very annoying for the user. For example, you might want to use a “click” sound to prompt the user to click the button.

  Button dialog box - Advanced tab


Troubleshooting

If you see "Applet can't start: class ______ not found" in your browser's status bar, it can mean one of two things:

1.	The .class file(s) are not named correctly. Java is case-sensitive, so make sure you follow precise capitalization.

2.	The .class file(s) are not in the correct folder. They should be located in the path indicated in the CODEBASE= section of the <APPLET> tag, or the same folder as your HTML document if no CODEBASE= is specified.

For more help, try posting a message to the comp.lang.java.misc newsgroup. (Clicking on this link will launch your default web browser).


Creating roll-over mouse effects

You can create roll-over mouse effects, where the button face changes when a user's cursor is moved over it:

1.	Select the Change Button Face When Mouse Over option on the General tab for that particular button layer.

2.	Next, click the options button to open the Button Face dialog box. Here you can select to use either a simple color, a gradient fill, or an image file to replace the image with.

  Button Face dialog box