Change the Image Displayed, Dependent on the Name of a Button

This tutorial is specific to our newest product, Hudl Sportscode. If you’re on Sportscode v11, use these resources instead or upgrade today.

Desired Outcome:

Change the image displayed, depending on the name of a different button.


Example Used:

In this example we will show how to cause a player's image to be displayed when their name is chosen for a different button.


Commands Used:

  • $this_button
  • Move button front
  • Move button back
  • If (Statements)
  • #”button_id”
  • opacity

How-to:

  1. Copy and paste the possible images into your code window. In this example, we want the image to show either Steph Curry or Draymond Green, so we've added both their images to the code window. Make both images inactive buttons and add the name of each player to the Button name in the inspector.

  2. Create an inactive button and add text you want to change. In this example, we've used player number and name. Assign the button a button ID in the Behavior tab of the inspector.

  3. With the same button selected and the inspector open, switch to the Alternate names tab. Add the possible text for the button to show.

  4. Select all the images (in this example just 2) and go to the Script tab of the inspector. Add the following script:

    $name = $THIS_BUTTON
    Utilizing the $THIS_BUTTON command, the variable $name will get the name of the button we are working on.

    $player_button = #"PLAYER"
    The variable $player_button will get the name of the button with ID = PLAYER.

    IF ($name = $player_button, button opacity 100, button opacity 0)
    We use an if statement to check if the name of the image ($name) is the same as the name shown in the button that has ID = PLAYER ($player_button). If this is true, we set the opacity of the image button to 100%. If it is not true, we set the opacity to 0% in order to hide it.

    IF ($name = $player_button, move button front, move button back)
    We do the same check as in the first “if”. If it is true, we direct it to move the image button to the front. If it is not true, we are going to move it to the back.

  5. Move all of the image buttons to the exact same spot. Do this by going to the Appearance tab in the inspector and ensure each has the same x,y coordinates.