JAVA APPLET EasyButton v2.2

Author: Danilo Kozub Homepage: http://DanKozub.com

Last update: April 9th, 2000


Contents:


History:

v2.2 - April 9th, 2000
Support of counters
More reliable  user font loading algorithm

v2.1 - April 5th, 2000
Enhanced compatibility with old versions of Netscape

v2.0 - April 4th, 2000
User fonts support :
Image loading enhanced

v1.5 - March 19th, 2000
Animated colors improvements
Animated color support for background, 
"underline","rect" and "gradient" effects
"UpdateTime" parameter added

v1.4 - March 14th, 2000
Animated text color supported

v1.3 - March 9th, 2000
new color constants (blue+40,red-20)
New effects ("lightline","sphere")

v1.2 - March 3rd, 2000
Special effects ("gradient fill", "rectangle", "underline", 'light" , "3D button")
new color constants (blue-) 


EasyButton is my version of the very popular type of  applets to create animated menu buttons and decorate your page. It was designed to make the process of creating new cool buttons much easier.

SAMPLES:


Sample 1 (default shadow, animated red bullet, sound, animated text color):

Personal Only 4 images were used for this menu
Personal Ball_blue.gif (928 bytes)
Personal ball_red_anim.gif (627 bytes)
Personal underline_blue.gif (982 bytes)
Personal underline_red.gif (982 bytes)
Personal
Personal
Personal

Sample 2 (no sound, 2 images for 2nd state):

Only 3 images were used for this menu HTML code for each button looks like this:
<applet code="EasyButton_v2_5.class" height="25" width="120">
<param name="Background" value="images/background1.jpg|#F8E0C8">
<param name="HREF" value="http://DanKozub.com">
<param name="Image1" value="button1.gif">
<param name="Image2" value="button2.gif|1|1">
<param name="Image4" value="tri_blue.gif|110|7">
<param name="text" value="JAVA|left|30|15|arial|10|bold|black|lightGray|0">
<param name="text2" value="||31|16||||blue">
</applet>
Personal tri_blue.gif (905 bytes)
Personal button1.gif (1381 bytes)
Personal button2.gif (1325 bytes)

Main features:


Download

EasyButton.zip(220K)


The latest version of this applet you can always be found at my site (http://DanKozub.com) if you downloaded this page from other site.

If you want to be notified about applets updates just send me a message with the subject "Add to EasyButton mail list".

Please, send me URL of your page with EasyButton menu - I'd like to create list of EasyButton users and choose the best designer.

 


Parameters:

Parameter Type Default value Description, format
HRef string "" URL location
Target string "_self" Target frame
Text string "" "ButtonText | h.alignment | x | y | font name | font size | font style | text color | shadow color | shadow size|ouline_size" - text and its attributes
Default values are bold:
h.alighment -- "left" or "right", x - defines offset from the the margin
x --"-1","0","1"...., if x== -1 then text is centered horizontally
y --"-1","0","1"...., if y== -1 then text is centered vertically
font name -- "Arial", "Times New Roman", etc.
font style -- "plane", "italic", "bold", "bold italic"
text color -- "black", "red", #FF00DD, etc. (see remark after this table)
shadow color - "grey", etc.
shadow size -- "1,0,2,..."
outline size -- "0,1,2"
Text2 sting $Text The same parameters for the text to be displayed on the button when the mouse is over
Image1, Image3 string "" "image | x | y" - reference to the images to be displayed in the normal state
Image2, Image4 string $Image1 Reference to the images to be displayed on the button when the mouse is over
Background string null "background image | background color" - Image and color that will be used for filling background.
Sound, Sound2 string null Sounds to be played when entering and exiting the button
Effect1,..3,..5,..7,..9 string null "Effect name|param1|param2..." - effects to be applied for normal state 
Effect2,..4,..6,..8,..10 string null "Effect name|param1|param2..." - effects to be applied for mouse over state
Status string null String to be displayed on the status bar 
UpdateTime string 50 Update frequency for animated colors
UserFont string null "source image | density | height | y_offset | x_offset"
Counter1, ..., Counter4 string null "path_to_counter_script | when_load | probability | x | y"
Copyright string preset Should be set to "(c) Danilo Kozub, 2000-2001, http://DanKozub.com, mail@DanKozub.com"

REM: Colors can be set by following string constants: "red", "green",  "blue", "pink", "orange", "magenta", "cyan", "white", "yellow", "gray", "grey", "black", "darkGray", "lightGray" of hex expressions like "#FF0000".
From the version 1.2 you can use string constants with modificators: "blue-"- darker version of blue, "magenta+" - brighter version of "magenta"
From the version 1.3 you can use string constants with modificators: "[color] [+/-] [n]" where n=0-100, i.e [blue-50] darker version of blue,
color+100=white, color-100=black, color+50=(color+white)/2 , etc.

Sounds should be in "AU" format. Animated gifs can be used as parameters.


Effects:


Effect: Rect

Move mouse cursor over the button to see color animation

Description: Draw rectangle of defined width and color sequence 
Arguments: "rect | width | anim_color1| anim_color2 | anim_color3 | anim_color4 | color5 | ..."

HTML code:

<applet code="EasyButton_v2_5.class" height="20" width="105">
 <param name=
"Background" value="|blue-">
 <param name=
"Copyright" value="(c) Danilo Kozub, 2000-2001, http://DanKozub.com, mail@DanKozub.com">
 <param name="Effect1" value="rect |3 |blue |white |blue">
 <param name=
"Effect2" value="rect |3 |white,1000,100>blue,1000 | white,1000,200>blue,1000 | white,1000,200>blue,1000">
 <param name="HREF" value="http://DanKozub.com">
 <param name=
"text" value="DOWNLOAD||||arial|12|bold|white||0">
 <param name=
"text2" value="|||||||yellow||">

</applet>

Please note animated colors for mouseover state of rectangle (Effect2)

There are also similar effects to draw and fill oval:

drawoval - parameters: "drawoval | width | color1| color2 | color3 | ..."
filloval - parameters: "filloval | color"


Effect: Underline

Description: Draw line of defined width and color sequence 
Arguments: "underline | width | anim_ color1| anim_ color2 | anim_ color3 | anim_color4 | color5 | ..."

HTML code:

<applet code="EasyButton_v2_5.class" height="20" width="105">
 <param name=
"Background" value="images/background1.jpg">
 <param name=
"Copyright" value="(c) Danilo Kozub, 2000-2001, http://DanKozub.com, mail@DanKozub.com">
 <param name=
"Effect1" value="underline|3|blue|white|blue">
 <param name=
"Effect2" value="underline|3|blue|red|blue"
>
 <param name=
"HREF" value="http://DanKozub.com">
 <param name=
"text" value="DOWNLOAD||||arial|12|bold|blue-||0">
 <param name=
"text2" value="|||||||red||">
</applet>


Effect: fill3DRect

Personal

Description: Draw 3D button
Arguments: "fill3drect | elevation | light color | dark color | button color "

HTML code:

<applet code="EasyButton_v2_5.class" height="18" width="105">
 <param name=
"Copyright" value="(c) Danilo Kozub, 2000-2001, http://DanKozub.com, mail@DanKozub.com">
 <param name=
"HREF" value="http://DanKozub.com">
 <param name=
"Effect1" value="fill3drect|3|blue|black|blue-">
 <param name=
"Effect2" value="fill3drect|3|blue|black|blue-"
>
 <param name=
"text" value="Button One||||arial|10|bold|white|gray|0">
 <param name=
"text2" value="|||||||yellow||0">
</applet>

This effect is combination of two effects, that can be used separately:

fillrect - parameters: "fillrect | color "
draw3drect - parameters: "draw3drect | elevation | light color | dark color "


Effect: Gradient

Personal
Personal

Move mouse cursor over the button to see color animation

Description: Gradient fill
Arguments: "gradient | color1 | color2 | vertical/horizontal | centered/plain "

HTML code:

<applet code="EasyButton_v2_5.class" height="18" width="105">
 <param name=
"Copyright" value="(c) Danilo Kozub, 2000-2001, http://DanKozub.com, mail@DanKozub.com">
 <param name=
"HREF" value="http://DanKozub.com">
 <param name=
"Effect1" value="Gradient | blue- | black | horizontal | centered">
 <param name=
"Effect2" value="Gradient | blue,1000>black,1000 | black,1000>blue,1000 | vertical "
>
 <param name=
"text" value="Button One||20||arial|10|bold|white|gray|0">
 <param name=
"text2" value="|||||||yellow||0">

</applet><BR>


Effect: Light 

 

Description: Light
Arguments: " Light | color1 | color2"
Remark: This effect is  quite slow 

HTML code:

<applet code="EasyButton_v2_5.class" height="30" width="140">
 <param name=
"Copyright" value="(c) Danilo Kozub, 2000-2001, http://DanKozub.com, mail@DanKozub.com">
 <param name=
"HREF" value="http://DanKozub.com">
 <param name=
"Effect1" value="light |red |black">
 <param name=
"Effect2" value="light |red+30 |black"
>
 <param name=
"text" value="Button One||||arial|10|bold|white|gray|0">
 <param name=
"text2" value="|||||||yellow||0">
</applet>


Effect: LightLine 

 

Description: Lightline
Arguments: " Lightline | color1 | color2"
HTML code:

<applet code="EasyButton_v2_5.class" height="30" width="105">
 <param name=
"Copyright" value="(c) Danilo Kozub, 2000-2001, http://DanKozub.com, mail@DanKozub.com">
 <param name=
"HREF" value="http://DanKozub.com">
 <param name=
"Effect1" value="lightline |blue |black">
 <param name=
"Effect2" value="lightline |blue+30 |black"
>
 <param name=
"text" value="Button One||||arial|10|bold|white|gray|0">
 <param name=
"text2" value="|||||||yellow||0">
</applet>


Effect: Sphere

 

Arguments: "Sphere | brightest color | medium color | darkest color | background color | x | y | diameter"
Remark: diameter should be even number, default value for y is center of the applet

HTML code:

<applet code="EasyButton_v2_5.class" height="30" width="105">
 <param name=
"Copyright" value="(c) Danilo Kozub, 2000-2001, http://DanKozub.com, mail@DanKozub.com">
 <param name=
"HREF" value="http://DanKozub.com">
 <param name="Effect1" value="sphere|red+50|red|red-70|black|120||26">
 <param name=
"Effect2" value="sphere|blue+50|blue|blue-70|black|120||26">
 <param name="text" value="Button One||||arial|10|bold|white|gray|0">
 <param name=
"text2" value="|||||||yellow||0">
</applet>


Animated colors ( v1.4+):

As you have already noticed you can use animated colors for text, background and some effects.
Animated color can be set by sequence of colors and transition periods between them.

Each color can be defined by string constant (blue, red, etc.), string constant with modifiers (red+50, blue-30, etc) or by hex number (#FF0000, #FBAA34, etc). Time should be set in milliseconds.

The simplest example of animated colors can be defined by the following string:
"black,-1000>red,-1000". Minus means that colors wouldn't be mixed.
It will look like this:
Personal

If you want colors to transform one into other set color to  "black,1000>red,1000" and you'll get this:
Personal

Number of colors in the sequence is unlimited, so you can create more complicated effects by using similar string:
"black,-1000>black,100>red+20,100>red,500":
  Personal

To create wave effect similar to the top buttons of this page, you can set delay for the redraw cycle. All you have to do is to add this parameter to the definition of the first color: "black,1000,100>red,1000". Red number means that animation will be delayed for 100ms relative to other buttons.

 


Counters: (v.2.2+)

You can set your EasyButton to load counter images when some events happen and with certain probabilities.
You can use up to 4 counters by adding the following parameters:

<param name="counter[N]" value="path_to_counter_script | when_load |  probability | x | y ">

Example:

<param name="counter1" value="/bin/counter/counter1 | always | 0.01 | 0 | 0 ">
<param name="counter2" value="/bin/counter/counter2 | click | 1 | 40 | 0 ">

In the above example one counter will be loaded once per 100 page loads, another counter  - every time the button is pressed.

 To see current values of counters click on the button with pressed SHIFT and CONTROL


Links:

 http://www.jcoms.com/ - Great examples and templates by Chuck Shirley

Mail me to add link to your great site with EasyButtons


Feel free to ask questions or send your comments to me.

 

 

 

HOME

 

 

(1.1.2000)