Idefix-First

Forum tutoriels gratuit.
Design (PhotoShop, Blender, Flex-Flash)
 
AccueilPortailRechercherS'enregistrerConnexion
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

Août 2017
LunMarMerJeuVenSamDim
 123456
78910111213
14151617181920
21222324252627
28293031   
CalendrierCalendrier

Partagez | 
 

 C017. Les boutons et leurs effets

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Idefix
Admin
avatar

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

MessageSujet: C017. Les boutons et leurs effets   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 .


Revenir en haut Aller en bas
Kate38

avatar

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

MessageSujet: Re: C017. Les boutons et leurs effets   Jeu 19 Nov - 18:56

J'avais bien aimé ce Cours assez "constructif" car il y a du graphisme et les boutons etc...
Revenir en haut Aller en bas
 
C017. Les boutons et leurs effets
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» le vieillissement des films et de leurs effets
» effets en glissant la souris sur les boutons
» probleme pour faire un lien avec mes boutons
» boutons à la place du dispatcher
» [Resolu] Disparitions de boutons et autres !

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Idefix-First :: Animations :: Flash - AS3 :: Les Tutos-
Sauter vers: