|
|
La méthode de création d'un fichier .flv est très simple. Lorsque vous achetez Flash MX 2004 Pro, une application intitulée "Flash_Video_Exporter" vous est fournie avec le ogiciel. Il vous suffit de l'installer, dès lors, le format .flv est disponible dans la fenêtre d'exportation des différents logiciels qui traitent la vidéo en faisant appel à QuickTime. Précisons que vous ne devez pas importer votre vidéo dans votre .fla pour cette technique, il s'agit de la lecture d'un fichier .flv. Commencez donc par ouvrir une vidéo sous QuikTime version Pro puis :
1. Sélectionnez la commande Exporter du Menu Fichier
2. Sélectionnez le format d'export via le menu déroulant "Exporter"
3. Cliquez sur le bouton "Options..."
4. Effectuez les réglages afin d'obtenir un équilibre entre poids et qualité.
Explications
Le nombre d'images peut effectivement varier à votre convenance, mais en multimédia, 15 images suffisent à visualiser une vidéo sur le web. Pour être plus précis, faites toujours attention de garder le même nombre d'images/seconde que le fichier d'origine*. Vous pouvez aussi diviser ce nombre par deux mais faites toujours attention que le nombre d'images que vous choisirez soit un multiple du nmbre d'images du fichier d'origine.
* Pour connaitre le nombre d'images/secondes d'une séquence, ouvrez la dans le player QuickTime puis tapez CTRL-I ou Pomme-I.
Le débit (dépend bien sûr du type de connexion qu'aura la cible (l'ensemble des internautes) de votre site. Des préréglages disponibles vous proposent déjà les débits suivants : (High, Medium, Low qui valent successivement 276, 138 et 46 Kbits/seconde). Vous pouvez vous même personnaliser le débit qui correspond davantage à ce que vous souhaitez. Précisons également que si vous faites une vidéo qui sera lue dans une animation Off-line, vous pouvez changer vous même la valeur. Pour une connexion Internet haut débit, vous pouvez opter pour du 276 Kbits/sec sans aucun problème, voire même augmenter cette valeur à 300, 350. A vous de faire des essais mais ne dépassez pas les 350. 280 Kbits/sec est un bon compromis.
Côté Audio, faites très attention de ne pas demander un taux trop élevé ni trop faible. 96 et 128 sont des valeurs raisonnables. De ce côté là, il est très difficile de conseiller un taux dans la mesure où l'oreille de chacun ne présente pas la même "tolérance". 8 et 32 reste des valeurs tout de même un peu légères, au delà de 128, la bande sonore de votre vidéo doit avoir une certaine importance. Il ne vous reste malheureusement plus qu'à faire des essais.
Le nombre d'image clé dépend aussi de la nature de votre vidéo (peu ou beaucoup de changements de plan tels qu'un journal télévisé ou une course de voitures). Plus vous demandez d'images clé (un chiffre proche de 1 car c'est le nombre d'images toutes les X secondes), plus vous augmenterez le poids de votre vidéo mais obtiendrez en revanche une "meilleure" qualité globale de votre vidéo lorsqu'il y a de nombreux mouvements.
La taille de votre vidéo doit être de préférence relative au débit que vous aurez choisi, mais pas obligatoirement. Question de logique. Plus le débit de la connexion de l'internaute qui va consulter votre page contenant une vidéo est important, plus vous pouvez augmenter la taille de votre vidéo.
> Méthodologie : Créer un symbole de type vidéo
Il est nécessaire de créer un tel symbole afin de pouvoir le placer sur la scène et ainsi obtenir une occurrence à laquelle on fera référence pour lier une connection en ActionScript à un fichier au format .flv.
1. Via le menu local déroulant de la bibliothèque (en haut à droite), sélectionnez la commande "Nouvelle vidéo"
2. Placez le symbole obtenu sur la scène
3. Réglez la hauteur et la largeur de l'occurrence obtenue aux mêmes dimensions que celles de votre vidéo (fichier .flv)
4. Nommez l'occurrence (ex. : ecran)Votre occurrence est enfin prête à reçevoir un flux vidéo.
> Méthodologie : Coder une animation qui fait appel à un .flv
Lorsque vous devez établir une une connexion, entre votre SWF qui contient une occurrence issue d'un symbole Vidéo et le fichier au format .flv, vous devez avant tout comprendre ce que vous faites. Cliquez sur le lien ci-dessous pour comparer avec une connexion que vous avez peut-être déjà chez vous (vous avez vous aussi peut-être la malchance d'être obligé de passer par un certain cablo-opérateur que je ne nommerai pas) pour voir un film sur une des chaines qu'il propose.
1. Sélectionnez l'image clé 1 de la timeline principale
2. Saisissez le script ci-dessous
liaisonWeb = new NetConnection();
liaisonWeb.connect(null);
lestream = new NetStream(liaisonWeb);
ecran.attachVideo(lestream);
lestream.play("http://www.yazo.net/Marine.flv");ATTENTION : Flash MX 2004 est enfin case sensitive. Cela signifie que vous devez imperativement respecter la casse. Ex. : liaisonWeb contient un W majuscule. Si vous faisiez référence à cette instance sans W majuscule sur l'une des deux lignes suivantes, le script ne renverrait pas d'erreur mais la vidéo ne s'afficherait pas.
Explications
Comme vous pouvez le constater, seules 5 lignes de code son nécessaires pour lire une vidéo dans une animation Flash. Analysons ensemble la significations de ces lignes.
liaisonWeb = new NetConnection() : La création de cette instance permet d'ouvrir un "passage" pour une connection sur le web.
liaisonWeb .connect(null) : La méthode connect() de la classe NetConnection() permet d'établir la connection.
lestream = new NetStream(liaisonWeb) : La création de cette instance permet de rattacher un flux continu à la connection web.
ecran.attachVideo(lestream) : Cette ligne d'instruction permet de lier l'occurrence intitulée "ecran" qui se trouve sur la scène au flux continu. Rappelons que cette occurrence est issue du symbole de type Vidéo dans la bibliothèque.
lestream.play("Marine.flv") : Enfin, cette dernière ligne n'est pas obligatoirement rattachée aux 4 premières. Elle peut être insérée dans le script d'un bouton qui déclenchera la lecture. L'adresse du fichier n'est pas obligatoirement celle d'un fichier qui se trouve en local sur le serveur mais peut être celle d'une adresse http comme dans l'exemple ci-dessus. (ex. : http:///www.nomdunsite.com/nomdundossier/nomdunfichier.flv). Dans le cas d'un fichier local, le chemmin qui figurerait éventuellement devant le nom de fichier doit être relatif à la page HTML et non le SWF.> Méthodologie : Contrôle d'une vidéo sur la scène
BufferTime : Avant de demander la lecture d'une vidéo, vous avez la possibilité de préciser un temps de préchargement, appelé aussi buffer.
lestream.setBufferTime(5);
Dans l'exemple ci-dessus, les 5 premières secondes (après avoir demandé la lecture de la vidéo par la commande play()) n'afficheront pas la vidéo. C'est seulement au bout des 5 secondes de buffering que la lecture demarrera. Dans la théorie, il faudrait demander une durée qui correspond à la moitié de la durée de la vidéo (buffer de 20 secondes si la vidéo dure 40 secondes). Cela permettrait qu'il n'y ait pas de coupures lors de la lecture. En fonction du débit demandé lors de la phase d'exportation de votre vidéo (Kbits/sec ou Ko/sec), cette durée peut varier selon le débit moyen de la connexion des internautes qui consulteront le site qui contient cette vidéo.
Pause : Si vous souhaitez ajouter un bouton de pause afin que l'internaute puisse arrêter temporerement la lecture de votre vidéo, ajoutez a ligne ci-dessous sur l'occurrence d'un bouton.
lestream.pause();
Ce script permet d'effectuer sur un même bouton, plusieurs clics, lecture et pause s'alterneront.
Atteindre un point dans une vidéo : Vous souhaitez lire directement votre vidéo à partir de la 7e seconde (depuis le début de la vidéo) utilisez alors la commande seek(). La valeur à préciser entre les parenthèses est exprimée en secondes.
lestream.seek(0);
L'exemple ci-dessus permet de rembobiner la vdiéo à 0.
Arrêt de la lecture de la vidéo : Pour arrêter la lecture d'une vidéo, vous pouvez utiliser 2 techniques.
lestream.close();
lestream.play("");Choisissez l'une des deux méthodes.
Après l'arrêt de la lecture d'une vidéo, demandez simplement une nouvelle lecture avec la commande play()
lestream.play("http://www.unnomdedomainecom/video.flv");
Afficher uen jauge du chargement de votre vidéo : Attention, vous ne pouvez pas si simplement afficher la position de la tête de lecture par rapport à une echelle représentant la totalité de la durée de votre vidéo. En effet, il n'existe aucune propriété qui permette de connaitre la durée d'une vidéo (écrivez-moi si vous en connaissez une qui ne soit pas référencée). Le script ci-dessous permet donc simplement d'afficher le niveau de chargement de la vidéo.
_root.onEnterFrame = function() {
qte = lestream.bytesLoaded;
total = lestream.bytesTotal;
jauge._xscale=(qte/total)*100
};
Position de la tête de lecture : Si vous devez afficher la position de la tête de lecture (en secondes) pour l'afficher dans un texte dynamique sur la scène (ou bien même l'utiliser dans un calcul pour défiir le rapport entre la position de la tête de lecture et la durée totale qu'il faudrait écrire en dur), la propriété xxx vous renvoie la vaeur souhaitée.
teteLecture = lestream.time;
Dans l'exemple ci-dessus, la position de la tête de lecture s'affiche en secondes (accompagnées des millisecondes) dans le texte dynamique intitulé teteLecture qui se trouve sur la scène.
Etat de la vidéo : POur savoir si une vidéo a été trouvée ou non, si le buffer est chargé ou complètement déchargé, vosu pouvez utiliser le script ci-dessous :
lestream.onStatus = function(etat) {
if(etat.code=="NetStream.Play.Start")affichage="Lecture en cours..."
if(etat.code=="NetStream.Play.Stop")affichage="Arrêt"
if(etat.code=="NetStream.Buffer.Empty")affichage="Buffer vide"
if(etat.code=="NetStream.Buffer.Full")affichage="Buffer chargé"
if(etat.code=="NetStream.Play.StreamNotFound")affichage="Vidéo non trouvée "
};Il va de soi que vous n'êtes pas obligé de tout utiliser, il ne s'agit que d'un exemple exhaustif.
Connaitre la durée de la vidéo : La technique n'est pas très simple. En effet, il s'agit d'une propriété comparable à time qui renvoie la position de la tête de lecture, mais c'est une valeur renvoyée par une fonction associée au gestionnaire onMetaData. Le mot etat peut être remplacé par n'importe quel autre à condition qu'il soit en un seul mot et ne contienne pas de caractères spéciaux ni accentués. La propriété duration permet donc de connaitre la durée de la vidéo.
lestream.onMetaData = function(etat) {
duree = etat.duration;
};ATTENTION : ll est important de préciser que vous ne pourrez obtenir cette information qu'à une seule condition : Votre vidéo doit être exportée via Flash Video Exporter version 1.2. Vous pouvez la télécharger à l'adresse suivante :
Mac : http://download.macromedia.com/pub/flash/updates/mx2004/video_update/flash_video_update.dmg
PC : http://download.macromedia.com/pub/flash/updates/mx2004/video_update/flash_video_update.zip
(http://www.macromedia.com/support/flash/downloads.html)
Si vous souhaitez mémoriser des informations sur l'ordinateur des visiteurs de votre site, vous pouvez alors utiliser la technique des cookies. Cela se traduit par l'utilisation de l'objet SharedObject et de sa méthode getLocal(). Il ne s'agit pas des cookies de vos navigateurs (IE, Netscape, Opera, etc.). Si l'utilisateur efface donc les cookies de sa machine, ceux que vous créez avec vos animations Flash ne le seront pas.
> Méthodologie : Mémoriser un texte
Lorsque l'utilisateur saisi un texte dans une zone prévue à cet effet (texte de saisie placé sur la scène), vous souhaitez peut-être qu'il puisse retrouver ses écrits à sa prochaine connexion sur votre site. La technique est donc très simple.
1. Placez un texte de saisie sur la scène que vous nommez contenu.
2. Placez deux boutons sur la scène (Enregistrer et Charger un cookie)
3. Placez le script ci-dessous sur la première image clé e la timeline.lelien = sharedObject.getLocal("cookiememo");
contenu = lelien.data.vcontenu;4. Placez le script ci-dessous sur le bouton "Enregistrer"
on (press) {
lelien.data.vcontenu = contenu;
lelien.flush();
}5. Placez le script ci-dessous sur le bouton "Charger"
on (press) {
contenu = lelien.data.vcontenu;
}
> Méthodologie : Mémoriser des propriétés
Si vous réalisez une animation qui nécessite de mémoriser la position, la taille, la rotation (ou toutes autres propriétés) d'une ou plusieurs occurrences sur la scène, vous pouvez utiliser les cookies.
Dans notre exemple, nous avons imaginé que le déplacement d'un curseur augmente ou réduit l'échelle d'une occurrence sur la scène. Nous ne parlerons pas ici du masque qui a été utilisé.
1. Placez une image sur la scène que vous transformez en clip
2. Nommez l'occurrence obtenue (Ex. image)
3. Placez un bouton sur la scène. Nommez l'occurrence obtenue (Ex. curseur)
4. Placez le script ci-dessous sur l'occurrence du boutonon (press) {
startDrag(curseur, false, 69, 173, 237, 173);
}
on (release) {
stopDrag();
lelien.data.echellex = image._xscale;
lelien.data.echelley = image._yscale;
lelien.data.posix = curseur._x;
lelien.flush();
}5. Placez le script ci-dessous sur l'image clé 1 de la timeline.
lelien = sharedObject.getLocal("cookiememo");
image._xscale = lelien.data.echellex;
image._yscale = lelien.data.echelley;
curseur._x = lelien.data.posix;
// Code qui permet simplement de mettre à jour l'échelle de l'image/position du curseur mobile
surveillant = new Object();
surveillant.onMouseMove = function() {
image._xscale = curseur._x;
image._yscale = curseur._x;
};
Mouse.addListener(surveillant);
Lorsque vous effectuez un clic droit (PC) ou CTRL-Clic (Mac) sur la scène, sur une occurrene de symbole (Bouton ou Clip) ou bien même un texte dynamique/de saisie, un menu contextuel apparait. Si vous souhaitez modifier celui-ci, avec Flash MX 2004, cela devient enfin possible. Utilisez les classes ContextMenu() et ContextMenuItem(). Respectivement, la première permet de créer des menus, la deuxième créer quant à elle les commandes de ces menus.
Remarques : Vous ne pourrez pas masquer les commandes "Imprimer..." et "A propos de Macromedia Flash Player..." et ne pouvez pas non plus utiliser ces classes pour personnaliser les menus de la barre des menus.
Voici un exemple de menu contextuel dans lequel des commandes actives ont été ajoutées, une commande a été désactivée.
2004
Nous verrons plus loin dans cette partie à quoi ressemble le script de l'animation ci-dessus, mais commençons tout de suite par voir progressivement la création d'un menu contextuel.
Commençons par créer un menu dans lequel nous allons masquer toutes les commandes. Nous conserverons uniquement la commande "Imprimer". Nous arattacherons ensuite ce menu à l'occurrence d'un clip.
1. Placer un clip sur la scène et nommez l'occurrence obtenue (ex. : vitrail)
2. Placez le script ci-dessous sur une image clé de la timeline.menuDuClip = new ContextMenu();
menuDuClip.hideBuiltInItems();
menuDuClip.builtInItems.print = true;
vitrail.menu = menuDuClip;Explications :
Vous devez initialement créer une instance de la classe ContextMenu(), c'est ce qui permet de créer le menu. Maintenant qu'il est crée, retenons qu'il contient pour l'instant les mêmes commandes que celui que vous avez par défaut. C'est donc à vous de masquer/afficher les commandes que vous ne voulez plus voir et ajouter des commandes personnalisées. L'instance que nous venons de créer va être assignée comme valeur à la propriété menu du clip vitrail de notre exemple.
2004
Ligne 1 : Créer un menu .
Ligne 2 : Utilisation de la méthode hideBuiltItems() qui permet de masquer les commandes par défaut.
Ligne 3 : Demande d'affichage de la commande "Imprimer"
Ligne 4 : Assignation du menu créé (et personnalisé) à un clip intitulé "vitrail"
Comme vous pourrez donc le constater, la technique est des plus simples mais nous n'avons pour l'instant ajouté aucune commande. Voyons comment procéder.
1. Placez le script ci-dessous sur une image clé de la timeline.
menuDuClip = new ContextMenu();
faire = function () {
message="Bonjour !";
};
commande1 = new ContextMenuItem("Bonjour", faire);
menuDuClip.customItems.push(commande1);
vitrail.menu = menuDuClip;
Explications :
- Nous commençons par créer un menu comme dans l'exemple précédent (sans masqur les commandes par défaut).
- Nous définissons la fonction qui s'executera lorsque la commande sera sélectionnée.
- Nous créons ensuite une commande qui va être ajoutée au menu (en précisant le nom de la commande et sa fonction)
- Nous ajoutons la commande au menu en spécifiant son nom.
- Nous rattachons le menu à l'occurrence intitulée vitrail.
2004Exemple 2 : Idntique celui du dessus, une commande supplémentaire a simplement été ajoutée grâce à la méthode push().
menuDuClip = new ContextMenu();
faire = function () {
message="Bonjour";
};
commande1 = new ContextMenuItem("Angle 0°", faire);
commande2 = new ContextMenuItem("Angle 20°", faire);
menuDuClip.customItems.push(commande1, commande2);
vitrail.menu = menuDuClip;
1. Placez le script ci-dessous sur une image clé de la timeline.
menuDuClip = new ContextMenu();
faire = function (cible, numCommande) {
etiquette = numCommande.caption;
switch (numCommande) {
case commande1 :
var angle = 0;
break;
case commande2 :
var angle = 20;
break;
case commande3 :
var angle = 45;
}
cible._rotation = angle;
};
commande1 = new ContextMenuItem("Angle 0°", faire);
commande2 = new ContextMenuItem("Angle 20°", faire);
menuDuClip.customItems.push(commande1, commande2);
vitrail.menu = menuDuClip;
Explications :
- Comme dans l'exemple ci-dessus, une fonction est créée mais elle contient 2 paramètres supplémentaires. Le premier correspond au nom de l'occurrence qui sera concernée par l'ajout du menu contextuel, le deuxième va renvoyer le numéro de la commande sélectionnée. Il faut ajouter la propriété caption pour obtenir le numéro de la commande. Nous pourrions également rendre la commande invisible/visiable avec la propriété "visible" ou encore l'afficher en grisé avec la commnde "enabled". Dans le premier exemple de ce chapitre, la ligne ci-dessosu permet d'ajouter une ligne de séparation entre 2 commandes.
commande2.separatorBefore = true;
2004
Un dernier pour la route...
2004
Explications : Il est tard, je vais me coucher, pas d'explications. Débrouillez-vous. On avez dit, juste un dernier !
version = function () {
logintexte = System.capabilities.version;
};
plateforme = function () {
logintexte = System.capabilities.os;
};
heure = function () {
horl = new Date();
heure = horl.getHours();
minutes = horl.getMinutes();
if (minutes<10) minutes = "0"+minutes;
logintexte=heure+":"+minutes
};
menuDuClip = new ContextMenu();
commande1 = new ContextMenuItem("Version", version);
commande2 = new ContextMenuItem("Plate-Forme", plateforme);
commande3 = new ContextMenuItem("Heure", heure);
menuDuClip.customItems.push(commande1, commande2,commande3);
lelog.menu = menuDuClip;
Cette notion de programmation orientée objet est de préférence réservée aux bons développeurs qui auraient besoin d'une "puissance" supplémentaire qu'offre la possibilité de créer ses propres classes. Avant d'aller plus loin, assurez vous que vous avez bien compris qu'un clip dans la bibliothèque est déjà un objet que vous pouvez instancier dynamiquement. Il est également possible d'ajouter des méthodes à la classe MovieClip grace aux prototypes.
Imaginons que vous ayez besoin de définir une action qui doit être utilisée plusieurs fois et dans des conditions différentes. Il est dans ce cas conseillé de créer un objet personnalisé. Vous devez créer une fonction qualifiée de "constructeur", il s'agit d'une fonction classique qui porte de préférence un nom évocateur.
function hautparleur() {
trace("Bonjour");
}
Lorsque votre fonction est créée, vous pouvez alors l'instancier.
sonopiece1 = new hautparleur();
Nous venons de créer un objet dont le nom est sonopiece1. Lorsque le script est exécuté, le mot Bonjour s'affiche dans la fenêtre Sortie. Nous aurions également pu passer un paramètre à l'objet s'il avait été prévu lors de la construction de la fonction. Nous ajoutons donc une propriété à la fonction constructeur.
function orateur(personne) {
trace("Bonjour "+personne);
}
Lorsq'un objet est crée, la fonction constructeur s'exécute. Pour l'instant, cette fonction est simple, mais elle présente déjà l'avantage d'afficher des textes différents selon le paramètre que vous passez (vous indiquez). Nous aborderons un exemple plus complexe plus loin dans cette partie.
Elle présente en revanche l'inconvénient d'afficher le résultat dès que l'objet est créé (toto = new orateur("Marie")). Pour pallier à ce problème, il est préférable d'affecter une méthode à notre objet personnalisé intitulé orateur.
Nous venons de soulever dans le paragraphe ci-dessus, le problème de l'exécution automatique de l'instruction contenue dans une fonction constructeur. Afin d'éviter ce genre de problème, il est préférable de créer une fonction sans action précise, on spécifie alors uniquement certains paramètres tels que les propriétés et autre variables, puis on affecte des méthodes à l'objet grâce à la propriété prototype . L'exemple ci-dessous nous apprend cette technique d'affectation.
Nous commençons d'abord par créer une nouvelle fonction constructeur sans action qui ne contient qu'une simple propriété.
function orateur(personne) {
this.personne = personne;
}
Nous affectons ensuite la méthode bonjour à notre objet orateur.
1. Faîtes référence au nom de l'objet
2. Ajoutez la propriété prototype
3. Indiquez le nom de la méthode
4. Assignez une fonction au résultat des étapes 1 à 3
5. Saisissez une plusieurs lignes d'instructions qui seront exécutées lorsque la méthode sera appelée.
Voici à quoi doit ressembler votre script :
orateur.prototype.bonjour = function() {
trace("Bonjour "+this.personne);
};
A partir de ce que nous venons d'apprendre, nous pouvons donc décliner les exemples ci-dessous :
function orateur(personne) {
this.personne = personne;
}orateur.prototype.bonjour = function() {
trace("Bonjour "+this.personne);
};orateur.prototype.aurevoir = function() {
trace("Au revoir "+this.personne);
};orateur.prototype.invit = function() {
trace("Bonjour "+this.personne+", veuillez tapez votre code.");
};
Votre objet est créé, vos méthodes également, vous pouvez à présent créer une instance de votre objet et appeler la méthode bonjour :
alaindecaux = new orateur("Marie");
alaindecaux.bonjour();
L'objet est créé, la fonction constructeur s'exécute et affiche le texte demandé.
Dans l'exemple du script ci-dessus, nous créons une instance de l'objet orateur en précisant la valeur de la propriété personne ("Marie"). Nous avons appelé l'instance alaindecaux, nous faisons ensuite appel à la méthode bonjour().
Si vous aviez besoin de réaliser plusieurs formes avec les méthodes moveTo() et lineTo , il faudrait répéter le code autant de fois que vous avez de formes. De plus, lorsque vous créez un triangle ou un carré, le code n'est pas le même. Nous allons donc créer un objet que nous appellerons "forme " puis nous lui affecterons deux méthodes intitulées carre et triangle .
function Forme(nom, niv) {
this.nom = nom;
this.niv = niv;
}
Pour créer une forme avec les propriétés moveTo() et lineTo, vous avez besoin de définir un nom et un niveau. Au moment de la création de l'objet, nous ajoutons donc les propriétés nom et niv.
Affectation de la méthode "carre" :
Forme.prototype.carre = function(x, y, larg, haut) {
_root.createEmpty MovieClip(this.nom, this.niv);
this.x = x;
this.y = y;
this.larg = larg;
this.haut = haut;
_root[this.nom].lineStyle(1, 0x0000FF, 100);
_root[this.nom].moveTo(this.x, this.y);
_root[this.nom].lineTo(this.x, this.y+this.haut);
_root[this.nom].lineTo(this.x+this.larg, this.y+this.haut);
_root[this.nom].lineTo(this.x+this.larg, this.y);
_root[this.nom].lineTo(this.x, this.y);
};
Analysons ce script ensemble :
Cette première ligne crée une méthode intitulée carre qui est affectée à l'objet forme. Les 4 paramètres (variables locales) x, y, larg et haut vont êtres récupérés par des propriétés dans la fonction (la méthode).
Forme.prototype .carre = function(x, y, larg, haut) {
On récupère les variables locales pour les affecter aux propriétés qui portent le même nom.
this.x = x;
this.y = y;
this.larg = larg;
this.haut = haut;
On crée la forme avec les valeurs des propriétés x, y, larg et haut.
_root[this.nom].lineStyle(1, 0x0000FF, 100);
_root[this.nom].moveTo(this.x, this.y);
_root[this.nom].lineTo(this.x, this.y+this.haut);
_root[this.nom].lineTo(this.x+this.larg, this.y+this.haut);
_root[this.nom].lineTo(this.x+this.larg, this.y);
_root[this.nom].lineTo(this.x, this.y);
Lorsque l'objet et la méthode sont crées, on peut alors créer une instance de l'objet et utiliser la méthode.
maforme = new Forme("fenetre", 1);
maforme.carre(50, 50, 100, 100);
Si vous aviez besoin de créer 3 autres formes, il serait à présent plus simple de le faire en utilisant les six lignes d'instructions ci-dessous :
fenetre1 = new Forme("fenetre01", 1);
fenetre1.carre(50, 50, 100, 100);
fenetre2 = new Forme("fenetre02", 2);
fenetre2.carre(200, 50, 100, 100);
porte1 = new Forme("porte", 3);
porte1.carre(50, 200, 250, 50);
C'est tout de même plus rapide que de copier-coller 3 fois le script que nous avons placé dans la fonction carre !
Il est très simple d'établir une relation entre un fichier XML et un SWF. Le plus difficile est surement de créer le document XML lui même. Nous vous présenterons un exemple de fichiers un peu plus loin dans ce chapitre.
Pour commencer, vous devez établir une liaison entre le swf et le fichier XML. Vous allez donc devoir créer une instance de la classe XML(). Vous indiquerez ensuite le fichier à charger et préciserez également que Flash ne doit pas tenir compte des blancs qui se trouvent dans le document XML.
Après avoir testé si les données sont intégralement chargées, vous pouvez alors demander de lire des noeuds.
Important : Il est à noter que les deux fichiers (document XML et fichier .swf) doivent se trouver sur le même serveur (appartenir au même domaine). Dans le cas contraire, des réglages supplémentaires sont plus complexes.
Exemple de document xml :
<arm>
<personne>
<nom>AGOSTINI</nom>
<prenom>Jérôme</prenom>
<societe>VoisinDuVin</societe>
<admail>jerome@agstini.fr</admail>
</personne>
<personne>
<nom>ARNAUDET</nom>
<prenom>Sarah</prenom>
<societe>JapanAirLines</societe>
<admail>sarah@arnaudet.com</admail>
</personne>
<personne>
<nom>AUFRERE</nom>
<prenom>Florent</prenom>
<societe>GrosBill</societe>
<admail>florent@aufrere.com</admail>
</personne>
<personne>
<nom>BOREUX</nom>
<prenom>Xavier</prenom>
<societe>Pixel</societe>
<admail>xavier@boreux.com</admail>
</personne>
</arm>
Il existe plusieurs techniques pour la rédaction de documents XML, nous ne nous attarderons pas dessus sur Yazo.net, cela n'est pas notre spécialité. Il s'agit là d'un exemple suffisament simple à comprendre et à adapter.
Il est très important de noter que vos documents doivent être enregistrés en UNICODE (UTF-8), dans le cas contraire vos caractères spéciaux risques de s'afficher avec des erreurs.
Exemple de fichier Flash :
Pour l'exemple qui va suivre, commencez tout d'abord par placer sur la scène, 4 textes dynamiques intitulés nom, prenom, societe et admail. Il n'est bien sûr pas obligatoire d'utiliser les mêmes noms que ceux des balises de notre document XML. Il s'agit dans ce cas de faciliter la comprehension de cette technique (Flash-XML).
Placez ensuite le script ci-dessous sur l'image clé 1 de la timeline principale.
classe = new XML();
classe.load("arm.xml");
classe.ignoreWhite = true;
classe.onLoad = function(etatCharge) {
if (etatCharge) {
nom = classe.childNodes[0].childNodes[0].childNodes[0].childNodes[0];
prenom = classe.childNodes[0].childNodes[0].childNodes[1].childNodes[0];
societe = classe.childNodes[0].childNodes[0].childNodes[2].childNodes[0];
admail = classe.childNodes[0].childNodes[0].childNodes[3].childNodes[0];
}
};
Explications :
Les 3 premières lignes de ce script ont été présentées au début de cette partie. Détaillons donc la nécessité de ce gestionnaire. Si vous tentez de lire un noeud de votre arborescence, il se peut que ce dernier ne soit pas encore chargé. C'est pourquoi, à l'instance de votre classe XML, vous devez associer le gestionnaire onLoad. Un test permet alors de vérifier le chargement du fichier XML. Dans notre exemple, nous avons choisi d'appeler notre variable locale etatCharge, libre à vous de choisir le nom qui vous convient.
Par ailleurs, nous testons (etatCharge) au lieu de (etatCharge==1) car la valeur obtenue de etatCharge (renvoyée par la fonction) vaut true ou false. Comme dans les parenthèses, un test a besoin de true ou false pour executer une instruction, (etatCharge) suffit. Il en va de même pour tous les tests que vous pourriez faire.
On attribue ensuite à chaque texte dynamique la valeur correspondante. Comme vous pouvez le constater, childNodes[] est la "propriété" à utiliser. Nous ne vous expliquerons pas ici les différentes propriétés, celle-ci nous suffit amplement pour commencer.
Gardez à l'esprit que "classe" représente l'ensemble de votre document XML. Il est donc nécessaire d'y faire référence au début de chaque phrase. Ensuite, chaque childNodes[] correspond à un noeud. Dans l'exemple ci-dessus, "arm" est le 1er noeud, "personne" est le 2e noeud, "nom" est le 3e noeud. A l'interieur de ce 3e noeud se trouve ce que vous recherchez. Nous pourrions y placer un 4e noeud.
Pour biens comprendre l'exemple ci-dessus et donc comprendre la lecture d'un document XML dans Flash, ajoutons les points suivants.
Le premier noeud porte l'index 0 comme c'est le cas dans une liste (un tableau). Ainsi, dans le cas où vous souhaiteriez lire les données de Sarah, il faudrait écrire :
nom = classe.childNodes[0].childNodes[1].childNodes[0].childNodes[0];
Pour obtenir les données de Florent, il faudrait écrire :
nom = classe.childNodes[0].childNodes[2].childNodes[0].childNodes[0];
Le troisième childeNodes[] est donc celui qui permet de naviguer au sein d'une personne. Dans l'exemple ci-dessus, nous utilisons 4 chiffres différents car il y a 4 noeuds. Si le dernier vous choque car vous ne le comprennez pas, vous pouvez le remplacer par firstChild.
nom = classe.childNodes[0].childNodes[2].childNodes[0].firstChild;
Dans l'exemple du document XML ci-dessus, si nous avions placé le nom des personnes directement dans la balise personne, nous aurions pu dans ce cas lire le nom de la balise avec nodeName.
<arm>
<AGOSTINI>
<prenom>Jérôme</prenom>
<societe>VoisinDuVin</societe>
<admail>jerome@agstini.fr</admail>
</AGOSTINI>
<ARNAUDET>
<prenom>Sarah</prenom>
<societe>JapanAirLines</societe>
<admail>sarah@arnaudet.com</admail>
</ARNAUDET>
</arm>
nom = classe.childNodes[0].childNodes[0].nodeName;
A présent, vous constaterez très rapidement au cours de vos premiers essais que la combinaisn Flash-XML est très simple et surtout très pratique.
To be continued car là, il est 0H35 et je suis crevé. Finirai la suite un de ces jours.
2004
