CS3|AS3 : Placer dans une matrice un chargement externe

[zardoz]

Cibler un chargement externe d'images et les placer dans une matrice.

Débutants et débutantes en programmation Flash

Le but ici est de charger des données externes. Les données choisis pour cet exemple sont des images, deux en tout, dont le but évidemment sera d'utilser la matrice pour stocker le chargement des données et de cibler par programme cette matrice par une action utilisateur afin de changer d'image au pointeur de la souris par simple rollOver. Ce script est simple, étant conçu pour le niveau débutant en programmation. Le script lui même contient des lignes de commentaires assez complet, permettant une meilleur lisibilité, une bonne compréhension du code. Par le fait même vous avez des infos ici sur ce post, afin de completer l'enseignement.

Voici le script zipper.

chargementExterne.zip

Conteneu >> Un fichier .fla >> un fichier .swf >> un répertoire images.
Le répertoire images contiens deux images de même format.

Consigne d'utilisation :

Placer ce script sur le premier keyframe du root.
Au minimum, faites vous un champ de texte dynamique
et placer le sur un calque >> nommé le >> image.
Celui-ci servira à marquer l'url du chargement des images
et changera en fonction du pointeur qui provoque le changement d'image.
Faites vous un répertoire >> images >> avec deux images dans ce répertoire.
Nommé les images >> v12.jpg et v12a.jpg comme exemple.

Code: Tout sélectionner

// -- Nos importations de classes
// -- En zone .fla les imports sont facultatif
// --
import flash.display.Sprite;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.MouseEvent;
import flash.filters.DropShadowFilter;
// --
// -- Création d'une matrice vide
// --
var images:Array = [];
// --
// -- Se préparer un container
// --
var conteneur:Sprite = new Sprite();
addChild(conteneur);
// --
// -- Charger l'image 1
// -- Cibler depuis l'externe
// --
var cible1:Loader = new Loader();
var url1:String = "images/v12.jpg";
// --
// -- Placer la cible dans la matrice 'images'.
// -- Vous pouvez dès lors tracer >> ligne 27.
// --
images.push(url1);
/*trace(images[0]);*/
cible1.load(new URLRequest(images[0]));
image.text = images[0];
// --
// -- Ajout de l'image 1 au container.
// --
conteneur.addChild(cible1);
// --
// -- Charger l'image 2
// -- Cibler depuis l'externe
// --
var cible2:Loader = new Loader();
var url2:String = "images/v12a.jpg";
// --
// -- Placer la cible dans la matrice 'images'.
// -- Vous pouvez dès lors tracer >> ligne 45.
// --
images.push(url2);
/*trace(images[1]);*/
cible2.load(new URLRequest(images[1]));
// --
// -- Contrairement à l'image 1
// -- l'image 2 est à 'visible = true;'au départ.
// --
cible2.visible = false;
// --
// -- Ajout de l'image 2 au container.
// --
conteneur.addChild(cible2);
// --
// -- Ne manipuler que le container
// -- en 'x' comme en 'y'.
// --
conteneur.x = 10;
conteneur.y = 10;
// --
// -- Évènement souris MOUSE_OVER + MOUSE_OUT
// -- et leur fonction : actionOver + actionOut
// --
conteneur.addEventListener(MouseEvent.MOUSE_OVER, actionOver);
conteneur.addEventListener(MouseEvent.MOUSE_OUT, actionOut);
// --
// -- Écrire les fonctions d'actions utilisateurs.
// --
function actionOver(e:MouseEvent):void
{
   cible1.visible = false;
   cible2.visible = true;
    // --
   var flou:DropShadowFilter = new DropShadowFilter();
   flou.alpha = 0.5;
   var effet:Array = [flou];
   cible2.filters = effet;
   // --
   image.text = images[1];
}

function actionOut(e:MouseEvent):void
{
   cible2.visible = false;
   cible1.visible = true;
   // --
   image.text = images[0];
}
// --
// -- Informations champs de texte
// --
auteur.text = "improve-communication";
infos.text = "www.monsitegratuit.com";
addChild(auteur);
addChild(infos);
// --


Placer sur le site le : 17 Mai 2008.
Dernière modification le : 17 Mai 2008.

Pour une compréhension du script >> Quelques informations.


Le fait d'importer les classes essentielles au début du script, restera, en zone .fla, une question de choix personnelle. En effet puisqu'il n'est pas obligatoire en zone .fla d'importer les classes prédéfinis de Flash. Sauf bien entendu si vous aviez besoin de vos classes personnelles, vous devriez les cibler. Exemple : import icom.design.Design; >> import icom.design.Chargement;. Ceux-ci serviront à instancier l'objet à partir de vos classes personnelles. Vos classes perso seront toujours des fichiers .as.
>>
Suite aux importations des classes prédéfinis, nous instancions une matrice vide de tout objet. Exemple : var images:Array = [ ];. Cette matrice servira à stocker les 2 images cibler et présent dans le répertoire images. Pour une question de lisibilité, vous remarquerez que la matrice images est au pluriel. Ceci n'est certe pas obligatoire, mais restera toujours bonne suggestion.
>>
Par la suite déclarez un container. Ce container nommé ici conteneur, servira aux deux images. Ceci est important dû au fait que vous positionner le conteneur en x comme en y, plutôt que le chargeur d'image. Lorsque vous ajouter le conteneur : Exemple >> addChild(conteneur);, vous pourrez aussi y placer, dans ce conteneur les images charger et placer dans la matrice. En fait c'est la matrice que vous allez cibler.
>>
Ceci fait nous procédons au chargement des deux images en utilisant la classe prédéfini : Loader. Exemple : var cible1:Loader = new Loader();. Prenez conscience ici que nous aurons deux objets cible, cible1 et cible2, chacun étant un objet de chargement autonome.
>>
Chacun des objets de chargement placera l'image cibler en externe dans la matrice déjà préparer à cette fin. Exemple : images.push(url1);. à ce stade du développement vous pouvez déjà interroger votre programme. Exemple : trace(images[0]);, trace(images[1]);. Évidemment vous constatez qu'une variable, par objet de chargement >> url1 et url2 >> servira de paramètre à la méthode push( ) de la classe Array. Ex : images.push(url1);. Si donc vous cibler une image quelquonque, c'est la matrice que vous cibler. Nous ne manipulerons que la matrice car c'est elle qui contiens les données images cibler en externe. La matrice est nécessaire en programmation. Elle permet une manipulation aisée d'une quantité très large, stocker dans une seule variable.
>>
Seule la deuxième image charger et stocker dans la matrice aura une proprité, caractéristique d'invisibilité au départ. En un mot la deuxième image, nommé ici >> cible2 sera invisible. Exemple : cible2.visible = false; C'est dans les fonctions d'évènements souris que les caractéristiques de visibilté ou d'invisibilité seront les plus utilisés.
>>
Chacune des images ainsi charger et placer dans la matrice sera ajouter au conteneur. Exemple : conteneur.addChild(cible1); ou encore au deuxième objet de chargement conteneur.addChild(cible2);. Cette manipulation d'écriture vous rendra la tâche facile lors du positionnement en x et en y de vos images car celles-ci sont placer à l'intérieur du container. C'est donc le container que vous positionner. Exemple : conteneur.x = 10; celui-ci se placera ainsi que son contenu >> les deux images >> conteneur.y = 10;. En positionnant un seul objet de la classe Sprite, vous positionner en même temps les deux objets images charger dans la matrice.
>>
En ce qui concerne les évènements souris, c'est encore une fois l'objet conteneur que vous manipuler. Exemple, voyez : conteneur.addEventListener(MouseEvent.MOUSE_OVER, actionOver);. Il en est ainsi de la sortie de la souris en dehors de l'image. Conteneur.addEventListener(MouseEvent. MOUSE_OUT, actionOut). Le premier paramètre est l'action souris, l'action utilisateur. Tandis que le deuxième paramètre nommera la fonction à écrire, à développer. C'est à l'intérieur de ces fonctions que nous déterminons les instructions à exécuter. C'est ici que nous manipulons la visibilité ou l'invisibilité des images charger dans la matrice. C'est donc l'objet de chargement que nous utilisons à cette fin. cible1 et cible2.
>>
C'est à la première fonction que nous déterminons aussi l'objet filter. Exemple : var flou:DropShadowFilter = new DropShadowFilter();. Nous écrivons une autre matrice afin de stocker l'objet de filtre. var effet:Array = [flou];. La deuxième image, cible2 s'accapare l'objet filtre. Afin de créé un dropShadow. Exemple : cible2.filters = effet;
>>
Le champs de texte est de type dynamique. Il est utilisé dans les deux fonctions afin de transmettre l'url des images. Je vous suggère fortement, si vous le désirer, de télécharger le fichier .zip. Ce fichier est complet. Par le fait même vous serez prédiposé à une étude complete du projet.
>>
Bonne programmation . . . Amicalement . . . zardoz.