ImportSVG

Fri, 27 Jan 2012 15:59:34 +0000

Bonjour,

Cette bibliothèque AS3 permets d'importer des fichiers au format SVG et SVGZ en provenance du logiciel Inkscape (Testé avec la version 0.48)

Elle possède les caractéristiques et fonctionnalités suivante :

- Gestion des chemins
- Gestion des rectangles
- Gestion des cercles
- Gestion des bitmap
- Gestion des contours et remplissage
- Gestion des types de terminaisons
- Gestion des types d'intersections
- Gestion des dégradés linéaires et radiales
- Gestion les flou x et y liés et non liés
- Respect de la structure des calques/sous-calques/groupe
- Gestion des noms des calques
- Renvoi un signal indiquant la progression du traitement par l'api Flash
- Benchmark intégré
- Possibilité de modifier l'ordre des calques
- Conversion en bitmap
- Renvoi un MovieClip encapsulant d'autres MovieClip correspondant chacun à un des calques du SVG

------------------------------------------------------------------------------------------------------------------------------------
Avant propos.
Pour fonctionner pleinement ImportSVG utilise deux autres bibliothèques :

//Permets de décompresser le format svgz
gzip (http://probertson.co...ts/gzipencoder/)

//Permets la lecture des images bitmap intégrées dans inkcape
B64 (http://jpauclair.net/)

J'ajoute à cette bibliothèque un fichier de test nommé Lama.svg

Préparer un fichier SVG ou SVGZ :

Lors de l'enregistrement de votre dessin dans Inkscape choissisez l'une des deux options suivantes :

// Il s'agit d'un format classique
- SVG Inkscape(*.svg)

// Il s'agit d'un format compressé
- SVG Inkscape compressé(*.svgz)

------------------------------------------------------------------------------------------------------------------------------------

Utilisation :

1/ Pour importer un fichier voici les étapes nécéssaires.

- créer une classe nommé "Main" qui étend la classe MovieClip
- importer la classe ImportSVG
- instancier la classe ImportSVG
- charger notre fichier (ici dans le répertoire svg/Lama.svg)
- ajouter la classe dans la liste d'affichage

En code cela donne :

package {

  import flash.display.MovieClip;

  import importSVG.ImportSVG;

  public class Main extends MovieClip {

  private var _Svg:ImportSVG;

   public function Main(){

   //Création de l'object

   var _Svg:ImportSVG = new ImportSVG();

   //On Charge le fichier

   _Svg.Chargement ("svg/Lama.svg");//svg et svgz acceptés

   //Affichage

   addChild(_Svg);

  }

}

}

De la même manière, pour traiter un fichier svgz il vous suffit de le spécifier dans l'extension.

   //On Charge le fichier

   _Svg.Chargement ("svg/Lama.svgz");//svg et svgz acceptés

2/ Différentes options sont disponibles.

a/ Benchmark

Cet appel de fonction renvoie dans un "trace()" le temps de traitement. Le code doit se placer entre l'instanciation de la classe et le chargement du fichier tel que l'exemple suivant :

//Création de l'objet

var _Svg:ImportSVG = new ImportSVG();

//Benchmark intégré

_Svg.Bench(true);//Affichage en ms dans un trace

//On importe -- (inclus le traitement des données)

_Svg.Chargement ("svg/Lama.svg");//svg et svgz acceptés

//Affichage

addChild(_Svg);

En fonction des capacité de calcul de l'ordinateur client le temps sera plus ou moins rapide. Chez moi cela affiche :
Temps de traitement : 1806.ms

b/ Traitement partiel

Il convient de différencier 3 étapes :
- le chargement
- le traitement
- l'affichage

A savoir que le fichier sera obligatoirement chargé dans sa totalité. Cependant une première fonction consiste à n'en traiter qu'une partie pour des raison d'optimisation. Pour cela nous utiliserons le nom des calques principaux. En effet, un calque peut posséder des sous-calques mais les noms de ces derniers seront ignorés.

Ci-dessous la liste des calques du lama :

Nous avons accès à 4 calques principaux : Lama_Tete, Pierres, Boule, Lama Corps.

Pour n'afficher que la tête et le corps nous écrirons le code suivant :

//Création de l'object

var _Svg:ImportSVG = new ImportSVG();

//1-Traite et affiche une partie des calques (noms des calques définis dans inkscape)

_Svg.TraitementCalque("Lama Tete", "Lama Corps");

//On importe

_Svg.Chargement ("svg/Lama.svg");//svg et svgz acceptés

//On affiche

addChild(_Svg);

! Bien entendu les sous-calques correspondants aux calques principaux sont affichés.

Pour mesurer l'efficacité de cette option nous pouvons ajouter le Benchmark de l'étape a.
Chez moi le résultat est :
Temps de traitement : 661.ms. Nous avons donc gagné environs 1 seconde grace au traitement partiel.

c/ Affichage partiel

L'affichage est une option qui intervient après le traitement. Par défaut nous aurons donc un traitement de l'ensemble du graphisme. Ce n'est donc pas une option d'optimisation.
L'interêt de cette option est de n'afficher qu'une partie du graphisme mais en conservant l'ensemble du graphisme dans le MovieClip. Par le suite nous verrons qu'il est possible de réafficher les parties ainsi caché. Cela peut se révéler utile pour l'animation.

Cette option se place comme les autres entre l'instanciation de la classe et le chargement. On utilise le nom des calques principaux d'Inkscape. (plus d'explication dans le "b/ Traitement partiel")

Le code est le suivant :

//Création de l'object

var _Svg:ImportSVG = new ImportSVG();

//Affiche une partie des calques (noms des calques définis dans inkscape)

_Svg.AffichageCalque("Lama Tete", "Lama Corps");

//On importe

_Svg.Chargement ("svg/Lama.svg");//svg et svgz acceptés

//On affiche

addChild(_Svg);

Enfin, vous pouvez tester l'option a/ Benchmark pour vous rendre comptes que le temps de traitement correspond au traitement total.

d/ Respect de l'ordre d'origine

Voici une option qui permets de redéfinir l'ordre d'affichage des calques.
Pour l'activer il faut ajouter le code suivant :

_Svg.OrdreOrigine(false);//Defaut = true;

 

Cette option fonctionne en binome avec l'affichage partiel.
Imaginons que l'on souhaite placer le calque "Pierres" devant le calque "Lama Tete", nous devrons utilisez l'affichage partiel en modifiant l'ordre des noms déclarés.

Voici ce que vous devrez alors écrire :

//Affiche une partie des calques (noms des calques définis dans inkscape)

_Svg.AffichageCalque("Lama Corps", "Lama Tete", "Pierres", "Boule");

avec l'option "_Svg.OrdreOrigine(true)", l'affichage aurai été le même, mais avec l'option à "_Svg.OrdreOrigine(false)" voici le résultat :

Les oreilles du lama sont bien derrière la structure en pierre.

e/ Conversion Bitmap

Deux options sont permises.

1- Nous allons commencer par la copie de l'image affiché en bitmap. Ce dernier sera encapsulé dans un MovieClip comme précédement mais nous perdrons la structure par calque expliqué dans le chapitre des f/ Les Evènements.
Pour rappel un affichage Bitmap demande moins de ressources processeur qu'un affichage vectoriel en contrepartie de l'utilisation de plus mémoires.

Voici la manière de déclarer la copie en Bitmap entre l'instanciation de la classe et le chargement :

// Conversion en bitmap

_Svg.ToBitmap(true);//Créer une copie bitmap à la taille originale du svg

2- Il est possible de demander à flash de placer en mémoire une image bitmap temporaire correspondant au vecteur. On gagne ainsi en performance à l'affichage tout en conservant son image vectoriel. Cette option particulière est documenté ici : http://help.adobe.co...l#cacheAsBitmap

Pour l'activer vous devrez ajouter le code suivant :

// Conversion en bitmap

_Svg.ToBitmapCache(true);//Créer une copie bitmap en cache qui se réadapte lorsque le clip subit une transformation

f/ Les Evènements

Jusque là nous avons affiché notre fichier SVG/SVGZ sans avoir le moyen de savoir à quel moment l'affichage du vecteur aurait lieu.
Voici de quoi palier à cela.

1/ onSvgComplete
Cette fonction va nous permettre d'avoir un signal pour dire à quel moment le MovieClip contenant le SVG est prêt à être affiché.
Nous devons ajouter un écouteur à notre classe ImportSVG pour entendre le signal, voici le code à ajouter entre l'instanciation de la classe et le chargement du fichier :

_Svg.addEventListener("SVGComplete", onSvgComplete);//Ensemble des opérations terminées

 

Si vous n'êtes pas familier avec les écouteurs, je vous invite à vous documenter.
Pour les autres vous aurez compris que nous appelons la fonction onSvgComplete une fois le MovieClip prêt.
! Attention nous devrons procéder à quelques modifications sur le code précédent
- Dabord nous ajoutons les classes nécessaire à l'utilation des évènements :

import flash.events.Event;

import flash.events.ProgressEvent;

- Puis nous allons rendre accessible l'instance de classe ImportSVG par l'ensemble des fonctions de la classe Main et ainsi accéder à ses méthodes dans la fonction "onSvgComplete" :

private var _Svg:ImportSVG;

 

- Ensuite nous enlèverons la ligne qui nous permettais auparavant d'afficher le MovieClip :

//On affiche

addChild(_Svg);

- Puis nous ajoutons la nouvelle fonction. Seulement pour afficher le MovieClip nous n'afficherons plus directement la classe mais nous utiliserons une nouvelle méthode "GetClip();" :

//Ensemble des opérations terminées

private function onSvgComplete(pEvt:Event):void {

trace("complete");//Affiche le message "complete"

//On récupère notre clip

var MonClip:MovieClip = _Svg.GetClip();

//On l'affiche

addChild(MonClip);

}

Voici le code dans sa totalité :

package {

  import flash.display.MovieClip;

  import importSVG.ImportSVG;

   //Outil

import flash.events.Event;

import flash.events.ProgressEvent;

   public class Main extends MovieClip {

  private var _Svg:ImportSVG;

   public function Main(){

   //Création de l'object

   _Svg = new ImportSVG();

   _Svg.addEventListener("SVGComplete", onSvgComplete);//Ensemble des opérations terminées

   //On importe

   _Svg.Chargement ("svg/Lama.svg");//svg et svgz acceptés

  }

  //Ensemble des opérations terminées

  private function onSvgComplete(pEvt:Event):void {

   trace("complete");

   //On récupère notre clip

   var MonClip:MovieClip = _Svg.GetClip();

   //On l'affiche

   addChild(MonClip);

  }

}

}

2/ Manipuler les MovieClip en fonction de leur nom

Pour compléter cette nouvelle fonction je vais vous montrer comment manipuler les calques qui se trouvent à l'intérieur du MovieClip.
D'abord dans la fonction "onSvgComplete()" nous allons controler combien de Calques principaux possède notre MovieClip :

trace(MonClip.numChildren);

 

Cette fonction affiche "4" pour notre lama.

Nous pouvons constater que les calques sont nommés par le code suivant :

trace(MonClip.getChildAt(0).name);

trace(MonClip.getChildAt(1).name);

trace(MonClip.getChildAt(2).name);

trace(MonClip.getChildAt(3).name);

Nous pouvons aussi constater que si nous utilisons un affichage partiel, les autres calques sont toujours présents même s'ils ne sont pas affichés. Il suffit alors de manipuler leur valeurs alpha pour controler leur visibilité.
Par exemple je ne souhaite afficher que la tête :

_Svg.AffichageCalque("Lama Tete");

 

Dans ma fonction onSvgComplete je souhaite réafficher le corps :

//Ensemble des opérations terminées

private function onSvgComplete(pEvt:Event):void {

//On récupère notre clip

var MonClip:MovieClip = _Svg.GetClip();

//On l'affiche

addChild(MonClip);

var lng:int = MonClip.numChildren;

for(var i:int=0; i<lng; i++){

  if(MonClip.getChildAt(i).name == "Lama Corps") MonClip.getChildAt(i).alpha = 1;

}

}

2/ onTraitementProgress

L'évènement onTraitementProgress envoie régulièrement des signaux lors du traitement du SVG/SVGZ car cela peut prendre parfois plusieurs secondes.

Pour l'utiliser on ajoute l'écouteur suivant entre l'instanciation de la classe et le chargement :

_Svg.addEventListener("SVGTraitementProgress", onTraitementProgress);//Progression de la phase de traitement

 

Puis nous ajoutons la fonction qui est executé lorsqu'un signal en envoyé :

//Progression de la phase de traitement

private function onTraitementProgress(pEvt:Event):void {

trace(pEvt.target.Pourcentage);//Affiche le pourcentage de traitement effectué

}

Nous pourrions ainsi créer une barre de traitement.

3/ Itérations et optimisation

La fonction "onTraitementProgress" à posé un problème inhérent au fonctionnement de l'Api de dessin de flash. En effet lors d'une utilisation intensive de cette Api, toutes actions dans le programme est alors momentanément stoppées. Cela stoppe à la fois les animations affichées, l'exécution de code ou la diffusion d'évènements. Pour palier à ce problème, un système d'arrêts très brefs du traitement à été mis en place afin de reprendre la main. Ces arrêts brefs sont contrôlés par une fonction qui s'appel IterrationBP avec une valeur associée (BP = barre de progression). La valeur indiquée correspond à un nombre d'arrêts brefs. Une valeur de 15 correspond à un arrêt bref tout les 15 vecteurs traités. Et de cette manière la barre de progression se mets à jour tout les 15 vecteurs traités.

Pour régler cette option vous devrez écrire le code suivant entre l'instanciation de la classe et le chargement du fichier :

//L'api de dessin flash bloque l'affichage durant le traitement. Une solution à été trouvé pour conserver la main mais demande plus de ressources

//Itération de la barre de progression

//Moins la valeur est élevée plus souvent l'affichage sera rafraîchi

//IterrationBP(int);//Defaut 30

_Svg.IterationBP(15);//Généralement entre 15 et 40

! Faites des test avec le Benchmark pour optimiser la valeur

g/ Simple décompression d'un svgz

Si l'on souhaites simplement décompresser son fichier SVGZ et ainsi récupérer un fichier de type XML vous pouvez utiliser l'appel à fonction suivant :

//On décompresse seulement

var MonXML:XML = _Svg.Decompresse (MonURLLoader);//Accepte un ByteArray provenant d'un SVGZ

! Pour rappel un fichier SVG est écrit en language XML, donc manipulable simplement avec l'AS3

h/ Traitement sans chargement du fichier

Si vous avez déjà votre propre bibliothèque de chargement vous serez sans doute interressé par cette option qui vous permettra de continuer à l'utiliser.
Cette option évite le chargement et passe directement à l'étape de traitement. Pour cela il faut l'alimenter avec données de type XML. Cette option se couple très bien avec la simple décompression d'un SVGZ.

Voici le code à placer :

//on traite seulement (si on passe par notre propre function de chargement)

_Svg.Analyse (MonXML);//Accepte un XML (Rappel un format SVG est un XML)

------------------------------------------------------------------------------------------------------------------------------------

Pour finir je vous propose de constater l'utilisation de cette bibliothèque sur un projet concret :
http://www.kibodio.c.../bouge_ta_boule

Vous pouvez observer que la barre de chargement est suivi de la barre de traitement. C'est donc une manière simple d'extérioriser ses graphismes et de les mettre à jour rapidement.

+++

Respiration d'un personnage (sans code)

Mon, 23 Jan 2012 11:43:54 +0000

Une simple interpolation pour simuler la respiration d'un personnage.
Simple… tout part du torse, le mouvement se transmet ensuite à la tête…

Flux RSS des 10 dernières soumissions

ImportSVG

Respiration d'un personnage (sans code)