Sujets sur : sharedfonts

Cours ActionScript 3 ‘sharedfonts’

Créer des swf polices partagées – embed fonts en pure ActionScript

2 questions

Ecrit le 3 mai par Matthieu
Publié dans le(s) sujet(s) ActionScript 3 |Cours AS3

Le tutoriel flash de cette semaine vous propose une nouvelle méthode rapide pour créer des swf contenant des polices de caractères ou embed fonts.

C’est une solution qui utilise des outils entièrement gratuits comme FDT ou encore FlashDevelop.

Voici ce que vous allez apprendre dans ce tutoriel ActionScript :

  • La technique en pure ActionScript pour créer des swf contenant des polices de caractères.
  • Cette solution est compatible quelque soit l’éditeur ActionScript : Adobe CS5, FDT, FlashDevelop…
  • Comment créer des swf embed fonts ou polices partagées, directement à partir de fichiers ttf.
  • La méthode pour associer plusieurs styles (italique, gras, gras-italique) à la même police.
  • Une technique unique pour associer une police gras et une police italique à partir de fichiers ttf différents à une embed font identique dans flash !
  • La stratégie pas à pas pour le chargement dynamique du swf contenant les embed fonts – polices partagées.
  • Et surtout comment utiliser les embed fonts dans une application flash.

Cette formation AS3 vous permettra de créer des swf contenant des polices partagées, pour les charger dynamiquement et les utiliser dans votre application ou jeu flash.

Embed Fonts / Polices partagées

Version démonstration

Ci-dessous, un exemple d’application flash qui charge un swf « embed fonts » et les utilise pour afficher du texte.

Télécharger le code source complet

Télécharger “Embed Fonts pure AS3”

ex-embed-fonts.zip – Téléchargé 689 fois – 413,22 Ko

Consultez le tutoriel original sur le site scottgmorgan.com.

Consultez les méthodes embed fonts :

Quelle technique utilisez-vous pour créer vos swf embed fonts ?

Nous avons vu plusieurs tutoriels flash pour créer des swf embed fonts – polices partagées (swfmill, FDT, pure AS3, Adobe CS5).

Dites-moi votre solution préférée et pourquoi dans les commentaires ci-dessous !

Comment utiliser des polices Bitmap en AS3 avec Bitmap Font Renderer ?

Commentaires fermés sur Comment utiliser des polices Bitmap en AS3 avec Bitmap Font Renderer ?

Ecrit le 22 décembre par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

Le cours AS3 de cette semaine vous propose de découvrir une nouvelle technique pour utiliser vos polices de fichiers ttf.

C’est à dire de transformer, avec ActionScript, une police ttf en police Bitmap utilisable par une application flash.

Voici ce que vous allez apprendre dans ce Cours ActionScript :

  • Comment utiliser vos polices systèmes à partir d’un fichier ttf.
  • Comment créer ces polices sous forme Bitmap, c’est à dire les enregistrer dans une image png.
  • La technique pour utiliser le framework BMFontRenderer pour afficher rapidement du texte personnalisé.

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

BMFontRenderer

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

Dans ce cours AS3 nous allons voir comment utiliser des polices bitmap en AS3.

Grâce à un petit package, il s’appelle : bitmap font renderer.

C’est-à-dire nous allons utiliser des polices personnalisées de type TTF.
Donc des polices que vous avez sous Windows, sous Linux ou sous Mac.

Ensuite, ces polices, nous allons les intégrer sous forme bitmap.
C’est-à-dire, à partir d’une image PNG, et sous flash, ce sera un bitmap qui sera affiché sur la scène.

Passons tout de suite à la pratique.

Alors nous avons le package bitmap front renderer.
Je vous enverrai le viens vers le site de l’auteur pour pouvoir le télécharger.

Dans un premier temps, il faut créer notre image PNG qui va contenir l’ensemble des caractères de la police.
Et également il nous faut créer le fichier .FNT qui contient les coordonnées et la taille de chaque caractère de la police.

Pour cela, vous pouvez utiliser soit bitmap font générator avec l’URL qui s’affiche ou alors yero.
Je vais utiliser Hiero pour créer l’image PNG qui contient tous les caractères de notre police.

Vous lancez le logiciel. Son fonctionnement est très simple.

Vous choisissez votre police parmi toutes celles qu’il y a sur votre ordinateur.

Il y en a beaucoup beaucoup beaucoup sur le mien.
Ensuite vous sélectionnez ascii ??
Vous faites un reset cash pour intégrer plus ou moins de glyphes donc de caractères dans votre police.
Nous, on va en intégrer beaucoup donc avec les caractères accentués et les chiffres, les majuscules.

Il y a également la possibilité d’intégrer des effets, ça c’est vraiment génial !
Soit vous en mettez, soit vous en mettez pas.
Vous pouvez enlever l’effet. J’ajoute un petit effet shadow, c’est très sympa.
Je lui ai donné une couleur. Vous pouvez définir la couleur de base de votre police.

Ensuite, il ne vous reste plus qu’à sauvegarder le fichier FNT sur votre disque dur.
C’est aussi simple que cela et votre police est créée.

Qu’est-ce que ça vous donne comme résultat ?
Et bien vous avez une image PNG qui contient tous les caractères de votre police :
les chiffres
les lettres majuscules, minuscules
les caractères accentuées
etc. etc.

Bien évidemment, Hiero est gratuit.
Il fonctionne avec la machine Java donc il vous suffit de télécharger Java gratuitement et ce logiciel.

Regarder bien la configuration que j’ai utilisé c’est très important sinon ça ne fonctionnera pas très bien.

Ensuite, passons à la partie actionscript.

La partie actionscript qu’est ce qu’il faut faire ?

C’est très simple, on utilise des ressources embed donc on importe le fichier FNT que je vais vous montrer.
Le fichier FNT contient les coordonnés des lettres comme je vous le dis.
Pour chaque lettre, il contient la taille et les coordonnées.

Voilà le nom de la police, si on a pris bold ou italique, vous avez remarqué que je n’ai pas pris ni bold ni italique donc je ne pourrais pas l’utiliser.

Pareil le fichier PNG vous l’importez en embed ressource.
Cela permet de définir la couleur de fond de mon SWF.
Rien de bien méchant, comme d’habitude notre classe main qui étend Sprite.
Une fois que tout est prêt, on lance l’intégration de la police.

On va utiliser la classe bitmap font qui est ici.
Cette classe, on charge, on utilise new font data qu’on stock dans un byteArray font data.

C’est notre fichier FNT qui contient les coordonnées.
On le lit et on parse le fichier obtenu de font : les coordonnées de chaque caractère de la police.

On le parse, on affiche le nombre de glyphes parsés.
Ici on va en trouver 156.
Quand on utilisera le monster debuggueur, on aura également 156.

Et il nous reste plus qu’à ajouter l’image PNG qui contient les caractères de la police dans notre objet bitmap PNF font.

C’est la classe de base, créer un bitmap data, avec sa taille, on utilise la transparence, la couleur.
Et notre texte on le positionne.

Voici du texte, je peux rajouter des chiffres.
Également, on créé un deuxième texte avec des caractères accentués, des caractères spécifiques.
Et on les ajoute, on ajoute nos bitmap.
C’est-à-dire que ça fonctionne avec un bitmap data. La police est au format bitmap.
Il nous reste plus qu’à lancer la compilation et vous voyez notre police.

C’est votre police personnalisée en fichiers TTF qui est sur votre disque dur qui s’affichera dans l’application flash de votre internaute.

Tout simplement !

Ca peut être utile dans certains quand on ne veut pas s’embêter à exporter la police dans un fichier SWF.

C’est une solution très rapide qui permet d’utiliser des polices bitmap.

Voilà donc dans le monster debugeur, ça marche il y a 256 glyphes.

Je recharge voilà.

Comme d’habitude, vous trouverez le code source complet de bitmap front renderer sous cette vidéo.

Est ce que vous avez déjà utilisé les polices bitmap dans vos applications flash ?

Dites moi ça dans les commentaires sous cette vidéo.

C’est un cours ActionScript très court et très simple.
Les polices bitmap peuvent être très pratiques et en plus c’est très rapide à utiliser.

Je vous dis à très bientôt sur actionscript-facile.com[/spoiler]

Version démonstration

Ci-dessous un exemple tout simple d’utilisation des polices bitmap 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 “Bitmap Font Renderer”

BMFontRenderer.zip – Téléchargé 595 fois – 225,27 Ko

Télécharger la dernier version de BMFontRenderer.

Télécharger le logiciel gratuit Hiero pour créer les images png des polices de caractères.

Et vous, avez-vous déjà utilisé les polices bitmap dans vos applications flash ?

Je suis curieux de voir vos applications flash avec des polices bitmap.

Postez-les dans les commentaires ci-dessous !

Comment utiliser les polices embarquées en Flash ActionScript 3 avec FDT PowerFlasher ?

1 question

Ecrit le 19 juillet par Matthieu
Publié dans le(s) sujet(s) Cours AS3 |Editeur ActionScript

Dans un article précédent, vous avez appris à créer des swf contenant des polices partagées avec FlashDevelop et swfmill.

Après utilisation, cette méthode s’avère longue et compliquée. Comme vous, c’est cette solution que j’utilisais au départ.

Puis j’ai découvert l’éditeur FDT. C’est un logiciel très efficace, il permet de créer très rapidement et simplement des swf contenant vos polices de caractères.

Un vrai jeu d’enfant !

Vous choisissez les polices à inclure dans le swf, leurs styles et il suffit de cliquer sur le bouton « create » pour obtenir un swf de polices embarquées.

Ce n’est pas plus compliqué que cela.

Dans le cours vidéo de cette semaine, je vous propose de découvrir la création de swf de polices embarquées ou partagées avec FDT PowerFlasher.

Voici ce que je vais vous apprendre :

  • Pourquoi créer des swf contenant uniquement des polices de caractères, quel est l’intérêt.
  • Comment utiliser FDT PowerFlasher pour créer des swf de polices embarquées ou partagées.
  • Pour ceux qui n’ont pas de licence FDT, la technique pour créer des swf de polices de caractères gratuitement. Et comment automatiser la création.
  • Pour ceux qui préfèrent le logiciel Adobe FLash CS5, vous saurez comment concevoir des swf de polices partagées directement avec Adobe CS5.

A la fin de cette formation actionscript, vous connaitrez plusieurs méthodes pour créer des swf de polices partagées. Et surtout, vous saurez quand cela est nécessaire ou non.

Exemple d’application flash

Ci-dessous, l’application charge un fichier fonts.swf qui contient 3 polices de caractères différentes. Puis le flash affiche du texte en utilisant ces polices embarquées.

Téléchargez le code source polices embarquées en AS3

Vous trouverez l’ensemble du code source commenté pour ce cours Actionscript.

Télécharger “FDT Polices partagées en AS3”

ex-FDT-polices-embarquees.zip – Téléchargé 906 fois – 298,06 Ko

Le site DaFont pour télécharger des polices de caractères originales.

Téléchargez l’éditeur FDT PowerFlasher.

Avez-vous des polices de caractères préférées ?

Partagez-les via les commentaires ci-dessous.

Et ajoutez le lien vers votre application flash pour montrer un rendu visuel de leurs utilisations.

Comment utiliser des polices partagées via des swf externes ?

3 questions

Ecrit le 9 mars par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

Dans cette vidéo, nous allons apprendre à créer des polices partagées dans des swf externes avec le logiciel swfmill.

Ensuite, ces swf sont chargés par votre application, en fonction des besoins de l’internaute.

Puis, vous pouvez utiliser les polices de caractères les plus originales pour vos applications flash.

Ci-dessous, voici un exemple d’application qui utilise des polices partagées.

Mêmes si ces polices de caractères ne sont pas installées sur votre navigateur. Celles-ci s’affichent correctement dans l’application 🙂

Téléchargez le code source complet de l’exemple :

Télécharger “Polices partagées avec swfmill et FlashDevelop”

shared_fonts.zip – Téléchargé 652 fois – 368,46 Ko

Téléchargez l’éditeur ActionScript FlashDevelop.

Téléchargez le logiciel swfmill.

Et vous, comment créez-vous vos swf de polices partagées ?

Peut-être que vous utilisez Adobe Flash ou FDT (le plus rapide 🙂 ) ?

Dites-le moi via les commentaires ci-dessous.

Comment utiliser du texte dynamique en AS3 avec TextField ?

22 questions

Ecrit le 21 septembre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

Pour travailler avec du texte dans Flash, il est nécessaire d‘utiliser une multitude de classes différentes !

En effet, les classes ( TextFieldAutoSize, TextFieldAlign, TextFieldType, TextFormatFont, TextField etc… sont utiles pour définir la mise en forme d’un champ texte.

Dans ce tutoriel, nous allons créer le Composant AS3 TextField pour simplifier la manipulation d’un champ texte.

Ce composant étendra tout simplement la classe de base TextField et ajoutera des fonctionnalités très intéressantes !

I – Cahier Des Charges Fonctionnel du TextField

Comme d’habitude, nous passons à la rédaction du CDCF (Cahier Des Charges Fonctionnel).

La liste des fonctionnalités pour un champ de type UITextField est déjà disponible de manière native en ActionScript.

La seule chose qui change, c’est la façon de les implémenter.

Nous passons donc directement à la création du Cahier Des Charges Techniques.

II – Cahier Des Charges Techniques du TextField

Pour cela, nous allons créer la classe UITextField. Nous lui ajoutons des méthodes supplémentaires. Celles-ci nous permettront de formater le texte sans passer par la classe TextFormat ni les autres classes annexes.

Voici l’ensemble des méthodes de la classe UITextField :

  • Méthode changeFormat : elle permet de définir le formatage du texte ou d’un groupe de caractères à l’aide d’une seule et unique méthode.
  • Méthode changeLetterFormat : cette méthode permet de définir le format d’une seule lettre.
  • Méthode getLetterFormat : elle permet de récupérer le format d’une seule lettre.
  • Getter/ Setter appelé font : pour changer et récupérer la police de caractère. L’embarquement des polices sera géré automatiquement par le setter qui déterminera si la police est une police système ou non.

 

  • Méthode convertToInput : pour convertir le texte en champ de saisie.
  • Méthode convertToDynamic : pour convertir le texte en champ dynamique.
  • Nous implémentons également des méthodes pour changer l’alignement et le redimensionnement automatique du texte : alignCenter, alignRight, alignLeft, alignJustify, autoSizeRight, autoSizeLeft, autoSizeCenter, autoSizeNone. Des méthodes qui nous simplifient l’utilisation des classes TextFieldAutoSize et TextFieldAlign.

 

 

  • Getters / Setters maxWidth et maxHeight : permettent de définir une largeur et une hauteur maximale.
  • Méthode destroy : et enfin nous implémentons une méthode qui permet de détruire proprement notre composant. Elle ressemble de très près à la méthode destroy de la classe UIComponent.

 

Conclusion

Nous disposons maintenant d’un champ texte avec une mise à jour de son formatage grandement facilitée.

A l’utilisation, le composant UITextField se révèle être une véritable bénédiction pour manipuler un champ texte.

Évolutions des fonctionnalités

Pour améliorer notre Composant AS3 TextField, vous trouverez ci-dessous un exemple d’utilisation.

A vous de jouer !

TextField avec des fonts dynamiques

Je vous propose d’utiliser des fonts (polices) dynamiques pour vos textes.

Amusez-vous en utilisant des polices originales : découvrez un vaste choix de polices gratuites sur dafont. Elles ne sont généralement pas disponibles dans les polices de bases des systèmes d’exploitations (Windows, Linux, MAC). Il est donc nécessaire de les charger dans le Flash Player.

La lecture de cet article : Utiliser des polices partagées dynamiquement en AS3, devrait grandement vous faciliter la tâche!

L’Editeur ActionScript FDT 4.0 simplifie énormément la création des swf de polices partagées : Téléchargez le guide d’utilisation de l’Editeur ActionScript FDT.

Sources commentées

  • com.actionscriptfacile.ui.text.UITextField.as
  • UITextFieldExample.as

Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre leur fonctionnement.

Vous pouvez télécharger le fichier zip :

Télécharger “Component TextField Framework actionscript-facile”

component_textfield_framework_actionscript-facile.zip – Téléchargé 1267 fois – 74,15 Ko

Et vous, comment utilisez-vous le texte / TextField en AS3 ?

Quelles classes avez-vous développé pour simplifier la création des champs textes dynamiques avec Flash ?

Je serais ravis de voir vos différentes implémentations. Utilisez les commentaires juste en dessous pour partager votre code.

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.text.UITextField.as » bookmarkname= »com.actionscriptfacile.ui.text.UITextField.as « ]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »UITextFieldExample.as » bookmarkname= »UITextFieldExample.as »]

[/codesyntax]