Flash tutorial: creating a simple button with Flash ActionScript 3.0

[:en]Today : How to create a simple button in Flash with AS3.

Example

[swf:/wp-content/uploads/2013/09/Simple_button_benoitfreslon.com_.swf 400 300]

Sources

You can find the .fla and with the ActionScript source code inside.

Download the source code here: Simple_button_benoitfreslon.com.fla

Let’s start

1. Open Flash > Create a new Flash ActionScript 3.0 document
2. Insert > New Symbol
3. Name : Btn
4. Type > Button
5. Click OK

1. Draw a button in the Up state (when the button is released)
2. Draw a different button in the Over  state (when the mouse cursor is over the button)
3. Daw a different button in the Down state (when the button is pressed)
4. Draw a simple shape in the Hit state (The Hit area of the button)
5. It’s done. Back to the stage now.

1. Then select the MovieClip on the stage
2. Set an instance name « mc_btn » in the Properties pannel like this

1. Create a new Layer with this name: Actions
2. Select this new layer
3. Open the Actions Pannel: Windows > Actions or hit F9

Copy and paste this code:

mc_btn.addEventListener(MouseEvent.CLICK, click);
function click(e:MouseEvent):void {
	// On click
	trace("click");
	navigateToURL(new URLRequest("https://www.benoitfreslon.com"));
}

[:fr]Aujourd’hui voici comment créer un simple bouton en Flash avec ActionScript 3.0

Exemple

[swf:/wp-content/uploads/2013/09/Simple_button_benoitfreslon.com_.swf 400 300]

Sources

Vous pouvez trouver le fichier .fla avec le code ActionScript à l’intérieur.

Télécharger les codes sources ici : Simple_button_benoitfreslon.com.fla

Commençons

1. Ouvrir Flash > Créer un nouveau document ActionScript 3.0
2. Insertion > Nouveau Symbol
3. Nom:  Btn
4. Type : Bouton
5. Cliquer OK

1. Dessiner un bouton sur l’image Haut (Etat du bouton relâché)
2. Dessiner un bouton différent sur l’image Dessus (Etat du bouton quand le souris se trouve dessus)
3. Dessiner un bouton différent sur l’image Abaissé (Etat du bouton quand le bouton de la souris est enfoncé)
4. Dessiner une forme de la zone de click.
5. C’est terminé pour le bouton. Revenir sur la Scène principale

1. Ensuite sélectionner le Bouton depuis la scène
2. Nommer le bouton dans le panneau Propriétés : mc_btn

1. Créer un nouveau Calque avec le nom : Actions
2. Sélectionner ce nouveau calque
3. Ouvrir le panneau Actions : Fenêtre > Actions ou avec la touche F9

Copier et coller ce code dans la fenêtre Actions :

mc_btn.addEventListener(MouseEvent.CLICK, click);
function click(e:MouseEvent):void {
	// On click
	trace("click");
	navigateToURL(new URLRequest("https://www.benoitfreslon.com"));
}

[:]