begin process at 2010 03 18 18:43:09
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets d'images

 > DIAPORAMA AVEC EFFET DE TRANSITION (FONDU DEPUIS NOIR)

DIAPORAMA AVEC EFFET DE TRANSITION (FONDU DEPUIS NOIR)


 Information sur la source

Note :
8,29 / 10 - par 7 personnes
8,29 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets d'images Classé sous :diaporama, transition, preload, image, photo Niveau :Débutant Date de création :13/03/2007 Date de mise à jour :13/03/2007 13:29:22 Vu / téléchargé :47 897 / 13 095

Auteur : kikujirobmx

Ecrire un message privé
Site perso
Commentaire sur cette source (15)
Ajouter un commentaire et/ou une note

 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

  • 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()
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 ;-) ).

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

13 mars 2007 02:50:24 :
Ajout de la fonction de zoom/dezoom par simple clic sur la photo.
13 mars 2007 13:29:22 :
Ajout du Zip

 Sources de la même categorie

Source avec Zip Source avec une capture DIAPORAMA FLASH XML + FLASH par nixoulamasse
Source avec Zip Source avec une capture BOUTON DE VOLUME par pegase31
Source avec Zip FLASH : DIAPORAMA DYNAMIQUE AVEC FICHIER XML par nixoulamasse
Source avec Zip Source avec une capture LIGHTFILTERFX: UNE CLASSE D'EFFET D'OMBRE ET DE RELIEF... par top30
Source avec Zip Source avec une capture GALERIE DE PHOTOS par webcrea92

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture DIAPORAMA FLASH XML + FLASH par nixoulamasse
Source avec Zip DIAPORAMA AS3 par webcrea92
Source avec Zip DIAPORAMA AVEC DELAI par essametahmed
Source avec Zip Source avec une capture BANNIÈRE EN FLASH QUI FAIT DÉFILER LES IMAGES (XML + AS3) par Nix
Source avec Zip Source avec une capture GALERIE DE PHOTOS par webcrea92

Commentaires et avis

Commentaire de mehdi7604 le 15/03/2007 00:41:33

joli truc , ce que je pense :
avantages :
Temps du cahrgement réduit --> charger image par image
inconveniants :
l'outils présentation existe déja avec des transitions et tt .
bon code

Commentaire de kikujirobmx le 15/03/2007 18:32:05

merci pour le commentaire, :) c'est surtout un code à but pédagogique, étant entrain d'apprendre l'action script en ce moment j'ai pondu çà et voila !

Commentaire de hectordom le 07/04/2007 02:10:54

moi je me place juste en tant qu'utilisateur (je sui peintre et je voudrais trouver des outils simples et efficaces)
Juste deux remarques..
- dommage d'avoir une zone titre pour mettre "image 001-002 etc", un petit fichier texte xml pour remplire cette zone ? avec au choix: titre et/ou commentaire?
- Pourquoi commencer par du noir ?
Moi ça me plaît un outils very simple et léger...

Commentaire de alaricdebalaison le 21/08/2007 16:18:39

Bonjour, tout celà à l'air bien séduisant et simple.
Pourtant le fichier flash fait planter Flash, et le morceau de code n'est pas compri spar Dreamweaver.
Je suppose qu'il faut coller ton code dans un simple page html placée dans le même répertoire que les images et le fichier Flash ?

Commentaire de zarkofaj le 23/09/2007 20:57:30

Je n'ai pas encore télécharger ' Mais prometteur, intéressant : Ton écriture est clean '
| DM, Qc Canada.

Commentaire de michelborgne le 27/09/2007 06:33:34 10/10

Merci pour ce code excellent. Il y a peut être plus efficace sur ce site, mais pédagogiquement, c'est top. Je suis en train de rédiger un document de prise en main de Flash, et je vais certainement utiliser ta source comme exemple de ce que l'on peut faire avec Flash pour gérer des images. (je te citerai évidemment).

un grand merci

Commentaire de pppooddd le 08/11/2007 16:29:30

hi everybody,

je ne m'y connais pas trop en flash.
mais si j'ai bien compris il suffit de créer une frame dans un fichier flash et d'y associer ce script (y un petit "a" qui apparaît sur le petit rectangle symbolisant chaque frame, dans la time line). c'est ça ?
où j'ai faux ?

merci !

:)

Commentaire de zarkofaj le 09/11/2007 09:44:43

Salut pppooddd : Tu n'a pas dit faux. Mais à connaitre Flash t'en feras de meilleurs découvertes, savoir où placer son code est une chose parmis tant d'autres. Et celà ne s'arrête pas au premier 'frame de la timeline'. Savoir développer son scénario est un art en soi. Les codes externes est une autre façon. Bref c'est Flash aux multiples possibilités, comme pour plusieurs autres langages d'ailleurs.
[ Notice : 'je ne m'y connais pas trop en Flash,' ]. Alors và et connais le, Bonne chance. | DM Qc, Canada.

Commentaire de pppooddd le 09/11/2007 18:37:02

salut zarkofaj !
yes thank you
mais c'est que c'est chaud d'être pro en tout.
c'est ça le problème.

enfin bref
c'est sûr on a pas rien sans rien. alalala ma tête :)

Commentaire de hsiachi le 05/12/2007 10:52:12

Salut Kiku...(dur à prononcer le rest :o) )

Je voulais te remercier pour ton script qui est très clair et très compréhensible pour des débutants comme moi.
J'ai appris beaucoup de choses.
J'ai recherché un tutoriel pour une galerie photo dynamique simple et durant une heure, je n'avais rien trouvé d'abordable même dans la rubrique "débutante".

Encore merci, tu m'a beaucoup aidée.
Biz.

Commentaire de hsiachi le 05/12/2007 10:53:34 10/10

10/10 :-p

Commentaire de xysis le 21/03/2008 05:58:56 10/10

Trés belle sources (heu pas graphiquement lol tu aurais pu faire un effort) mais sinon trés propre. Quelle bonne idée de répertorier les accollades qui font en general planter flash(essayez de lire l'encyclopedie sans point ou virgule... le premier qui devient pas tout bleu j'en fais un millionnaire).
Je viens de poster un com sur une "source de menu"...quel menu? quelle source? ha c'etait un menu!!! ici un truc concret, enfin donc felicitation et merci. Pourrais tu par contre faire évoluer ce script de maniere à ce que l'actualisation ne se fasse pas obligatoirement dans flash (pense au musicien qui trime 8h par jour sur son instru et qui essaye de mettre les photos de son dernier concert gratuit pour les enfants leucemeiques et qui s'est fais chier (pour lui la prog c du chinois) a recoder ta source. Un mois plus tard la version d'evaluation de flash ayant expiré, il fait comment?...
La récuperation de l'adresse du fichier et d'eventuels commentaires via XML sont vraiment pas dur... Pense à simplifier le plus possible le fichier XML comme une SGBD (base de données relationnelles). Ta source est une des meilleur que j'ai vu sur le net en la matiere (je vous conseille à tous les bouquins aux editions Eyrolles qui sont une veritable mine d'or et surtout qui sont vraiment accessible au commun des mortels..

J'attends donc avec impatience que tu lise cette critique (qui te vaut un 10/10 quand meme lol) et que tu modifie ta galerie en conscequence et là je temettrais 20/10(je voterai deux fois ^^)

Bien a toi et surtout bons développement, tu dis débuter, c'est deja du joli travail persevère!!!

Commentaire de urany le 12/10/2008 18:47:28

Salut, je remonte un truc très vieux apparement... :D

Je suis une the best en niveau débutant, ce qui revient à dire que je suis tres nunulle...
Bon, je me démerde comme je peux quand meme.

Joli code en tout cas, tres clair.

Exactement ce que je cherchais, pas de xml, ce dont je comprend rien à rien du tout.

Bon, j'arrete le blabla et expose mon souci :

Voila, je suis en train de refaire mon site en me servant de flash pour les animations, bannieres, musiques, menus interactifs, etc...
J'en suis aux diaporamas.

Tout d'abord, je voulais savoir comment modifier la taille de l'affichage de la photo, je trouve ca petit, possible de faire afficher en taille réélle ? (mes photos font 448x336 pixel, voyez, je demande pas grand chose)

Ensuite, mon site est stocké sur mon ordi, en arborescence :
- pages,
- dossier menus flash,
- dossier diapo avec sous dossiers "photos", "thumbs", et "diapo flash". chaque sous dossiers contient des dossiers que j'ai fait pour chaque album.

Je doute d'etre claire la...
Peut-on modifier le script pour indiquer un chemin precis pour prendre les photos ?

Ensuite, possibilité d'intégrer des thumbs sur ce diapo ? si oui, comme qu'on fait ?
(vous l'avais que j'etais une the best debutante lol)

Merki aux ames charitables qui auront la patience de supporter mon innocence...

Commentaire de xysis le 15/10/2008 03:15:37

Bonsoir
je suis pas sur d'avoir compris toutes tes requetes (^^)

Pour la taille d'affichage des photos, tu as une variable nommée arbitrairement "limite" qui sert dans l'algorythme de définition de la taille du chargeur d'image il me semble (ici un movieclip)...

Avant d'essayer de t'approprier ce bout de code, sache que le langage utilisé est de l'actionscript 2 : l'AS3 est sorti il y a plus d'un an et tous les développeurs dans mon genre attendent avec impatience la sortie de la "release" de flash 10 et de la suite créative CS4!!!

Je te conseillle de chercher plutot du coté d'actionscript 3 qui est vraiment plus performant et où l'accés aux fichiers XML ou issus d'une base de données avec php a été grandement simplifié.

C'est ton site internet que tu développes, tu dois donc tenir compte de "l'accessibilité de ton site" :

   - un site full as3 sera très efficace, léger, ultra fonctionnel et sécurisé; mais exige de connaitre les bases de la POO (Programmation Orientée Objet) et du langage actionscript 3.

   - un site fait uniquement avec les outils de l'ide sera horriblement lourds, les fonctions, évènements, méthodes (définies par le CODE) seront toujours plus hazardeuses.

Pour résumer AS3 pour l'internet et l'ide pour les supports types disques durs, CD-ROM, DVD. (mais on peut et il est mieux d'utiliser le plus de code possible et le moins l'ide.

Une petite astuce : ADOBE distribue un compilateur de SWF en ligne de commande ou intégrable comme plug-in au logiciel ECLIPSE, ainsi qu'un framework complet et de outils de développement pour actionscript, AIR et FLEX, et ce : GRATUITEMENT!!!

Le framework flex sdk est OPEN SOURCE!!!!

Si tu as besoin de conseils ou autre... bonne chance!!

Commentaire de lp5 le 28/01/2009 14:29:45

bonjour,
enfin un code simple et pratique
pourrais-tu me dire qu'elles lignes de code il faudrait changer pour que le diaporama se lance tout seul (et donc plus besoin de flêches)
j'ai essayé de placer un onEnterFrame, mais cela foire..
merci de ton aide
lox

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

preload son [ par clav ] bonjour bonjour,voila j'ai un petit prob:je souhaite faire un petit interface de lecture de mp3 en ligne (un truc pour écouter des morceaux de musique retarder le chargement [ par jdeboer ] Bonjour,J avais laisse precedemment un message sur le non affichage d un preloader. En effet, il s affichait pas.Je crois que j en ai compris la raiso Diaporama avec preload [ par lioliolio ] Bonjour, y a t il un diaporama qui en plus de gérer plusieurs album ou une centaine d'images dans un répertoire, ajoute en plus un petit préload pour Stoper un annimation [ par jv2759 ] Je suis ultra debutant en flash et en plus je suis plutot habituer au language traditionel de programation. Donc on vas dire que je suis plutot perdut problème avec preload [ par sabrukano ] Bonjour tout le monde,Donc voilà, je vais essayer d'expliquer clairement mon problème. Pour charger mon diaporama j'ai créer un preload qui semble mar diaporama photo [ par flybuster ] est-ce que qq'un sait pourquoi les photos de diaporama s'affichent en local mais pas sur le serveur distant? Recadrage d'image depuis une photo vers une nouevelle taille en flash [ par Fangona ] Bonjour a tous,Je voudrait comprendre comment faire pour arriv&#233; &#224; zoom&#233;e sur une image et au m&#234;me temps arriv&#233; &#224; l'envoy diaporama photo [ par thibautmarchal ] Bonjour,je cherche &#224; faire une gallerie photo avec redimentionnement de ma fenetres en fonction de ma photo (avec de l'xml)...je cherche un tuto, Navigation image vignette et maxi [ par jeyspy ] Salut tout le monde,Il ya fort longtemps j'avais mis la main sur un script de "navigation" sur photo je m'explique.Dej&#224; la photo de base en fond boucle diaporama panoramique [ par biloute73 ] Bonjour, j'ai réalisé un diaporama mettant en scene une vue panoramique. Lorsque l'utilisateur clique sur 2 boutons, il peut faire défiler l'image soi


Nos sponsors


Sondage...

Comparez les prix


HTC Hero

Entre 550€ et 550€

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,452 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales