In this tutorial we will create a little advanced button that have flow animation when the cursor is hover it and play sound when it clicked.


In the tutorial it will be uncovered following topics:

1. Creating basic button
2. Adding an object onto the button and uniting them as MovieClip
3. Adding keyframes to star and button animation
4. Setting some parameters and creating Tween-animation
5. Adding AS3 code for button animation handling
6. Adding a sound to the button

Creating basic button

First of all let's draw a button and add to it textfield. After that select the created objects and convert them to symbol-button.

Now we need to go into the button we have just created and add to it keyframes as button states. To do so select a required frame and right click for context menu where choose "Insert Keyframe".

Once keyframes added to the button we need to change its look for specific frames, for instance, make a fill lighter. As when cursor is hovered button would be animated with altering a button look by code, so you may to not change the button look for frame "Over" but change it for frame "Down" that displayed button when clicked only.

Adding an object onto the button and uniting them as MovieClip

To complicate our task a little let's put on the button any object and animate it when cursor is hovered. For instance draw the star like this and convert it to symbol.

Put two objects from the library: button and star in a MovieClip. To do it just create new symbol through main menu: Insert -> New Symbol... .

First layer is provided for AS3 code, for the two other layers we need to put button and star on it from the library in accordance with layers names.

Adding keyframes to star and button animation

For creating a button and star animation we need to add keyframes and change some properties to the objects. To do it select tenth frame for each layers, right click and choose "Insert Keyframe" as shown.

Setting some parameters and creating Tween-animation

Select the star at tenth frame, rotate it right a little and scale up with "Free Transform Tool".

 Then go to layer "button" and select the button, for tenth frame change button color by adding a filter "Adjust Color", in option "Contrast" set a value "30".

Having the keyframes added we need to create Tween-animation between them. Select some frames between the first frame and the tenth frame for layers "star" and "button". Right click and choose in menu "Create Classic Tween".

If we test our button example now (ctrl + enter) then we'll see a repeating scale and rotate animation of star and changing color animation as well.

Adding AS3 code for button animation handling

To play the animation when cursor is hovered, we need to add ActionScript 3 code to first frame of layer "as3". Let's use mouse event hadlder to manipulate button behavior and track a cursor position - in button area or not. We also need to add a handler for enterFrame event, which will move the animation frame by frame depending on the mouse position: if the cursor is on the button, then move forward, if it's not, then move backward. Here is the ActionScript 3 code that we need to add:

import flash.events.MouseEvent;

addEventListener(MouseEvent.MOUSE_OVER, buttonOn);
addEventListener(MouseEvent.MOUSE_OUT, buttonOut);
addEventListener(Event.ENTER_FRAME, enter_frame);
 
buttonMode = true;
 
var mouse_on: Boolean = false;
 
function enter_frame(e:Event){
  if (mouse_on){
    nextFrame();
  }
  else {
    prevFrame();
  }
}
 
function buttonOn(e:MouseEvent){
  mouse_on = true;
}
 
function buttonOut(e:MouseEvent){
  mouse_on = false;
}

We can now run the movie to see how it works.

Adding a sound to the button

Let's add a sound else to play it when button pressed. To do this, load any audio file to AdobeFlash library.

We could add an event handler to the button so that the sound played by clicked the button, however we'll do easier - just assign the sound to a button frame. Go to object Button in AdobeFlash library, where are placed button states frames. Select frame "hit" , go to properties and in option "sound" in  parameter "Name" select from list a sound we just have loaded to the library.

Once the sound added to the frame, on the timeline the frame "hit" will be like this:

Why did we choose the frame "hit" , but not the frame "down"? The reason is that usually, if you'd notice, the sound when clicked and the mouse hover should play on mouse release but not at the moment of button clicking. However, you can add the sound to any button frame. This also applies to movieclips, not only buttons.

Download source files on tutorial "AdobeFlash: How to create a flow animated button using ActionScript 3" you can here.

If you liked this tutorial, save and share it as a bookmark social networks, click on the icons below. Also, if you have any questions or suggestions, feel free to ask them in the comments.