Diaporama avec effet de transition (fondu depuis noir)

Télécharger le projet
Commenter

Description

Voici un diaporama simple et efficace qui réalise des transitions à chaque clip
(on joue sur l'opacité à l'apparition d'une photo) et qui est doté d'une barre de preload dans le coin de l'animation
et du titre de la photo en bas.
De plus avec un clic sur la photo il y a une fonction de zoom.

Source / Exemple : 


var limite:Number = 200;
var imgAgrandi:Boolean = false;
var numImg:Number = 0;
titreImg = "Cliquez Suivant";

btPrecedente._visible = false;

verifLimit = function() {
	if (numImg >= 4) {
		btSuivante._visible = false;
	}
	else {
		btSuivante._visible = true;
	}
	
	if (numImg <= 1) {
		btPrecedente._visible = false;
	}
	else {
		btPrecedente._visible = true;
	}
}//verifLimit()

btPrecedente.onRelease = function () {
	numImg--;
	traitement();
}//onRelease

btSuivante.onRelease = function () {
	numImg++;
	traitement();
}//onRelease

traitement = function() {
	verifLimit();
	titreImg = 'Image00'+numImg+'.jpg';
	
	this.createEmptyMovieClip('image', 1);
	this.image.loadMovie(titreImg);
	this.image._alpha = 0;
	this.chargeur.image = this.image;
		this.chargeur.onEnterFrame = function() {
			this.barre._xscale = ((image.getBytesLoaded()/image.getBytesTotal())*100);
			if ((image.getBytesLoaded() == image.getBytesTotal()) && (image.getBytesTotal()>0)) {
				//Taille Photo
				if(image._height >= limite && image._height > image._width) {
					image._height = image._height / (image._width / limite);
					image._width = limite;
				}
				else {
					image._width = image._width / (image._height / limite);
					image._height = limite;
				}
				
				//Centrage Photo
				image._x = (Stage.width - image._width)/2;
				image._y = (Stage.height - image._height)/2;
				
				//Transition opacité
				image._alpha += 5;
				if(image._alpha >= 100) {
					delete image.onEnterFrame;
				}//if
				
				image.onRelease = function () {
					if (imgAgrandi) {
						limite = 200;
						imgAgrandi = false;
					}
					else {
						limite = 300;
						imgAgrandi = true;
					}
				}//onRelease
			}//if
	}//onEnterFrame
		
}//traitement()

Conclusion :


Il suffit de placer ses photos (nommées ici Image001, Image002, etc...) dans le même dossier
et de changer à la ligne 9 le nombre de photos totales (ici 4 ;-) ).
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.