Flash : Galerie photo carroussel en AS2

Lea On juillet - 11 - 2011

Flash : Galerie photo carroussel en AS2

Voici un tutoriel pour créer une belle galerie photos carroussel sur flash , avec de l’ action-script 2

Mon exemple :

Cette galerie est généré par fichier xml.

Vous devez par conséquent héberger les images, le fichier xml et le swf dans le même dossier .Pour cela, vous pouvez créer un dossier sur l’ herbergeur « Archive Host » .

1- Préparer vos images à afficher dans la galerie.
Les redimensionner si nécéssaire.
Pour mon carroussel, j’ ai utilisé 8 images de 450 pixels de large, mais vous pouvez en ajouter bien plus.

carroussel1

Héberger vos images et noter leur url.

2- Télécharger ce fichier XML

3- Dezipper le dossier puis ouvrir le fichier xml avec BLOC NOTE par exemple.
Noter les url de vos images .
Héberger ce fichier xml dans le même dossier que vos images et noter son url.

4- Ouvrir Flash. Configurer votre document comme ceci : taille assez grande selon vos images et une cadence de 50 images / secondes

carroussel2

5- Activer la première image clé et ouvrir la fenêtre action
Copier et coller ce code

    picData = new XML();    picData.ignoreWhite = true;    picData.onLoad = loadXML;    picData.load("http://...................../xmlArtData.xml");    function loadXML() {       runScript();    }    function runScript() {       _root.createEmptyMovieClip("bg",1);       _root.createEmptyMovieClip("image",3);       _root.createEmptyMovieClip("thumbnails",2);       images = new Array();       for (i=0; picData.firstChild.childNodes[i].firstChild.nodeValue != undefined; i++) {          images.push(picData.firstChild.childNodes[i].firstChild.nodeValue);       }       thumbnails._x = 280;       thumbnails._y = 375;       imageLoading = true;       numObjects = images.length;       objectsInScene = new Array();       focalLength = 800;       spin = 0;       _root.thumbnailSize = 125/((numObjects)/9);       displayPane = function () {          var angle = this.angle+spin;          var x = Math.cos(angle)*this.radius;          var z = Math.sin(angle)*this.radius;          var y = this.y;          var scaleRatio = focalLength/(focalLength+z);          this._x = x*scaleRatio;          this._y = y*scaleRatio;          this._xscale = -(this._yscale=100*scaleRatio);          this._xscale *= Math.sin(angle);          this.swapDepths(Math.round(-z));       };       angleStep = 2*Math.PI/numObjects;       for (i=0; i<numObjects; i++) {          thumbnail = thumbnails.createEmptyMovieClip("thumbnail_"+i, i);          myPic = thumbnail.createEmptyMovieClip("picHolder", 1);          myPic.loadMovie(images[i]);          thumbnail.angle = angleStep*i;          thumbnail.radius = 250;          thumbnail.x = Math.cos(thumbnail.angle)*thumbnail.radius;          thumbnail.z = Math.sin(thumbnail.angle)*thumbnail.radius;          thumbnail.y = 40;          thumbnail.display = displayPane;          thumbnail.drawBox(_root.thumbnailSize);          thumbnail.buttonize(i);          thumbnail.notLoaded = true;          objectsInScene.push(thumbnail);       }       panCamera = function () {          spin -= this._xmouse/10000;          for (var i = 0; i<objectsInScene.length; i++) {             objectsInScene[i].display();          }       };       thumbnails.onEnterFrame = panCamera;       _root.onEnterFrame = function() {          for (i=0; i<images.length; i++) {             if ((_root.thumbnails["thumbnail_"+i].picHolder.getBytesLoaded()/_root.thumbnails["thumbnail_"+i].picHolder.getBytesTotal() == 1) && _root.thumbnails["thumbnail_"+i].notLoaded) {                if (_root.thumbnails["thumbnail_"+i].picHolder._width>=_root.thumbnails["thumbnail_"+i].picHolder._height) {                   _root.thumbnails["thumbnail_"+i].picHolder._yscale = _root.thumbnails["thumbnail_"+i].picHolder._xscale=(100*(1-(_root.thumbnails["thumbnail_"+i].picHolder._width-_root.thumbnailSize)/(_root.thumbnails["thumbnail_"+i].picHolder._width)));                   _root.thumbnails["thumbnail_"+i].picHolder._y = (_root.thumbnailSize-_root.thumbnails["thumbnail_"+i].picHolder._height)/2;                }                if (_root.thumbnails["thumbnail_"+i].picHolder._width<=_root.thumbnails["thumbnail_"+i].picHolder._height) {                   _root.thumbnails["thumbnail_"+i].picHolder._yscale = _root.thumbnails["thumbnail_"+i].picHolder._xscale=(100*(1-(_root.thumbnails["thumbnail_"+i].picHolder._height-_root.thumbnailSize)/(_root.thumbnails["thumbnail_"+i].picHolder._height)));                   _root.thumbnails["thumbnail_"+i].picHolder._x = (_root.thumbnailSize-_root.thumbnails["thumbnail_"+i].picHolder._width)/2;                }                if (_root.thumbnails["thumbnail_"+i].picHolder._width == _root.thumbnails["thumbnail_"+i].picHolder._height) {                   _root.thumbnails["thumbnail_"+i].picHolder._yscale = _root.thumbnails["thumbnail_"+i].picHolder._xscale=(100*(1-(_root.thumbnails["thumbnail_"+i].picHolder._width-_root.thumbnailSize)/(_root.thumbnails["thumbnail_"+i].picHolder._width)));                   _root.thumbnails["thumbnail_"+i].picHolder._x = _root.thumbnails["thumbnail_"+i].picHolder._y=0;                }                _root.thumbnails["thumbnail_"+i].picHolder._alpha = 60;                _root.thumbnails["thumbnail_"+i].notLoaded = false;             }             if ((_root.thumbnails["thumbnail_"+i].picHolder.getBytesLoaded()/_root.thumbnails["thumbnail_"+i].picHolder.getBytesTotal()<1)) {             }          }          if (_root.image.getBytesLoaded()/_root.image.getBytesTotal() == 1) {             if (imageLoading == true) {                _root.image._alpha = 0;                if (_root.image._width>_root.image._height) {                   _root.image._yscale = _root.image._xscale=(100*(1-(_root.image._width-400)/_root.image._width));                }                if (_root.image._height>_root.image._width) {                   _root.image._yscale = _root.image._xscale=(100*(1-(_root.image._height-400)/_root.image._height));                }                if (_root.image._height == _root.image._width) {                   _root.image._yscale = _root.image._xscale=(100*(1-(_root.image._height-400)/_root.image._height));                }                _root.image._x = (625-_root.image._width)/2;                _root.image._y = (425-_root.image._height);                imageLoading = false;             }             _root.image._alpha += 5;             if (image._alpha>100) {                image._alpha = 100;             }          }       };    }    MovieClip.prototype.buttonize = function(num) {       this.onPress = function() {          imageLoading = true;          _root.image.removeMovieClip();          _root.createEmptyMovieClip("image", 3);          _root.image.loadMovie(images[num]);       };       this.onRollOver = function() {          this.picHolder._alpha = 100;       };       this.onRollOut = function() {          this.picHolder._alpha = 60;       };    };    MovieClip.prototype.drawBox = function(boxSize) {       this.lineStyle(1, 0x000000, 0);       this.beginFill(0x000000, 100);       this.lineTo(boxSize, 0);       this.lineTo(boxSize, boxSize);       this.lineTo(0, boxSize);       this.lineTo(0, 0);       this.endFill();    };

Au début du code, inscrire l’url du fichier XML ici

code_modif