Creation le 13/07/2005.
Utilisation libre pour projets non lucratifs.
Si vous créez vos propres sources à partir de ce tuto, ces sources vous appartiennent et vous êtes libres d’en faire ce que bon vous semble.
I) Graphismes :
La fenêtre va être composé de 2 parties :
- la barre de titre (celle sur laquelle il faudra cliquer pour déplacer la fenêtre)
- Le fond de la fenêtre.
Ouvrez flash, cliquez sur fichier -> Nouveau -> Document Flash.
Nous allons ajouter le clip qui contiendra la fenêtre :
Cliquez sur insertion -> Nouveau symbole, nommez le fenetre1.
Dessinez votre fenêtre comme bon vous semble, ici la fenêtre sera dessiné simplement :
Maintenant il faut comprendre comment cela va fonctionner :
La fenêtre doit être séparé en 2, une partie servira à afficher le titre et à la bouger, l’autre affichera le clip chargé. C’est pour cela qu’il faut couper la fenêtre maintenant.
Sélectionnez la barre de titre avec la souris, comme sur l’image (n’oubliez pas de prendre la ligne du bas)
Cliquez sur modification -> convertir en symbole
Appelez ce nouveau symbole « barre »
Créez un nouveau calque et appelez le LyBarre
Coupez collez la barre dans ce calque.
Dans le panneau propriété la ou il est inscrit nom de l’occurrence écrivez « barre » (c’est avec ce nom que nous pourront ajouter du code par la suite)
Prenez le reste de la fenêtre et convertissez le en symbole, appelez le « intérieur »
Renommez le calque dans lequel est le clip intérieur LyInterieur.
Dans le panneau propriété la ou il est inscrit nom de l’occurrence écrivez « interieur » (c’est avec ce nom que nous pourront ajouter ducode par la suite)
Vos calques ressemblent a ceci :
Voila nous avons nos deux parties de fenêtres, si vous les aviez séparé remettez les ensemble.
II) La barre de titre Dragable.
Double cliquez sur la barre de titre (« barre »).
Vous vous trouvez à l’intérieur de la barre de titre. Créez un calque nommé titre, cliquez sur la première image du calque et choisissez l’outil texte.
Créez une zone de texte sur le long de la barre de cette façon :
Et mettez dans les propriétés texte dynamique, comme nom « titre », une seul ligne et décochez la case « sélectionnable » :
La barre de titre est prête pour l’action ;)
III) Le clip « interieur »
Imaginez la fenêtre vue de coté.
La barre de titre est au niveau le plus haut (car on a placé son calque au dessus du calque interieur)
Ensuite vient « interieur » ici en rouge.
Interieur va contenir deux choses importantes :
Le clip « contenu » que nous allons créer et qui accueillera le swf que l’on va charger.
Et le clip fond, qui sera l’image de fond ou la couleur de fond mais qui est indispensable pour 2 raisons :
- Si on ne met pas de clip fond en dessous du swf chargé les parties transparentes du swf laisseront voir les graphismes qui se trouvent en dessous de la fenêtre
- Si on n’utilise pas une technique cachée (handCursor no justu -_-) les éléments cliquables de l’animation le resteront même si la fenêtre est au dessus.
Faites un essai sans utiliser de clip fond pour constater les problèmes que cela apporte.
Double cliquez sur le clip interieur si cela n’est pas déjà fait.
Il va falloir séparer les contours de la fenêtre du reste pour qu’ils restent visibles même après le chargement du swf.
Sélectionnez les, faites couper, créez un nouveau calque nommé « contour » et placez le au dessus de tous les autres, et collez les contour (coller en place).
Appelez le calque ou il reste le remplissage « fond ».
Sélectionnez le remplissage de fond et faite Modification -> Convertir en symbole.
Appelez-le « fond » …
Voila ce que ça donne :
Créez un nouveau calque, entre le calque contours et le calque fond, appelez le contenu. Maintenant cliquez sur Insertion -> Nouveau symbole et nommez le « conteneur ».
Ce clip reste vide, et recevra les swf à charger.
Revenez dans le clip interieur.
Il faut maintenant glisser déposer le clip « conteneur » dans le calque « contenu » et le placer au coin haut gauche du clip fond. Nommez le « conteneur ».
Petite image pour ceux qui n’ont pas suivi…
Maintenant que l’on a un clip pour charger le clip externe, il va falloir réfléchir un peu. Si le clip est de la même taille ou plus petit que le clip fond (la taille de la fenêtre) il ne devrait pas y avoir de problème (on pourra quand même vouloir que le clip s’adapte a la fenêtre c’est ce que l’on fera dans le code).
Par contre si le clip est plus grand que la fenêtre, il va dépasser, et là si il n’est pas redimensionné (dans le cas d’utilisation de scrollBar), il faudra que les parties qui dépassent la fenêtre soient invisibles.
On va donc utiliser un masque sur le calque contenu qui va permettre de cacher automatiquement les parties qui dépassent.
Créez un calque et placez le au dessus du calque contenu, cliquez du bouton droit dessus et cliquez sur Masque. Renommez ce calque « MasqueContenu » et débloquez le pour ensuite dessiner un rectangle de la taille du fond de la fenêtre.
Voila le résultat:
Dernière chose, il faut définir les propriétés de liaison de la fenêtre pour l’utiliser avec ActionScript. Faites ctrl+L pour ouvrir la bibliothèque. Vous devez y voir « fenetre1 ».
Cliquez du bouton droit dessus et cliquez sur Liaison. Cochez « Exporter pour ActionScript » et mettez comme identifiant « fenetreLib ». Grâce a cette démarche, on va pouvoir depuis ActionScript utiliser attachMovie pour placer dynamiquement le clip sur la scène.
Nous avons maintenant une fenêtre prête à être scriptée.
L’ajout de scrollBar pour le cas de non redimensionnement des clips externes sera abordé à une date ultérieure (ou jamais -_-)
IV) L’ActionScript.
Si vous avez Macromedia Flash MX 2004 pro faites Fichier -> Nouveau -> Fichier Action Script
Sinon téléchargez un éditeur de code comme Sephy : http://www.sephiroth.it/python/sepy.php
On va commencer par choisir le nom de la classe que l’on va créer. Pourquoi pas Fenetre ?
Faites fichier -> enregistrer sous, et placez le fichier (Fenetre.as) dans le même dossier que votre animation principale.
Maintenant que le fichier de classe est crée il faut coder !
Ma connaissance de la programmation orientée objet n’est pas parfaite, il peut très bien y avoir du code inutile ou trop lourd, si vous avez des critiques (bonnes ou mauvaises) je les accepterais avec plaisir.
Voici la présentation de la classe Fenetre :
La classe Fenetre aura des attributs et des méthodes d’occurrence mais aussi statiques (des méthodes qui ne pourront pas êtres appelées à partir d’une occurrence mais pour la classe elle-même).
Par exemple, le movieClipLoader (qui sert à charger le clip externe dans« conteneur ») sera statique, car un seul suffit pour toutes les fenêtres et ce serait utiliser de la mémoire pour rien que de doter chaque fenêtre d’un MCL.
Si vous êtes perdu après avoir lu le paragraphe précèdent, cela va être difficile d’aller plus loin, essayez de vous familiariser avec les classes et tout ce qui s’y rapporte en ActionScript en trouvant des tutoriaux ou en achetant un livre sur le sujet (je vous conseil « Le meilleur d’ActionScript 2.0 » de Colin Moock de l’éditeur O’Reilly®)
Voici un rapide aperçu de ce que contient la classe Fenetre :
Réalisé avec gModeler (http://www.gModeler.com)
Attributs :
instance : c’est le lien vers le clip qui va être placer sur la scène.
mcl : C’est le MovieClipLoader de la classe, il va être utilisé par chaque fenêtre pour charger son contenu. Il est statique.
mclLst : c’est l’écouteur de mcl (pour les événements onLoadInit, onLoadError etc…)
Méthodes :
Fenetre : c’est la méthode constructeur, celle qui est appelée lorsque l’on créera une nouvelle fenêtre a l’aide de new. Cette fonction est détaillé en dessous
getSuperMcl : cette méthode retournera le movieClipLoader statique de la classe, pour le chargement des clip.
gotoFirstPlan : cette méthode d’occurrence est utilisée pour faire passer la fenêtre au premier plan si elle est sélectionnée alors qu’une autre fenêtre est au dessus d’elle.
load : cette méthode permettra de charger un clip dans conteneur en changeant aussi le texte de la barre de titre.
1) Fenetre : la méthode constructeur.
La fonction constructeur permet d’initialiser l’occurrence de la classe, elle est appelée quand on utilise un new. On aura une fonction constructeur du type :
function Fenetre(nom:String, // C’est le nom que la classe donnera au clip de la fenêtre
conteneur:MovieClip,//C’est le clip dans lequel va être attaché le clip fenêtre
clip:String,//C’est le nom de liaison du clip dans la bibliothèque (utilisé avecattachMovie)
titre :String,//le titre qui s’affichera dans la barre
swf :String,//le swf a charger.
defaultX:Number,//La position horizontale par défaut
defaultY:Number,//La position verticale par défaut
dragable:Boolean//Booléen spécifiant si la fenêtre est déplaçable
)
Pour créer une nouvelle fenêtre il faudra donc utiliser la ligne de code :
maFenetre:Fenetre = new Fenetre("fenetre1", _root, "fenetre1", "KatiePrice", "13.jpg", 20, 20, true);
pour une fenêtre qui sera attaché sur la base de l’animation et qui sera positionné a x = 20 et y = 20.
Dans cette fonction, il faudra tout d’abord attacher le clip fenetreLib qui se trouve dans la bibliothèque, puis le placer a l’emplacement fourni en paramètre, et utiliser les événements de souris onPress et onRelease pour le déplacement manuel de la fenêtre.
Voila le code :
function Fenetre(nom:String, conteneur:MovieClip,clip:String, titre :String, swf :String,defaultX:Number, defaultY:Number, dragable:Boolean) {
// On attache la fenetre
this.instance = conteneur.attachMovie(clip, nom, conteneur.getNextHighestDepth());
// on place la fenetre
this.instance._x = defaultX;
this.instance._y = defaultY;
//
// --- Les evenements de souris ---
//
this.instance.interieur.fond.useHandCursor = false;
//C’est la technique « handCursor no jutsu » dont je vous parlez plus haut dans ce tuto, et c’est pour utiliser cette technique que l’on a créée un clip « fond ». Elle sert en fait à faire comme si le fond était cliquable pour éviter que ce qui est en dessous de la fenêtre ne le soit, mais la main est cachée. C’est de la bidouille et si quelqu’un a une meilleur technique veuillez m’en faire part.
if(dragable){ //si la fenetre est deplacable:
this.instance.barre.onPress = function() {
this._parent.startDrag(false); // On commence a déplacer a l’événement onPress
Fenetre.gotoFirstPlan(this._parent); // ici on passé au dessus des autres fenêtres (fonction étudiée plus bas)
};
this.instance.barre.onRelease = function() {
this._parent.stopDrag();
};
}
this.load(titre, swf); // La fonction load est expliqué juste en dessous.
}
2) Load : la fonction chargement.
La fonction load est très simple, elle va juste changer le texte dans labarre de titre (ligne 1) et elle va appeler le MovieClipLoader statique de la classe et lui demander de charger le clip fournit en paramètre dans le clip instance.interieur.conteneur.
public function load(titre:String, swf:String) {
this.instance.barre.titre.text = titre;
Fenetre.getSuperMcl().loadClip(swf, this.instance.interieur.conteneur);
}
3) Les fonction statiques.
a) getSuperMcl
Cette fonction statique va créer le movieClipLoader et son écouteur si ils n’existent pas, sinon elle va seulement le retourner. Cela permet de n’avoir qu’un seul movieClipLoader pour toutes les fenêtres de la scène.
La fonction onLoadInit de l’écouteur va s’exécuter a la fin du chargement de l’image, c’est a partir de ce moment seulement que l’on peut accéder aux propriétés _width et _height. Ensuite on va calculer le rapport largeur/hauteur du clip pour le redimensionner en conséquence.
Finalement on défini l’evenement onRelease du clip pour que quand on clique dessus, la fenêtre passe au dessus des autres.
public static function getSuperMcl():MovieClipLoader {
// Si le movieClipLoader n'existe pas on en crée un nouveau ainsi que son ecouteur
if (mcl == undefined) {
mcl = new MovieClipLoader();
mclLst = new Object();
mclLst.onLoadInit = function(cible:MovieClip) {
var rapport:Number = cible._width/cible._height;
trace("w = "+cible._width+" h ="+cible._height+" rap = "+rapport);
if (rapport>=1) {
cible._width = cible._parent.fond._width;
cible._height = cible._parent.fond._width/rapport;
cible._y = (cible._parent.fond._height-cible._height)/2;
cible._x = 0;
} else {
cible._height = cible._parent.fond._height;
cible._width = cible._parent.fond._height*rapport;
cible._x = (cible._parent.fond._width-cible._width)/2;
cible._y = 0;
}
cible.onPress = function() {
Fenetre.gotoFirstPlan(this._parent._parent);
};
};
mcl.addListener(mclLst);
return mcl;
} else {
return mcl;
}
}
b) gotoFirstPlan
La fonction gotoFirstPlan va passer le clip qu’elle reçoit en paramètre au plus haut niveau de profondeur du clip parent a ce dernier.
public static function gotoFirstPlan(cible:MovieClip) {
if (cible.getDepth() != cible._parent.getNextHighestDepth()-1) {
cible.swapDepths(cible._parent.getNextHighestDepth());
}
}
Voila vous pouvez maintenant tester votre animation avec plusieurs fenêtres comme ceci par exemple :
maFenetre = new Fenetre("fenetre1", _root, "fenetre", "KatiePrice", "13.jpg", 20, 20, true);
maFenetre2 = new Fenetre("fenetre2", _root, "fenetre", "GhostInTheShell", "TopManga_Ghost_In_The_Shell_05.jpg", 20, 20, true);
maFenetre3 = new Fenetre("fenetre3", _root, "fenetre", "Fleur", "VBV95-08.JPG", 20, 20, true);
maFenetre4 = new Fenetre("fenetre4", _root, "fenetre", "AeroFighter", "aero.swf", 20, 20, true);
Le swf pèse 1 450 octets ce qui est assé raisonnable ;)
La source contient:
-le fichier main.swf
-le fichier main.fla
-le fichier de la classe Fenetre : Fenetre.as
-Les images pour le test
Telechargez la source : ici
Reste a faire :
- lockRoot pour les swf qui utilisent le mot clée _root.
- boutton pour fermer les fenetres
- Boutton pour charger un clip manuellement
- Autre chose ?
En espérant que mon tuto soit utile a quelques uns d’entre vous.
Liens :
http://www.gModeler.com
http://www.flashkod.com
http://gotoandplay.it
http://cochire.free.fr/monsite/main2.html