vendredi 18 septembre 2015

JAVA et SWF

I. Introduction


Face à l'émergence du format SWF et suite aux nombreuses questions posées sur le WEB et notamment sur le forum java concernant la création et la manipulation des fichiers Flash en Java, je vous présente cet article relatif à la création de fichiers SWF en Java.

II. Les outils nécessaires

Avant toute chose, il faut avoir les outils suivants :

III. Adobe Flash


Un outil d'édition multimédia est un logiciel auteur qui offre des fonctionnalités pour gérer les éléments multimédias et de créer le modèle d'interaction utilisateur. Un outil d'édition se démarque d'un langage de programmation dans le sens où il est supposé réduire les compétences techniques et l'expertise en programmation requises pour être productif. La plupart des outils inclue un langage de script pour la mise en œuvre de paramètres de contrôles avancés. Adobe Flash (anciennement Macromedia Flash), est une technologie permettant de créer des animations pour des sites internet.


Image non disponible

Dans la mesure où le format Flash a été développé spécifiquement pour le Web, un document Flash peut contenir des animations, des possibilités d'interactions, du son et des images fixes tout en conservant un format plus compact que beaucoup de pages Web classiques.

IV. Format SWF▲


Le format SWF (prononcé "swiff") est le format le plus couramment utilisé par les films Shockwave Flash.
Les fichiers SWF sont utilisés pour afficher des animations graphiques vectorielles, et sont largement utilisés pour la livraison de contenu multimédia et interactif sur le Web. Bien qu'elle ne soit pas aussi répandue, les fichiers SWF peuvent également se référer à un Microsoft Sidewinder profil, qui est utilisé pour stocker des paramètres pour chaque manette de jeux. Le format d'origine ne contenait que des graphiques vectoriels et des images affichées dans des cadres, ce qui permettait de jouer des animations simples. Toutefois, les extensions du format ont permis d'intégrer des vidéos et des sons dans des fichiers SWF, ainsi que de multiples formes d'interactions avec l'utilisateur. Cela signifie plus de flexibilité pour les applications Web mais aussi que, désormais, les fichiers SWF sont également utilisés dans un large panel de contenus allant du contenu multimédia en passant par les jeux en ligne ou encore les menus des DVD, etc..
Un fichier SWF est lisible par le biais d'un lecteur Flash qui se présente sous la forme d'un plugin du navigateur Internet ou bien sous forme d'un programme à installer sur le système d'exploitation.

V. JAVA

Java est un langage de programmation orienté objet. Il est connu pour sa portabilité sur plusieurs systèmes d'exploitation tels que UNIX, Microsoft Windows, etc.
Java permet de développer des applications client-serveur. Côté client, les applets sont à l'origine de la notoriété du langage.
Grâce à sa forte communauté et son nombre important de passionnés, plusieurs API ont été développées pour Java ce qui lui permet d'évoluer et d'avoir un grand succès.

VI. Quel est l'intérêt de tout ça ?

Vu que l'utilisation de Java côté serveur est répandue, on peut utiliser un lecteur extrêmement portable, léger et commun, dans le but de proposer des applications dynamiques (notamment RIA (1)) à l'interface graphique très attrayante, puisque Flash offre une plus grande portabilité.
Certainement, il est plus simple d'intégrer des animations Flash (plus difficile à gérer en Java) à des applications événementielles.
En effet, le domaine d'application est vaste, car l'utilisation de ses API peut servir à :
  • Des applications clients serveurs : créer une application dynamique en utilisant le Fash Player tout en générant le code à partir d'une plate-forme Java.
  • Des applications autonomes : un diaporama transformé en fichier SWF (Open Office).
  • Développer des outils permettant de travailler sur des fichiers Flash.
Dans mon cas, j'ai utilisé cette API pour développer un logiciel qui permet de créer des dessins 2D et des animations afin de les intégrer dans des pages Web.

VII. Flagstone Transform SWF

Il existe plusieurs API Java développées pour créer des animations Flash parmi lesquelles, on peut citer JSwiff, JavaSWF2, etc.
Dans cet article nous allons nous intéresser à l'API Open Source Flagstone Transform SWF qui permet la lecture et l'écriture de fichiers aux formats (.SWF) et Flash Vidéo (. FLV).
Cette API vous donne un contrôle complet sur la façon dont les fichiers sont créés, avec accès à toutes les fonctionnalités prises en charge par le lecteur Flash ; cependant elle reste toujours intuitive et facile à utiliser. Elle est fournie sous licence BSD(2) ce qui lui permet d'être utilisée librement tout en respectant les clauses de la licence.
Flagstone Transform SWF fournit un ensemble de classes parmi lesquelles on trouve FSMovie qui est la classe c?ur de l'API permettant de décrire ou d'analyser les fichiers SWF.

VIII. Exemple1

Dans ce premier exemple, je vais montrer comment créer un fichier SWF contenant tout simplement un rectangle.
Au début, il faut créer un objet FSMovie qui sera le conteneur de toutes les données de notre fichier.

Sélectionnez

 FSMovie movie = new FSMovie();
Cet objet va contenir aussi les informations de l'en-tête du fichier comme la version du Flash Player, la fréquence de l'animation, etc.

Sélectionnez

 movie.setFrameRate(1.0f);
Spécifions ensuite la taille de l'animation en pixels grâce à un objet de type FSBounds.

Sélectionnez

 int minX   = -5000 ;
 int minY   = -5000 ;
 int maxX   =  5000 ;
 int maxY   =  5000 ;

 movie.setFrameSize(new FSBounds(minX, minY, maxX, maxY));
Dans ce cas, la largeur de l'animation est 10.000 et la longueur est 10.000 pixels. J'ai choisi d'utiliser des valeurs négatives de manière à ce que le point de coordonnées (0,0) soit situé au milieu.
Le premier objet à ajouter à notre animation est la couleur du fond qui est par défaut blanche.

Sélectionnez

 movie.add(new FSSetBackgroundColor(FSColorTable.yellow());
On doit définir les formes à afficher. Chaque forme est présentée par un objet et chaque objet doit posséder un identifiant unique qui est utilisé pour l'identifier quand il est ajouté, mis à jour ou supprimé de la liste d'affichage du Flash player.
L'objet movie garde la trace des identifiants pour garantir leurs unicités.

Sélectionnez

 int identifierRectangle = movie.newIdentifier();
Le rectangle à afficher aura 4.000 pixels en largeur et 2.000 pixels en hauteur.

Sélectionnez

 int width  = 4000;
 int height = 4000;

Image non disponible

Pour garder le centre du rectangle au milieu, on spécifie le point supérieur gauche à (-2.000, -2.000) et le point inférieur droit à (2.000, 2.000):

Sélectionnez

 FSBounds boundsRECT = new FSBounds(-2000, -2000, 2000, 2000);
On définit les lignes du rectangle avec

Sélectionnez

 ArrayList lineStyles = new ArrayList();
 ArrayList fillStyles = new ArrayList();
  
 //La valeur 5 définit l'épaisseur du contour du rectangle
 //La couleur du contour est noir

 lineStyles.add(new FSSolidLine(5, FSColorTable.black()));

 //La couleur de remplissage du rectangle est rouge

 fillStyles.add(new FSSolidFill(FSColorTable.red()));
La construction de la forme rectangulaire nous rappelle l'utilisation de la classe Polygon en Java.

Sélectionnez

 FSShape formeRectangulaire = new FSShape();

 formeRectangulaire.add(new FSShapeStyle(1, 1, 0, -width/2, -height/2));
 
 formeRectangulaire.add(new FSLine(width, 0)); 
 formeRectangulaire.add(new FSLine(0, height)); 
 formeRectangulaire.add(new FSLine(-width, 0)); 
 formeRectangulaire.add(new FSLine(0, -height));
Pour que cette forme soit affichée par le Player, il faut lui associer un objet de type FSDefineShape

Sélectionnez

 FSDefineShape rectangle = new FSDefineShape(identifierRectangle, boundsRect, fillStyles, lineStyles, formeRectangulaire);
Toutes les formes et les objets doivent être définis avant qu'ils puissent être placés dans la liste d'affichage et affichés dans le lecteur Flash.

Sélectionnez

 movie.add(rectangle);
Spécifier la position de la forme dans la liste d'affichage du lecteur sur la première couche.

Sélectionnez

 movie.add(new FSPlaceObject(identifierRectangle, 1, 0, 0));
Visualiser tout le contenu de la liste d'affichage.

Sélectionnez

 movie.add(new FSShowFrame());
Enfin, on arrive à la création du fichier SWF qui portera le nom exemple1.swf.

Sélectionnez

 movie.encodeToFile("exemple1.swf ");

Voilà, maintenant votre premier fichier SWF est créé et non pas avec une application Adobe, mais avec votre langage orienté objet préféré Java.
Le code complet de cet exemple est disponible ici.

IX. Exemple2

Dans ce deuxième exemple, je vais montrer comment créer un fichier SWF contenant cette fois-ci tous les objets graphiques présents dans un composant SWING de type JPanel.
Dans notre cas, il s'agit uniquement d'un message " Hello word ".
L'application contient trois classes :
  • La classe Fenêtre (une JFrame) qui contient un panneau.
  • La classe StylePanneau dont notre panneau dérive. Cette classe permet d'écrire le message " Hello Word " à l'intérieur du panneau.
  • la classe GénérerSWF qui permet de construire un fichier SWF à partir d'une image.
Le code de l'application est disponible ici.
Pour pouvoir exécuter le code ci-dessus, il faut spécifier le fichier transform.jar dans votre CLASSPATH.
Pour visualiser le contenu SWF, il faut avoir le Flash Player d'Adobe.

IX-A. Implémentation

Le constructeur de la classe Fenetre contient un panneau et un menu sur lequel on clique pour lancer la génération de notre fichier.

Sélectionnez

public Fenetre() 
 {
  setBounds(100, 100, 500, 375);
  setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  getContentPane().add(mon_panneau, BorderLayout.CENTER); 
  setJMenuBar(menuBar);
  menuBar.add(newItemMenuItem);
  newItemMenuItem.addActionListener( this);
  newItemMenuItem.setText("Générer SWF");  
 }
Pour créer le fichier SWF, on doit cliquer sur le menu.
La procédure de création commence par la génération d'une image du contenu de notre panneau.

Sélectionnez

  //obtenir une Image de notre panneau
  
  BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
  Graphics2D g = image.createGraphics();  
  g.copyArea(Xpanneau,Ypanneau,largeurPanneau, hauteurPanneau, 0,0);
  monPanneau.paintAll(g);
  g.dispose();
  java.io.File fichier = new java.io.File("tempSWF.jpg");
Cette image sera enregistrée sur le disque dur au format JPG.

Sélectionnez

  String format ="jpg";
  ImageIO.write(image, format, fichier);
Cette image temporaire sera ensuite ajoutée à un objet FSMovie. Un objet de la classe GénererSWF permet la génération effective d'un fichier SWF commençant par la création d'un FSMovie :

Sélectionnez

  FSMovie movie = new FSMovie();
Et se terminant par l'écriture de ce fichier sur le disque:

Sélectionnez

  movie.encodeToFile("Exemple2.swf");
Un appel à la méthode créerContenuFlash permet d'ajouter des données à l'objet movie qui deviendra après compilation un fichier SWF :

Sélectionnez

  /*
  La classe FSImageConstructor est utilisée pour générer un objet à partir d'un fichier image. 
  Actuellement, les images au format PNG, BMP et JPEG  sont supportées.
  Pour ma part, j'ai obtenu les meilleures résultats avec le format JPEG 
  Le nom du fichier contenant l'image peut être spécifié directement dans le constructeur de la classe
  */
   
  FSImageConstructor imageGenerator = new FSImageConstructor(nomFichierImage);
Chaque objet, qui peut être une forme, un bouton, un son, etc., se voit attribuer un identifiant unique pour qu'il puisse être référencé dans des constructeurs de classe, tels que FSPlaceObject qui place la forme dans la liste d'affichage du lecteur.

Sélectionnez

  int imageId = movie.newIdentifier();
  
  //Aprés, le compteur va s'incrémenter automatiquement
  
  int shapeId = movie.newIdentifier();
On doit créer un objet pour définir notre image :

Sélectionnez

  FSDefineObject image = imageGenerator.defineImage(imageId);
Cet objet ne peut pas être affiché. Il doit être de type FSDefineShape pour être ajouté à la liste d'affichage et par la suite lue par le Flash player.

Sélectionnez

 FSDefineShape3 shapeU = imageGenerator.defineEnclosingShape(shapeId,imageId, -xOrigin, -yOrigin, new FSSolidLine(0, FSColorTable.white()));
On définit la taille du fichier SWF dans le lecteur.

Sélectionnez

  movie.setFrameSize(shapeU.getBounds());
On définit aussi la couleur de fond du fichier SWF.

Sélectionnez

  movie.add(new FSSetBackgroundColor(FSColorTable.white()));
On place l'image sur la première couche dans la liste d'affichage.

Sélectionnez

  movie.add(new FSPlaceObject2(shapeId,1, 0, 0));
A la fin, on visualise la liste.

Sélectionnez

  movie.add(new FSShowFrame());



Dans le premier exemple on a appris comment utiliser les classes fournies par l'API Transfom SWF pour dessiner des formes graphiques 2D. Par contre, dans cette application, on a vu comment on pourra dessiner en utilisant du code Java et publier ensuite nos dessins au format SWF, format qui peut être inséré facilement dans des pages Web.

X. Liens utiles

XI. Conclusion


Voilà, vous avez maintenant les bases pour créer votre première application avec l'API Flagstone Transform SWF .
Pour plus d'informations, je vous invite à consulter le site officiel de cette API.
Dans des mises à jour futures, nous verrons comment insérer un SWF dans une JFrame et également comment créer une animation Flash en Java.
Publié par à
Libellés : ,

Aucun commentaire:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)