lienlien
lien
lien
lien
lien
lien
lien
lien
lien
lien
Aller en haut
Aller en bas



 
Mon siteAccueilPortailGalerieFAQRechercherS'enregistrerConnexion



Partagez |

AS3 : exercice 02 => comment agir avec un bouton sur une animation

Voir le sujet précédent Voir le sujet suivant Aller en bas
Auteur Message
avatar



Mizar
membres
membres
Date d'inscription : 26/09/2016

MessageSujet: AS3 : exercice 02 => comment agir avec un bouton sur une animation Mer 28 Sep 2016 - 20:32

On va commencer à programmer en AS3.
Ici, nous allons créer un bouton qui va déclencher une animation à chaque clic de la souris.

Un avant-goût du programme :

[Vous devez être inscrit et connecté pour voir ce lien]
Revenir en haut Aller en bas
avatar



Mizar
membres
membres
Date d'inscription : 26/09/2016

MessageSujet: Re: AS3 : exercice 02 => comment agir avec un bouton sur une animation Mer 28 Sep 2016 - 20:45

Pour rester sérieux, on crée le dossier exercice02 dans le dossier AS3 et on y met le matériel suivant :

- un fond de 400 x 400 : [Vous devez être inscrit et connecté pour voir cette image]

- un pseudo en png : [Vous devez être inscrit et connecté pour voir cette image]

- un bouton en png et en 3 couleurs : [Vous devez être inscrit et connecté pour voir cette image][Vous devez être inscrit et connecté pour voir cette image][Vous devez être inscrit et connecté pour voir cette image]

On attaque l'exercice02 !

1* On ouvre Flash avec un document en AS3 ( comme l'exercice01 )

2* On modifie la scène de la façon suivante :

[Vous devez être inscrit et connecté pour voir cette image]

I/S : Images par Seconde
Ici on met 50 pour se conformer au courant électrique 50 hertz de façon à avoir une animation la plus fluide possible.

et 400 par 400 à cause du fond choisi

3* On fait un double-clic sur le mot "calque1"

[Vous devez être inscrit et connecté pour voir cette image]

cela nous permet de changer le nom du calque afin de mieux se repérer ensuite quand les programmes deviendront plus complexes.

[Vous devez être inscrit et connecté pour voir cette image]

4* Importer les dessins dans la bibliothèque comme dans l'exercice01 : les 5 d'un coup, le fond, le pseudo et les 3 boutons.

[Vous devez être inscrit et connecté pour voir cette image]

Revenir en haut Aller en bas
avatar



Mizar
membres
membres
Date d'inscription : 26/09/2016

MessageSujet: Re: AS3 : exercice 02 => comment agir avec un bouton sur une animation Mer 28 Sep 2016 - 22:33

5* Placer le fond sur la scène en drag and drop et mettez bien 0 en X et Y dans la position du fond comme dans l'exercice1.

6* nous allons maintenant créer un deuxième calque pour y placer le pseudo.
Cliquez sur l’icône en bas à gauche et appelez ce calque "pseudo" ( toujours avec le double-clic )

[Vous devez être inscrit et connecté pour voir cette image]

[Vous devez être inscrit et connecté pour voir cette image]

Regardez les petits ronds en dessous du "1" :
- sur le calque "fond", ce rond est noir car le calque contient quelque chose => le fond
- sur le calque "pseudo", ce rond est blanc car le calque ne contient rien.

7* Nous allons maintenant placer le pseudo sur le calque "pseudo"
Vérifier que le calque "pseudo" est bien en inverse-vidéo pour montrer qu'il est sélectionné.

Prenez le pseudo en drag and drop et placez-le à gauche, en dehors de la scène.
Le petit rond sous le "1" du calque pseudo doit être maintenant noir.

[Vous devez être inscrit et connecté pour voir cette image]

Le pseudo est entouré d'un rectangle bleu, faites un clic droit dans ce rectangle et choisissez :
" Créer une interpolation de mouvement "

Apparaît alors une fenêtre qui vous propose de changer votre png en symbole, cliquez sur "oui"

Une ligne bleue apparaît dans le bas => c'est l'échelle des temps.

[Vous devez être inscrit et connecté pour voir cette image]

Nous voulons faire une animation de 6 secondes ( par exemple ) soit le temps que mettra le pseudo pour traverser le fond de gauche à droite.

Nous travaillons en 50 images par seconde donc 6 secondes = 6 x 50 = 300 images.

Ici la ligne bleue s'arrête sous l'image 50 avec une ligne verticale rouge.
Placez le curseur de la souris sur cette ligne rouge sous l'image 50, ce curseur doit se transformer en double flèche horizontale. Cliquez alors , restez cliqué et étirez cette ligne jusqu'à sous l'image 300.

[Vous devez être inscrit et connecté pour voir cette image]

Prenez alors le pseudo et placez-le à droite de la scène. Apparaissent alors plein de petits points.

[Vous devez être inscrit et connecté pour voir cette image]

Faites un clic droit sous l'image 300 mais cette fois-ci dans le calque fond et choisissez "Insérer une image-clé" afin de copier le fond sur les 300 images.

Testez votre animation : Contrôle/Tester l'animation/ dans flash

Vous devez voir défiler le pseudo sans interruption.
Revenir en haut Aller en bas
avatar



Mizar
membres
membres
Date d'inscription : 26/09/2016

MessageSujet: Re: AS3 : exercice 02 => comment agir avec un bouton sur une animation Mer 28 Sep 2016 - 23:40

8* Nous allons maintenant vérifier que l'animation est bien horizontale.
Repérez le petit rectangle rouge sur la ligne du temps. Cliquez dessus et restez cliqué, vous pouvez maintenant vous balader tout au long de la ligne du temps.
Allez sur l'image 1 et cliquez sur le pseudo : dans l'onglet "propriétés" et mettez 150 dans Y
Faites la même chose sur l'image 300.

Revérifiez votre animation, elle doit être parfaitement horizontale.

9* C'est le moment de placer le bouton dont nous allons nous servir.
On profite pour sauvegarder notre programme sous le nom de "exercice02.fla" dans AS3/exercice02/

On crée le bouton :
Insérer/Nouveau symbole
en donnant comme nom "bouton1" et en choisissant comme type "bouton"

[Vous devez être inscrit et connecté pour voir cette image]

On accède alors à une nouvelle scène => celle du bouton
Regardez en haut à gauche :

[Vous devez être inscrit et connecté pour voir cette image]

nous sommes bien dans le calque du bouton.

Regardez maintenant en bas à gauche :

[Vous devez être inscrit et connecté pour voir cette image]

Nous sommes dans la case "Haut", nous allons donc placer le bouton vert pour signifier le bouton au repos.

Prenez le vert en drag and drop et placez-le au centre.

Ouvrez l'onglet "propriétés"
Le bouton mesure 86 x 26, on place donc -43 en X et -13 en Y puisque 43 et 13 sont la moitié de 86 et 26.
Ainsi le vert est parfaitement centré.

Faites un clic droit dans la case sous "dessus" et choisissez insérer une image-clé vide.

[Vous devez être inscrit et connecté pour voir cette image]

Prenez le jaune en drag and drop et placez-le au centre.

Faites la même chose que pour le vert.


Faites maintenant un clic droit dans la case sous "abaissé" et choisissez insérer une image-clé vide.

Prenez le rouge en drag and drop et placez-le au centre.

Faites la même chose que pour le vert.

Vous avez créé les 3 positions pour le bouton, revenez maintenant dans la scène principale en cliquant en haut à gauche sur "Séquence 1"
Revenir en haut Aller en bas
avatar



Mizar
membres
membres
Date d'inscription : 26/09/2016

MessageSujet: Re: AS3 : exercice 02 => comment agir avec un bouton sur une animation Jeu 29 Sep 2016 - 1:44

10* Nous allons maintenant placer le bouton sur le programme.
On commence par ajouter un calque que vous appellerez "bouton" => vous vous souvenez comment faire ?

Allez chercher dans la bibliothèque le bouton appelé "bouton1" et placez-le dans le coin en bas à gauche du fond.

Testez le programme.

Le pseudo doit défiler, passez le curseur de la souris au-dessus du bouton et cliquez.
Vous devez voir les 3 couleurs mais, bien sûr, le bouton ne sert à rien puisqu'il n'est pas programmé.

[Vous devez être inscrit et connecté pour voir ce lien]

11* Il ne reste plus qu'à programmer le bouton.

On crée un nouveau calque que l'on appelle "AS3"
On commence par aller sur l'image 300 grâce au curseur rouge.

Sur le calque "AS3", faites ( en 300 donc ) un clic-droit / insérer une image-clé vide.
Cela nous servira à rentrer le code.
Appuyez sur "F9" pour ouvrir la fenêtre de programmation.
rentrez le code suivant : qui arrêtera le programme sur l'image 300

Code:

stop();

Testez l'animation maintenant :

Le pseudo doit défiler une fois et ne plus repasser !

12* On sélectionne le bouton pour pouvoir lui donner un nom : bouton_btn

[Vous devez être inscrit et connecté pour voir cette image]

13* Grâce au curseur rouge de la ligne du temps, on revient sur l'image 1 et on ouvre la fenêtre d'actions en étant sur le calque "AS3"

Le principe de l'AS3 est de placer des écouteurs qui vont prévenir de certains évènements.

On commence par déclarer ce fameux bouton :

Code:

rejouer_btn.addEventListener(MouseEvent.CLICK,rejoue_moi_ca);

rejouer_btn => sur mon bouton
rejouer_btn.add => j'ajoute
rejouer_btn.addEventListener => un écouteur d'évènement
rejouer_btn.addEventListener(MouseEvent. => qui sera un évènement créé par la souris
rejouer_btn.addEventListener(MouseEvent.CLICK, => le clic ( normal )
rejouer_btn.addEventListener(MouseEvent.CLICK,rejoue_moi_ca); =>
si le clic est détecté, on sera envoyé sur la fonction rejoue_moi_ca ( évidemment on peut mettre ce que l'on veut )
si il n'y a pas de clic détecté, rien ne se passe

Allez on s'attaque maintenant à la fonction "rejoue_moi_ca"
Voici comment se déclare une fonction :
C'est assez simple :


function rejoue_moi_ca ()
{

}

Function et pas fonction eh oui, c'est de l'anglais
Suivie du nom qu'on a donné, puis de 2 parenthèses ( ouverte et fermée )
A la ligne une accolade ouverte

Plus bas une accolade fermée

Que va-t-on y mettre ?
Dans les parenthèses : notre évènement => event:MouseEvent
Entre les accolades : tout ce que le programme devra faire lors de cette fonction
Ici gotoAndPlay(1); => Va à l'image 1 et joue l'animation ( le point virgule signifie la fin de l'instruction )
Ce qui donne :


Code:


function rejoue_moi_ca (event:MouseEvent)
{
gotoAndPlay(1);
}



Dans la fenêtre "actions", nous avons maintenant ( pour l'image 1 ) :

[Vous devez être inscrit et connecté pour voir cette image]
Revenir en haut Aller en bas
avatar



Mizar
membres
membres
Date d'inscription : 26/09/2016

MessageSujet: Re: AS3 : exercice 02 => comment agir avec un bouton sur une animation Jeu 29 Sep 2016 - 1:46

Il vous reste à :

1. Tester le programme en essayant le bouton

2. Derrière le programme écrit dans la fenêtre "actions", placez votre copyright. Testez.

3. Quand tout va bien fichier/publier de façon à récupérer le programme exercice02.swf

4. mettez ce programme sur le net pour pouvoir l'afficher dans ce forum


[Vous devez être inscrit et connecté pour voir ce lien]
Revenir en haut Aller en bas
avatar



katia66
fondatrice
fondatrice
Date d'inscription : 17/05/2010

MessageSujet: Re: AS3 : exercice 02 => comment agir avec un bouton sur une animation Jeu 29 Sep 2016 - 9:01

génial, c'est super, on a du boulot sur la planche, merci pour tes tutos qui sont super bien expliqué
gros bisous

PS: tu peux faire le tuto en un seul message, ce sera plus simple pour toi


Bonjour Invité Contente que tu sois ici parmi nous. C'est l'Automne sur le forum, restez ici avec nous pour vous détendre bien au chaud.  

[Vous devez être inscrit et connecté pour voir ce lien]
[Vous devez être inscrit et connecté pour voir ce lien]

Merci reverie pour ce superbe cadeau

Pour toutes questions ou aide demandez le sur le forum approprié. Je ne réponds pas par MP.
Les cours sont corrigés sous 48h, merci pour votre patience.


carte de membres et cadeaux:
 
Revenir en haut Aller en bas



Contenu sponsorisé

MessageSujet: Re: AS3 : exercice 02 => comment agir avec un bouton sur une animation

Revenir en haut Aller en bas

AS3 : exercice 02 => comment agir avec un bouton sur une animation

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» Exécuter un javascript avec un bouton submit
» comment mettre un nouveau bouton dans la barre de navigation
» Problème avec le bouton voir le dernier message posté.
» Petit soucis avec un bouton de l'éditeur de message
» problème avec le bouton citer

Permission de ce forum: Vous ne pouvez pas répondre aux sujets dans ce forum
Au bonheur de ludivine :: ** GRAPHISME ** :: ** TUTORIELS ** :: FLASH ET SWISHMAX -
Design by Katia66 ©copyright2018 droits réservés. Ne pas reproduire ou copier le design, images ou texte.