In this post I show you how to create a button with a click alert on it which is a slight animation that indicates to the user that they should interact with the button. The click alert will also gray out after being clicked.

You can use this tutorial to create flash eLearning interactions that indicate to the user that some action is needed. (hey you.click on me!) Also once they’ve clicked on it, you must have it visually change so that they know they’ve already been there.

Here’s the click alert example that I’ll show you how to create:
1. Create a movie clip with whatever animation you want as your click alert. For example in this sample alert I’ve created a red circle with a small rotating outline. Notice that the animation goes from frame 1 to frame 20 and then has an action that sends it back to frame 1. Basically I put a frame label named home on frame 1 and on frame 20 I put gotoAndPlay(“home”); so that it loops.
click_alert2
2. In your animation movie clip create one frame at the end of the animation that is a clicked state frame. So in other words, what will this click alert look like after a user clicks on it? In my sample it grays out and the animation stops. (frame 21) I added a color tint of gray to create mine.
click_alert3
3. Drop the movie clip on your timeline and give it an instance name. (I used clickalert)
4. Create another layer (below the layer with your alert) and insert any button that you want. I used a document icon with the words Course Summary.
click_alert1
5. Add the action script to your button to launch the url, document, or go to a specific movie frame and to have your click alert go its clicked state.Below is the code I used on the button. (Only use the click alert code and one of the other snippets. Don’t use both the getURL and this.gotoAndStop.
on (release) {//Start Behavior – This code launches a document or url

getURL(“http://www.yoursitenamehere.com”,”_self”);

//End Behavior

//This code goes to and stops at a certain frame of your flash timeline (this example uses frame 50)

this.gotoAndStop(“50″);

//End Behavior

//This code goes to a movie clip with an instance name of clickalert and goes to (and stops) at frame 21 within that movie clip. That is the frame that I created as my grayed-out frame.

this.clickalert.gotoAndStop(“21″);

//End Behavior
}

Here are some eLearning Flash Templates that use click alerts.

Pin It on Pinterest