Creating Flashing Custom Button

If you used UIButton before, you will know that there are 2 iPhone built-in info buttons, which functions to go to Settings view of an app. They are those circular button with an "i" at the center of it.

If you tap on it, it will flash and the effect is pretty nice.

Now, I wanted to use this button for my app because of its flashing effect, but not for the settings purpose. So I decided to make my own flashing button. (Do note that if you use the built in info button for other purposes, your app MAY BE REJECTED, because it is not what Apple intended them to be).

Anyway, back to the main subject: Creating a flashing button. 

1. First you need to create your own button image. I used the GIMP program which ran off X11 terminal in my Mac. I love GIMP. Because its function is a lot similar like Paint Shop Pro/ PhotoShop program in my Windows box. All the tools are so familiar.

2. Once you created the button image, save it as PNG and set the background of that image as transparent - you need to know your graphics program to do this.

3. Next, create another image that resembles a white flash (or whatever color u wish). You can use the radial gradient tool to accomplish this. Make sure the background of the image is transparent too.

4. Once you have both image ready, then you can load it up in the "Resources" of your XCode project. (Just drag and drop under the Resources folder in the XCode).

5. Next, declare the white flash image in header file, this case, its the FlashingButtonViewController.h.

 
IBOutlet UIImageView *flashimage;

and also the related declaration as @property.

6. Go to FlashingButtonViewController.m main file, and add to synthesize:

 
@synthesize flashimage;

7. After that, declare the function that is going to be called when user tap the button. So we declare in FlashingButtonViewController.h:-

 
-(IBAction)custombtnclicked:(id)sender;

8. Then return back to Main file and write the function for custombtnclicked:-

 
-(IBAction)custombtnclicked:(id)sender {

[self flashit:flashimage];

}

[self flashit:flashimage]; is just a way to call another function from this function. I do it this way so that, if you have many other buttons you want to behave this way, then you don't need to rewrite a long function. So the function to flash the flashimage is:

 

-(void)flashit:(id)sender {
UIImageView *img = (UIImageView*)sender;
img.alpha = 0.8;
[UIImageView beginAnimations: @"FadeOut" context: nil];
[UIImageView setAnimationDelegate: self];
[UIImageView setAnimationDuration: 0.5];
[UIImageView setAnimationCurve: UIViewAnimationCurveEaseInOut];
img.alpha = img.alpha - 0.8;
[UIImageView commitAnimations];
}

What this function does is: declare the "sender" parameter as an imageview. Then set its alpha to 0.8 (1 is fully opaque, and 0 is invisible). Then we start to create animation of UIImageView.

We set the duration to 0.5seconds for the whole of animation of flashing. And the type is Curve Ease In and Out.This means the animation will start slowly, then fast, then back to slow before stopping.

Next, we tell XCode what to do with the image. This just return back the alpha channel back to 0 (invisible).

Basically, when user taps the button, we set the flashimage to fully opaque, then animate the fading out of the flashimage for 0.5seconds. Finally we tell XCode to execute the animation by calling commitAnimations. XCode will do the rest.

9. Now that you have all the codes ready, its left only to open up FlashingButtonViewController.xib in Interface Builder and place the buttons in and images in. But remember to place the flash image BEHIND the button, so that user can touch the button. You can use the Layout menu of XCode and selecting "Send to Back" function to send the flashimage to the back of the button. Finally, set the alpha of the UIImageView to 0, so that it is invisible.

10. Once all user interface items are created, it is time to link them to XCode variable declaration. Connect the "Touch Up Inside" of the UIButton to the function called customButtonclicked: and set the Outlet of the flash image to "flashimage".

11. Save all files and everything. Then it should be able to run and when you click the button in the simulator, it will flash and fade away.

Thats all.