Sujets sur : flash formation

Le cours AS3 de cette semaine vous propose de découvrir une technique pour utiliser les fichiers SVG dans flash.

C’est à dire , avec du code ActionScript, utilisé un fichier SVG pour de l’affichage (bannière, image, symbole…) dans votre application flash.

Voici ce que vous allez apprendre dans ce Cours ActionScript :

• Comment utiliser un fichier SVG.
• Comment modifier un fichier SVG, un fichier SVG est à la base un fichier XML.
• La technique pour afficher un fichier SVG dans du Flash.
• Quelles sont les possibilités d’actions sur un fichier SVG, une fois chargé dans flash.

Cette formation AS3 vous permettra d’être capable d’utiliser des fichiers SVG directement dans Flash.

SVG Renderer

[spoiler]Bonjour à tous ici Matthieu pour actionscript-facile.com

Nous allons voir une librairie SVG runderer qui nous permet d’utiliser des fichiers SVG dans flash avec l’actionscript 3.

Tout d’abord qu’est-ce qu’un fichier SVG et à quoi ça sert ?

Un fichier SVG c’est comme un fichier XML.
Dans ce fichier XML, il y a tout un tas de balises et de données qui permet d’avoir toutes les informations pour reconstruire une image.

Le fichier SVG est supporté par tous les navigateurs récents Google Chrome, Firefox Internet Explorer.

Il est très utile pour créer à la volée des images.
C’est à dire que dans votre flash, vous pouvez avoir un jeu flash. En fonction des actions de l’utilisateur, vous avez un paysage ou un symbole, je sais pas, une étoile, une porte typique.
En fonction des actions du joueur, vous pouvez carrément créer à la volée ce graphisme tout simplement en modifiant un fichier XML.
C’est un peu plus compliqué que ça dans la pratique pour créer un fichier SVG mais dans l’idée c’est ça.

Passons tout de suite à la pratique pour voir comment le flash interprète un fichier SVG et fini par l’afficher.

Donc ça c’est le contenu d’un fichier SVG que j’ai créé.
C’est le logos AS3 facile tout simplement.

Vous remarquez des balises comme un fichier XML donc rien de bien sorcier et après il y a tout un tas d’informations qui permet de construire l’image.
Il fait presque 2mega ce fichier voilà à quoi ça ressemble.

Ensuite le code.
Nous allons donc utiliser une librairie qui s’appelle SVG runderer que j’ai trouvés sur Google code.
Je vous donnerais le lien en direct à la fin de cette vidéo.

On part comme d’habitude de notre classe main qui étend Sprite.

Ca, c’est pour la librairie SVG, de l’initialiser tout simplement.
C’est l’initialisation de la librairie ensuite on construit notre UI (interface utilisateur).
Je mets juste un petit texte de chargement en cours du fichier SVG.
Vu qu’il est assez long, c’est pour informer l’utilisateur.

Et j’utilise la classe url loader avec des événements complets onProgress, onError.
Puis je lance le chargement de mon image SVG donc c’est la bannière AS3 facile comme vous je vous le disais.

Une fois que ce chargement est terminé c’est là où je crée et j’utilise la classe SVG document.

J’écoute des événements. Si vous regardez la signature de cette classe plusieurs événements sont diffusés.
Il y a un événement envoyé lorsque :
un élément est supprimé
un élément est ajouté
le rendu est effectué
l’analyse est terminée
le passage du fichier XML au fichier SVG
l’analyse du fichier XML au SVG commence.

Tous ces événements sont diffusés et ensuite nous avons tout un tas de méthodes disponibles.

Cette classe étend SVG.
Ce qui nous permet d’avoir des méthodes pour modifier la taille du fichier SVG, donc sa hauteur, ses positions en X et en Y, sa largeur.

Il y a plusieurs méthodes qui peuvent nous être utiles.
On créé une nouvelle instance de la classe SVG document.
On écoute l’événement parseComplete pour modifier notre fichier SVG une fois qu’il a été chargé et affiché sur la scène.

Donc on parse notre fichier SVG, on le récupère comme ça .curenttarget.data c’est-à-dire il provient de notre URL loadeur.

Ici on a chargé notre fichier SVG.
Et là on le parse et on l’ajoute sur la scène comme un display objet.
Quand l’analyse du fichier est terminée donc du fichier XML au SVG, il nous reste plus que – bon on change le texte – ça c’est le pourcentage de chargement en cours création de l’affichage, déplacement du fichier SVG, on le déplace.

Attention c’est pas les numbers si on garde ces getter Setters, c’est un string qui l’attend donc on lui transmet un String pour changer la position de notre fichier SVG.

Je vais le mettre en position 63 63 et on masque le texte.

Après il nous reste plus qu’à lancer la compilation tout simplement.

Le fichier SVG se charge.
Il va se déplacer.
Notre fichier SVG a été construit.
Si on regarde à partir d’un fichier XML, finalement on va l’ouvrir ici avec l’éditeur.
Donc c’est un fichier XML tout bête, et bien derrière on obtient une image qui est construite directement.

C’est un package vraiment très simple ce Framework, très facile à utiliser parce que à créer ça doit être assez compliqué.

Je m’y connais pas assez donc très simple à utiliser ça vous permettra, vous voyez ce fichier fait une taille assez conséquente.
Il fait un poids de 1méga 1,76 méga donc c’est dans des cas très particulier.

Dans ce cas précis, il vaut mieux utiliser une image PNG, du vectoriel avec un fichier SWF.

Le SVG permet de créer à la volée dynamiquement des graphismes pour un jeu flash, pour une application flash ça peut être sympa, le concept peut être sympa.

Voilà, ce cours est très simple.
Ensuite comme d’habitude, sous ses vidéos vous trouverez le code source complet de cette application SVG runderer.

Est-ce que vous vous avez déjà utilisés des fichier SVG dans vos applications flash ?

Est ce que vous les créez à la volée, vos images, vos paysage de fonds, d’application flash, grâce aux fichiers SVG ?

Dites moi cela dans les commentaires, justes sous ses vidéos.

Je vous dis à très bientôt pour le prochain cours actionscript-facile.com[/spoiler]

Version démonstration

Et voici l’exemple d’utilisation d’un fichier SVG dans flash !

Télécharger le code source du cours AS3

Vous trouverez l’ensemble du code source commenté pour vous aider.

Télécharger le code source des classes SVG Renderer.

Et vous, avez-vous déjà utilisé des fichiers SVG dans vos applications flash ?

Est ce que vous générez à la volée les éléments graphiques dans votre application flash ? (grâce à l’utilisation des fichiers SVG)

Postez un lien vers vos applications flash dans les commentaires ci-dessous !