Rechercher
 
 

Résultats par :
 

 


Rechercher Recherche avancée

Derniers sujets
» Hello les gens !
Ven 29 Jan - 8:32 par Idefix

» C020. Fil rouge . Mon premier jeux. Étape 2
Mer 16 Déc - 19:05 par Idefix

» Hello, braves gens !
Mer 16 Déc - 16:45 par Idefix

» Hello , pour un essaix
Mer 16 Déc - 9:02 par Berny

» C020. Fil rouge . Mon premier jeux. Étape 1
Mar 8 Déc - 7:34 par Idefix

» C016. Lecteur Mp3 avec liste XML
Mar 24 Nov - 17:26 par Kate38

» C017. Les boutons et leurs effets
Jeu 19 Nov - 18:56 par Kate38

» C012. Lecteur vidéo
Dim 15 Nov - 14:28 par Idefix

» C014. Tombe la pluie
Sam 7 Nov - 15:57 par Idefix

Juin 2017
LunMarMerJeuVenSamDim
   1234
567891011
12131415161718
19202122232425
2627282930  

Calendrier Calendrier


C017. Les boutons et leurs effets

Voir le sujet précédent Voir le sujet suivant Aller en bas

C017. Les boutons et leurs effets

Message par Idefix le Mar 20 Oct - 10:46

Banane

Dans ce cours nous allons étudier les Boutons,
celui des Composants et création de boutons personnalisé.
Commençons par créer une scène avec une image de fond ,
ne dépassant pas 500 sur 500 pixels.

Spoiler:



Le fichiers Main.as ainsi que Signature.as sont indispensable dans le dossier de travail.
Le fichier Main.as devrais ressembler a celui-ci ,

Spoiler:



Préparation :
Dans votre programme de dessin préparer un bouton en 3 images format png ,
qui nous serviras de bouton a 3 états, dimensions environs de 100 pixels sur 24 pixels

Exemple : ne prenez pas les miens merci



et un bouton a une seule image de même dimension .



Aussi que une image de fond et une autre d'un pays avec les provinces bien détaillée ,
ou Carte d'Europe , Cartes du Monde …
importer tout ceci dans un dossier de la bibliothèque de Flash Pro



Créer ces calques :



Régler votre scène aux dimensions de votre image de fond 'fond_1.png'
placez le sur la scène et centrer dans image 1 du calque 'Fond' .
Clic sur image 1 du calque AS3 et vas dans la fenêtre Action pour écrire ceci :
Code :
stop();

Clic sur image 1 du calque 'Bouton 1' puis vas dans la fenêtre Composants et place un Button
en haut a gauche sur la scène , dans ses propriétés :
Nom de l'occurance : b1
Label : Bouton 1
Clic sur image 1 du calque 'Bouton 2' dépose sur la scène l'image une de ton bouton a 3 états 'btn-1_1.png'.
Clic droit dessus et 'Convertir en symbole...'
Nom : B2
Type : Bouton
Cocher 'Exporter pour ActionScript'
Ensuite Nom de l'occurance : b2
Clic sur image 1 du calque 'Bouton 3' dépose sur la scène l'image de ton bouton a image unique .
Nom : B3
Type : Bouton
Cocher 'Exporter pour ActionScript'
Ensuite Nom de l'occurance : b3
Clic sur image 1 du calque 'Bouton 4' dessine un rectangle avec un dégradé de couleur ,
Nom : B4
Type : Bouton
Cocher 'Exporter pour ActionScript'
Ensuite Nom de l'occurance : b4

Infos :
Pour les personnes qui ont un peu de mal avec les outils de dessins vectoriels ,
je propose que vous allez voir mes cours sur Youtube , ils sont pour Flash 8 ,
mais ils n'y a pas beaucoup de différences avec Flash Pro , le lien ICI.


Clic sur image 1 du calque 'Boutons 5 (Plan)' dépose sur la scène l'image de la Cartes que tu as choisi .
Nom : Plan
Type : Clip
Cocher 'Exporter pour ActionScript'
Ensuite Nom de cooccurrence : plan
Clic sur image 1 du calque 'Fenêtre de Sortie' dépose sur la scène un TextArea de la fenêtre des Composants.
Nom de occurrence : sortie



Clic sur image 1 du calque 'Bouton (visible/invisible)' ensuite vas dans la fenêtre Composants et place un Button
sur la Carte , regarde mon swf final pour le placement des objets sur la scène , dans ses propriétés :
Nom de l'occurance : v_i
Label : Visible ou non
Tu peu changer la couleur du bouton dans ses propriétés 'Effet de couleur' et coché 'emphasized'
pour lui donner un bord .
Ajoutons dans la bibliothèque de Flash un court son format 'wav' .
Le placement des objets sur la scène étant terminé nous allons modifier
quelque boutons pour leurs donner des effets .

Clic 2x sur 'b2'
et place tes images dans les différents états de ton bouton



par la même occasion , regarde la bibliothèque de flash bien rangée …
Crée un calque et renomme le 'Label' tu peu aussi renommer 'Calque 1' par 'Fond' .
Avec l'outil texte écris 'Bouton 2' .



Il est tout a fait possible d'écrire sur chaque état du bouton et en différente couleur,
et c'est ce que je vous demande de faire pour le bouton 'b2' .
Pour le bouton 'b3' changez le texte a chaque position comme ceci :
État Haut : 'Au repos'
État Dessus : 'Souris dessus'
État Abaisser : 'Clic abaisser'
État Cliqué :
Pas vraiment d'importance , nous n’orrons pas le temps de le voir!
Par contre cet état est bien fonctionnel , vous vous souvenez de l'élément 'TextArea'
c'est dans cette fenêtre que seront inscrit tout les états des boutons.
Bien , revenez sur 'Séquence 1' et passons au bouton 'b4' , clic 2x dessus ,
Vous devriez être capable de reproduire ceci sans explication , n'oubliez pas la petite musique a l'état cliqué !



Maintenant nous allons créer un bouton de forme personnalisé et transparent ,
oui je sais , vous allez me dire ça sert a rien on le verras pas!
Détrompez-vous , vous allez comprendre dans pas long .



Clic 2x sur ton clip 'Plan' crée 2 calques et positionne toi sur le premier ,
prend un outil Pinceau et colorie en couleur vive une région de ta Carte comme l'image ci-dessus ,
sélectionne ce que tu as colorier , clic droit et convertir en Symbole... Bouton ,
son non seras 'P1' et Exporter pour ActionScript .
Nom d’occurrence 'p1'
Effet de couleur : Alpha
Ensuite diminue son Alpha a 0

Fait la même chose pour une deuxième zone sur la carte .(Bouton = P2; Nom Occurrence = p2)

Maintenant les boutons n'ont plus de secret pour vous ,
ce programme vous montre qu'il est possible de savoir a tout moment ce que vous faite avec la souris ,
tout est inscrit dans la fenêtre de texte .
Le Bouton 'v_i' Visible ou non , rend invisible ou visible la carte et du même coup les Boutons sur la carte 'p1 et p2'
ne sont plus accessible .
Le Bouton 1 , rend invisible ou visible le Bouton 'v_i' Visible ou non .

D’où la différence entre Invisible = non accessible
et Alpha = toujours accessible .

En résumé , vous venez de voir les possibilités des Boutons les plus utilisés ,
et pour les boutons transparent je pense que vous avez compris a quoi ils servent ,
ha ok y en a qui vois toujours pas …
bon , comme c'est un bouton dans ce cas qui désigne une province on pourrais faire apparaître ou envoyer une
nouvelle page web avec la description de l'élément choisi .

Bonne étude a toutes et tous et a vos claviers j’attends vos devoirs .


avatar
Idefix
Admin

Masculin Messages : 107
Date d'inscription : 12/10/2015
Localisation : Belgique

Revenir en haut Aller en bas

Re: C017. Les boutons et leurs effets

Message par Kate38 le Jeu 19 Nov - 18:56

J'avais bien aimé ce Cours assez "constructif" car il y a du graphisme et les boutons etc...
avatar
Kate38

Féminin Messages : 52
Date d'inscription : 19/10/2015
Localisation : France

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum