Site complet en flash : part 4

[explainMe]

Oui j'ai pris un peu de retard (beaucoup de taff en ce moment au bureau donc le soir je fait un peu autre chose j'avoue). Mais il est commencé et je travail dessus.

Je fait de mon mieux pour vous le sortir avant la fin du mois promis mais c'est un gros chapitre (et peut-être l'un des plus importants aussi).

[explainMe]

//-------- Ceci est la réponse à la question posée par Limou dans un commentaire du cours sur le blog. --------//

Rappel de la question :

Bonjour et merci beaucoup pour ce tuto efficace

J’aurais juste une petite question. Est - il possible par un moyen ou par un autre de définir une variable globale qui pourrait être utilisée dans tout le fichier. Par exemple j’ai trois étiquettes une Préload, une Accueil et une Interface (comme dans les tutos avec une page accueil intermédiaire en plus) comment peut on définir une variable conditionnée par la navigation sous Accueil dont on peu récupérer la valeur dans le code de l’interface ?

Je sais pas si c’est très clair

Merci d’avance

Et voici la réponse :

Donc en As3, le mot réservé "_global" n'existe plus, donc impossible de déclarer une variable globale directement dans le fichier fla. Et ou l'AS3 représente un changement de direction pour le développement en ActionScript et s'oriente clairement vers POO (Programation Orientée Objet).

Concrètement ça signifie quoi ?

Que le code est écrit dans un fichier .as et que ce (ces) .as sont rattachés au fichier fla de sorte qu'ils puissent interagir. Pour ceux qui connaissent, c'est le même principe qu'une class en PHP (en gros).

Mais alors pourquoi ne pas en avoir parlé dans le cour ?

Pour plusieurs raisons :
- parce qu'il est plus facile de programmer directement dans le ficheir AS au début (il me semble, mais c'est un avis très personnel).
- parce que je souhaitais faire un parallèle entre les 3 méthodes (minimum d'AS, AS2 et AS3) ce qui est plus simple à mon avis quand on place le code aux mêmes endroits (à peu de chose prêt).
- parce que je ne maîtrise pas suffisamment cette manière de programmer pour prétendre l'expliquer aux autres (donc plutôt que de raconter n'importe quoi, autant ne rien dire).

Bref, en AS3 donc, pour pouvoir utiliser une variable partout dans l'animation, il faut passer par un fichier .as (pas le choix) !

Voici comment procéder :

AVERTISSEMENT : je ne prétends pas que cette méthode est la seule et unique, ni la meilleure d'ailleurs, cependant elle marche.

1. Créer un nouveau fichier .as

2. Voici un exemple de code à placer dans ce fichier :

Code: Tout sélectionner

package {
   public class Globals {
      public static var variableTest:String = "Valeur de ma variable test";
   }
}

Vous pouvez modifier les éléments en rouge dans les 2 lignes suivantes :
public class Globals {
public static var variableTest:String = "Valeur de ma variable test";

Globals ici est le nom de la classe (il faudra enregistré le fichier avec un nom strictement identique : Globasl.as), donc si vous changer ce nom, penser à nommer votre classe avec le même nom.
ensuite le nom et la valeur de la variable sont à modifier en fonction de vos besoins. Le type de variable (ici String) est également à adapter à vos besoins.

3. Enregistrez votre fichier (au même niveau que votre fichier fla pour simplifier les liens) : dans mon exemple je nommerai donc le fichier Globals.as

4. Rattachez la classe à votre fichier fla.

Pour se faire, ouvrez votre fichier principal (interface_AS3.fla dans mon cas), cliquez dans le vide (zone grise par exemple). Puis dans le panneau "Propriétés", dans la case Classe, saisissez : Globals.as, puis validez le message qui s'affichera lorsque vous cliquerez sur [Entrée] par "Ok".

Voilà, maintenant vous pouvez utiliser la (les) variables définies dans la classe Globals.

Vous pouvez modifier la valeur de la variable :

Code: Tout sélectionner

Globals.variableTest = "nouvelle valeur";

Faire un test dans la fenêtre de sortie lors du test du fichier ([Ctrl + Entrée]) :

Code: Tout sélectionner

trace(Globals.variableTest);

Etc, etc,...

Faites un test : redéfinissez la valeur de la variable sur la première image de la scène (au niveau du preload) puis faite un trace de la variable depuis la première image clef du clip INTERFACE) et faites un test : [Ctrl + Entrée]

Voilà, je suis conscient que je n'explique pas tout mais je répond à la question de Limou je pense.

Pour info, je me suis contenté de honteusement reprendre le code trouvé à cet endroit : http://www.astorm.ch/blog/
Donc je remet le lien vers son article, c'est la moindre des choses.

[explainMe]

//---------- Ceci est la réponse à la question posée par asmae dans un commentaire du cours sur le blog. ----------//

Rappel de la question :

...mais comme c’est urgent pour moi et je dois créer un site pour mon doctorat, je me suis lançée un peu plus, mais j’ai quelques ennuis, surtout que de mauvaises surprises surviennent. par exemple, j’ai créé un menu avec un sous-menu vertical, tout marchait très bien, puis j’ai créé le contenu des différentes pages en tant que movie clips et j’ai utilisé l’option linkage et j’ai tout codé en as3, mais voilà que mon sous-menu s’affiche derrière la page, je n’arrive pas à résoudre le prb même si j’ai essayé de transférer le calque des boutons en dessus des autres…je ne sais pas quoi faire, est-ce qu’il n’y aurait pas de code magique par hasard?
surtout que je ne veux pas tout déplacer et tout recoder, j’ai plein de sous-menus et de sous-menus dans les sous-menus!
que faire?
...

Donc si j'ai bien compris tu utilise addChild pour ajouter un clip présent dans ta bibliothèque.

À première vue ton problème est typiquement un souci d'index !

Lorsque l'on ajout un élément sur la scène de flash, celui-ci est placé sur la scène mais également sur un index (ou un niveau si vous préférez). Cet index est géré automatiquement par flash et il s'incrémente au fur est à mesure :
Le premier objet aura l'index 0, le suivant aura l'index 1, le suivant 2, etc..., etc...

Le souci c'est qu'il n'est pas possible d'ajouter un élément en lui affectant un index inférieur au dernier index attribué. C'est à dire que si vous avez 4 objets sur votre scène, le dernier objet ajouté aura l'index 3 (puisque les index commence à 0). Donc le prochain objet ajouté à la scène ne pourra pas avoir d'index inférieur à 4. (c'est comme ça on n'y peux pas grand chose malheureusement).

De plus il faut savoir que lorsque vous ajoutez un clip sur la scène via l'ActionScript (avec addChild par exemple comme dans le cas présent) :
Flash ne tien pas compte des calques et affecte automatiquement votre objet au calque le plus haut (on ne peux pas lui indiquer de calque cible).

2 solutions peuvent remédier à ce petit souci :

-1 - Créer un clip conteneur qui accueillera les clips ajoutés via l'AS.

Créer, à l'avance, un clip vide sur la scène, que l'on placera (via la méthode "manuelle" et nom en AS) sur un calque en dessous de celui contenant le(s) menu(s) et/ou bouton(s) (on peut aussi le placer sur le même calque mais en plaçant le menu par-dessus).
Il faut bien entendu affecter un nom d'occurrence à ce clip (ex : conteneur).
Ensuite il suffit de placer les objets dans ce clip conteur et non directement sur la scène (ou bien le clip ou vous vous trouvez si tout ça se situe dans un clip (objets + code) comme je l'ai fait dans le cours en plaçant tout dans un clip interface).

NOTE : dans l'exemple suivant clipBiblio et le nom de liaison affecté à un clip présent dans la bibliothèque du fichier fla. (nous verrons cela dans le chapitre 5 bientôt en ligne).

Du coup le code n'est plus :


Code: Tout sélectionner

var newClip:clipBiblio = new clipBiblio();
this.addChild(newClip);


Où this représente l'endroit ou vous vous trouvez (la scène ou à l'intérieur d'un clip comme je l'évoquais plus tôt).
mais plutôt :


Code: Tout sélectionner

var newClip:clipBiblio = new clipBiblio();
this.conteneur.addChild(newClip);


Ainsi la nouvelle occurrence du clip ClipBiblio (nommée newClip) est directement placée à l'intérieur du clip conteneur. Et comme il est sous le menu, plus de problème !

- 2 - Interverti les index du menu et du dernier clip ajouté sur la scène.

C'est à dire qu'il faut récupéré l'index du dernier clip ajouté sur la scène et redéfinir l'index du menu juste au dessus de ce clip.
En gros si nous gardons le premier code d'ajout :


Code: Tout sélectionner

var newClip:clipBiblio = new clipBiblio();
this.addChild(newClip);



Il faut le modifier comme ceci :


Code: Tout sélectionner

var newClip:clipBiblio = new clipBiblio();
this.addChild(newClip);
//--- recuperation index de newClip ---
var indexDernierClip:Number = getChildIndex(newClip);
this.setChildIndex(menuPrincipal,indexDernierClip);


Où menuPrincipal est sous-entendu le nom d'occurrence du clip contenant tout le menu et les boutons.

Voilà, j'espère avoir réussi à te fournir une réponse convenable (et surtout que tous mes exemples marchent : j'ai pas trop le temps de tout tester mais en théorie ça devrait fonctionner.)

Tiens moi au courant.

[asmae]

merci bcp, ça a marché, j'y avais pensé après avoir posté ma question, mais il semble que j'ai tjs des problèmes d'index.
commençons par le début:
qnd j'ai créé les sous-menus, je les ai créés à l'intérieur de chaque bouton du menu principal -au fait, les boutons du menu principal sont des movie clips-.
qnd j'ai voulu ajouter mes pages dynamiquement, même si je pointe vers le bouton correspondant du sous-menu, il considère que j'ai pointé vers le bouton principal, car pour arriver au bouton du sous-menu, je dois cliquer sur le bouton principal, donc, il reste tjs sur la page du bouton principal...
et comme ça m'a énervé, j'ai dû tout refaire avec des boutons du sous-menu qui sont indépendants des boutons du menu, de sorte à ce qu'ils soient considérés par flash sur le même index.

menu_mc comprend:
1/boutons du menu
2/un sous-menu qui est juste un clip qui descend et remonte au clic des boutons du menu
3/boutons du sous-menu(invisibles) plaçés sur le texte du sous-menu(je triche!)

mais voilà qu'il faut désactiver ces boutons une fois le bouton cliqué (un travail de plus!!! )

après avoir fait ceci, j'ai essayé d'ajouter les pages de la manière déconseillée, en étiquetant mes pages
et
btn.gotoAndPlay("page1"); par exemple;

mais au fait, je veux faire un travail tout clean, et j'ai décidé d'ajouter ces pages dynamiquement;

alors, j'ai supprimé mes pages(qui sont des clips) de la scène, et dans la bibliothèque, j'ai activé l'option exporter pour actionscript.
puis par le code, j'ai créé une instance de chaque page.
puis j'ai voulu ajouter une page par défaut.
et comme j'ai écrit:
addChild(page1);

il n'arrête pas d'ajouter la page plusieurs fois, mais c pas normal ça! (même s'il y a un stop à la fin de chaque page!)
c quoi le problème?


autre prb:
pour qu'il y ait une transition entre les pages au clic de chaque bouton,
j'ai assigné à chaque bouton une propriété qui permet de le relier à la page convenable;

par ex:
btn1.page = page1;
btn2.page = page2;
etc.

et j'ai précisé que le bouton actuel est btn1:
var currentbtn:MovieClip = btn1;

j'ai créé une fonction appelée nouvpage qui permet d'enlever la page actuelle, puis de changer le bouton correspondant puis d'afficher la page du nouveau bouton sélectionné;

function nouvpage(e:MouseEvent):void{
removeChild(currentbtn.page);
currentbtn = MovieClip(e.currentTarget);
addChild(currentbtn.page);

}

alors qu'est ce qu'il m'affiche?
TypeError: Error #2007: Le paramètre child ne doit pas être nul.
at flash.display::DisplayObjectContainer/removeChild()
at Copiedeindextrial_fla::MainTimeline/newPage()

mais qu'est ce que ça veut dire? y a pas d'objet nul

je n'y comprends plus rien.

merci de patienter devant mon post -provocateur de migraines-, et j'espère avoir une solution.
le prb, c'est que lorsqu'on ne sait pas quel est le prb ni comment y remédier, on dirait que je bricole et ça me met mal à l'aise en travaillant...du coup, je me demande, c'est quoi l'intérêt de créer un site avec flash?(à part que c'est joli, si on est un pro du design bien entendu, ce qui n'est pas mon cas)
et merci.

[explainMe]

Wahouuu, alors ça en fait des choses.

Bon j'avoue que je m'y perd un peu dans toutes tes explications et du coup j'ai un peu de mal à voir ce que tu souhaite faire .

Ce que je te propose c'est de m'envoyer ton (ou tes) fla(s) (tu peux les zipper et les placer en pièce jointe sur le forum ou me les envoyer par mail). Comme ça je pourrais prendre le temps d'explorer ton code conjointement à tes explications ce qui me permettra de mieux appréhender ce que tu souhaite réaliser et ainsi pouvoir te répondre.

Par contre je ne suis pas chez moi ce week-end donc je ne pourrai te répondre que la semaine prochaine (j'espère que tu n'es pas trop préssé).

En revanche je peux déjà te répondre sur un point :

le prb, c'est que lorsqu'on ne sait pas quel est le prb ni comment y remédier, on dirait que je bricole et ça me met mal à l'aise en travaillant...du coup, je me demande, c'est quoi l'intérêt de créer un site avec flash?(à part que c'est joli, si on est un pro du design bien entendu, ce qui n'est pas mon cas)

La réponse à cette question est : rien ! ou plutôt ça dépend de toi !

Du moins c'est mon point de vue.
Faire du flash pour faire du flash n'a finalement d'intérêt que pour celui (ou celle, n'oublions pas ces dames) qui réalise le flash (car au final l'internaute lui ne verra que les éléments "bouger" sans réellement savoir s'ils sont animés par des interpolations ou du code).

Certes La technologie offerte par flash est très intéressante et puissante et elle permet de faire des choses extraordinaires, mais je ne pense pas qu'elle soit une fin en soi.

Flash permet certes de réaliser des sites animés, mais ce qu'y compte le plus dans un site restera toujours la qualité du contenu.
Pour ma part j'ai choisi de réalisé mon site portfolio en flash pour une raison : montrer ce que je suis capable de faire directement via l'interface du site lui-même. Maintenant il tout à fait possible de faire un portfolio en html basique ou en php avec base de données ou encore à partir d'un blog wordpress ou autre. Les possibilités sont infinies... et finalement le choix de la technologie est une affaire de choix personnel.

D'ailleurs il est vrai que souvent les gens font des sites en flash plus pour impressionner la galerie que dans un réel but.

Attention même si mon propos peu sembler "dur", je ne dénigre pas les personnes qui décide de faire des sites en flash (de plus c'est aussi mon cas parfois ).
Cependant je ne pense pas que flash soit toujours la solution (d'ailleurs l'engouement pour flash a un peu été revue à la baisse me semble-t-il, notamment du fait de ses lacunes par rapport au référencement qui lui a pris une nouvelle place dans le petit monde d'internet).

Bref tout ça pour dire que faire un site en flash parce que "tout le monde dit que c'est bien" pourquoi pas. Mais posez vous la question :

Pourquoi JE fait le choix de développer mon site en flash ?

Le but de mon cours sur flash est de faire découvrir le logiciel et ses possibilités, pour autant je ne préconise pas l'emploi du flash pour tous les sites.

Pourquoi vous embêter à faire votre site en flash si vous ne comptez pas apprendre le flash pour vous en resservir ?

[explainMe]

Bon alors j'ai relue ton post en étant un peu plus dedans et je vais tenter de te répondre sur le premier point déjà ( l'imbrication de boutons dans des boutons dans des clips, etc...).

Tout d'abord si je peux me permettre, mettre un bouton dans un clip qui est lui-même "cliqué" est une erreur.

Pourquoi ?

Parce que lorsque tu affecte une action sur le clic d'un clip (onPress ou onRelease ou un écouteur en AS3), flash détermine que TOUTE la surface du bouton (ou du clip) sert de zone de clic.

Du coup si le clip (ou bouton peu importe) en question contient lui aussi des clips (ou boutons) destinés à êtres cliqués, ceux-ci ne pourrons jamais fonctionner puisque leurs zones d'effet et à l'intérieur de celle du clip parent (donc invisible pour flash).

En résumé, un clip contenant d'autres clips (ou boutons) destinés à êtres cliqués ne doit pas avoir lui aussi d'action de clic, sinon les "zones" de ses enfants seront inaccessibles.

Cependant cela n'a rien à voir avec l'index comme tu l'as cru. Il s'agit d'imbrication, alors que l'index intervient entre 2 occurrences situées au même niveau (2 boutons enfants d'un même clip par exemple).

Par contre rien ne t'empêche de placer tes boutons de sous-partie dans le clip qui descend et monte puisque lui n'a pas d'action de "clic" définie (c'est d'ailleurs ce que j'ai fait dans mon exemple).
Ce qui t'évite de rajouter du code pour masquer tes boutons puisqu'ils se déplacent en même temps de leur clip parent (ou je sens que la tête fume là... ).

il n'arrête pas d'ajouter la page plusieurs fois, mais c pas normal ça! (même s'il y a un stop à la fin de chaque page!)
c quoi le problème?

Si c'est normal car à chaque fois que tu clic sur le bouton censé faire le addChild(), si tu n'as pas fait un removeChild() avant, il créé une nouvelle occurrence sans avoir détruit l'ancienne. De plus le stop(); n'a d'effet que sur la tête de lecture de flash, et pas sur le code. Si tu place du code en dessous du stop(); il sera lue par flash (et donc exécute).

Ensuite pour cette erreur :

alors qu'est ce qu'il m'affiche?
TypeError: Error #2007: Le paramètre child ne doit pas être nul.
at flash.display::DisplayObjectContainer/removeChild()
at Copiedeindextrial_fla::MainTimeline/newPage()

Il faudrait que je puisse voir ton fichier pour analyser ton code et les noms de liaisons des clips présents dans la bibliothèque mais à mon avis il s'agit d'un problème de type : flash ne reconnait pas page1 comme l'appel de ton occurrence portant le nom de liaison page1 dans ta bibliothèque.

[Osbern]

Bonjour Boris,
Désolé de te déranger sur un nouveau problème. J'ai réaliser le sous-menu, comme le reste du site, en AS3. En testant l'animation, flash me dit qu'un élément n'est pas défini ou n'a pas de propriété. Pas grave , je ne tiens pas compte du message. Je clique sur un item à sous-menu : le sous-menu apparait bien. Youpi ! Par contre, quand je clique sur les deux derniers items du menu (dépourvus de sous-menu), les sous-menus restent en place. Ils ne se masquent pas.

J'ai beau avoir relu mon code plusieurs fois et je ne vois pas mon erreur. Peux-tu m'aider ?
Ci-joint mon .fla

Osbern

Note : je n'ai qu'un item ("Services") pourvu d'un sous-menu. Mais même en créant un 2e item à sous-menu, le problème reste le même.

[thedaniz]

Bonjour Osbern,
J'ai eu un peu de mal à trouver ton code, il vaudrait que tu le mette sur la vignette 'CODE' et non 'menu'.
Ensuite l'erreur 1010 vient du fait que tu a un écouteur bLiens qui doit être en réalité bSituation lorsque tu change ça tout marche à merveille.
J'espère que tu as compris voila un partie de ton code et l'emplacement ou faire la modification :
ce qui est en entre guillemet doit être modifié par ce qu'il y a entre parenthèse

Code: Tout sélectionner

//--------------------------------------------- ecouteurs ---//
//
//--- bAccueil ---
//
this.menu.bAccueil.addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//--- bServices ---
//
this.menu.bServices.addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//--- bTarifs ---
//
this.menu.bTarifs.addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//--- "bLiens" (bSituation)---
//
this.menu."bLiens" (bSituation).addEventListener(MouseEvent.CLICK, afficheSousMenu);
//
//--- BContact ---
//
this.menu.bContact.addEventListener(MouseEvent.CLICK, afficheSousMenu);

Thedaniz

Edit
PS: Boris je me plonge dans la relecture et correction du nouveau chapitre sur la typographie et sur la cinquième partie de Flash dès que possible.

[explainMe]

Bravo,

J'ai vu le message hier soir mais pas encore eu le temps de regarder le fichier. Apparemment plus besoin si Thedaniz à trouver la solution.

P.S. : ça roule pour les relectures, merci.

[Osbern]

Mille mercis Thedaniz !!! Ca fonctionne parfaitement. J'attaque la partie 5 !!!