Créer un lecteur vidéo avec flashDevelop ? ca va être un peu long.

Je suis parti de cet exemple parce que j'avais cité celui-ci dans une de mes réponses sur un forum.

url ex( http://www.formation.stationgraphique.com/programmer-en-as3/lecteur-video-complet )

Etape 1 mise en place du projet.

as3

Etape 2 Créer une class lecteur.as .

lecteur video

   Click droit sur src et click sur New Class

lecteur video

   J'ai choisi le nom "Lecteur" pour ma Class. Par convention une Class commence toujours par une majuscule.
   J'ai choisi de rester dans le même Package pour simplifier.

lecteur video

   Voila comment doit être votre projet

Dossier compilé en rar

Etape 3 appeler la Class lecteur depuis Main.as

   je mets un trace("ok");dans la class Lecteur
   Le code de la class Lecteur.as
   package {
       public class Lecteur extends Sprite {
           public function Lecteur() {
               trace("ok");
           }
       }
   }

  Code de la Class Main

    package {
            import flash.display.Sprite;
            import flash.events.Event;

           public class Main extends Sprite {
           private var lecteur:Sprite;

            public function Main():void {
            if (stage) init();
                    else addEventListener(Event.ADDED_TO_STAGE, init);
            }

            private function init(e:Event = null):void {
                    removeEventListener(Event.ADDED_TO_STAGE, init);

                    lecteur = new Lecteur();//je créer une instance de la class Lecteur
                    addChild(lecteur);//je la pose sur la scéne
            }
        }
    }

   Le Résultat souhaité et un ok dans la fenetre output lors du lancement de l'anime

lecteur video

Dossier compilé en rar

Etape 4 lecteur.as on bosse sur le lecteur.

    le code pour charger une vidéo est la posée sur la scène.
    lecteur.as
    package {
            import flash.display.Sprite;
            import flash.net.NetConnection;
            import flash.events.AsyncErrorEvent;
            import flash.media.Video;
            import flash.net.NetStream;

            public class Lecteur extends Sprite {

                        public function Lecteur() {
                                    var nc:NetConnection = new NetConnection();
                                    nc.connect(null);
                                    var ns:NetStream = new NetStream(nc);
                                    ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
                                    ns.play("http://www.citroen-france-tours-nord.fr/video/CITROEN-FRANCE-TOURS-NORD-PUZZLE-ENFANT.flv");
                                    function asyncErrorHandler(event:AsyncErrorEvent):void {
                                                // ignore error
                                    }
                                    var netClient:Object = new Object();
                                    netClient.onMetaData = function(meta:Object) {
                                                trace(meta.duration)
                                    };
                                    ns.client = netClient;

                                    var vid:Video = new Video();
                                    vid.attachNetStream(ns);
                                    addChild(vid);
                        }
                }
        }

    le swf qui en result

Dossier flashDevelop fin étape 4 compilé en rar

Etape 5 lecteur.as Creer de commande dans le lecteur.

La barre de commande doit disparaitre quand on n'en a pas besoin et réapparaitre si besoin.

Toujous fichier Lecteur.as En rouge les nouvelles lignes de code.

package {
            import flash.display.Sprite;
            import flash.events.Event;
            import flash.events.MouseEvent;
            import flash.net.NetConnection;
            import flash.events.AsyncErrorEvent;
            import flash.media.Video;
            import flash.net.NetStream;
            public class Lecteur extends Sprite {

                        private var menu:Sprite; //je déclare une variable se type Sprite que je nomme menu car barreDeCommande trop long.
                                                            // je l'instancie ici avec" private". comme cela elle est connu dans toute ma class lecteur.
                                                            //je sais déja que je dois y avoir accés pour la modifier (visible ou pas) en diverse fonction.

                        public function Lecteur() {

                                    var nc:NetConnection = new NetConnection();
                                    nc.connect(null);
                                    var ns:NetStream = new NetStream(nc);
                                    ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
                                    ns.play("http://www.citroen-france-tours-nord.fr/video/CITROEN-FRANCE-TOURS-NORD-PUZZLE-ENFANT.flv");

                                    function asyncErrorHandler(event:AsyncErrorEvent):void {
                                                // ignore error
                                    }

                                   
                                    var netClient:Object = new Object();
                                    netClient.onMetaData = function(meta:Object) {
                                                trace(meta.duration)
                                    };
                                    ns.client = netClient;


                                    var vid:Video = new Video(600,450); //j'ai mis de nouvelle dimension pour la vidéo pour mieux voir. taille de vidéo par défaut  320/240
                                    vid.attachNetStream(ns);
                                    addChild(vid);


                                    menu = new Sprite(); // mon menu est créer
                                    menu.graphics.beginFill(0x000000, 0.5);
//je défini le fond du dessin couleur noir transparent a 50%
                                    menu.graphics.lineStyle(2, 0xFFFFFF, 1);
//je défini le contour du dessin une line blanche de 2 pixel
                                    menu.graphics.drawRoundRect(1,vid.height - 31,vid.width - 1, 30,10,10);
//je dessine un rectangle de la taille de la video (vid);
                                    addChild(menu);
// pose sur la scene.

                                    menu.addEventListener(MouseEvent.MOUSE_OVER, menuVisible);
//je créer un écouteur si a sourie est sur le menu on fais la fonction  menuVisible
                                    menu.addEventListener(MouseEvent.MOUSE_OUT, menuInvisible);
//je créer un écouteur si a sourie n' est  plus sur le menu on fais la fonction menuInvisible
                                    menu.addEventListener(Event.ENTER_FRAME, menuDisparait);
// je créer un ecouteur qui a chaque entrée d'image fiat la fonction menuDisparait ici dans le projet 30 images secondes
                                                                                                                                      
// pour régler le nombre d'image seconde bouton projet properties dans l'onglet projet de flashDevelop
                        }

                        private function menuVisible(event:MouseEvent):void {
//fonction qui rend visible menu (la sorie est sur le menu).
                                    menu.alpha = 1;
//je passe alpha de menu a 1 c'est a dire 100%
                                    menu.removeEventListener(Event.ENTER_FRAME, menuDisparait);
// je retire l'écouteur qui déclenche la disparition de menu puise que je veux le voir.
                        }

                        private function menuInvisible(event:MouseEvent):void {
// la souris est en dehors de menu
                                    menu.addEventListener(Event.ENTER_FRAME, menuDisparait); //
je créer un ecouteur qui a chaque entrée d'image fiat la fonction menuDisparait
                        }

                        private function menuDisparait(event:Event):void {
// fonction qui fait disparaitre le menu progressivement
                                    menu.alpha -= 0.01;
// a chaque image l'apha de menu est diminué de 0.01 au bout d'une seconde (30 images)  - 0.3 donc il est transparent a 30% visible a 70%.
                                    if (menu.alpha <= 0.02) {
// si menu est transparent a plus de 98% ou visible a moins de 2%
                                                menu.alpha = 0.01;
// je passe menu est visible a 1%
                                                menu.removeEventListener(Event.ENTER_FRAME, menuDisparait);
// je retire l'écouteur qui déclenche cette fonction puisse qu'elle est arrivé a son termes.
                                    }
                        }

            }
}

    J'ai déclaré les fonction en private. elle n'ont pas besoin d'être connu ni appelée en dehors de ma Class lecteur.

    le swf qui en résulte

Dossier flashDevelop fin étape 5 compilé en rar

Etape 6   lecteur.as  .

Créer zone de texte ou apparait le temps total de la vidéo et la position lecture

Toujous fichier Lecteur.as En rouge les nouvelles lignes de code.

package {
            import flash.display.Sprite;
            import flash.events.Event;
            import flash.events.MouseEvent;
            import flash.net.NetConnection;
            import flash.events.AsyncErrorEvent;
            import flash.media.Video;
            import flash.net.NetStream;
            import flash.text.TextField;
            import flash.text.TextFieldAutoSize;
            import flash.text.TextFormat;


            public class Lecteur extends Sprite {
                        private var menu:Sprite;
                        private var ns:NetStream;
                        private var lu_txt:TextField;


                        public function Lecteur() {

                                    var nc:NetConnection = new NetConnection();
                                    nc.connect(null);
                                    ns = new NetStream(nc);
                                    ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);
                                    ns.play("http://www.citroen-france-tours-nord.fr/video/CITROEN-FRANCE-TOURS-NORD-PUZZLE-ENFANT.flv");

                                    function asyncErrorHandler(event:AsyncErrorEvent):void {
                                                // ignore error
                                    }
                                    var netClient:Object = new Object();
                                    netClient.onMetaData = function(meta:Object) {

                                                var format:TextFormat = new TextFormat();// le format texte que je vais utiliser pour mes champs de texte
                                                format.color = 0x22BB22; // couleur vert le texte

                                                var duree_txt:TextField = new TextField(); //texte qui indique le temps total de la video
                                                duree_txt.defaultTextFormat = format;
                                                duree_txt.text = "/ " + renduTemps(meta.duration); //cette info ne change pas donc la variable est créer dans la fonction
                                                duree_txt.autoSize = TextFieldAutoSize.RIGHT;
                                                duree_txt.selectable = false;
                                                duree_txt.x = menu.width - (duree_txt.width + 5);
                                                duree_txt.y = 5 ;
                                                menu.addChild(duree_txt); // est mis dans le menu

                                                lu_txt = new TextField(); //comme la position lecture change il faut pouvoir avoir accés a lu_txt plustard donc il a été instancier avant "private var lu_txt".
                                                lu_txt.selectable = false;
                                                lu_txt.defaultTextFormat = format;
                                                lu_txt.autoSize = TextFieldAutoSize.RIGHT;
                                                lu_txt.text = "00:00"
                                                lu_txt.x = duree_txt.x - lu_txt.width;
                                                lu_txt.y = 5;
                                                menu.addChild(lu_txt);

                                                addEventListener(Event.ENTER_FRAME, suivreLect); //creer un ecouteur a chaque enter Frame la fonction suivrelect est appelé
.
                                        };
                                        ns.client = netClient;

                                        var vid:Video = new Video(600,450);
                                        vid.attachNetStream(ns);
                                        addChild(vid);

                                        menu = new Sprite();
                                        menu.graphics.beginFill(0x000000, 0.7);
                                        menu.graphics.lineStyle(2, 0xFFFFFF, 1);
                                        menu.graphics.drawRoundRect(0, 0, vid.width - 1, 30, 10, 10);
                                        menu.x = 1;
                                        menu.y = vid.height - 31;

                                        addChild(menu);

                                        menu.addEventListener(MouseEvent.MOUSE_OVER, menuVisible);
                                        menu.addEventListener(MouseEvent.MOUSE_OUT, menuInvisible);
                                        menu.addEventListener(Event.ENTER_FRAME, menuDisparait);

                            }

                            private function suivreLect(evt:Event):void {
                                                lu_txt.text = renduTemps(ns.time);
                            }

                            private function renduTemps(tps:Number):String {
                                        var minutes:* = Math.floor(tps/60);
                                        var secondes:* = Math.floor(tps%60);
                                        minutes= minutes<=9 ? "0"+minutes : minutes;
                                        secondes= secondes<=9 ? "0"+secondes : secondes;
                                        return minutes+":"+secondes;
                            }


                            private function menuVisible(event:MouseEvent):void {
                                        menu.alpha = 1;
                                        menu.removeEventListener(Event.ENTER_FRAME, menuDisparait);
                            }

                            private function menuInvisible(event:MouseEvent):void {
                                        menu.addEventListener(Event.ENTER_FRAME, menuDisparait);
                            }

                            private function menuDisparait(event:Event):void {
                                        menu.alpha -= 0.01;
                                        if (menu.alpha <= 0.02) {
                                                    menu.alpha = 0.01;
                                                    menu.removeEventListener(Event.ENTER_FRAME, menuDisparait);
                                        }
                             }
               }
}

    le swf qui en résulte

Dossier flashDevelop fin étape 6 compilé en rar

   

        Page 2 pour la suite.