Avec Flash CS4 sont apparues un nouveau type d’instructions utilisables en AS3 dans des projets 100% flash : les métadonnées. Ces métadonnées sont issues de Flex et s’écrivent sous la forme [Metadonnee], entre crochet.

Elles fonctionnent un peu comme des raccourcis qui seront remplacés à la compilation par du code. Dans Flex, elles permettent d’alléger fortement l’écriture du code et il en existe de nombreux types : [ArrayElementType], [Bindable], [Event], [Embed]…

Attention, toutes les metadonnées de Flex ne sont pas supportées dans Flash CS4 : seule [Embed], [SWF], [Style] et [Icon] seront utilisables dans des projets 100% Flash. Pas de [Bindable] disponible, donc (snirf…).

NOTE : Nous ne couvrirons pas Style et Icon dans ce tutoriel.

La métadonnée [Embed]

La métadonnée [Embed] permet d’intégrer des assets externes (images, sons, typo…) de manière synthétique dans vos .swf compilés avec Flash. L’utilisation de cette métadonnée va venir se substituer à l’utilisation des liaisons en bibliothèque et embarquer dans votre swf des éléments placés à l’extérieur de votre .fla.

En clair, on externalise la bibliothèque de Flash, ce qui est fort appréciable en terme de mise à jour des assets et de souplesse du flux travail  : un graphiste ou un sound designer vont pouvoir travailler sur leurs fichiers, les modifier en toute transparence pour le développeur, qui n’a plus besoin de mettre à jour les éléments de sa bibliothèque à chaque changement.

ATTENTION : un embed n’est en aucun cas du chargement dynamique d’assets : tous les assets embedés sont intégrés au .swf lors de la compilation, leur poids vient donc s’ajouter au poids du swf.

Fichiers et formats supportés :

Fonctionnement général

Au sein d’une classe, on placera ses Embed au même niveau que les déclarations des propriétés. L’embed doit être suivi immédiatement d’une déclaration de variable : l’asset embedé sera disponible via cette variable typée en Class. C’est cette classe que l’on instanciera par la suite.

Ecriture

Arrêtons-nous un instant sur l’écriture. Le paramètre essentiel à renseigner est la source de l’asset à embarquer, relative à l’endroit le code est écrit et non au swf.

1
2

[Embed (source="logo.png")];
private var LogoFXP:Class;

Erreur à la compilation : ne pas mettre de point virgule à la fin de la ligne de l’Embed !

Intégration du flex.swc

Continuons :

1
2

[Embed (source="logo.png")]
private var LogoFXP:Class;

Au moment de la compilation, la fenêtre suivante apparait :

Il faut intégrer le flex.swc pour pouvoir utiliser la métadonnée [Embed]. En effet, les classes générées par l’Embed n’existent pas dans l’API de Flash. Elles appartiennent au package mx.core du Flex SDK.

NOTE : pour ceux qui n’utiliseraient pas Flex, un fichier .swc est un ensemble de classes distribué sous forme de fichier compressé dont l’extension est SWC. De tels fichiers sont maintenant supportés dans Flash CS4, ce qui rend potentiellement utilisable n’importe quel .swc au sein d’un projet Flash, et notamment toutes les classes du SDK de Flex (par exemple, toutes les classes de gestion des webservices, qui avaient disparu de l’API de Flash existent dans Flex et sont donc dorénavant utilisables, mais ceci fera peut-être l’objet d’un autre tutoriel).
Une fois le flex.swc intégré, vous pourrez écrire dans votre code :
import mx.core.*;

Cliquez sur « Mettre à jour chemin de la bibliothèque » pour ajouter le fichier flex.swc

NOTE : $(AppConfig) correspond à ces chemins :
Windows : C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\
MAC OS : Macintosh HD:Applications:Adobe Flash CS4:Configuration:

Supprimer ou ajouter des .swc

Vous retrouverez tous les .swc intégrés à votre fichier .fla dans les paramètres de publication :

En cliquant sur le bouton paramètres, vous accédez à ce panneau :

On y retrouve le flex.swc sous l’onglet « Chemin de la bibliothèque ». Vous pouvez intégrer d’autres .swc en cliquant sur « + » et en allant chercher sur votre disque un .swc via l’icone rouge.

NOTE : seul le flex.swc est disponible dans les dossiers de config de Flash CS4. Vous pouvez télécharger gratuitement le SDK de Flex à ces URLS et ajouter d’autres .swc.

• http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3
• http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

Localisation des assets

On continue :

1
2

[Embed (source="logo.png")]
private var LogoFXP:Class;

Ce code me génère l’erreur suivante :

Attention au chemin ! L’embed se fait par rapport à l’endroit où on écrit le code, pas par rapport au swf. Ma classe Main étant dans un sous-dossier « asfiles », il me faut remonter d’un niveau pour embeder mon logo.png qui se situe au même niveau que mon .fla.

1
2

[Embed (source="../logo.png")]
private var LogoFXP:Class;

OUF, ça fonctionne !

NOTE : on peut ajouter un autre param, le mimeType, mais il n’est pas indispensable, sauf si le type d’asset que l’on embed est d’un type non-supporté par Flash. Dans ce cas, la Classe générée sera de type ByteArrayAsset qui étend la classe ByteArray.

La question des types

Les assets embedés sont du type BitmapAsset, MovieClipAsset, SoundAsset, ByteArrayAsset. Ces classes issues de Flex héritent de Bitmap, MovieClip, Sound et ByteArray. On utilisera donc ces types pour les instances de ces classes.

1
2
3
4
5
6
7
8

import mx.core.BitmapAsset
 
[Embed (source="../logo.png")]
var LogoFXP:Class;
 
var myLogo:Bitmap = new LogoFXP();
trace(myLogo is BitmapAsset); // true
trace(myLogo is Bitmap); // true

Embed et image bitmap

Les formats supportés sont .GIF, .JPEG, .JPG et .PNG
Une image bitmap embedée sera de type mx.core.BitmapAsset (Flex SDK) qui étend la classe flash.display.Bitmap. Vous pourrez typer vos instances en Bitmap.

1
2
3
4

[Embed(source="../assets/logo_fxp.png")]
private var LogoFXP:Class;
 
var monLogo:Bitmap = new LogoFXP() as Bitmap;

Embed et swf

Deux façons d’utiliser un swf :

swf en tant qu’animation

Vous pouvez embarquer une animation complète :

1
2
3
4

[Embed(source = '../assets/anime.swf')]
private var Anime:Class;
 
var monAnime:MovieClip = new Anime() as MovieClip;

C’est tout le swf qui sera instancié. La classe du swf embedé est alors une sous-classe de mx.core.MovieClipLoaderAsset. Vous pourrez typer vos instances en MovieClip.

swf en tant que bibliothèque externe

Plus intéressant, vous pouvez embeder un symbole lié d’un swf que vous utiliserez alors comme une bibliothèque externe.
Pour cela il faudra renseigner dans votre metatag la propriété symbol de votre embed, qui correspond au nom de la classe associée au symbole dans le panneau liaison de la bibliothèque du swf externe.

1
2
3
4

[Embed(source = '../assets/librairie.swf', symbol='Perso')]
private var PersoClass:Class;
 
var monPerso:MovieClip = new PersoClass() as MovieClip;

ATTENTION : petite subtilité » dans Flash CS4, si on fait une liaison avec un clip qui n’a pas d’animation (=une seule frame sur son scénario), il est de type SpriteAsset lors de l’embed, même si vous avez choisi d’étendre MovieClip dans la librairie. Dès lors qu’on met plusieurs images sur sa TimeLine, il est de type MovieClipAsset.
Soyez donc prudent avec le type que vous choisissez lorsque vous créez vos instances.

ATTENTION BIS : aucun code placé dans un symbole embedé ne sera exécuté !

ASTUCE : l’embed fonctionne aussi avec des symboles provenant de SWF compilé avec Flash 8 (AS2). Il faudra alors passer l’identifiant de liaison du symbole comme source.

Embed et son

On pourra aussi embeder du son. La classe créée hérite alors de mx.core.SoundAsset, on typera donc son instance en Sound.

1
2
3
4
5

[Embed(source="../assets/son.mp3")]
public var SonClass:Class;
 
var monSon:Sound = new SonClass() as Sound;
monSon.play();

Embed de police avec fichier de police

Sans doute une des fonctionnalité les plus intéressante, puisqu’elle permet de dépasser une contrainte liée aux symboles police, notamment l’impossibilité de choisir dans l’IDE la liste des caractères que l’on souhaite embarquer lorsque l’on crée un symbole police.

Dans cet exemple, on embarque toute la police, ce qui rajoute pas mal de poids au swf (varie en fonction de la police embarquée) :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

[Embed(source='../assets/SerifaStd-Light.otf',
fontName='maPolice',
mimeType = 'application/x-font')]
// Attention : ne pas utiliser ce nom de classe pour choisir sa typo via un TextFormat ou une CSS externe, mais la propriété fontName, dans notre cas 'maPolice'
private var font:Class;
 
var champTexte:TextField = new TextField();
champTexte.x = 100;
champTexte.y = 200;
// ne pas oublier de passer embedFonts à true !
champTexte.embedFonts = true;
champTexte.autoSize = TextFieldAutoSize.LEFT;
champTexte.rotation = 10;
champTexte.text = "Vous reprendrez bien une tasse de thé, très cher ?";
 
// on passe en premier argument du constructeur le fontName défini dans l'embed : "maPolice"
var tf:TextFormat = new TextFormat("maPolice", 22, 0xCC0000);
champTexte.setTextFormat(tf);
 
addChild(champTexte);

unicodeRange

La où ça devient intéressant, c’est que l’on va pouvoir choisir les caractères à embarquer grâce la propriété unicodeRange de l’embed. L’idée ? On passe à cette propriété la liste des caractères à embarquer sous forme d’unicode, un standard d’encodage des caractères, où à chaque caractère correspond un code.

NOTE : Vous trouverez des listes de caractères unicode avec des plages de caractères à cette url:
http://www.unicode.org/fr/charts/index.html

Vous pouvez passer à votre embed aussi bien des caractères uniques que des plages de caractères :

U+61-U+61 /* a */
U+0030-U+0039 /* 0-9 */

Ainsi pour passer les chiffres de 0 à 9, les minuscules de a à z et les majuscules de A à Z, on écrira :

1
2
3
4

[Embed(source='../assets/SerifaStd-Light.otf',
fontName='maPolice',
mimeType = 'application/x-font'
unicodeRange = 'U+0030-U+0039, U+0041-U+0051, U+0052-U+007A')]

NOTE : Trouvée lors de mes recherches pour la rédaction de ce tuto, une petite appli AIR bien pratique : UnicodeRangeFinder
http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&offeringID=11400

Il suffit de taper sa liste de caractères dans le champ du haut et l’appli vous crache l’unicodeRange juste en dessous. Des heures de recopiage de table unicode vous sont ainsi épargnées ! Merci à l’auteur, polyGeek .

Du coup, je vous met ici la liste des tous les caractères français créée avec cette appli, basée sur une liste établie en son temps par Môsieur Electrofrog (que ses pieds soit baisés) et complétée à l’occasion par mézigue (il en manquait quelques uns).

Liste originale des caractères français (pour le paypal, vous voyez avec Frog) – attention à bien intégrer l’espace !

1

 abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZàâäçéèêëîïôœùûüÿÀÂÄÇÈÉÊËÎÏÔŒÙÜ'.,;:!?"«»€&~#{}()-_`\/@[]°=+-*%µ|0123456789©®™†¤×÷æÆß…£$¥

Liste unicode :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

U+20-U+20, /*   */
U+61-U+61, /* a */
U+62-U+62, /* b */
U+63-U+63, /* c */
U+64-U+64, /* d */
U+65-U+65, /* e */
U+66-U+66, /* f */
U+67-U+67, /* g */
U+68-U+68, /* h */
U+69-U+69, /* i */
U+6a-U+6a, /* j */
U+6b-U+6b, /* k */
U+6c-U+6c, /* l */
U+6d-U+6d, /* m */
U+6e-U+6e, /* n */
U+6f-U+6f, /* o */
U+70-U+70, /* p */
U+71-U+71, /* q */
U+72-U+72, /* r */
U+73-U+73, /* s */
U+74-U+74, /* t */
U+75-U+75, /* u */
U+76-U+76, /* v */
U+77-U+77, /* w */
U+78-U+78, /* x */
U+79-U+79, /* y */
U+7a-U+7a, /* z */
U+41-U+41, /* A */
U+42-U+42, /* B */
U+43-U+43, /* C */
U+44-U+44, /* D */
U+45-U+45, /* E */
U+46-U+46, /* F */
U+47-U+47, /* G */
U+48-U+48, /* H */
U+49-U+49, /* I */
U+4a-U+4a, /* J */
U+4b-U+4b, /* K */
U+4c-U+4c, /* L */
U+4d-U+4d, /* M */
U+4e-U+4e, /* N */
U+4f-U+4f, /* O */
U+50-U+50, /* P */
U+51-U+51, /* Q */
U+52-U+52, /* R */
U+53-U+53, /* S */
U+54-U+54, /* T */
U+55-U+55, /* U */
U+56-U+56, /* V */
U+57-U+57, /* W */
U+58-U+58, /* X */
U+59-U+59, /* Y */
U+5a-U+5a, /* Z */
U+e0-U+e0, /* à */
U+e2-U+e2, /* â */
U+e4-U+e4, /* ä */
U+e7-U+e7, /* ç */
U+e9-U+e9, /* é */
U+e8-U+e8, /* è */
U+ea-U+ea, /* ê */
U+eb-U+eb, /* ë */
U+ee-U+ee, /* î */
U+ef-U+ef, /* ï */
U+f4-U+f4, /* ô */
U+153-U+153, /* œ */
U+f9-U+f9, /* ù */
U+fb-U+fb, /* û */
U+fc-U+fc, /* ü */
U+ff-U+ff, /* ÿ */
U+c0-U+c0, /* À */
U+c2-U+c2, /* Â */
U+c4-U+c4, /* Ä */
U+c7-U+c7, /* Ç */
U+c8-U+c8, /* È */
U+c9-U+c9, /* É */
U+ca-U+ca, /* Ê */
U+cb-U+cb, /* Ë */
U+ce-U+ce, /* Î */
U+cf-U+cf, /* Ï */
U+d4-U+d4, /* Ô */
U+152-U+152, /* Π*/
U+d9-U+d9, /* Ù */
U+dc-U+dc, /* Ü */
U+27-U+27, /* ' */
U+2e-U+2e, /* . */
U+2c-U+2c, /* , */
U+3b-U+3b, /* ; */
U+3a-U+3a, /* : */
U+21-U+21, /* ! */
U+3f-U+3f, /* ? */
U+22-U+22, /* " */
U+ab-U+ab, /* « */
U+bb-U+bb, /* » */
U+20ac-U+20ac, /* € */
U+26-U+26, /* & */
U+7e-U+7e, /* ~ */
U+23-U+23, /* # */
U+7b-U+7b, /* { */
U+7d-U+7d, /* } */
U+28-U+28, /* ( */
U+29-U+29, /* ) */
U+2d-U+2d, /* - */
U+5f-U+5f, /* _ */
U+60-U+60, /* ` */
U+5c-U+5c, /* \ */
U+2f-U+2f, /* / */
U+40-U+40, /* @ */
U+5b-U+5b, /* [ */
U+5d-U+5d, /* ] */
U+b0-U+b0, /* ° */
U+3d-U+3d, /* = */
U+2b-U+2b, /* + */
U+2a-U+2a, /* * */
U+25-U+25, /* % */
U+b5-U+b5, /* µ */
U+7c-U+7c, /* | */
U+30-U+30, /* 0 */
U+31-U+31, /* 1 */
U+32-U+32, /* 2 */
U+33-U+33, /* 3 */
U+34-U+34, /* 4 */
U+35-U+35, /* 5 */
U+36-U+36, /* 6 */
U+37-U+37, /* 7 */
U+38-U+38, /* 8 */
U+39-U+39, /* 9 */
U+a9-U+a9, /* © */
U+ae-U+ae, /* ® */
U+2122-U+2122, /* ™ */
U+2020-U+2020, /* † */
U+a4-U+a4, /* ¤ */
U+d7-U+d7, /* × */
U+f7-U+f7, /* ÷ */
U+e6-U+e6, /* æ */
U+c6-U+c6, /* Æ */
U+df-U+df, /* ß */
U+2026-U+2026, /* … */
U+a3-U+a3, /* £ */
U+24-U+24, /* $ */
U+a5-U+a5; /* ¥ */

Bon la liste générée par UnicodeRangeFinder est un peu bourrin, dans la mesure ou l’appli AIR n’utilise pas les plages mais énumère les caractères un par un, mais pour être franc, je n’ai pas eu le courage de la retoucher. Si quelqu’un a une heure ou deux devant lui… qu’il n’hésite pas !
Par ailleurs, pour que la liste soit utilisable dans Flash CS4, il faudrait retirer tous les commentaires et mettre les caractères les uns à la suite des autres en les séparant par des virgules. Là aussi, si il ya des volontaires…

Donc voilà comment contourner cette limitation bien pénible de l’IDE de Flash qui ne donne pas la possibilité de choisir des plages des caractères pour un symbole police.

- Mais… quoi ? Quelqu’un me parle dans mon oreillette ?
[ ... ]
- C’est toi, Electrofrog ?
[ ... ]
- Mmmmh… On me signale dans mon oreillette que cette technique ne fonctionnerait pas dans pas mal de cas… Générerait des erreurs à la compilation avec pas mal de typo…
C’est fâcheux…
Bon, il ne me reste plus qu’à vous parler de la SECONDE technique d’intégration de polices qui, me glisse-t-on dans mon oreillette, serait infaillible.

Embed de police avec fichier swf

1ere étape : création d’un fichier .swf contenant vos polices

1) Créer un nouveau fichier .fla
2) Créer un champ texte dynamique sur la scène

3) Choisir une police, un style de police, un type d’anti-alias

4) Cliquer sur le bouton « Intégration de caractères » de l’inspecteur de propriétés et choisir les plages de caractères à intégrer à votre fichier dans la liste du haut (clic pour une plage, CTRL+clic pour ajouter/retirer d’autres plages). Vous pouvez aussi taper ou coller une liste de caractères personnalisée dans le champ texte (celle fournie plus haut par exemple).

5) Si vous souhaitez utiliser d’autres polices ou d’autres styles de la même police, créez autant de champs textes que de polices ou styles à intégrer.
6) Compilez votre fichier .fla.

2eme étape : embed des polices du swf

On indique la source du swf.
Le fontName doit correspondre au nom exact écrit dans le champ « Famille » de l’inspecteur de propriétés.

Et éventuellement, si le style de la font est autre chose que « Regular », il vous faudra renseigner la propriété fontStyle (pour « italic ») et/ou fontWeight (pour « bold »).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

[Embed(source='../assets/Calibri_font.swf',
fontName = 'Calibri'
)]
private static var CalibriRegular:Class;
 
[Embed(source='../assets/Calibri_font.swf',
fontName = 'Calibri',
fontStyle = 'italic'
)]
private static var CalibriItalic:Class;
 
[Embed(source='../assets/Calibri_font.swf',
fontName = 'Calibri',
fontWeight = 'bold'
)]
private static var CalibriBold:Class;

Puis pour utiliser votre police :

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var champTexte:TextField = new TextField();
champTexte.x = 100;
champTexte.y = 200;
champTexte.embedFonts = true;
champTexte.autoSize = TextFieldAutoSize.LEFT;
champTexte.rotation = 10;
champTexte.text = "Vous reprendrez bien une tasse de thé, très cher ?";
 
var tf:TextFormat = new TextFormat("Calibri", 22, 0xCC0000);
// italique
tf.italic = true;
champTexte.setTextFormat(tf);
 
addChild(champTexte);

ou bien

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var champTexte:TextField = new TextField();
champTexte.x = 100;
champTexte.y = 200;
champTexte.embedFonts = true;
champTexte.autoSize = TextFieldAutoSize.LEFT;
champTexte.rotation = 10;
champTexte.text = "Vous reprendrez bien une tasse de thé, très cher ?";
 
var tf:TextFormat = new TextFormat("Calibri", 22, 0xCC0000);
// gras
tf.bold = true;
champTexte.setTextFormat(tf);
 
addChild(champTexte);

NOTE : j’ai rencontré des soucis avec certaines fonts opentype, j’investigue actuellement pour résoudre le problème. Faites-moi éventuellement part de vos découvertes.

La métadonnée [SWF]

En bonus, quelques mots sur la metadonnée SWF, qui permet de définir les paramètres de publication directement dans le code AS et dont voici les propriétés :

[SWF width="«Number»",
height="«Number»",
widthPercent="«Number»",
heightPercent="«Number»",
scriptRecursionLimit="«Number»",
scriptTimeLimit="«Number»",
frameRate="«Number»",
backgroundColor="«Number»",
pageTitle="«String»"]

Ainsi pour obtenir un SWF de 800*600 avec une cadence de 60 img/s et un fond rouge, vous écrirez :

1

[SWF (witdh="800", height="600", frameRate="60", backgroundColor="#CC0000")]

Voilà, j’espère que ce tuto vous sera utile, n’hésitez pas à poster vos commentaires et à me signaler d’éventuelles erreurs.

Quelques ressources utiles

http://help.adobe.com/fr_FR/Flash/10.0_UsingFlash/WSFD77A256-0DE1-46c7-86FB-CC4A8AE2EAA6.html#WS38BB2984-1EE7-4d07-9389-966CC3B90DB9

http://livedocs.adobe.com/flex/3/html/help.html?content=metadata_3.html

http://www.bit-101.com/blog/?p=853