M40-Flash et XML

M40 - David Tardiveau - Lundi 9 mars 2009
Flash et XML

Quelques adresses Flash :
http://www.templatemonster.com/flash-templates/23895.html
http://www.2advanced.com/
ultrashock http://www.ultrashock.com/
mediabox http://www.mediabox.fr/ flash express http://www.flashxpress.net/
the fwa http://www.thefwa.com/flash10/
red interactive http://www.2advanced.com/
fantasy interactive http://www.fantasy-interactive.com/bye/starbreeze/
group94.com
soleil noir http://www.soleilnoir.net/
laforme
publicis net http://www.publicisnet.fr/
bbdo
leschinois http://www.leschinois.com/
http://www.marajade.fr/

------------------------------------------------

éditeurs de texte UTF8 : Gedit sur mac Smultron

http://mac-gratuit.fr/telecharger/Smultron.html

Description de Smultron:

Editeur texte avec coloration syntaxique pour différents langages. Il permet de travailler plusieurs fichiers dans la même page ou dans différentes pages ou encore en mode plein écran.
Il propose aussi un aperçu du rendu de pages WEB qui va télécharger les fichiers associés quand vous travaillez par FTP.

http://silverlight.net/

Silverlight concurrent Microsoft de Flash Adobe

Les sprites sont à Flash ce que les css sont à une page html

le zoning passe par la gestion des sprites sur Flash pour une construction dynamique

XML : l'organistion des données.

Essayer de modéliser la structure

étapes de la construction dynamique avec Flash :

création du document
chargement du XML par Flash
lecture des données du fichier XML

Créer le fichier XML, il doit être impérativement à la norme d'encodage UTF8

Ouvrir WordPad sur pc et enregistrer le document texte unicode en mettent comme extension.xml

Sur mac utiliser "Jedit" "Simultron "

Pour info : C'est dans les préférences de Dreamweaver que l'on on gére les paramètres d'encodage

Le fichier à créer : donnees.xml

<donnees>

   <poissons>
        <cartilagineux monimage="requin.jpg">Le requin est le posson le plus dangereux</cartilagineux>

        <cartilagineux>
                <monimage>"requin.jpg"</monimage>"
                <pitch>Le requin est le posson le plus dangereux</pitch>

        </cartilagineux>

           <osseux>Mérou</osseux>

    </poissons>

            <gasteropodes>

            <limaces></limaces>

            <mudibranches></mudibranches>
        </gasteropodes>

</donnees>

Placer dans un dossier images/requin.jpg au même niveau que le fichier donnees.xml

A retenir Absolument :

Pas d'espaces, pas de caractères spéciaux dans les balises XML

Les commentaires en XML <!-

Le terme de "Noeud désigne dans le fichier XML " le noeud <osseux> </osseux> c'est "l'enfant" de poisson <poissons></poissons>

Dans les Attributs : on peut l'utiliser pour une info courte

Un attribut = 1 valeur

Syntaxe du code XML 3 possibilités :

1) écrire le code avec ou sans attributs

<cartilagineux monimage="requin.jpg">Le requin est le posson le plus dangereux</cartilagineux>

2) ou écrire le code avec des noeuds enfants

<cartilagineux>
<monimage>"requin.jpg"</monimage>"
<pitch>Le requin est le posson le plus dangereux</pitch>

</cartilagineux>

3) ou écrire le code avec une balise auto fermante ici dans cette exemple 2 attributs

Exercice :

code du fichier XML : donnees.xml

<cartilagineux monimage="requin.jpg">Le requin est le posson le plus dangereux</cartilagineux>

<osseux monimage="merou.jpg">Le Mérou est un poisson charmant</osseux>

</poissons>

<limaces monimage="doris.jpg"> Il était une fois ...</limaces>

<mudibranches monimage="flabelline.jpg"> La belle.....</mudibranches>

</gasteropodes>

<mammifères>

<dauphins monimage="dauphin.jpg"> Il était une fois ...</dauphins>

<Baleines monimage="baleineabosse.jpg"> La grosse baleine.....</Baleines>

</mammifères>

</donnees>

A- Charger un document XML dans Flash

Code dans la fenêtre Actions de Flash :

var arbo:XML;
var boite:URLLoader = new URLLoader();
var adresse:URLRequest = new URLRequest("plongee_attribut.xml");
boite.load(adresse);
boite.addEventListener(Event.COMPLETE,donneesChargees)
function donneesChargees(evt:Event){

arbo = new XML(boite.data);
trace(arbo.poissons.osseux)
}

Erreur : (Si ce message d'erreur ci-dessous s'affiche cela indique une erreur de nom ou de chemin du fichier XML :

Error #2044: ioError non pris en charge : text=Error #2032: Erreur de flux)

----------------------------------------------------------------

Transformer un calque en guide si l'on ne veut pas que ce calque apparaissent dans la scène de Flash

Code Flash :

-------------------------------------------------

Nouvel exercice : créer les fichiers => donnees.XML et mediatheque.fla
Ouvrir Flash/actions

créer 2 zones de texte dynamique

une zone pour le titre et une zone pour le contenu du texte

Code flash :

var arbo:XML;
var conteneur:URLLoader = new URLLoader();
var chemin:URLRequest = new URLRequest("donnees.xml");
conteneur.load(chemin);

conteneur.addEventListener(Event.COMPLETE,donneesChargees);

function donneesChargees(evt:Event){
arbo = new XML(conteneur.data);
/*
affichage.text=arbo.animaux.animal[0];*/
/* affichage.text=arbo.animaux.animal[0].@nom;*/
affichage.text=arbo.animaux.animal[0].@fichier;

affichage.text=arbo.animaux.animal[0].@nom+" : "+arbo.animaux.animal[0];

}
--------------------------------------------

Nouvel exemple : créer les fichiers => donnees.XML mediateque2.fla

Code Flash :

var arbo:XML;
var i:int=0;
var conteneur:URLLoader = new URLLoader();
var chemin:URLRequest = new URLRequest("donnees.xml");
conteneur.load(chemin);

conteneur.addEventListener(Event.COMPLETE,donneesChargees);

--------------------------------------------------

Code Flash :

var arbo:XML;
var i:int=0;
var conteneur:URLLoader = new URLLoader();
var chemin:URLRequest = new URLRequest("donnees.xml");
conteneur.load(chemin);

conteneur.addEventListener(Event.COMPLETE,donneesChargees);

-----------------------------------

A retenir absolument très utile :

raccouci clavier écahp + F+N pour function

raccouci clavier écahp + I+F pour if

raccouci clavier écahp + S+W pour switch

CTRL SHIFT F pour reformater le code dans la fenêtre action de Flash

--------------------------------------

Code Flash

var arbo:XML;
var i:int=0;
var conteneur:URLLoader = new URLLoader();
var chemin:URLRequest = new URLRequest("donnees.xml");
conteneur.load(chemin);

conteneur.addEventListener(Event.COMPLETE,donneesChargees);

-----------------------------------------------------

Code Flash

var arbo:XML;
var i:int=0;
var conteneur:URLLoader = new URLLoader();
var chemin:URLRequest=new URLRequest("donnees.xml");
conteneur.load(chemin);

conteneur.addEventListener(Event.COMPLETE,donneesChargees);

function donneesChargees(evt:Event) {
arbo=new XML(conteneur.data);
affichage.text="Visuel"+i;

}
stage.addEventListener(KeyboardEvent.KEY_DOWN,gestionClavier);

function gestionClavier(evt:KeyboardEvent) {
switch (evt.keyCode) {
  case 37 :
   i--;
   affichage.text=affichage.text=arbo.animaux.animal[i].@nom;
   break;

  case 39 :
   i++;
   if (i>=arbo.aninaux.animal.lenght()) {
    i=arbo.aninaux.animal.lenght()-1;
   }
   affichage.text=affichage.text=arbo.animaux.animal[i].@nom;
   break;
}
}

---------------------------------------------------

Comment faire des recherches :

Nouvel exemple : créer les fichiers => donnees.XML mediateque3.fla
Code Flash

var arbo:XML;
var i:int=0;
var conteneur:URLLoader = new URLLoader();
var chemin:URLRequest=new URLRequest("donnees.xml");
conteneur.load(chemin);

conteneur.addEventListener(Event.COMPLETE,donneesChargees);

function donneesChargees(evt:Event)
{
arbo=new XML(conteneur.data);
listeElements.text=""

for each(var nom:String in arbo.animaux.animal.@nom){

listeElements.appendText(nom+"\n");
}
}

---------------------------------------------------

Code Flash

var arbo:XML;
var i:int=0;
var conteneur:URLLoader = new URLLoader();
var chemin:URLRequest=new URLRequest("donnees.xml");
conteneur.load(chemin);

conteneur.addEventListener(Event.COMPLETE,donneesChargees);

function donneesChargees(evt:Event)
{
arbo=new XML(conteneur.data);
listeElements.text="";
listeElements.selectable=false;
for each(var nom:String in arbo.animaux.animal.@nom)
{
listeElements.appendText(nom+"\n");
}
}

listeElements.addEventListener(MouseEvent.MOUSE_DOWN,clic)
function clic(evt:MouseEvent) {
affichage.text=listeElements.getLineIndexAtPoint(listeElements.mouseX,listeElements.mouseY).toString()
}

-------------------------------------------

Nouvel exercice : htmlTest.fla

pour mettre du html dans le code Flash

creer une zone de texte dynamique appelée"zonetexte"

code action

zoneTexte.htmlText="bonjour <font color='#FF0000'>TOUT </font>";

--------------------------------------------

Pour afficher le "doigt de sélection traditionnel à la place de la flèche" sur un texte dans Flash

Code Flash :

carre.addEventListener(MouseEvent.MOUSE_DOWN,clic);
function clic(evt:MouseEvent) {
trace("ok");
}

zoneTexte.addEventListener(MouseEvent.MOUSE_OVER,survol);
zoneTexte.addEventListener(MouseEvent.MOUSE_OUT,sortie);

function survol(evt:MouseEvent) {
Mouse.cursor = MouseCursor.BUTTON;
}

function sortie(evt:MouseEvent) {
Mouse.cursor = MouseCursor.BUTTON;
}

-------------------------------------------------

créer le fichier => chargerImage.fla
Code Flash :
var conteneur:Loader = new Loader();
var adresse:URLRequest = new URLRequest("images/dauphin.jpg");
conteneur.load(adresse)
addChild(conteneur)

-------------------------------------------------

créer le fichier => chargerImage2.fla
Code Flash :

var cadre:Loader;
var adresse:URLRequest = new URLRequest()

adresse.url="images/dauphin.jpg"
cadre= new Loader();
cadre.load(adresse)
addChild(cadre)
cadre.x=10
cadre.y=10

adresse.url="images/merou.jpg"
cadre= new Loader();
cadre.load(adresse)
addChild(cadre)
cadre.x=210
cadre.y=10

--------------------------------------------

créer le fichier => chargerImageXML.fla

Code Flash :

var adresse:URLRequest = new URLRequest();
var cadre:Loader;
var conteneurDonnees:URLLoader = new URLLoader();
var adresseFichierXml:URLRequest = new URLRequest("donnees.xml");
var arbo:XML;
var positionX:int=20;

//------------------------

conteneurDonnees.load(adresseFichierXml);
conteneurDonnees.addEventListener(Event.COMPLETE,donneesChargees);

function donneesChargees (evt:Event) {

arbo= new XML(conteneurDonnees.data)

for each(var nomFichier:String in arbo.animaux.animal.@fichier) {
  cadre= new Loader();
  adresse.url= "images/"+nomFichier
  cadre.load(adresse)
addChild(cadre)
  cadre.x=positionX
  positionX+=150
  cadre.y=20
}

}

----------------------------------------------

Les sprites

Code Flash : chargerImageXML.fla

var zonePhoto:Sprite= new Sprite();
addChild(zonePhoto);
zonePhoto.x=25
zonePhoto.y=50

conteneurDonnees.load(adresseFichierXml);
conteneurDonnees.addEventListener(Event.COMPLETE,donneesChargees);

function donneesChargees (evt:Event) {

arbo= new XML(conteneurDonnees.data)

for each(var nomFichier:String in arbo.animaux.animal.@fichier) {
  cadre= new Loader();
  adresse.url= "images/"+nomFichier
  cadre.load(adresse)
  zonePhoto.addChild(cadre)
  cadre.x=positionX
  positionX+=150
  cadre.y=20
}

}

Ateliers vidéo d'Adobe :

http://www.adobe.com/fr/designcenter/video_workshop/about.html

------------------------------------

les requêtes également des filtres ou recherches
fichier à créer :

Fichier personnel.xml

</donnees>

rechercheXml.fla
Code Flash :

var adresse:URLRequest = new URLRequest("personnel.xml");
var donnees:URLLoader = new URLLoader();
var arbo:XML;

donnees.load(adresse);
donnees.addEventListener(Event.COMPLETE,chargees);
function chargees(evt:Event)
{
arbo=new XML(donnees.data);
trace(arbo);
trace(arbo.personne.(@nom=="Durand").@prenom);
}

=> ce code signifie : recherche dans personne la valeur de l'attribut nom et affiche le prénom

Mastere - IMN - Ingénerie des Médias Numériques - Esiee Gobelins

9.3.09

M40-Flash et XML