Début en flash et AS3 - modofication de scriptRésolu

Question

Bonjour à tous,

Nouveau en AS3 et Flash en général, j'ai télécharger un script gratuit, d'après un tuto sur http://www.webdesign-tutoriaux.com/tutoriel-2237.html pour avoir un menu qui fait défiler un contenu composé d'images.
J'essaie de modifier ce script pour rendre les images cliquables vers une page html d'un site web.

Et là, c'est le drame ^^

Voici le code d'origine :
//file downloaded from www.RiaCodes.com

import caurina.transitions.*;

var hongkongX : Number = 0;
var londonX : Number = -800;
var parisX : Number = -1600;
var newyorkX : Number = -2400;

var buttons : Array = [hongkong_btn,london_btn,paris_btn,newyork_btn];

for (var i:int = 0; i< buttons.length ; i++){
buttons[i].addEventListener(MouseEvent.CLICK,navigate);
buttons[i].buttonMode = true;
}

function navigate(event:MouseEvent):void{
switch (event.target){
case (hongkong_btn) : setTween(hongkongX);
break;

case (london_btn) : setTween(londonX);
break;

case (paris_btn)  : setTween(parisX);
break;

case (newyork_btn) : setTween(newyorkX);
break;
}
}

function setTween(tweenX:Number):void{
Tweener.addTween(content_mc, {x:tweenX, time:1, transition:"easeInOutCubic"});
}


J'ai ajouter à la fin ce code :
function maFunction(event:MouseEvent):void{
trace("http://mapage.html");
}
licence_bt.addEventListener(MouseEvent.CLICK, maFunction);

(licence_bt est la première image du "caroussel" que j'ai convertis en clip juste pour faire le test sur celle ci).

quand je fais "F12" j'ai cette erreur que je ne comprend pas : 
1061: Appel à la méthode addEventListener peut-être non définie, via la référence de type static Class.

Ca veut dire quoi ? Qu'est ce que j'ai oublié ?

Merci !

dj_ouf · Accepted Answer

Hello

Le script d'origine m'a l'air correct..

Pour ton erreur, on a pas énormément de piste, mais j'ai mon idée :

licence_bt est bien le nom d'occurence du clip déposé sur la scène ? et non pas le nom de classe d'export pour actionscript ?

sayoc · Answer

Pas tout à fait...
Le nom de l'occurrence du clip et la classe porte le même nom (licence_bt).

Je suis entrain de faire un comparatif en reproduisant un autre script qui créé un menu qui zoom... et je me rend compte que mon clip licence_bt n'en est pas vraiment un... enfin... je ne peux pas lui appliquer de paramètre.. car considéré comme un bitmap...
En fait j'ai utilisé le bitmap existant que j'ai voulu convertir en clip, je vois bien le clip, mais quand je sélectionne "l'image", c'est en fait le bitmap que je sélectionne et non pas le clip...

Je vais recommencer du début.. car j'y comprend plus rien à force de tout modifier...

Je vous tiens au courant! 

Merci !

sayoc · Answer

Alors... j'essaie de comprendre un truc...

Je me base sur un autre tuto () (celui qui fait le menu qui zoom)
Justemement ce "nenu" n'en ai pas vraiment un car le clic ne pointe nul part...
Voici le code :
import gs.*;
import gs.easing.*;

var menu_array : Array = [item1_mc,item2_mc,item3_mc,item4_mc];

for (var i:int=0; i<menu_array.length; i++) {
   menu_array[i].buttonMode = true;
   menu_array[i].addEventListener(MouseEvent.MOUSE_OVER, scaleUp);
   menu_array[i].addEventListener(MouseEvent.MOUSE_OUT, scaleDown);
   menu_array[i].addEventListener(MouseEvent.CLICK, clickHandler);
}

function scaleUp(e:MouseEvent):void{
   TweenLite.to(e.currentTarget,.5 ,{scaleX:2, scaleY:2, ease:Bounce.easeOut});
}

function scaleDown(e:MouseEvent):void{
   TweenLite.to(e.currentTarget,.5 ,{scaleX:1, scaleY:1, ease:Bounce.easeOut});
}

function clickHandler(e:MouseEvent):void{
   trace("Button clicked " + e.currentTarget.name);
}

Je me dis, bah je vais rajouter les liens à chaque item (item1_mc, item2_mc, etc...) avec ce bout de code à la fin du script (test uniquement pour l'item1):
function maFunction(event:MouseEvent):void{
trace("http://google.fr");
}
item1_mc.addEventListener(MouseEvent.CLICK, maFunction);

Résultat, aucune erreur de compilation, le menu qui zoom fonctionne, mais quand je clique ca ne redirige nul part, rien ne se passe...

Qu'ai-je mal fais ?

sayoc · Answer

J'ai oublié, voici le l'adresse du tuto en question : http://www.riacodes.com/flash/create-a-bouncing-menu-with-as3/

Merci ;)

dj_ouf · Answer

Le nom de l'occurrence du clip et la classe porte le même nom (licence_bt). 
C'est donc cela qui doit créer un conflit.

En fait j'ai utilisé le bitmap existant que j'ai voulu convertir en clip, je vois bien le clip, mais quand je sélectionne "l'image", c'est en fait le bitmap que je sélectionne et non pas le clip... 
Je ne comprend pas très bien, mais ton image est bien contenue dans un movieclip ? si c'est le cas tu ne sélectionne pas directement l'image mais le conteneur, à savoir le clip. Un bitmap n'est en effet pas un objet interactif, donc on ne peut pas lui appliquer d'événements directement.

Si le zoom fonctionne bien, c'est déjà un bon point, c'est à dire qu'il reconnait bien les clips nommés et leurs événements. Maintenant pour le clickHandler, j'ai testé dans un nouveau document, personnellement je récupère bien le message "http://google.fr" dans la console de sortie.

(au passage il n'y a aucune redirection de programmée là, juste un message dans la console lors du clique)

dj_ouf · Answer

Tu es sous Flash CS3 ? ou cs4 ? tu as bien vérifié que tu vois la console de sortie (touche F2), qui est différente de la console d'erreur de compilation ?

sayoc · Answer

Merci pour toutes ces réponses !

Je suis sous CS3.

Je vois bien la console de sortie, qui est vide...

Quand tu dis qu'il n'y a aucune redirection de programmée... cela veut dire que mon bout de code que j'ai rajouter à la fin function maFunction(event:MouseEvent):void
{
trace("http://google.fr");
}
item1_mc.addEventListener(MouseEvent.CLICK, maFunction); ne suffit pas à créer une redirection au clic ?

Comment faire alors ? Car je veux simplement faire ca, je n'en demande pas plus pour le moment...

sayoc · Answer

J'ai trouvé !
J'ai compris grâce à ta remarquie disant qu'il n'y avait aucune redirection de programmer !

En effet, j'ai découvert que la méthode "trace" servait juste à afficher un peu comme un "print" ou "echo" en php...
Du coup j'ai modifier complètement ma fonction, grâche quelques infos sur la méthode "URLRequest" trouvé sur le net et un exemple trouvé ici : http://scriptplayground.com/tutorials/as/getURL-in-Actionscript-3/

Le script donne maintenant cela :
import gs.*;
import gs.easing.*;

var menu_array : Array = [item1_mc,item2_mc,item3_mc,item4_mc];

for (var i:int=0; i<menu_array.length; i++) {
   menu_array[i].buttonMode = true;
   menu_array[i].addEventListener(MouseEvent.MOUSE_OVER, scaleUp);
   menu_array[i].addEventListener(MouseEvent.MOUSE_OUT, scaleDown);
   menu_array[i].addEventListener(MouseEvent.CLICK, clickHandler);
}

function scaleUp(e:MouseEvent):void{
   TweenLite.to(e.currentTarget,.5 ,{scaleX:2, scaleY:2, ease:Bounce.easeOut});
}

function scaleDown(e:MouseEvent):void{
   TweenLite.to(e.currentTarget,.5 ,{scaleX:1, scaleY:1, ease:Bounce.easeOut});
}

function clickHandler(e:MouseEvent):void{
   trace("Button clicked " + e.currentTarget.name);
}

item1_mc.addEventListener(MouseEvent.CLICK, callLink);
function callLink(event:MouseEvent):void {
  var url1:String = "http://google.fr";
  var request:URLRequest = new URLRequest(url1);
  try {
    navigateToURL(request, '_blank');
  } catch (e:Error) {
    trace("Un erreur a été rencontré!");
  }
}


J'aurais néanmoins quelques questions :
Qu'elle est la signification de "currentTarget" (je dirais pour récupérer le focus ?) et "name" donc currentTarget.name ? et le "e." avant ?
Qu'elle est la signification de "try" et "cache" même si je devine un peu je ne suis pas sûr de bien comprendre...

Merci beaucoup !

sayoc · Answer

J'essaie maintenant d'associer les deux script ensemble le premier qui fait défiler le contenue (images) et le deuxième avec des boutons qui zoom que j'appelle "en savoir plus..."
Je place mes clip "en savoir plus" aux endroit souhaité sur la grande image horizontale. Evidemment, qd le contenu slide, mes "en savoir plus ne suivent pas car ils sont sur un autre calque et pas pris en compte par le script qui fait défiler le contenu... Mais là n'est pas mon problème pour le moment (ca viendra ensuite ^^).

J'associe les deux script comme ceci :
//file downloaded from www.RiaCodes.com

import caurina.transitions.*;

var hongkongX : Number = 0;
var londonX : Number = -800;
var parisX : Number = -1600;
var newyorkX : Number = -2400;

var buttons : Array = [hongkong_btn,london_btn,paris_btn,newyork_btn];

for (var i:int = 0; i< buttons.length ; i++){
buttons[i].addEventListener(MouseEvent.CLICK,navigate);
buttons[i].buttonMode = true;
}

function navigate(event:MouseEvent):void{
switch (event.target){
case (hongkong_btn) : setTween(hongkongX);
break;

case (london_btn) : setTween(londonX);
break;

case (paris_btn)  : setTween(parisX);
break;

case (newyork_btn) : setTween(newyorkX);
break;
}
}

function setTween(tweenX:Number):void{
Tweener.addTween(content_mc, {x:tweenX, time:1, transition:"easeInOutCubic"});
}

////////////////////////////////////////////////////////

import gs.*;
import gs.easing.*;

var menu_array : Array = [item1_mc,item2_mc,item3_mc,item4_mc];

for (var j:int=0; j<menu_array.length; i++) {
   menu_array[j].buttonMode = true;
   menu_array[j].addEventListener(MouseEvent.MOUSE_OVER, scaleUp);
   menu_array[j].addEventListener(MouseEvent.MOUSE_OUT, scaleDown);
   menu_array[j].addEventListener(MouseEvent.CLICK, clickHandler);
}

function scaleUp(e:MouseEvent):void{
   TweenLite.to(e.currentTarget,.5 ,{scaleX:2, scaleY:2, ease:Bounce.easeOut});
}

function scaleDown(e:MouseEvent):void{
   TweenLite.to(e.currentTarget,.5 ,{scaleX:1, scaleY:1, ease:Bounce.easeOut});
}

function clickHandler(e:MouseEvent):void{
   trace("Button clicked " + e.currentTarget.name);
}

item1_mc.addEventListener(MouseEvent.CLICK, callLink1);
function callLink1(event:MouseEvent):void {
  var url1:String = "http://google.fr";
  var request:URLRequest = new URLRequest(url1);
  try {
    navigateToURL(request, '_blank');
  } catch (e:Error) {
    trace("Error occurred!");
  }
}

item2_mc.addEventListener(MouseEvent.CLICK, callLink2);
function callLink2(event:MouseEvent):void {
  var url2:String = "http://google.fr";
  var request:URLRequest = new URLRequest(url2);
  try {
    navigateToURL(request, '_blank');
  } catch (e:Error) {
    trace("Error occurred!");
  }
}

item3_mc.addEventListener(MouseEvent.CLICK, callLink3);
function callLink3(event:MouseEvent):void {
  var url3:String = "http://google.fr";
  var request:URLRequest = new URLRequest(url3);
  try {
    navigateToURL(request, '_blank');
  } catch (e:Error) {
    trace("Error occurred!");
  }
}

item4_mc.addEventListener(MouseEvent.CLICK, callLink4);
function callLink4(event:MouseEvent):void {
  var url4:String = "http://google.fr";
  var request:URLRequest = new URLRequest(url4);
  try {
    navigateToURL(request, '_blank');
  } catch (e:Error) {
    trace("Error occurred!");
  }
}

(item1, item2, etc sont mes clips "en savoir plus")

Et là... c'est re le drame ! ^^

Le défilement de la grande image horizontale fonctionne mais pas mes "en savoir plus", même pas le zoom... 
Dans la fenêtre de sortie, j'ai un message d'erreur :
Error: Error #1502: La durée d'exécution d'un script excède le délai par défaut (15 secondes).
at slidingContent_fla::MainTimeline/frame1()

Qu''est ce que ca veut dire ? Et pourquoi ?

Merci !

sayoc · Answer

Je comprend bien que le délais d'exécution du script est trop long... mais je n'ai pas de boucle while qui pourrait tourner en boucle ou autre... je ne vois vraiment pas... 

Une idée ?

dj_ouf · Answer

Qu'elle est la signification de "currentTarget" (je dirais pour récupérer le focus ?)
currentTarget cible l'objet qui écoute l'événement, l'objet sur lequel on a définit "addEventListener". Dans ton cas, cela cible donc menu_array[j], donc le movieclip directement. A la différence de target, qui cible l'objet qui a envoyé l'événement (ça peut être un clip à l'intérieur du clip cible, donc pas la même chose).

et "name" donc currentTarget.name ?
Dans ton code, on voit que currentTarget.name est utilisé pour afficher un message dans la console de sortie. C'est pour afficher le nom d'instance du movieclip, pour le reconnaitre. Si tu affiches currentTarget tout court, il devrait te retourner quelque chose comme [Object MovieClip] ou un truc du genre, donc beaucoup moins identifiable.

 et le "e." avant ?
"e" désigne l'événement qui a été passé en paramètre dans la fonction (event). C'est grâce à cet objet d'événement qu'on peut connaitre plusieurs infos, comme l'objet qui l'a envoyé, la position x et y de la souris, ect...

Qu'elle est la signification de "try" et "cache" même si je devine un peu je ne suis pas sûr de bien comprendre... 
Ça en fait c'est un sécurité pour traiter les exceptions, pour éviter les crashs du player. Si tu tente de charger un fichier qui n'existe pas, sans le try/catch tu vas recevoir une erreur d'exécution. Avec try/catch implementé, si il ne trouve pas le fichier alors il va exécuter le bloc d'instruction qu'il y a dans catch. A chaque fois que le code est sensible et qu'il peut générer une erreur, on peut implémenter ce try/catch pour la traiter.

dj_ouf · Answer

Je comprend bien que le délais d'exécution du script est trop long... mais je n'ai pas de boucle while qui pourrait tourner en boucle ou autre... je ne vois vraiment pas...

for (var j:int=0; j<menu_array.length; i++) {

sayoc · Answer

Ahlàlà ! le "i" qui traînait !

Super merci !

Par contre si j'ajoute mes redirections qui fonctionnaient tout à l'heure avec le script du menu qui zoom, les liens (enfin les redirections ^^) ne fonctionne pas... aucun message d'erreur, aucun bloquage... simplemement pas de redirection... sinon tout le reste fonctionne.

Le code donne ceci :
import caurina.transitions.*;

var hongkongX : Number = 0;
var londonX : Number = -800;
var parisX : Number = -1600;
var newyorkX : Number = -2400;

var buttons : Array = [hongkong_btn,london_btn,paris_btn,newyork_btn];

for (var i:int = 0; i< buttons.length ; i++){
buttons[i].addEventListener(MouseEvent.CLICK,navigate);
buttons[i].buttonMode = true;
}

function navigate(event:MouseEvent):void{
switch (event.target){
case (hongkong_btn) : setTween(hongkongX);
break;

case (london_btn) : setTween(londonX);
break;

case (paris_btn)  : setTween(parisX);
break;

case (newyork_btn) : setTween(newyorkX);
break;
}
}

function setTween(tweenX:Number):void{
Tweener.addTween(content_mc, {x:tweenX, time:1, transition:"easeInOutCubic"});
}

////////////////////////////////////////////////////////

import gs.*;
import gs.easing.*;

var menu_array : Array = [content_mc.savoir1_mc,content_mc.savoir2_mc,content_mc.savoir3_mc,content_mc.savoir4_mc];

for (var j:int=0; j<menu_array.length; j++) {
   menu_array[j].buttonMode = true;
   menu_array[j].addEventListener(MouseEvent.MOUSE_OVER, scaleUp);
   menu_array[j].addEventListener(MouseEvent.MOUSE_OUT, scaleDown);
   menu_array[j].addEventListener(MouseEvent.CLICK, clickHandler);
}

function scaleUp(e:MouseEvent):void{
   TweenLite.to(e.currentTarget,.5 ,{scaleX:2, scaleY:2, ease:Bounce.easeOut});
}

function scaleDown(e:MouseEvent):void{
   TweenLite.to(e.currentTarget,.5 ,{scaleX:1, scaleY:1, ease:Bounce.easeOut});
}

function clickHandler(e:MouseEvent):void{
   trace("Button clicked " + e.currentTarget.name);
}

Pour les redirections j'ai ajouter ceci à le suite :
content_mc.savoir1_mc.addEventListener(MouseEvent.CLICK, callLink1);
function callLink1(event:MouseEvent):void {
  var url1:String = "http://google.fr";
  var request:URLRequest = new URLRequest(url1);
  try {
    navigateToURL(request, '_blank');
  } catch (e:Error) {
    trace("Error occurred!");
  }
}

content_mc.savoir2_mc.addEventListener(MouseEvent.CLICK, callLink2);
function callLink2(event:MouseEvent):void {
  var url2:String = "http://google.fr";
  var request:URLRequest = new URLRequest(url2);
  try {
    navigateToURL(request, '_blank');
  } catch (e:Error) {
    trace("Error occurred!");
  }
}

content_mc.savoir3_mc.addEventListener(MouseEvent.CLICK, callLink3);
function callLink3(event:MouseEvent):void {
  var url3:String = "http://google.fr";
  var request:URLRequest = new URLRequest(url3);
  try {
    navigateToURL(request, '_blank');
  } catch (e:Error) {
    trace("Error occurred!");
  }
}

content_mc.savoir4_mc.addEventListener(MouseEvent.CLICK, callLink4);
function callLink4(event:MouseEvent):void {
  var url4:String = "http://google.fr";
  var request:URLRequest = new URLRequest(url4);
  try {
    navigateToURL(request, '_blank');
  } catch (e:Error) {
    trace("Error occurred!");
  }
}

Une idée ? Est-ce parce que je suis en local ? Normalement je devrais au moins avoir un message de sécurité me disant que flash essai d'accéder à une ressource extérieur.. non ?

Merci !

sayoc · Answer

surtout que ce bout de code seul fonctionne...

sayoc · Answer

Oups, alors là désolé... il fallait juste régler les paramètres de publication pour générer le HTML...

Un GRAND MERCI à toi dj_ouf ! Tu m'a été d'une aide très précieuse, j'ai appris beaucoup grâce à tes explications !

A une prochaine ;)
+++

dj_ouf · Answer

Pas de soucis !

je suis satisfait que j'ai pu t'aider !!

Bonne chance pour la suite

Début en flash et AS3 - modofication de script

16 réponses

Votre réponse

Discussions similaires