Our simple button starts out like this...

<cfx_imageflare source="
  b = Bitmap()
  t = 'Crystal^'s Store'
  
  f = Font( 'Trebuchet MS', 9, 1 )
  
  b.size( f.getdimensions(t) )
  b.size( b.width+12, b.height+12 )

  b.fill( Color('steelblue') )  
  b.text( t, 6, b.height-6, f, Color('white') )
  b.save( '#expandpath('.\example06a.gif')#' )
">

Not exactly the most complex button, and easily reproduced in straight html. That is... until we add some decoration.

<cfx_imageflare source="
  include('#expandpath('.\doSomeDecorating.fs')#')
  include('#expandpath('.\simpleButton.fs')#')
  
  simpleButton(
    'Crystal^'s Store',
    Font( 'Trebuchet MS', 9, 1 ),
    Color('steelblue'),
    Color('white')
  ).save('#expandpath('.\example06b.gif')#')

  simpleButton(
    'Michael^'s Page',
    Font( 'Assiduous', 14 ),
    Color('seagreen'),
    Color('Gold')
  ).save('#expandpath('.\example06c.gif')#')

  simpleButton(
    'Alex^'s Links',
    Font( 'Mickey', 14 ),
    Color('VioletRed'),
    Color('white')
  ).save('#expandpath('.\example06d.gif')#')
">

As you can see, the above code employs user defined functions and include files to define the reusable simpleButton function.

simpleButton.fs contains :

// requires doSomeDecorating.fs

function simpleButton( text, font, bgcolor, textcolor )

  b = Bitmap()
  
  b.size( font.getdimensions(text) )
  b.size( b.width+12, b.height+12 )

  b.fill( bgcolor )  
  
  doSomeDecorating( b, bgcolor )

  textenhance = Color( bgcolor.red, bgcolor.green, bgcolor.blue )
  textenhance.brightness = textenhance.brightness - 0.2
  
  b.text( text, 5, b.height-7, font, textenhance )
  b.text( text, 6, b.height-6, font, textcolor )  

  // DEBUG :: b.resize(b.width*4,0,0)
  
  return b

end

As you can see, simpleButton handles the base bitmap and renders the text, but also calls doSomeDecorating, defined in doSomeDecorating.fs :

function doSomeDecorating( bitmap, basecolor )

  // color setup
  light = Color( basecolor.red, basecolor.green, basecolor.blue )
  light.brightness = light.brightness + 0.2
  
  dark  = Color( basecolor.red, basecolor.green, basecolor.blue )
  dark.brightness = dark.brightness - 0.2
  
  // border
  bitmap.line( 0, 0, bitmap.width, 0, light, 4)
  bitmap.line( 0, 0, 0, bitmap.height, light, 4)
  bitmap.line( bitmap.width-1, 0, bitmap.width-1, bitmap.height, dark, 4 )
  bitmap.line( 0, bitmap.height-1, bitmap.width, bitmap.height-1, dark, 4 )
  
  // upper right corner
  bitmap.setpixel( bitmap.width-1, 0, basecolor )
  bitmap.setpixel( bitmap.width-2, 0, light )
  bitmap.setpixel( bitmap.width-2, 1, basecolor )
  
  // lower left corner
  bitmap.setpixel( 0, bitmap.height-1, basecolor )
  bitmap.setpixel( 0, bitmap.height-2, light )
  bitmap.setpixel( 1, bitmap.height-2, basecolor )

end

This function draws a bevelled border around the specified bitmap using the specified basecolor. You can implement any number of custom buttons in this manner, with more interesting examples possible using ImageFlare's Bezier curve support. However, you can also create buttons from pre-crafted templates created in your favorite image editor.

The simpleButton function requires doSomeDecorating in order to work. At the top level implementation we include both of these files. Some might think to include doSomeDecorating.fs inside simpleButton.fs, but our convention is to handle dependencies between components at the topmost level. This might mean a few extra lines every now and then, but saves confusion in the long run. You could also group related includes together into self defined `packages` for inclusion at the top level if you use them together often. For example, buttonPackage.fs might consist of two includes for doSomeDecorating.fs and simpleButton.fs, and perhaps related button generating functions later on.

On a final note, you might be wondering what the following line in simpleButton.fs is for :

// DEBUG :: b.resize(b.width*4,0,0)

During creation of pixel drawn images, it is most useful to be able to zoom in and investigate the pixels more exactly.
When uncommented, the above line magnifies the image by 4x without a resampling filter, 0.

As usual, feel free to contact us with questions.
Click here to return to the examples index, or continue on to Example 7.