How to make a Fading GUI Button?

Hello Everyone,

I’m trying to make flashing a GUI button when I press the button and stop the flashing when I press it again.

I have two buttons and I want to make the first one to enable to flashing.

Please take a look to my script.

Any advice is more than welcome!

var  Skin_key   : GUISkin;
var  Skin_tool   : GUISkin;
     
var  flash = GUI.color.a;
var instanceMet : boolean = true;
var flashing : boolean = false;
       
        
function OnGUI (){    
    // BUTTON ONE /////////////////////////////// 
    GUI.color.a = flash;
    GUI.skin = Skin_tool;
    if (GUI.Button(Rect(870,345,80,80),"")){
        checkGUI  ();
    }        
    
    // BUTTON TWO////////////////////////////////
    GUI.color.a = .1;
    GUI.skin = Skin_key;
    if (GUI.Button(Rect(870,428,80,39),"")){}
}
        
// FUNCTIONS ////////////////////////////////    
function flashGUI () {    
    yield WaitForSeconds(0.075);
    flash. GUI.color.a  = 0.125;
    yield WaitForSeconds(0.075);
    flash. GUI.color.a  = 0.250;
    yield WaitForSeconds(0.075);
    flash. GUI.color.a  = 0.375;
    yield WaitForSeconds(0.075);
    flash. GUI.color.a  = 0.250;
}  

function checkGUI() {
    if (instanceMet) {
        flashGUI();
        flashing = true;
    } else {
        flashing = false;
    }
}

You could achieve this with LeanTween pretty easily:

LTRect buttonRect3 = new LTRect(0.0f, 0.0f, 200f, 100f );
    
function OnGUI(){
	if(GUI.Button(buttonRect3.rect, "Alpha")){
		LeanTween.alpha( buttonRect3, 0.0f, 0.25f, new object[]{ } );
		LeanTween.alpha( buttonRect3, 1.0f, 0.25f, new object[]{"delay",0.25f} );
		LeanTween.alpha( buttonRect3, 0.0f, 0.25f, new object[]{"delay",0.5f} );
		LeanTween.alpha( buttonRect3, 1.0f, 0.25f, new object[]{"delay",0.75f} );
		LeanTween.alpha( buttonRect3, 0.0f, 0.25f, new object[]{"delay",1.0f} );
		LeanTween.alpha( buttonRect3, 1.0f, 0.25f, new object[]{"delay",1.25f} );
	}
}

What I do in my projects is to define a wrapper around most Unity GUI elements. I typically find myself needing to tween not just color, but location as well.

Try something along these lines:

[Serializable]
public class TweeningButton
{
  public float TweenRate;
  public Color Tint;
  public Color TargetTint;
  public Vector2 Position;
  public Vector2 TargetPosition;

  public void Tween()
  {
    Tint = Color.Lerp(Tint, TargetTint, TweenRate);
    Position = Vector2.Lerp(Position, TargetPosition, TweenRate);
  }

  public bool IsClicked()
  {
    return GUI.Button(new Rect(Position.x, Position.y, Dimensions.x, Dimensions.y), text);
  }
}

That should get you started. Pretty much, this utility class is wrapping the GUI element. On an actual behavior, you would call Tween on FixedUpdate, and call IsClicked in OnGUI. If is clicked, your behavior would then alter state or kick off some other action.

So, a basic behavior - with a flashing button, that is - using this would look a bit like this:

public class FooBehavior : MonoBehaviour
{
  public bool IsFlashing = true;
  public TweeningButton Button;;
  public Color[] FlashColors = new Color[2];

  private const float _colorEpsilon = 0.1f;

  public void Start()
  {
    Button.Tint = FlashColors[0];
    Button.TargetTint = FlashColors[1];
  }

  public void OnGUI()
  {
    if(! IsFlashing)
      return;

    if(Button.IsClicked())
      IsFlashing = false;
  }

  public void FixedUpdate()
  {
    Button.Tween();

    if((Button.TargetTint - Button.Tint) < _colorEpsilon)
    {
      Button.Tint = FlashColors[0];
    }
  }
}

Hope that helps.