( back )

Animating button feedback
Button feedback is usually taken for granted, but it can be difficult to pull off. This is an example of how Animation can make it easier. (The methods are loose in the general sketch class in this example; hopefully you can see how it would be easy to make a Button class.)

BImage button;
Animation button_click;
BFont font;

void setup()
{
  size(200,100);
  smooth();
  font = loadFont("RotisSanSer.vlw.gz");
  textFont(font, 20);
  button = loadImage("button.gif");
  
  // setup animation
  button_click = new Animation(this, button, 0,0, 0,0);
  button_click.setDuration(75);
  button_click.setEnd("setupButton");
  setupButton();
}

void loop()
{
  background(127);
  button_click.draw();
  text("Click the button.", 25, 25);
}

void mouseClicked()
{
  // see if the mouse was clicked inside the button's area.
  if ( (mouseX >= button_click.x())
     && (mouseX <= button_click.x()+button_click.w())
     && (mouseY >= button_click.y())
     && (mouseY <= button_click.y()+button_click.h()) )
    setButtonMoving();
}

// called by MouseClicked
// sets the button to scale to slightly smaller. (then setupButton is called.)
void setButtonMoving()
{
  button_click.setRectangle(75+3, 50+3, button.width-6, button.height-6);
  button_click.setStep("SCALE");
  button_click.setRepetitions(1);
  button_click.reset();
}

// called during setup, and again after the SCALE animation ends.
// sets the button to do nothing; just sit there.
void setupButton()
{
  button_click.setImageHeight(button_click.image().height);
  button_click.setImageWidth(button_click.image().width);
  button_click.setStep("NONE");
  button_click.setRepetitions(0);
  button_click.setRectangle(75, 50, button.width, button.height);
  button_click.reset();
}