Button, Advanced: Flash button Image when touched

[Scott Ferguson]

This technique uses a common procedure and a few global variables to flash button Images when the buttons are touched.

Open the attached project lrn_button_flash_image and follow along ...

Screen Designer:

Set Screen1.BackgroundColor to Dark Gray

Set Screen1.Title to Press a button ...

Create a HorizontalArrangement

Set it's Width to Fill parent

Put a Button inside the screen arrangement.

Rename it to phone_btn, set it's Image to phone_b.png

Put a 2nd Button inside the screen arrangement to the right of the phone button.

Rename it to search_btn, set it's Image to search_b.png

 

Insert a Label.

Change it's BackgroundColor to Black, empty the Text Textbox and set it's Width and Height to Fill parent

  - this acts as a filler on the menu bar

Create a Clock component and set it's TimerInterval to 250

Rename it to button_flash_clk

Blocks Editor:

 - When the user touches a button, it's Image will change for 250 ms to a blue-highlighted Image then revert to the original Image in this example.

Each button's Click event calls text_button_flash_Image procedure with it's button component to flash the button's Image.

The button_flash_clk.Timer event passes the component value of the last pressed button touched to the flash procedure with the saved_button_component global variable 

The text_button_flash_Image procedure uses the button_component argument to accept the passed button component values.

The button_flash_clk.TimerEnabled value is False before a button is pressed.

So when the button is pressed and the flash procedure is called from the button's Click block, button_flash_clk.TimerEnabled's value is checked, found to be False and the else-do section of the ifelse block is executed:

1. the button's Image is saved
2. it's Image is changed to the flash Image
3. the button's component is saved in the global variable to be used later by the timer block to revert to the original Image
4. the timer is enabled

Once the button_flash_clk.Timer is enabled, there is an initial delay of 250 ms, then the text_button_flash_Image procedure is called with the global saved_button_component value previously saved.

Since button_flash_clk.TimerEnabled's value is found to be True, the then-do section of the ifelse block is executed:

1. the timer is disabled
   
2. the button's Image is changed back to it's initial value

Try out the project in the emulator or connected device.

- You can set a button's initial and flash Image to whatever you wish.

 

Challenge: Use either the spacer label in the menu bar or the Title bar to display status information when a button is pressed