Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Introduction à la librairie Degrafa

Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Compatible Flex Builder 3. Cliquer pour en savoir plus sur les compatibilités.Par d.exter (Denis Exter), le 17 février 2009

Dans ce tutoriel nous allons voir comment intégrer la librairie open source de Degrafa dans un projet avec Flex Builder, et ses différentes fonctionnalités de bases. Le but premier de Degrafa est de permettre aux développeurs et aux designers de créer des graphiques dynamiques en MXML, sans avoir recours à l’actionscript. Avec Degrafa, on peut définir différentes formes géométriques tel que des lignes, cercles, ellipses, polygones, rectangles, path, etc…, aussi facilement que si l’on définissait un composant en MXML.

La librairie peut être téléchargée à l’adresse suivante :

http://www.degrafa.org/code/

La documentation, ainsi que de nombreux exemples peuvent être trouvés ici :

http://www.degrafa.org/index.html

Nous allons commencer par définir quelques objets de bases pour utiliser Degrafa :

Surface : est le container de base (UIComponent), qui va contenir tous les éléments d’une composition.

GeometryGroup : est utilisé dans la surface et permet de grouper des objets de Degrafa ensemble, il est basé sur un Sprite, il y a donc toutes les propriétés et événements du Sprite.

GeometryComposition : est très similaire au GeometryGroup, mais il permet de grouper des objets Degrafa à n’importe quel niveau de l’application, même à la racine. Il est également possible de rendre cette composition dans n’importe quel autre objet graphique, à l’aide de la propriété « graphicsTarget ».

Fill : permet de remplir/colorié les formes géométriques que vous créer, il existe plusieurs type de remplissage, tel que :

- « SolidFill » qui définit une couleur qui sera appliqué à une forme géométrique.

- « LinearGradientFill » qui permet de définir un dégradé linéaire.

- « RadialGradientFill » qui permet de définir un dégradé radial depuis le centre de la forme géométrique.

- « ComplexFill » qui permet de rendre multiple objets « IGraphicsFill » comme étant un simple objet « fill ».

- « BlendFill » qui est utilisé pour enveloppé des objets « IFill » dans un « ComplexFill »

- « BitmapFill » est utilisé pour remplir une forme géométrique avec un bitmap ou n’importe quel autre « DisplayObject »

Stroke : définit les propriétés d’une ligne. L’objet « Stroke » peut être définit en MXML, mais doit ensuite être attaché à un autre objet, pour qu’il apparaisse dans l’application. Il existe différents « Stroke » :

- « SolidStroke » qui permet de définir les propriétés d’une ligne telle que sa couleur, les alphas, etc…

- « LinearGradientStroke » permet de spécifier un gradient linéaire.

- « RadialGradientStroke » permet de spécifier un gradient radial.

Nous allons maintenant voir comment intégrer la librairie Degrafa dans un projet Flex, Pour ce faire, téléchargez la librairie à l’adresse citée ci-dessus, et décompressez l’archive à l’endroit de votre choix.

Si vous êtes familier avec SVN vous pouvez télécharger le code source directement depuis :

http://degrafa.googlecode.com/svn/branches/Origin/Degrafa/

Créons notre projet Flex à l’aide de Flex Builder pour cela il faut cliquer sur le menu « File » –> « New » –> »Flex project », nommer votre projet « Elephant ».

Il faut ensuite faire un clique droit sur votre projet Flex et ouvrir le panneau des propriétés, puis sélectionner « Library path » dans le panneau des propriétés, et cliquez sur « ADD SWC… », et pointer sur la librairie que vous venez de télécharger « Degrafa_Beta3.1_Flex3.swc ».

Degrafa possède un nom d’espace « http://www.degrafa.com/2007 » qui peut être utilisé pour simplifier le code, en le déclarant comme ceci :

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application     
      xmlns:mx="http://www.adobe.com/2006/mxml" 
      xmlns ="http://www.degrafa.com/2007"     
      layout="absolute">      
</mx:Application>

Nous allons ensuite comme premier exemple, dessiner une ellipse, que nous allons colorier en jaune, et tracer son contour avec un trait noir :

<Surface>
	<fills>     
	    <SolidFill id="solidFill1"  color="0xFFFF00"/> 
	</fills>
	<strokes>
		<SolidStroke id="solidStroke1" color="0x000000"/>
	</strokes>
	<GeometryGroup>
<Ellipse height="100" width="150" fill="{solidFill1}" stroke="{solidStroke1}"/>
</GeometryGroup>
</Surface>

On a donc définit une surface, qui va contenir les définissions de la couleur de remplissage, ainsi que les paramètres du trait de contour de notre ellipse. Nous ajoutons ensuite un GeometryGroup, qui dans notre simple exemple va contenir notre ellipse, à laquelle nous attachons à l’aide de ses propriétés « fill » et « stroke », les définissions du remplissage et du trait de contour.

De la même manière on aurait pu définir la couleur de remplissage avec un dégradé comme ceci :

<Surface>
	<fills>     
	    <RadialGradientFill   id="radialGradientFill1">         
        	<GradientStop color="0xFFFF00"/>         
        	<GradientStop color="0xFF3300"/>     
    	</RadialGradientFill> 
	</fills>
	<strokes>
		<SolidStroke id="solidStroke1" color="0x000000"/>
	</strokes>
	<GeometryGroup>
<Ellipse height="100" width="150" fill="{radialGradientFill1}" stroke="{solidStroke1}"/>
</GeometryGroup>
</Surface>

Les deux exemples illustrés ci-dessus sont des exemples simple pour vous montrer les bases d’utilisation de la librairie Degrafa, vous pouvez bien entendu créer des exemples beaucoup plus complexes. Il y a de nombreux exemples sur le site de Degrafa, à l’adresse suivante :

http://www.degrafa.org/samples/

Dans le projet que je joins ci-dessous, il y a un exemple plus complexe, qui utilise l’objet « path » pour définir des formes complexes. Les coordonnées définissant l’éléphant proviennent d’un fichier SVG (Scalable Vector Graphics) téléchargé à l’adresse suivante :

http://www.openclipart.org/

Vous en trouverez de nombreux autres, essayer de les utiliser dans un projet Flex.

SVG est un format de données conçu pour décrire des ensembles de graphiques vectoriel et basé sur XML. Ce format est spécifié par le W3C. L’avantage des images vectorielles est qu’elles peuvent être agrandie à l’infini, sans subirent de pixellisation. Il est donc très intéressant de pouvoir les utiliser grâce à Degrafa.

Telecharger les sources de l'articles.

Voir la conversation associée sur le forum