Le blog de Jean David TECHER, un Réunionnais à Saint-Priest/Lyon

Gazb a aujourd'hui ajouté de nouveaux exemples sur son tutoriel sur MinG. C'est surtout la beauté de ces petits nouveautés que j'aime bien. L'URL est comme toujours http://www16.brinkster.com/gazb/ming/

I - MOTIVATIONS

Comme lundi c'était mon anniversaire, je ne travaillais pas donc j'ai décidé de faire un petit film sur Simba, mon gros chat d'amour! Seulement je voulais faire à partir des films issus de mon appareil numérique en. Je me suis donc compliqué la tâche, histoire de me remplir la journée comme il faut. J'ai donc décidé de tout faire en MinG.

Je me suis surtout inspiré de ce billet http://www.ioncannon.net/php/110/using-flash-video-metadata-to-display-annotations/

II - CODE PHP et FICHIER XML

II.a) le code php

Je me suis pour celà inspiré du code fourni en faisant pour moi dans un fichier flahsplayer.php

<?php
function createImage($img)
{
  $shape = new SWFShape();
  $shape->setRightFill($shape->addFill(new SWFBitmap(fopen($img, "rb"))));
  $shape->drawLine(16,0);
  $shape->drawLine(0,16);
  $shape->drawLine(-16,0);
  $shape->drawLine(0,-16);
  return $shape;
}

function createButton($movie, $name, $loc, $script)
{
  $button = new SWFButton();
  $button->addShape(createImage("control_" . $name . ".png"), SWFBUTTON_UP);
  $button->addShape(createImage("control_" . $name . "_blue.png"), SWFBUTTON_DOWN | SWFBUTTON_HIT | SWFBUTTON_OVER);
  $button->addAction(new SWFAction($script), SWFBUTTON_HIT);
  $item=$movie->add($button);
  $item->moveto($loc,248);
}

Ming_setScale(20.0000000);
ming_useswfversion(7);

$movie = new SWFMovie(7);
$movie->setDimension(320,270); // width x height
$movie->setBackground(0,0,0);
$movie->setRate(8);

createButton($movie, "start", 10, "_root.videoStream.seek(0);");
createButton($movie, "pause", 40, "_root.videoStream.pause(true);");
createButton($movie, "play", 70, "_root.videoStream.pause(false);");

$strAction = "
this.createTextField('video_txt', 999, 0, 0, 100, 100);
video_txt.autoSize = 'left';
video_txt.multiline = true;
video_txt.textColor = 0xeeeeee;

stop();
nc=new NetConnection();
nc.connect(null);
videoStream=new NetStream(nc);
videoStreamItem.attachVideo(videoStream);
videoStream.setBufferTime(10);
videoStream.play('http://www.davidgis.fr/download/swf/simbafilm.flv');
videoStream.pause();

videoStream.onCuePoint = function(infoObject)
{
  video_txt.text = '' + infoObject.name + '\n';
  if( infoObject.parameters != undefined )
  {
    video_txt.text += ' ' + infoObject.parameters['mydata'] + '\n';
  }
  else
  {
    video_txt.text = ' \n';;
  }
};
";

$stream = new SWFVideoStream();
$stream->setDimension(320, 240);
$item=$movie->add($stream);
$item->setName("videoStreamItem");
$movie->add(new SWFAction($strAction));

$movie->nextFrame();//video_txt.text += 'Info: undef\n';

$movie->save("simbafilm.swf");
?>

II.b) le code XML

Ici j'ai adapté le code à mon usage personnel. J'ai donc créé un fichier tags.xml dont le contenu est

<tags>
    <metatag event="onCuePoint" overwrite="true">
        <name>SIMBA DANS TOUTE SA SPLENDEUR</name>
        <timestamp>1000</timestamp>
        <parameters>
            <mydata>TOUJOURS PRET A JOUER</mydata>
        </parameters>
        <type>event</type>
    </metatag>
    <metatag event="onCuePoint" overwrite="true">
        <name> </name>
        <timestamp>4000</timestamp>
        <parameters>
            <mydata>..UN PETIT RIEN L'AMUSE...</mydata>
        </parameters>
        <type>event</type>
    </metatag>
    <metatag event="onCuePoint" overwrite="true">
        <name>MAIS OUI, MAIS OUI...!</name>
        <timestamp>10000</timestamp>
        <parameters>
            <mydata>FELIN REDOUTABLE, SPLENDIDE</mydata>
        </parameters>
        <type>event</type>
    </metatag>
    <metatag event="onCuePoint" overwrite="true">
        <name>Simba</name>
        <timestamp>12000</timestamp>
        <parameters>
            <mydata>JEUNE, BEAU, VIF...</mydata>
        </parameters>
        <type>event</type>
    </metatag>
    <metatag event="onCuePoint" overwrite="true">
        <name> </name>
        <timestamp>14000</timestamp>
        <parameters>
            <mydata>ADMIREZ LA RAPIDITE ET LA PRECISION DU FELIN</mydata>
        </parameters>
        <type>event</type>
    </metatag>

II.c) Ajout des boutons

Comme sur le billet de l'auteur pour avoir mes boutons, j'ai téléchargé les images

wget http://www.famfamfam.com/lab/icons/silk/icons/control_pause.png
wget http://www.famfamfam.com/lab/icons/silk/icons/control_pause_blue.png
wget http://www.famfamfam.com/lab/icons/silk/icons/control_start.png
wget http://www.famfamfam.com/lab/icons/silk/icons/control_start_blue.png
wget http://www.famfamfam.com/lab/icons/silk/icons/control_play.png
wget http://www.famfamfam.com/lab/icons/silk/icons/control_play_blue.png

III - Conversion du fichier .MOV en .FLV

III.a) Commandes et souci avec ffmpeg

Normalement les deux lignes à saisir pour la conversion

mencoder -mc 0 -noskip -oac pcm -ovc lavc -ffourcc DX50  -vop scale=320:240 -o simba.avi pict0943.mov
ffmpeg -i simba.avi -ab 56 -ar 44100 -b 200 -r 15 -s 320x240 -f flv simbafilm.flv

Ce qui n'était pas le cas pour moi! Donc je suis allé sur http://doc.ubuntu-fr.org/formats_non-libres#activer_le_support_du_mp3_et_de_l_amr_dans_ffmpeg. J'ai donc adapté mon /etc/apt/source.list pour avoir le dépôt multiverse comme il faut et ensuite j'ai fait

cd /usr/local/src
apt-get install dpkg-dev libimlib2-dev texi2html liblame-dev libfaad2-dev libmp4v2-dev libfaac-dev \
libxvidcore4-dev debhelper libogg-dev libvorbis-dev liba52-dev libdts-dev libsdl1.2debian-all \
libraw1394-dev libdc1394-13-dev libtheora-dev libgsm1-dev
wget http://blogger.rukker.org/dl/ffmpeg_enable_amr.patch.bz2
apt-get source ffmpeg
cd ffmpeg-0.cvs20050918 <----- le nom de répertoire est différent pour moi
bzcat ../ffmpeg_enable_amr.patch.bz2 | sudo patch -p1
DEB_BUILD_OPTIONS=”risky” sudo dpkg-buildpackage
cd ..
dpkg -i ffmpeg_0.cvs20060823-5ubuntu1_i386.deb

Et la nouvelle installation de ffmepg m'a permis de pouvoir vérifier que j'avais bien le support --enable-mp3lame

IV - AJOUT DES METATAGS DU FICHIER XML AU FICHIER FLV

IV.a) Pré-requis

J'avais déjà ruby d'installé donc je pouvais passer à la suite

IV.b) Compilation de FFVTOOL2

flvtool2 est l'utilitaire qui va me permettre d'ajouter de combiner mon fichier xml à mon fichier flv. J'ai donc commencé à l'installer

wget http://rubyforge.org/frs/download.php/9225/flvtool2_1.0.5_rc6.tgz
tar xvzf flvtool2_1.0.5_rc6.tgz

J'ai ensuite suivi les instructions fournis dans le fichier flvtool2_1.0.5_rc6/README

ruby setup.rb config
ruby setup.rb setup
sudo ruby setup.rb install

IV.c) Utilisation de flvtool2

Il m'a suffit de faire

flvtool2 -AUtP tags.xml simbafilm.flv

A ben j'ai pas résisté !

J'ai trouvé le logo de la Dapper sur ce lien http://siteinternet.perso.cegetel.net/dapper.svg dont je tiens à remercier l'auteur pour le splendide travail de dessin qu'il a fait!. De très belle qualité, il faut le dire! Je me suis donc renseigner sur Inkscape pour pouvoir ajouter des trucs en plus sur la conversion SVG vers SWF. Finalement j'ai opté pour libsvgtoswf que l'on peut trouver à http://gordon.sourceforge.net/libsvgtoswf/. J'ai téléchargé/compilé/installé ce dernier! C'est passé !

apt-get install libming-dev
cd /home/david/download/0
tar xvzf libsvgtoswf-0.3.0.tar.gz
cd libsvgtoswf-0.3.
./configure && make && make install

L'utilitiare swgtoswf livré avec a marché à merveille! Il m'a suffit de copier dapper.svg dans le répertoire test des sources ensuite de faire

root@bremko:/home/david/download/libsvgtoswf-0.3.0/test# svgtoswf
Converting ./svg/*.svg to ./swf/*.swf...
converting svg/tiger.svg to swf/tiger.swf...
converting svg/tux.svg to swf/tux.swf...
converting svg/dapper.svg to swf/dapper.swf...

Par contre pour ramener le SWF en code php avec swftophp de Ming 0.3.0 ça passait pas trop bien! Du coup sur une autre machine, j'ai installé la cvs, je l'ai compilé et c'est ce dernier que j'ai utilisé!

swftophp dapper.swf > dapper.php

Il a fallut faire quelques modifications à ce script: redimensionnement, ajout pour la décompositon des diverses frames! J'ai ajouté un petit message en haut, ainsi qu'une bulle de dialogue, façon débutant! Pour les lunettes, j'ai fait le dessin sous Inkscape! Voili voilou pour mes premiers pas de graphiste en Flash pour le gros débutant que je suis

Stuart ANDERSON -principal développeur de Ming - vient de sortie une nouvelle version pour Ming en date du 21/11/2006 à 17h20 , heure France métropolitaine. Concernant le nom en beta 1 et pas en beta 2, il considère que les divers modifications antérieures à cette date dans le dépôt CVS constituait la beta 1. Celle-ci est disponible à l'adresse suivante

https://sourceforge.net/project/showfiles.php?group_id=18365

0.4.0-beta2 - 2006-11-21 - NEW

• Preliminary support for building RPM packages
• New PHP code that builds for PHP4 and PHP5
• Added missing SWFMovieClip class in PHP
• New tool, ttftofft, for producing ming formast fonts
• Allow output of SWF version 8
• Better SWF parser (utilities).
• NEW function: SWFMovie_protectWithPassword()
• preprocessor products of 'makeswf' are now named after output filename and frame# (ie: "out.swf.frame0.pp")
• Automake-based build, for portability's sake (libtool)
• Ming_setWarnFunction and Ming_setErrorFunction now return the previously-set value.
• More documentation !
• Start of a test suite!
• makeswf now provides an __SWF_VERSION__ macro for use in cross-version ActionScript code.
• NEW functions: SWFDisplayItem_getMatrix(), SWFPosition_getMatrix(), SWFMatrix_getScaleX(), SWFMatrix_getRotate0(), SWFMatrix_getRotate1(), SWFMatrix_getScaleY(), SWFMatrix_getTranslateX(), SWFMatrix_getTranslateY(), SWFShape_moveScaledPenTo().