(FLASH) Afficher image via bouton
Fermé
NekoTomo
Messages postés
10
Date d'inscription
jeudi 11 septembre 2008
Statut
Membre
Dernière intervention
14 octobre 2011
-
6 août 2011 à 17:52
SangokuSSJ4 Messages postés 443 Date d'inscription samedi 8 octobre 2005 Statut Membre Dernière intervention 30 janvier 2013 - 27 août 2011 à 14:07
SangokuSSJ4 Messages postés 443 Date d'inscription samedi 8 octobre 2005 Statut Membre Dernière intervention 30 janvier 2013 - 27 août 2011 à 14:07
A voir également:
- (FLASH) Afficher image via bouton
- Flash drive tester - Télécharger - Divers Utilitaires
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Flash player download - Télécharger - Divers Web & Internet
- Google recherche par image - Guide
5 réponses
SangokuSSJ4
Messages postés
443
Date d'inscription
samedi 8 octobre 2005
Statut
Membre
Dernière intervention
30 janvier 2013
47
6 août 2011 à 23:57
6 août 2011 à 23:57
Il existe plusieurs façon pour faire cela. Soit en utilisant la timeline, soit en tapant tout en code.
En principe pour un débutant, c'est plus simple d'utiliser la timeline, mais un puriste préfèreras souvent le code, c'est mon cas.
Selon ce avec quoi tu es le plus à l'aise, je pourrai t'aider plus facilement.
Je vais commencer par t'expliquer grossomodo le principe avec la timeline. Après si tu veux on pourra tout faire en code.
Flash est mon domaine de prédilection, donc j'ai parfois tendance à parler trop en "jargon technique" si tu ne piges pas n'hésite pas à me le dire, et je reprendrai pas à pas de façon plus "pédagogique".
En gros le principe est le suivant:
Dans flash, tu as en haut une "timeline", c'est une ligne avec plein de cases. Chaque case correspond à une "image" (aussi appelée "frame").
Pour ce que tu souhaite faire, on va dire que l'image numéro 1 correspond à ton menu, l'image numéro 2 correspond à ton image, l'image numéro 3 correspond à une autre image etc...
Tu as dit que un bouton = une image. Donc tu commences par importer ton image dans la bibliothèque de flash.
Pour l'image 1 (que tu dois avoir converti en image clé, via un clic droit dessus), tu glisses tes images de boutons depuis ta bibliothèque sur ta scène puis tu fais un clic droit pour (chaque image-bouton) > convertir en symbole. Tu sélectionnes le mode "bouton".
Ensuite, tu sélectionnes le premier, et dans le panneau "propriétés", tu écris un nom (celui que tu veux, par exemple "image1_btn") dans le champ "nom d'occurrence". Ce nom sera utilisé pour l'appeler dans le code.
Tu fais pareil pour chaque boutons sur ta scène avec un nom d'occurrence différent.
Ensuite, tu vas dans la timeline, et tu fais un clic gauche sur l'image 2, et tu appuies sur F6. Cela te permet de créer une seconde image clé sur la timeline.
Sur ta scène tu peux alors glisser l'image agrandie que tu souhaites afficher. (idem pour les autres images, sur l'image 3, 4, 5 etc...)
Ensuite tu crées un nouveau calque. Tu clique sur la première image du nouveau calque. Là tu apuis sur F9 pour afficher le panneau de code Action Script.
Tu tapes ce code:
stop();
image1_btn.addEventListener(MouseEvent.MOUSE_UP, afficherImage);
function afficherImage(e:MouseEvent):void{
gotoAndStop(2);
}
Concrètement, ce code permet d'ajouter un "écouteur" sur le bouton nommé "image1_btn". Si tu as mis un autre nom, tu remplaces par ce que tu as mis.
Le principe peut paraitre bizarre, mais c'est simple:
addEventListener est une fonction de flash qui ajoute ce qu'on appelle un écouteur sur l'objet qui le précède (c'est à dire avant le point). Un écouteur c'est une fonction que tu crées, qui va effectuer une action lorsque l'événement "MOUSE_UP" se produira. Cet événement correspond au moment précis où l'utilisateur relâche le bouton gauche de la souris.
afficherImage est le nom de la fonction qu'on a créée. e:MouseEvent c'est un peu complexe pour un débutant, mais pour le moment considère que c'est une sorte d'indication qui permet à flash de savoir que la fonction afficherImage doit recevoir un "événement de la souris".
gotoAndStop(2) est une instruction qui indique à la timeline d'aller directement à l'image numéro 2, puis de s'arrêter là.
Le stop() au tout début indique à flash qu'il ne doit pas avancer à l'image suivante, mais bien rester sur celle-ci. (Sans quoi il tournera en boucle et tu n'auras pas le temps de cliquer sur le bouton avant que le menu disparaisse).
Voilà si tu arrives déjà à faire cela c'est une bonne chose. On verra ensuite comment améliorer tout ça :)
En principe pour un débutant, c'est plus simple d'utiliser la timeline, mais un puriste préfèreras souvent le code, c'est mon cas.
Selon ce avec quoi tu es le plus à l'aise, je pourrai t'aider plus facilement.
Je vais commencer par t'expliquer grossomodo le principe avec la timeline. Après si tu veux on pourra tout faire en code.
Flash est mon domaine de prédilection, donc j'ai parfois tendance à parler trop en "jargon technique" si tu ne piges pas n'hésite pas à me le dire, et je reprendrai pas à pas de façon plus "pédagogique".
En gros le principe est le suivant:
Dans flash, tu as en haut une "timeline", c'est une ligne avec plein de cases. Chaque case correspond à une "image" (aussi appelée "frame").
Pour ce que tu souhaite faire, on va dire que l'image numéro 1 correspond à ton menu, l'image numéro 2 correspond à ton image, l'image numéro 3 correspond à une autre image etc...
Tu as dit que un bouton = une image. Donc tu commences par importer ton image dans la bibliothèque de flash.
Pour l'image 1 (que tu dois avoir converti en image clé, via un clic droit dessus), tu glisses tes images de boutons depuis ta bibliothèque sur ta scène puis tu fais un clic droit pour (chaque image-bouton) > convertir en symbole. Tu sélectionnes le mode "bouton".
Ensuite, tu sélectionnes le premier, et dans le panneau "propriétés", tu écris un nom (celui que tu veux, par exemple "image1_btn") dans le champ "nom d'occurrence". Ce nom sera utilisé pour l'appeler dans le code.
Tu fais pareil pour chaque boutons sur ta scène avec un nom d'occurrence différent.
Ensuite, tu vas dans la timeline, et tu fais un clic gauche sur l'image 2, et tu appuies sur F6. Cela te permet de créer une seconde image clé sur la timeline.
Sur ta scène tu peux alors glisser l'image agrandie que tu souhaites afficher. (idem pour les autres images, sur l'image 3, 4, 5 etc...)
Ensuite tu crées un nouveau calque. Tu clique sur la première image du nouveau calque. Là tu apuis sur F9 pour afficher le panneau de code Action Script.
Tu tapes ce code:
stop();
image1_btn.addEventListener(MouseEvent.MOUSE_UP, afficherImage);
function afficherImage(e:MouseEvent):void{
gotoAndStop(2);
}
Concrètement, ce code permet d'ajouter un "écouteur" sur le bouton nommé "image1_btn". Si tu as mis un autre nom, tu remplaces par ce que tu as mis.
Le principe peut paraitre bizarre, mais c'est simple:
addEventListener est une fonction de flash qui ajoute ce qu'on appelle un écouteur sur l'objet qui le précède (c'est à dire avant le point). Un écouteur c'est une fonction que tu crées, qui va effectuer une action lorsque l'événement "MOUSE_UP" se produira. Cet événement correspond au moment précis où l'utilisateur relâche le bouton gauche de la souris.
afficherImage est le nom de la fonction qu'on a créée. e:MouseEvent c'est un peu complexe pour un débutant, mais pour le moment considère que c'est une sorte d'indication qui permet à flash de savoir que la fonction afficherImage doit recevoir un "événement de la souris".
gotoAndStop(2) est une instruction qui indique à la timeline d'aller directement à l'image numéro 2, puis de s'arrêter là.
Le stop() au tout début indique à flash qu'il ne doit pas avancer à l'image suivante, mais bien rester sur celle-ci. (Sans quoi il tournera en boucle et tu n'auras pas le temps de cliquer sur le bouton avant que le menu disparaisse).
Voilà si tu arrives déjà à faire cela c'est une bonne chose. On verra ensuite comment améliorer tout ça :)
NekoTomo
Messages postés
10
Date d'inscription
jeudi 11 septembre 2008
Statut
Membre
Dernière intervention
14 octobre 2011
1
7 août 2011 à 23:47
7 août 2011 à 23:47
Déjà un grand merci pour ton aide et ta réponse =)
Bon, je vais être franche. Au bout de la troisième phrase, ça bloquait déjà au niveau de mon travail.
Maintenant que tu m'as répondu, je vais être un peu plus précise sur ma créa.
Les Fichier sont en PSD (déjà, si je dois le mettre sous un autre format, dis le moi).
En réalité les boutons sont sur une même image, l'image du fond. Si je peux te faire une description vite fait : Il y a une tige avec 4 feuilles. Une feuille = un bouton. Et ensuite chaque bouton fait apparaitre l'image qui lui correspond. C'est un peu comme un tit menu...
Là où ca a bloqué. Lorsque j'ai voulu, glisser, comme tu l'as dit, les images de la Bibliothèque, sur la scène, impossible. Après peut être ai-je mal compris. Mais quand j'ai voulu mettre ma première image sur le tit carré correspondant à l'image 2, sur le scénario, impossible. Et lorsque j'ai voulu transformer mon "fond" en image clé, ca m'a créé une deuxième image...
Je suis désolée, c'est rare qu'un logiciel me donne autant de fil à retordre ... mais là ... J'ai beaucoup de mal.
Bon, je vais être franche. Au bout de la troisième phrase, ça bloquait déjà au niveau de mon travail.
Maintenant que tu m'as répondu, je vais être un peu plus précise sur ma créa.
Les Fichier sont en PSD (déjà, si je dois le mettre sous un autre format, dis le moi).
En réalité les boutons sont sur une même image, l'image du fond. Si je peux te faire une description vite fait : Il y a une tige avec 4 feuilles. Une feuille = un bouton. Et ensuite chaque bouton fait apparaitre l'image qui lui correspond. C'est un peu comme un tit menu...
Là où ca a bloqué. Lorsque j'ai voulu, glisser, comme tu l'as dit, les images de la Bibliothèque, sur la scène, impossible. Après peut être ai-je mal compris. Mais quand j'ai voulu mettre ma première image sur le tit carré correspondant à l'image 2, sur le scénario, impossible. Et lorsque j'ai voulu transformer mon "fond" en image clé, ca m'a créé une deuxième image...
Je suis désolée, c'est rare qu'un logiciel me donne autant de fil à retordre ... mais là ... J'ai beaucoup de mal.
SangokuSSJ4
Messages postés
443
Date d'inscription
samedi 8 octobre 2005
Statut
Membre
Dernière intervention
30 janvier 2013
47
8 août 2011 à 21:53
8 août 2011 à 21:53
il faut découper ta tige en plusieurs petites images. Du genre tu fais un png pour chaque feuille un autre pour la tige. Ensuite tu les importes chacun dans la bibliothèque et à partir de là tu peux les mettre sur la scène :)
3699
Messages postés
193
Date d'inscription
dimanche 26 octobre 2008
Statut
Membre
Dernière intervention
26 juillet 2012
67
13 août 2011 à 02:13
13 août 2011 à 02:13
je pense que l'action script serai quand meme plus pratique pour faire ça, pour quelqu'un qui n'y touche pas beaucoup, je conseillerai de placer les image et les bouton sur la scene, nommer chaque occurrence (ta des video sur le site d'adobe qui presente flash, son système d'occurrence, la timeline, etc... le tout en francais) et mettre un code comme :
TON_IMAGE.visible = false;
TON_BOUTON.addEventListener(MouseEvent.MOUSE_UP, NOM_FONCTION)
function image1 (E:Event):void {
TON_IMAGE.visible = true;
if (TOM_IMAGE.visible == true) TOM_IMAGE.visible = false;
}
explication du bousin :
première ligne : l'image est invisible
deuxième ligne : ajout d'un écouteur d'événement de clic de souris, en d'autre terme, le bouton saura quand tu clic dessus
troisième ligne : on défini la réaction du bouton si tu clic dessus
quatrième ligne : l'image devient visible
cinquième ligne : si l'image était visible au moment du clic sur le bouton, alors elle redevient invisible
ta juste a copier ce code autant de fois que ta d'image et/ou de bouton et a remplacer les différent nom en majuscule par les nom des occurrence de tes image et bouton
ah et si ta la flemme d'aller voir les vidéo, pour donner un nom a une occurrence, quand tu la placer sur la scène, tu clic dessus et tu regarde en haut du panneau propriété, par défaut a droite de l'écran
TON_IMAGE.visible = false;
TON_BOUTON.addEventListener(MouseEvent.MOUSE_UP, NOM_FONCTION)
function image1 (E:Event):void {
TON_IMAGE.visible = true;
if (TOM_IMAGE.visible == true) TOM_IMAGE.visible = false;
}
explication du bousin :
première ligne : l'image est invisible
deuxième ligne : ajout d'un écouteur d'événement de clic de souris, en d'autre terme, le bouton saura quand tu clic dessus
troisième ligne : on défini la réaction du bouton si tu clic dessus
quatrième ligne : l'image devient visible
cinquième ligne : si l'image était visible au moment du clic sur le bouton, alors elle redevient invisible
ta juste a copier ce code autant de fois que ta d'image et/ou de bouton et a remplacer les différent nom en majuscule par les nom des occurrence de tes image et bouton
ah et si ta la flemme d'aller voir les vidéo, pour donner un nom a une occurrence, quand tu la placer sur la scène, tu clic dessus et tu regarde en haut du panneau propriété, par défaut a droite de l'écran
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
SangokuSSJ4
Messages postés
443
Date d'inscription
samedi 8 octobre 2005
Statut
Membre
Dernière intervention
30 janvier 2013
47
27 août 2011 à 14:07
27 août 2011 à 14:07
3699, Quitte à lui proposer une autre méthode, donnes-en une qui fonctionne...
ton code ne fonctionne pas puisque tu mets un if (TOM_IMAGE.visible == true) juste après l'avoir mis en true dans la même fonction, donc en fait au clic, le visible va rester en false...
Pour faire ce genre de chose, utilise plutôt le switch case... Au cas où tu l'aurais oublié, Flash éxécute les instructions dans l'ordre, du haut vers le bas. Sans parler du fait que tu as fait une faute de frappe en remplaçant TON par TOM sur la fin...
Bref essaye de ne pas écrire de bêtises quand tu cherches à aider quelqu'un ;)
ton code ne fonctionne pas puisque tu mets un if (TOM_IMAGE.visible == true) juste après l'avoir mis en true dans la même fonction, donc en fait au clic, le visible va rester en false...
Pour faire ce genre de chose, utilise plutôt le switch case... Au cas où tu l'aurais oublié, Flash éxécute les instructions dans l'ordre, du haut vers le bas. Sans parler du fait que tu as fait une faute de frappe en remplaçant TON par TOM sur la fin...
Bref essaye de ne pas écrire de bêtises quand tu cherches à aider quelqu'un ;)
