IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Flash Discussion :

Debutant flash, diaporama photos


Sujet :

Flash

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Juillet 2002
    Messages
    39
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2002
    Messages : 39
    Points : 21
    Points
    21
    Par défaut Debutant flash, diaporama photos
    Bonsoir,

    je n'ai que quelques jours de flash derriere moi et je souhaiterais faire un diaporama photo comme on voit un peu partout :-)
    L'idee, c'est que j'aimerais implementer les fonctionnalites suivantes: (certaines sont ok, j'ai pu me debrouiller en suivant des tutoriels sur le Net);

    - Voir les miniatures en bas et afficher l'image en plus grand format au dessus (le principe marche mais j'ai des soucis avec les tailles des images)
    - chargement depuis un fichier xml (ca c'est ok)
    - avoir un seul set de photos (pas les photos originales et les thumbnails en plus) => La je galere car je ne sais pas du tout comment ca marche pour changer l'echelle des photos.
    - L'ideal ca serait de faire un effet lorsque les photos s'affiche...

    Mon code est le suivant:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
     
    	diaporama.w = 500;
    	main_pict.current_pict=0;
     
    	// Build array containing pict info
    	// TODO
     
    	// Get info from XML file
    	xml_doc = new XML();
    	xml_doc.ignoreWhite=true;
    	xml_doc.load("./xml/picts.xml");
    	xml_doc.onLoad = function(ok){
    		if(ok){
    			parse_file(xml_doc);
    			set_main_pict();
    		}
    	}
     
    	// Function that will be used to load picts from array
    	function set_main_pict(image_nbr){}
     
     
    	function parse_file(xml_file){
    		picts = xml_file.firstChild.childNodes;
    		_root.largeurTotale = picts.length*100;
     
    		// Loop through all childs
    		for(i=0;i<picts.length;i++){
     
    			pict = xml_file.firstChild.childNodes[i];
    			p_name = pict.childNodes[0].childNodes[0];
    			p_comments = pict.childNodes[1].childNodes[0];
     
    			var mc = this.diaporama.createEmptyMovieClip("photo"+i, i);
    			mc._x = 100*i;
    			mc.createEmptyMovieClip("conteneur",0); // I do not really understand why....
    			mc.conteneur.loadMovie("./photos/"+p_name);
    			mc.conteneur.width = 100;
    			mc.conteneur.height = 100;
    			mc._xscale = 100;
    			mc._yscale = 100;
    			mc.createEmptyMovieClip("cadre", 1);
     
    			mc.p_name = p_name;
    			mc.p_comments = p_comments;
    			// mc._alpha = 40;
    			with(mc.cadre) {
    				lineStyle(1, "0x000000", 100);
    				moveTo(0, 0);
    				lineTo(100, 0);
    				lineTo(100, 100);
    				lineTo(0, 100);
    				lineTo(0, 0);
    			}
     
    			mc.onRollOver = function() {
    				commentaires.text = this.p_name + "\n" + this.p_comments;
     
    				// Change main pict
    				main_pict.loadMovie("photos/"+this.p_name);
    			}
     
    			mc.onRollOut = function() {
    				commentaires.text = "";	
    			}
    		}		
    	}
     
    previous_pict.onPress = function(){
      if(diaporama._x <= 10){
        diaporama._x += 100;
      }
     
    };
     
    next_pict.onPress = function(){
    	if((diaporama._x + _root.largeurTotale) >= 535 ){
        	diaporama._x -= 100;
      	}
    };
    J'ai 2 calques, le premier "Action" ou il y a tout ce code, le second defini les 2 buttons (previous_pict, next_pict) et 2 MovieClip (diaporama pour les miniatures, et main_pict pour l'image principale).

    Mon fla

    Est ce que vous auriez une idee sur comment faire pour retailler les photos pour qu'elles soient reduites afin d'apparaitre dans les diapo et comment se font les effets de flous ???

    Merci beaucoup,

    Luc

  2. #2
    Membre actif
    Profil pro
    Inscrit en
    Février 2004
    Messages
    582
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2004
    Messages : 582
    Points : 218
    Points
    218
    Par défaut
    Va voir du côté des fonctions _xscale/_yscale....

  3. #3
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2006
    Messages : 4
    Points : 5
    Points
    5
    Par défaut
    Salut Luc

    je te propose un code pour faire un effet de fondu a mettre dans onRollOver

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    mc.onRollOver = function() {
    				commentaires.text = this.p_name + "\n" + this.p_comments;
     
    				// Change main pict
    				main_pict._alpha=0;
    				main_pict.loadMovie("photos/"+this.p_name);
    				var alpha =0;
    				onEnterFrame = function()
    				{
    					fondu=setInterval(function ()
    					{
    						grande._alpha=alpha;
    						alpha=alpha+2;
    						if (alpha > 100) 
    							clearInterval(fondu);
    					},5);
    				}
     
    			}
    Je ne suis pas très a l'aise avec le onEnterFrame, je ne garantit donc pas que ca marche, mais je pense qu'on s'en rapproche.

  4. #4
    Membre à l'essai
    Profil pro
    Inscrit en
    Juillet 2002
    Messages
    39
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2002
    Messages : 39
    Points : 21
    Points
    21
    Par défaut
    Salut a tous les 2,

    finalement j'ai pas mal avance (tout est relatif... ) depuis la derniere fois.
    Je commence a avoir les effets que je voulais mon diaporama mais par contre j'ai 2 problemes que je ne parviens pas du tout a debugger.

    Le premier: dans la methose onLoadInit, les dimensions de l'image que je recupere avec mc._width et mc._height ne sont pas les bonnes (alors que le download se fait correctement dans la methose onLoadProgress). Du coup je ne peux pas centrer mes photos correctement.... Si vous pouvez m'eclairer la dessus je serais pas deconnaissant . Ce qui m'embete c'est que j'ai vraiment desoin que cela fonctionne pour etre independant de la tailles des images que je loade.

    Un deuxieme probleme, moins important celui la mais un peu chiant quand meme c'est que quand je double click sur un des boutons ca plante completement et les images se retrouve renversees. A priori ca vient tu Tween utilise sur le _scale...

    Voila, est ce que vous auriez des pistes???

    Mon fla: (il doit y avoir des trucs bizarres certainement mais j'ai commence flash il n'y a pas longtemps)

    import mx.transitions.Tween; // on importe la classe Tween
    import mx.transitions.easing.*; // on importe les classe easing pour les effets visuels.

    // URLs
    var url_photos:String = "http://luc.juggery.free.fr/test/photos/";
    var url_xml:String = "http://luc.juggery.free.fr/test/xml/picts.xml";

    main_pict._x = 5;
    main_pict._y = 5;

    // Width of diaporama
    var diaporama_width:Number = 600;

    // Space between diapo
    var diapo_space:Number = 20;

    // Max height and width of main_pict movieClip
    var max_w:Number = 590;
    var max_h:Number = 370;

    // Borders for main pict
    var border_w:Number = 5;
    var border_h:Number = 5;

    // Position of main_pict movieClip
    var main_pict_x:Number = 5;
    var main_pict_y:Number = 5;

    // MovieClip Loader and listener
    var mcl:MovieClipLoader = new MovieClipLoader();
    var listener:Object = new Object();
    listener.onLoadProgress = function(mc:MovieClip, loaded:Number, total:Number){
    // trace(mc + ".onLoadProgress with " + loaded + " bytes of " + total);
    }
    listener.onLoadComplete = function(mc:MovieClip){
    // trace("onLoadComplete, mc._width: " + mc._width);
    }
    listener.onLoadInit = function(mc:MovieClip) {
    // Get Height and Width of loaded pict
    var pict_w:Number = mc._width;
    var pict_h:Number = mc._height;

    // Default value for scale
    var scale:Number = 100;

    // Set default position in MovieClip
    mc._x = 0;
    mc._y = 0;

    trace("sizes, pict_w: " + pict_w + ", pict_h: " + pict_h + ", max_w: " + max_w + ", max_h: " + max_h);

    // Check if picture is bigger than frame and set scale and position accordingly
    if((pict_w > max_w) && (pict_h > max_h)){ // width and height are bigger than max
    // trace("both dim bigger than max");
    scale = pict_w / max_w > pict_h / max_h ? pict_w / max_w : pict_h / max_h;
    scale = 100 / scale;
    }
    else if(pict_w > max_w){ // only width is bigger than max
    // trace("width bigger than max");
    scale = 100 / (pict_w / max_w);
    }
    else if(pict_h > max_h){ // only height is bigger than max
    // trace("height bigger than max");
    scale = 100 / (pict_h / max_h);
    }
    else{ // pict fits the frame
    // trace("picts fits");
    }

    // Set position in Movie Clip
    set_pict_position(mc, pict_w * scale / 100, pict_h * scale / 100);

    //mc._scale = scale;
    new mx.transitions.Tween(mc, "_yscale",Regular.easeOut, 0, scale, 1, true);
    new mx.transitions.Tween(mc, "_xscale",Regular.easeOut, 0, scale, 1, true);
    };
    mcl.addListener(listener);

    // Build array containing pict info
    var h_infos:Object = {};

    // Get info from XML file
    xml_doc = new XML();
    xml_doc.ignoreWhite=true;
    xml_doc.load(url_xml);
    xml_doc.onLoad = function(ok){
    if(ok){
    // Parse XML file to get picts'name and comments
    parse_file(xml_doc);

    // Display first pict
    display_pict(1);
    display_comments(1);
    }
    }

    function display_pict(index){
    _root.mcl.loadClip(url_photos + h_infos[index].pict_name, main_pict);
    _root.current = index;
    }

    function display_comments(index){
    this.commentaires.text = h_infos[index].pict_name;
    this.commentaires.text += "\n";
    this.commentaires.text += h_infos[index].pict_comments;
    }

    // Parse XML file and build hash
    function parse_file(xml_file){
    var picts:Object = xml_file.firstChild.childNodes;
    _root.largeurTotale = picts.length*100;
    _root.pict_nbr = picts.length;

    // Loop through all childs
    for(i=0;i<picts.length;i++){
    // Get pict name and comments
    var pict:Object = xml_file.firstChild.childNodes[i];
    var p_name:String = pict.childNodes[0].childNodes[0];
    var p_comments:String = pict.childNodes[1].childNodes[0];

    // Populate h_infos hash
    h_infos[i] = {pict_name:p_name,pict_comments:p_comments};

    // MovieClip Loader and listener
    var mcl_diapo:MovieClipLoader = new MovieClipLoader();
    var listener_diapo:Object = new Object();
    listener_diapo.onLoadInit = function(mc_diapo:MovieClip) {
    // Set width and height to 70
    mc_diapo._width = 70;
    mc_diapo._height = 70;
    }
    mcl_diapo.addListener(listener_diapo);

    // Create movieClip for each pict
    var mc:MovieClip = this.diaporama.createEmptyMovieClip("photo"+i, i);
    mc._x = 100*i + diapo_space;
    mc.createEmptyMovieClip("conteneur",0); // I do not really understand why....

    // Load diapo
    mcl_diapo.loadClip(url_photos + p_name, mc.conteneur);

    // Set id of the current movieClip
    mc.number = i;

    // Add frame to movieClip
    mc.createEmptyMovieClip("cadre", mc.getNextHighestDepth());
    with(mc.cadre) {
    //lineStyle(1, "0x000000", 100);
    lineStyle(1, "0xFFFFFF", 100);
    moveTo(0, 0);
    lineTo(70, 0);
    lineTo(70, 70);
    lineTo(0, 70);
    lineTo(0, 0);
    }

    //mc.onRollOver = function() {
    mc.onPress = function() {
    // Keep track of current pict
    _root.current = this.number;

    // Load pict in movieClip
    display_pict(_root.current);

    // Display comments
    display_comments(_root.current);

    }
    }
    }

    // Go backward
    previous_pict.onPress = function(){
    if(diaporama._x <= 0){
    diaporama._x += 100;
    }
    // Display previous
    if(_root.current > 0){
    _root.current -= 1;
    display_pict(_root.current);
    display_comments(_root.current);
    }
    };

    // Go forward
    next_pict.onPress = function(){
    if((diaporama._x + _root.largeurTotale) >= 600 ){
    diaporama._x -= 100;
    }
    if(_root.current < _root.pict_nbr-1){
    _root.current += 1;
    display_pict(_root.current);
    display_comments(_root.current);
    }
    };

    function set_pict_position(mc:MovieClip,w:Number,h:Number){
    //trace("w: " + w + ", h: " + h);

    mc._x = (600 - w) / 2;
    mc._y = (max_h + border_h - h) / 2;
    }
    Merci beaucoup,

    Lucho

  5. #5
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Juillet 2005
    Messages
    43
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2005
    Messages : 43
    Points : 37
    Points
    37
    Par défaut
    Bonjour,

    Voici une petite fonction que j'utilise pour charger une image dans un clip et que je dimensionne à la taille max de 100x100. En fait la fonction est appelé dès que le chargement est fini. Si cela peut-être utile.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
    function PositionneImagette(image:MovieClip)
    {
    	echelle=100;
    	image._xscale=100;
    	image._yscale=100;
    	if ((image._height>100) or (image._width>100))
    	{
    		echelle=Math.min(10000/image._height,10000/image._width);
    		image._xscale=echelle;
    		image._yscale=echelle;
    	}
    	image._x=image._x-image._width/2;
    	image._y=image._y-image._height/2;
    }

  6. #6
    Membre à l'essai
    Profil pro
    Inscrit en
    Juillet 2002
    Messages
    39
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2002
    Messages : 39
    Points : 21
    Points
    21
    Par défaut
    Salut michpc,

    merci beaucoup pour ton aide.
    Est ce que, lorsque tu fais un onLoadInit les valeurs des dim sont correctement recuperee?

    Merci beaucoup,

    Lucho

  7. #7
    Nouveau membre du Club
    Profil pro
    Inscrit en
    Juillet 2005
    Messages
    43
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2005
    Messages : 43
    Points : 37
    Points
    37
    Par défaut
    Oui si tu penses à vérifier que _xscale et _yscale sont bien a 100, sinon _width=largeur réelle*_xscale/100, idem pour _height.

  8. #8
    Membre à l'essai
    Profil pro
    Inscrit en
    Juillet 2002
    Messages
    39
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2002
    Messages : 39
    Points : 21
    Points
    21
    Par défaut
    Salut !!!

    Merci beaucoup, c'est exactement ce qui me manquait.... les _xscale et _yscale gardaient la valeur precedente.
    Merci tu m'as debloque en moins d'une minute alors que je me prenait la tete depuis pas mal de temps

    Bonne soiree,

    Lucho

    ps:Merci encore

Discussions similaires

  1. Diaporama photo flash
    Par Morefire dans le forum Flash
    Réponses: 1
    Dernier message: 09/01/2009, 11h42
  2. debutant flash modifiable
    Par LeXo dans le forum Flash
    Réponses: 2
    Dernier message: 27/05/2007, 18h55
  3. Réponses: 3
    Dernier message: 05/04/2007, 13h39
  4. [FLASH MX] Diaporama Photos
    Par Ylias dans le forum Flash
    Réponses: 3
    Dernier message: 17/10/2005, 16h45
  5. [FLASH MX] photo par php
    Par guy2004 dans le forum Flash
    Réponses: 19
    Dernier message: 09/02/2005, 09h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo