Artkabis

Salut !!!
Si vous êtes membre du forum, vous pouvez vous connecter.
Au cas contraire vous avez la possibilité de créer gratuitement un compte...

Forum d'entraide en graphisme et webdesign. Formation pour Flash, Photoshop et les langages: as2, as3, html, php, javascript, etc.


    Lecteur flv avec progressbar de lecture et de son

    Partagez

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Lecteur flv avec progressbar de lecture et de son

    Message par artkabis le Jeu 4 Déc - 23:55

    Bonjour à tous, ça faisait un petit moment que je n'avais pas préparé un tutoriel aussi long!!!

    Avant toute choses, sachez que ce tutoriel à été préparé sur la base du tuto de sky (le créateur de tutomania), la différence entre ces deux tuto est au niveau du support, vidéo pour moi et image pour la version originale, mais sachez que vous pouvez retrouver la version image en vous rendant à cette adresse : http://www.tutomania.com/viewtuto-1-Flash-463-Lecteur_FLV_perso_Partie_III.html

    Il existe aussi une version amélioré de ce lecteur (par sky) et vous pouvez la retrouver à cette adresse :
    http://www.tutomania.com/index.php?page=News&id=429#com


    Se tutoriel sur la création d'un lecteur Flv est assez complet puisqu'il comprend deux barres de contrôles, une pour le son et l'autre pour naviguer dans la vidéo (seekbar). Le design reste assez simple, mais les comportements généraux sont plutôt avancés.

    Par contre, vu la longueur du tutoriel, quelques petites erreurs se sont glissés ci et là, ne vous inquiétez pas, elles sont toutes corrigés avant la fin du tutoriel. Mais si vous voulez gagner du temps, la première erreur se trouve dans la deuxième partie à 10Min20, en effet il ne faut pas avoir de décalage entre la barre de couleur (volC) et le fond de la barre de son (bt_vol), ils doivent être positionnés l'un sur l'autre et non avec la barre de couleur en décalage sur la gauche, en corrigeant ceci vous ne devriez pas avoir de problème majeur. Encore une fois, pas de panique une correction se trouve dans la dernière partie.

    Pour résumer vous avez le fond de la progressbar noir (bt_vol) placé à 0 sur l'axe des x et mesurant 100 pixel en largeur, le contour mesure la même taille et est placé au même endroit (0 en x) et enfin la barre de couleur (volC) et aussi placé a 0 sur l'axe des x. Donc tous les éléments sont placés a 0 sur l'axe des x et le fond et le contour de la barre du son mesure tous les deux 100 pixels en largeur.




    Je vous préviens que la durée total du tutoriel avoisine les une heure, je vous conseille donc de le commencer si vous avez au moins le double de temps devant vous et oui ce tuto et assez fastidieux et il faut s'accrocher, mais si vous voulez progresser il n'y a pas meilleur exercice et puis vous aurez la fierté d'avoir créé vous-même votre propre lecteur Flv, ce qui croyait moi, n'est pas une mince affaire.


    Voici le code à placer sur le calque as de la scène principale:
    Code:

    var maConnexion = new NetConnection();
    maConnexion.connect(null);
    monFluxVideo = new NetStream (maConnexion);
    maVideo.attachVideo (monFluxVideo);

    netStream.setBufferTime(5);

    monFluxVideo.play("tuto_particule.flv");
    bt_play._visible = false;
    bt_play2._visible = false;

    fmode = "Mode normal";
    Stage["displayState"]="normal";

    monFluxVideo.onMetaData=function(obj){
       timer="duree: "+Math.round(obj.duration)+"secondes";
       duree=obj.duration;
    };

     function chargBytes(monNetS:NetStream){
       pctCharg = monNetS.bytesLoaded/monNetS.bytesTotal*100;
       var secondNetS:Number =  monNetS.time;
       barrPlay._xscale = secondNetS/duree*100;
       temps = Math.round(+secondNetS)+"' - "+Math.round(+duree)+"'";
    }
    var chargInterval:Number = setInterval(chargBytes,500,monFluxVideo);

    sousB.onPress=function(){
       barrPlay._width = _xmouse -10;
       var BPW:Number=sousB._width;
       pourcent=Math.round((barrPlay._width*100)/BPW);
       head = Math.round((pourcent*duree)/100);
       monFluxVideo.seek(head);
    };
    bt_play2.onRelease=function(){
       monFluxVideo.play("tuto_particule.flv");
       bt_play2._visible=false;
    };
    bt_play2.onRollOver=function(){
       bt_play2.gotoAndPlay("over");
    }
    bt_play2.onRollOut=function(){
       bt_play2.gotoAndPlay("out");
    }
    bt_pause.onRelease=function(){
       monFluxVideo.pause("tuto_particule.flv");
       bt_play._visible=true;
    };
    bt_pause.onRollOver=function(){
       bt_pause.gotoAndPlay("over");
    }
    bt_pause.onRollOut=function(){
       bt_pause.gotoAndPlay("out");
    }
    bt_play.onRelease=function(){
       monFluxVideo.pause("tuto_particule.flv");
       bt_play._visible=false;
    };
    bt_play.onRollOver=function(){
       bt_play.gotoAndPlay("out");
    }
    bt_play.onRollOut=function(){
       bt_play.gotoAndPlay("over");
    }
    bt_stop.onRelease = function (){
        monFluxVideo.play("");
       
        bt_play2._visible = true;
    };
    bt_stop.onRollOver=function(){
       bt_stop.gotoAndPlay("over");
    }
    bt_stop.onRollOut=function(){
       bt_stop.gotoAndPlay("out");
    }
    bt_retour.onRelease=function(){
       monFluxVideo.play("");
       monFluxVideo.play("tuto_particule.flv");
       Stage["diplayState"]="Normal";
    };
    bt_retour.onRollOver=function(){
       bt_retour.gotoAndPlay("over");
    }
    bt_retour.onRollOut=function(){
       bt_retour.gotoAndPlay("out");
    }

    full.onRelease=function(){
       if (Stage["displayState"]=="fullScreen"){
          Stage["displayState"]="normal";
          fmode="Mode normal";
       }else if(Stage["displayState"]=="normal"){
             Stage["displayState"]="fullscreen";
             fmode="Mode fullscreen";
          }
    }
    full.onRollOver=function(){
       full.gotoAndPlay("over");
    }
    full.onRollOut=function(){
       full.gotoAndPlay("out");
    }

    Et le code à placer sur le calque "as" du clip "slider":
    Code:

    lect.createEmptyMovieClip("SonVideo",lect.getNextHighestDepth());
    SonVideo.attachAudio();
    var VolumeVideo:Sound = new Sound (SonVideo);
    VolumeVideo.setVolume(70);
    var son = VolumeVideo.getVolume();
    tVol=son;
    dragV._x=son;
    this.ratio = 0;
    volC._x=0;
    volC._width=70;

    dragV.onPress = function(){
       this.startDrag(true,0,0,line._width,0);
       this.onEnterFrame =function(){
          ratio=Math.round(this._x*100/line._width);
          volC._width=ratio;
          tVol= ratio;
          vol=VolumeVideo.getVolume();
          VolumeVideo.setVolume(ratio);
          if(VolumeVideo.getVolume()<1){
             mute._visible=true;
          }else{
             mute._visible=false
          }
       }
    };
    dragV.onRelease=dragV.onReleaseOutside=stopDrag;
    bt_vol.onPress=function(){
       dragV._x=_xmouse;
       volC._width = _xmouse;
       VolumeVideo.setVolume(_xmouse);
       tVol = _xmouse;
    };
    Le tutoriel:

    PARTIE1


    PARTIE 2:



    PARTIE 3:



    PARTIE 4:


    Le support du tutoriel se fait dans ce topic Wink


    Dernière édition par artkabis le Mar 15 Déc - 14:18, édité 3 fois

      La date/heure actuelle est Mar 6 Déc - 12:06