CS3|AS3 : Défilement d'un chargement externe : XML
Défilement d'un chargement XML depuis l'externe
C'est le deuxième tuto qui traite du chargement de données externes. Le premier charge des images et les placent dans une matrice pour fin d'utilisation. Ici, nous chargerons des données XML, de plus ces données pourront être scroller. Encore une fois le script en question est simple. Nous pourrons donc nous arrêté sur des propriétés prédéfinis qui nous soit étranger pour la plus part d'entre nous. Des propriétés comme monObjet.scrollV, retournera un nombre. Ce nombre n'a de sens qu'à partir de la valeur d'un flag, une variable de contrôle, un Boolean. Si la valeur est true le défilement des données ainsi charger est effectif, sinon le défilement n'est pas effectif. Ici j'ai voulu joindre quelques principes déjà étudier dans les différents tutoriels concernant la programmation en Flash. Vous aurez donc à télécharger la classe Design, une classe personnelle déjà mentionner dans les différents tutos. Cependant cette classe a subit quelques modifications. Les paramètres de la méthode rectangleDesign en contient un de plus. En effet puisque le premier param est le nom de la forme que vous désirez dessiner. Pour ceux et celles qui auront déjà la classe Design devront peut être le télécharger à nouveau.
>>
Ce genre est particulièrement exploiter sur le web actuel. Scroller des zones texte ou images n'est pas rare. Voire même essentielle. C'est pourquoi nous le ferons ici. Je ne prétends pas avoir apporter le maximum en programmation. Beaucoup d'autres possibilités de programmation, concernant les chargements et les défilements serons à découvrir. Cependant cette participation témoigne une base solide sur la façon de charger des données depuis l'externe et de les manipuler afin que ces données puissent être utiliser (scroller) au travers une zone restreinte. C'est là l'avantage du défilement des données.
>>
Voici le fichier zipper
Ce fichier contient >> 2 répertoires >> icom/design + xml + 2 fichiers >> .fla + .swf
Le réperoire icom/design contient la classe Design.as >> Le répertoire xml contient le fichier >> donnees.xml
Ces fichiers vous seront donc utile pour le bon fonctionnement du programme.
Pour ceux et celles qui ne désirent pas télécharger le fichier zipper pourrons quand même s'approprié les scripts. Cependant vous devrez vous faire l'arborescence des répertoires correctement afin de bénéficier du bon fonctionnement de l'application.
Débutants et débutantes en programmation Flash
C'est le deuxième tuto qui traite du chargement de données externes. Le premier charge des images et les placent dans une matrice pour fin d'utilisation. Ici, nous chargerons des données XML, de plus ces données pourront être scroller. Encore une fois le script en question est simple. Nous pourrons donc nous arrêté sur des propriétés prédéfinis qui nous soit étranger pour la plus part d'entre nous. Des propriétés comme monObjet.scrollV, retournera un nombre. Ce nombre n'a de sens qu'à partir de la valeur d'un flag, une variable de contrôle, un Boolean. Si la valeur est true le défilement des données ainsi charger est effectif, sinon le défilement n'est pas effectif. Ici j'ai voulu joindre quelques principes déjà étudier dans les différents tutoriels concernant la programmation en Flash. Vous aurez donc à télécharger la classe Design, une classe personnelle déjà mentionner dans les différents tutos. Cependant cette classe a subit quelques modifications. Les paramètres de la méthode rectangleDesign en contient un de plus. En effet puisque le premier param est le nom de la forme que vous désirez dessiner. Pour ceux et celles qui auront déjà la classe Design devront peut être le télécharger à nouveau.
>>
Ce genre est particulièrement exploiter sur le web actuel. Scroller des zones texte ou images n'est pas rare. Voire même essentielle. C'est pourquoi nous le ferons ici. Je ne prétends pas avoir apporter le maximum en programmation. Beaucoup d'autres possibilités de programmation, concernant les chargements et les défilements serons à découvrir. Cependant cette participation témoigne une base solide sur la façon de charger des données depuis l'externe et de les manipuler afin que ces données puissent être utiliser (scroller) au travers une zone restreinte. C'est là l'avantage du défilement des données.
>>
Voici le fichier zipper
Ce fichier contient >> 2 répertoires >> icom/design + xml + 2 fichiers >> .fla + .swf
Le réperoire icom/design contient la classe Design.as >> Le répertoire xml contient le fichier >> donnees.xml
Ces fichiers vous seront donc utile pour le bon fonctionnement du programme.
Pour ceux et celles qui ne désirent pas télécharger le fichier zipper pourrons quand même s'approprié les scripts. Cependant vous devrez vous faire l'arborescence des répertoires correctement afin de bénéficier du bon fonctionnement de l'application.
Voici donc le script de la classe Design
Consignes : créé un répertoire et nommé le >> icom >> à l'intérieur duquel vous créé un autre répertoire et nommé le >> design.
Placer ce script à l'intérieur du répertoire design. icom >> design >> Design.as.
Placer le : 20 Mai 2008
Dernière mise à jour le : 20 Mai 2008.
Votre fichier xml
Placer le dans le répertoire nommé >> xml. Il est au même niveau que le répertoire >> icom.
Placer le : 20 Mai 2008.
Dernière modification le : 20 Mai 2008.
Votre script à placer sur le premier keyframe du .fla
Placer le : 20 Mai 2008.
Dernière modification le : 21 Mai 2008.
Consignes : créé un répertoire et nommé le >> icom >> à l'intérieur duquel vous créé un autre répertoire et nommé le >> design.
Placer ce script à l'intérieur du répertoire design. icom >> design >> Design.as.
- Code: Tout sélectionner
package icom.design
{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.filters.BlurFilter;
public class Design extends Sprite
{
// -- Objets Visuelles --
private var nom:String;
private var posx:Number;
private var posy:Number;
private var radius:Number;
private var largeur:Number;
private var hauteur:Number;
private var couleur:uint;
private var ligneGrosseur:Number;
private var ligneCouleur:uint;
private var trans:Number;
private var filtre:Boolean;
private var flou:BlurFilter;
private var matrice:Array;
// --
public function Design ()
{
}
public function rectangleDesign($nom:String, $posx:Number, $posy:Number, $largeur:Number, $hauteur:Number, $couleur:uint, $ligneGrosseur:Number,$ligneCouleur:uint, $trans:Number , $filtre:Boolean):void
{
this.name = $nom;
posx = $posx;
posy = $posy;
largeur = $largeur;
hauteur = $hauteur;
couleur = $couleur;
ligneGrosseur = $ligneGrosseur;
ligneCouleur = $ligneCouleur;
trans = $trans;
filtre = $filtre;
// --
this.graphics.lineStyle (ligneGrosseur, ligneCouleur, trans);
this.graphics.beginFill (couleur, trans);
this.graphics.drawRect (posx, posy, largeur, hauteur);
this.graphics.endFill ();
// --
if (filtre == true)
{
flou = new BlurFilter();
flou.blurX = 12;
flou.blurY = 0;
matrice = [flou];
this.filters = matrice;
}
else if (filtre == false)
{
matrice = [];
}
}
// -->
public function cercleDesign($nom:String, $posx:Number, $posy:Number, $radius:Number, $couleur:uint, $ligneGrosseur:Number, $ligneCouleur:uint, $trans:Number, $filtre:Boolean):void
{
nom = $nom;
posx = $posx;
posy = $posy;
radius = $radius;
couleur = $couleur;
ligneGrosseur = $ligneGrosseur;
ligneCouleur = $ligneCouleur;
trans = $trans;
filtre = $filtre;
// -->
this.graphics.lineStyle(ligneGrosseur, couleur, trans);
this.graphics.beginFill(couleur, trans);
this.graphics.drawCircle(posx, posy, radius);
this.graphics.endFill();
// --
if (filtre == true)
{
flou = new BlurFilter();
flou.blurX = 12;
flou.blurY = 0;
matrice = [flou];
this.filters = matrice;
}
else if (filtre == false)
{
matrice = [];
}
}
}
}
Placer le : 20 Mai 2008
Dernière mise à jour le : 20 Mai 2008.
Votre fichier xml
Placer le dans le répertoire nommé >> xml. Il est au même niveau que le répertoire >> icom.
- Code: Tout sélectionner
<?xml version="1.0" encoding="utf-8"?>
<AutoSport>
<Auto>
<Constructeur id="Bugatti-1">Bugatti Veyron [Partie 1]</Constructeur>
<Duree>Durée : 00:4:34</Duree>
<Navigation type1="Navigation" type2="Event">Type: Essais routier</Navigation>
<Diffusion url="http://www.tuninglinx.com/">Sport Linx Videos</Diffusion>
<espace></espace>
</Auto>
<Auto>
<Constructeur id="Bugatti-2">Lamborghini [Partie 1]</Constructeur>
<Duree>Durée : 00:10:53</Duree>
<Navigation type1="Navigation" type2="Event">Type: Évènement</Navigation>
<Diffusion url="http://www.tuninglinx.com/">Sport Linx Videos</Diffusion>
<espace></espace>
</Auto>
<Auto>
<Constructeur id="Bugatti-3">Apollo Gumpert [Intégrale]</Constructeur>
<Duree>Durée : 00:8:12</Duree>
<Navigation type1="Navigation" type2="Event">Type: Documentaire</Navigation>
<Diffusion url="http://www.tuninglinx.com/">Sport Linx Videos</Diffusion>
<espace></espace>
</Auto>
<Auto>
<Constructeur id="Bugatti-4">Ferrari [Partie 4]</Constructeur>
<Duree>Durée : 00:18:23</Duree>
<Navigation type1="Navigation" type2="Event">Type: Publicité</Navigation>
<Diffusion url="http://www.tuninglinx.com/">Sport Linx Videos</Diffusion>
<espace></espace>
</Auto>
<Auto>
<Constructeur id="Bugatti-5">McLarens [Intégrale]</Constructeur>
<Duree>Durée : 00:10:09</Duree>
<Navigation type1="Navigation" type2="Event">Type: Documentaire</Navigation>
<Diffusion url="http://www.tuninglinx.com/">Sport Linx Videos</Diffusion>
</Auto>
</AutoSport>
Placer le : 20 Mai 2008.
Dernière modification le : 20 Mai 2008.
Votre script à placer sur le premier keyframe du .fla
- Code: Tout sélectionner
// -- Importation de la classe Design
import icom.design.Design;
// -- Importation des classes prédéfinis
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.text.TextFormat;
import flash.text.TextField;
import flash.geom.Rectangle;
// --
// --> Les éléments visuels
// --> de la classe Design
// --
var barreHaut:Design = new Design();
addChild(barreHaut);
barreHaut.rectangleDesign('barreHaut', 0, 0, 580, 12, 0x666666, 2, 0xD4D0C8, 1, true);
var barreBas:Design = new Design();
addChild(barreBas);
barreBas.rectangleDesign('barreBas', 0, 205, 580, 12, 0x666666, 2, 0xD4D0C8, 1, true);
// -->
var gauche:Design = new Design();
gauche.rectangleDesign('gauche', 0, 16, 105, 185, 0x333333, 2, 0xD4D0C8, 1, true);
var droite:Design = new Design();
droite.rectangleDesign('droite', 475, 16, 105, 185, 0x333333, 2, 0xD4D0C8, 1, true);
// -->
var base:Design = new Design();
base.rectangleDesign('base', 115, 16, 350, 185, 0x333333, 2, 0xD4D0C8, 1, true);
// --
// -->
// --
var conteneur:Sprite = new Sprite();
addChild(conteneur);
addChild(gauche);
addChild(droite);
conteneur.addChild(barreHaut)
conteneur.addChild(gauche);
conteneur.addChild(base);
conteneur.addChild(droite);
conteneur.addChild(barreBas);
conteneur.x = 10;
conteneur.y = 105;
// --
// --> Variables du chargement XML
// --
var chargeurXML:URLLoader;
var donnees:XML;
var liste:XMLList;
var url:String = "xml/donnees.xml";
// --
// --> Variable de limitation
// --> du déplacement du curseur (scrollBar)
// --
var limites:Rectangle;
// --
// --> Variable de contrôle
var defilement:Boolean = false;
// --
// -->
// --
var tf:TextFormat;
var tx:TextField;
var curseur:Sprite;
// --
// -->
// --
curseur = new Sprite();
curseur.graphics.beginFill (0xFFFFFF);
curseur.graphics.drawRect (465, 21, 10, 10);
conteneur.addChild (curseur);
curseur.buttonMode = true;
curseur.addEventListener (MouseEvent.MOUSE_DOWN, depart);
/*stage.addEventListener(MouseEvent.MOUSE_OUT, horsClip);*/
stage.addEventListener (MouseEvent.MOUSE_UP, arret);
addEventListener (Event.ENTER_FRAME, animation);
// --
// --> Chargé en mémoire
// --
chargeurXML = new URLLoader();
donnees = new XML();
chargeurXML.addEventListener (Event.COMPLETE, chargeXML);
chargeurXML.load (new URLRequest(url));
// --
// --> Formatage du texte
// --
tf = new TextFormat();
tf.bold = true;
tf.font = "sans-serif";
tf.leftMargin = 12;
tf.color = 0xD4D0C8;
tf.size = 16;
// -->
tx = new TextField();
tx.selectable = false;
tx.multiline = true;
tx.wordWrap = true;
tx.type = "dynamic";
tx.width = 320;
tx.height = 175;
tx.x = 125;
tx.y = 20;
conteneur.addChild (tx);
// --
// --> Fonctions de chargement XML
// --
function chargeXML (e:Event):void
{
donnees = new XML(e.target.data);
analyseDonnees (donnees);
}
// -->
function analyseDonnees (sortie:XML):void
{
liste = sortie.Auto.children();
for each (var donneesElements:XML in liste)
{
/*trace (donneesElements);*/
tx.appendText (donneesElements + "\n");
tx.setTextFormat (tf);
}
}
// --
// -- Défilement --
// --
function haut ():void
{
tx.scrollV -= 1;
}
function bas ():void
{
tx.scrollV += 1;
}
// --
limites = new Rectangle(curseur.x, curseur.y, 0, 165);
// --
function depart (event:MouseEvent):void
{
defilement = true;
curseur.startDrag (false,limites);
}
function arret (event:MouseEvent):void
{
defilement = false;
curseur.stopDrag ();
}
/*function horsClip (event:MouseEvent):void
{
defilement = false;
curseur.stopDrag ();
curseur.buttonMode = false;
}*/
function animation (event:Event):void
{
curseur.buttonMode = true;
if (defilement == true)
{
tx.scrollV = Math.round(((curseur.y - limites.y)/166) * tx.maxScrollV);
}
}
Placer le : 20 Mai 2008.
Dernière modification le : 21 Mai 2008.
Quelques propos concernant ce genre d'application
Ne croyez surtout pas ce script comme étant poussé à fond. Je lui ai conserver un aspect basique. Ce genre de code demande beaucoup d'expérience en matière de script. Vous savez comme moi l'exigence que ce genre peut demander. Plusieurs façons pourrons être programmer pour atteindre la totalité de ce qu'un internaute attend d'une zone de chargement avec défilement. L'important, à la base sera ici de savoir charger des documents de type XML. Je n'ai donc pas toutes les qualités et l'expérience en programmation pour vous offrir la totalité de ce que l'on attend d'une zone de texte scrollable. Vous ne trouverez ici que la base. Cependant cette base est entièrement fonctionnelle. Dû moins en ce qui concerne le fichier chargeurXML.zip.
>>
Tous les éléments visuelles sont placer dans un seul conteneur. C'est ce conteneur que vous devrez manipuler par programme pour un éventuel déplacement en x comme en y, de l'application. Ainsi tout le contenu suivra. À ce niveau, je n'ai pas imbriqué plusieurs conteneurs. Pour ceux et celles qui désirent des informations plus complètent sur les conteneurs devront se référer au secteur : Apprentis webmaster >> programmation >> Flash.
>>
La raison de la classe Design me permettais d'apporter un genre plus esthétique, mettant en valeur le chargement des données XML. Ce genre me parraissait ' monotone ' sans une mise en page axé sur la classe Design, afin de lui rendre l'aspect d'un genre qui mérite le nom d'application. Au minimum dans le sens visuel du terme. Mais beaucoup moins performant en ce qui concerne les nombreuses fonctionnalités que l'on rencontre dans ce genre d'application.
>>
Toutefois, le programme alimente un intérêt qui saura nous poussés davantage au développement éventuel d'un projet beaucoup mieux structurer et organisé. Ce genre simple nous inspirera l'idée d'allez un peu plus loin chaque fois que nous voudrons aborder le sujet des zones de défilement des données. Je ne saurais ici vous en dire davantage puisque mon expérience, pour ce genre de script, est tout à nouveau pour moi. Je n'en suis qu'à ma deuxième expérience personnelle pour ce genre de script. Je n'ai donc utiliser que les propriétés prédéfinis de Flash, en ce qui concerne le défilement des textes issus du fichier XML. Par contre, mon expérience me permet de comprendre la complexité que peut représenter certain scripts que j'ai à étudier et provenant de milieux professionnelles. Leurs façons d'aborder le sujet des zones scrollable est parfois très complexe. Voir un scrollBar s'ajuster en hauteur, en fonction de la quantité de chargement des données, demande quand même une très bonne expérience en développement de script.
>>
Pour ceux et celles qui voudront faire des applications de ce genre sans attendre un développement progressif basé sur l'expérience de scripts, pourront tout de même utilisé les composants prédéfinis de Flash. C'est composants vous apporteront des résultats immédiats. Par contre pour ceux et celles qui désirent vraiment progresser en matière de scripts, devront bûcher davantage pour accéder à des développements digne de ce nom.
>>
Retenez ces deux éléments essentielles pour ce genre de développement : Le chargement des données externes >> et la manipulation de ces données. Deux aspects qui sauront stimuler les plus courageux d'entres vous. Car ces deux aspects ouvrent à une large possibilité de nouveauté créative. Puissiez vous en faire partie. Par contre attendez vous à plusieurs essais avant de prétendre pouvoir contrôler tous les aspects qu'exigent les chargements et leurs manipulations.
>>
Croyez moi lorsque je vous dit que le script fournit ici est encore très loin du titre d'application. Mais il vaut la peine de s'y arrêter quelque peu.
Le téléchargement du fichier >> chargeurXML.zip >> Recommander.
Ne croyez surtout pas ce script comme étant poussé à fond. Je lui ai conserver un aspect basique. Ce genre de code demande beaucoup d'expérience en matière de script. Vous savez comme moi l'exigence que ce genre peut demander. Plusieurs façons pourrons être programmer pour atteindre la totalité de ce qu'un internaute attend d'une zone de chargement avec défilement. L'important, à la base sera ici de savoir charger des documents de type XML. Je n'ai donc pas toutes les qualités et l'expérience en programmation pour vous offrir la totalité de ce que l'on attend d'une zone de texte scrollable. Vous ne trouverez ici que la base. Cependant cette base est entièrement fonctionnelle. Dû moins en ce qui concerne le fichier chargeurXML.zip.
>>
Tous les éléments visuelles sont placer dans un seul conteneur. C'est ce conteneur que vous devrez manipuler par programme pour un éventuel déplacement en x comme en y, de l'application. Ainsi tout le contenu suivra. À ce niveau, je n'ai pas imbriqué plusieurs conteneurs. Pour ceux et celles qui désirent des informations plus complètent sur les conteneurs devront se référer au secteur : Apprentis webmaster >> programmation >> Flash.
>>
La raison de la classe Design me permettais d'apporter un genre plus esthétique, mettant en valeur le chargement des données XML. Ce genre me parraissait ' monotone ' sans une mise en page axé sur la classe Design, afin de lui rendre l'aspect d'un genre qui mérite le nom d'application. Au minimum dans le sens visuel du terme. Mais beaucoup moins performant en ce qui concerne les nombreuses fonctionnalités que l'on rencontre dans ce genre d'application.
>>
Toutefois, le programme alimente un intérêt qui saura nous poussés davantage au développement éventuel d'un projet beaucoup mieux structurer et organisé. Ce genre simple nous inspirera l'idée d'allez un peu plus loin chaque fois que nous voudrons aborder le sujet des zones de défilement des données. Je ne saurais ici vous en dire davantage puisque mon expérience, pour ce genre de script, est tout à nouveau pour moi. Je n'en suis qu'à ma deuxième expérience personnelle pour ce genre de script. Je n'ai donc utiliser que les propriétés prédéfinis de Flash, en ce qui concerne le défilement des textes issus du fichier XML. Par contre, mon expérience me permet de comprendre la complexité que peut représenter certain scripts que j'ai à étudier et provenant de milieux professionnelles. Leurs façons d'aborder le sujet des zones scrollable est parfois très complexe. Voir un scrollBar s'ajuster en hauteur, en fonction de la quantité de chargement des données, demande quand même une très bonne expérience en développement de script.
>>
Pour ceux et celles qui voudront faire des applications de ce genre sans attendre un développement progressif basé sur l'expérience de scripts, pourront tout de même utilisé les composants prédéfinis de Flash. C'est composants vous apporteront des résultats immédiats. Par contre pour ceux et celles qui désirent vraiment progresser en matière de scripts, devront bûcher davantage pour accéder à des développements digne de ce nom.
>>
Retenez ces deux éléments essentielles pour ce genre de développement : Le chargement des données externes >> et la manipulation de ces données. Deux aspects qui sauront stimuler les plus courageux d'entres vous. Car ces deux aspects ouvrent à une large possibilité de nouveauté créative. Puissiez vous en faire partie. Par contre attendez vous à plusieurs essais avant de prétendre pouvoir contrôler tous les aspects qu'exigent les chargements et leurs manipulations.
>>
Croyez moi lorsque je vous dit que le script fournit ici est encore très loin du titre d'application. Mais il vaut la peine de s'y arrêter quelque peu.
