Image embed avec @Embed

Bonjour,
Je charge des images dans mon application flex avec cette commande:

Code:

---

1 2	<mx:Image source="@Embed('../resources/fs.png')" />

---

Tout fonctionne bien. Cependant je charge beaucoup d'images et plutôt que d'avoir à recopier à chaque fois le chemin de l'image, je voudrais créer une constante avec le path des ressources:

Code:

---

1 2 3

private const RESOURCES:String = "../resources/"; [..] <mx:Image source="@Embed({RESOURCES}+'fs.png')"/>

---

Ça parait tout bête mais j'arrive pas à charger ma ressource de cette manière.. il trouve pas l'image. J'ai essayé de mettre "@Embed({RESOURCES+'fs.png'})", "@Embed({RESOURCES}'fs.png')", etc... mais je trouve pas comment faire et j'ai rien trouvé sur le net ..

Ça m'étonnerait que tout le monde fasse à chaque fois un copier/coller du path! Donc si quelqu'un sait comment faire je veux bien savoir ^^

Merci

Bonjour,

Je n'ai jamais essayé de tester le databinding mais je pense pas qu'il soit possible de le faire car il s'agit de Tag MetaData.

Un autre solution serait de déclarer une classe Assets où tu mets tous tes images à l'intérieur.

Code:

---

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

public final class Assets { [Embed(source="MonImage.png")] [Bindable] public static const var MON_IMAGE:Class;   /** * Constructor */ public function Assets() { } }

---

Ainsi tu pourras l'utiliser un peu partout :

Code:

---

1 2	<mx:Image source="{Assets.MON_IMAGE}" />

---

En espérant que cela pourra t'aider

++

Salut !

Premièrement, et je ne sais pas si c'est une contrainte liée à ton projet, je pense que si tu as un bon nombre d'images à afficher (et à fortiori si elles sont grosses), il serait plus intéressant justement de ne pas les embarquer.
Afin d'avoir un swf plus léger et de n'appeler les images qu'au moment précis où tu en as besoin.
La taille du swf va diminuer de manière significative et le premier chargement sera plus rapide.

Si cette solution est envisageable, tu pourrais alors déclarer ta variable RESOURCES de la même manière, et déclarer tes images plutôt de cette façon :

Code:

---

<mx:Image id="fs" creationComplete="init(event);" />

---

Et par la suite créer une fonction qui ferait à peu prés ça :

Code:

---

1 2 3 4 5

function init(ev:Event):void { var img:Bitmap = ev.target.content as Bitmap; img.source=RESOURCES+img.id+"png" ; }

---

Enfin je sais pas trop, c'est qu'un idée ;)

EDIT : Ou un code dans le genre, je suis au boulot là, et sans FlexBuilder pour l'auto-complétion moi je suis perdu :mrgreen:

D'accord avec Arnaud sur les conséquences de l'intégration des images dans le swf.

Sinon à mon avis tu y étais presque. En effet tu peux créer un fichier de "resources" (fichiers .properties) et ensuite insérer ces ressources avec le mot clef @Resource.

Bonjour et désolé pour le retard de ma réponse, je ne pensais pas que ce serait si rapide :roll:

Citation:

---

Envoyé par ellene

Bonjour,

Je n'ai jamais essayé de tester le databinding mais je pense pas qu'il soit possible de le faire car il s'agit de Tag MetaData.

Un autre solution serait de déclarer une classe Assets où tu mets tous tes images à l'intérieur.

Code:

---

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

public final class Assets { [Embed(source="MonImage.png")] [Bindable] public static const var MON_IMAGE:Class;   /** * Constructor */ public function Assets() { } }

---

Ainsi tu pourras l'utiliser un peu partout :

Code:

---

1 2	<mx:Image source="{Assets.MON_IMAGE}" />

---

En espérant que cela pourra t'aider

++

---

En effet je ne vois nul part de databinding et ça n'a pas l'air possible :/
Je n'ai pas très bien compris ce que tu me conseillais de faire avec ta classe Assets. Je charge toutes les images dont j'ai besoin dans cette classe à l'init de mon application et je les utilise dans chaque composant ? en faisant:

Code:

---

1 2 3

<mx:Image id="image1" source="Assets.IMAGE_1" /> <mx:Image id="image2" source="Assets.IMAGE_2" /> etc...

---

Citation:

---

Envoyé par arnaud.tlse

Salut !

Premièrement, et je ne sais pas si c'est une contrainte liée à ton projet, je pense que si tu as un bon nombre d'images à afficher (et à fortiori si elles sont grosses), il serait plus intéressant justement de ne pas les embarquer.
Afin d'avoir un swf plus léger et de n'appeler les images qu'au moment précis où tu en as besoin.
La taille du swf va diminuer de manière significative et le premier chargement sera plus rapide.

Si cette solution est envisageable, tu pourrais alors déclarer ta variable RESOURCES de la même manière, et déclarer tes images plutôt de cette façon :

Code:

---

<mx:Image id="fs" creationComplete="init(event);" />

---

Et par la suite créer une fonction qui ferait à peu prés ça :

Code:

---

1 2 3 4 5

function init(ev:Event):void { var img:Bitmap = ev.target.content as Bitmap; img.source=RESOURCES+img.id+"png" ; }

---

Enfin je sais pas trop, c'est qu'un idée ;)

EDIT : Ou un code dans le genre, je suis au boulot là, et sans FlexBuilder pour l'auto-complétion moi je suis perdu :mrgreen:

---

Les images que je souhaite intégrer dans mon swf font 126Ko (une soixantaine) au total et les 2 polices d'écritures 120Ko, tu crois que ça ait une importance significative sur le chargement du swf?
C'est vrai que certaines images ne sont pas nécessaires suivant le cas d'utilisation .. (qui change suivant la taille du swf embarqué).
Cependant j'ai peur que trop d'aller-retours sur le serveur pour demander ces petites icônes n'entraine des problèmes .. en plus j'ai déjà eu qq problèmes de sécurité d'accès aux images :/ lorsque le swf est embarqué sur un autre site qui veut accéder à mon serveur.

En tout cas en ce qui concerne ton code, ça m'a l'air très bien cette méthode :D
Il suffit donc d'avoir l'id du composant égale au nom du fichier (ce qui est déjà plus ou moins le cas en fait).
Je vais essayer de voir de ce côté-là et aussi peut-être limiter le nombre d'images à intégrer au swf.. (qui fait 570Ko pour l'instant).

Citation:

---

Envoyé par jylaxx

D'accord avec Arnaud sur les conséquences de l'intégration des images dans le swf.

Sinon à mon avis tu y étais presque. En effet tu peux créer un fichier de "resources" (fichiers .properties) et ensuite insérer ces ressources avec le mot clef @Resource.

---

Tu veux dire créer un fichier de resources dans mon projet Flex? Du coup je n'aurais pas besoin d'avoir un "path" et un simple @Resource suffirait? Je vais aussi jeter un oeil à ça :p, si jamais je décide de toujours intégrer les images au swf!

Merci beaucoup de vos réponses ^^

Si tu veux éviter les allers-retours au serveur pour charger des images, tu peux aussi embarquer tes images dans un swf que tu compile séparément (une librairie partagée, en quelque sorte), et ensuite le charger dynamiquement pour avoir accès aux images. Ton swf principal sera plus léger, et tu fais une petite phase de chargement avec barre de progression pour faire joli :mrgreen:

Et bien décidément tu en as des idées intéressantes Titouille ! :mrgreen:

Lorsque le widget de lecture s'affichait, je lançais le chargement d'un fichier xml pendant lequel un composant du genre "Sablier" tournait.

A la suite du chargement du xml, je peux charger l'autre swf contenant les images. Le "Sablier" tournera plus longtemps, mais comme le swf principal s'affiche plus vite, ça reviendra au même :)

C'est une solution un peu intermédiaire aux autres. Le swf est moins lourd comme le proposait Arnaud et je peux charger les images comme me l'a conseillé Ellene ou Jylaxx ^^

J'ai l'impression qu'aujourd'hui, avec les lignes haut-débits, les gens ne pensent plus forcément à bcp alléger leurs applications web... Quand j'ai commencé à faire du flash, il y a de celà quelques années maintenant, la lib partagée était le seul moyen d'avoir une appli de base légère et de pouvoir y inclure des ressources plus lourdes en cours de route. ça a du me marquer :lol:

Et juste pour dire, la solution d'Ellene utilise bien le dataBinding {Assets.MON_IMAGE}, et normalement c'est fonctionnel. Les images sont compilées avec la classe dans le swf, grace au metatag [Embed(...)], puis associée à la variable de type Class qui suit la déclaration Embed... Le metatag [Bindable] permet de spécifier que la variable de type Class pourra être accessible dans le mxml. Jim_Nastiq avait utilisé ça dans un projet sur lequel on avait tous 2 travaillé donc je confirme que c'est faisable.

[Edit]Je pense que le mix entre l'utilisation d'une classe de liaison telle qu'expliquée par Ellene, le tout dans un swf séparé, pourrai être du plus bel effet :mrgreen:[/Edit]

Bon ben j'ai ma solution, reste plus qu'à le faire.
Je repasserai ici pour mettre le code au cas où ça serve à quelqu'un.

Merci à vous ;)

Heu, fait attention, quand même...

Je m'explique... Si tu crée une classe "Assets" qui va permettre d'embarquer les ressources, et que tu compile ton SWF pour qu'il fasse office de librairie partagée (appelons la Lib), c'est ok jusqu'ici...

Maintenant, le problème, c'est réutiliser cette classe dans ton appli principale (appelons la Main)... Si tu fais un import de ta classe Assets dans Main (et que tu utilise la classe Assets), j'ai bien peur que le compilateur embarque à nouveau toutes tes images dans Main, alors qu'elles ne devraient se trouver que dans Lib...

A priori, il faudrai créer une interface IAssets qui défini une méthode genre "getImage( alias:String ):Bitmap" et faire en sorte que Assets implémente IAssets.

Ensuite, dans Main, tu pourrais récupérer la définition de ta classe Assets en tant que IAssets, ce qui te permet de ne pas avoir à embarquer Assets dans Main, mais par contre, de pouvoir utiliser l'instance d'Assets en tant que IAssets et par là même d'utiliser la méthode getImage qui va te retourner l'image ayant l'alias demandé...

récupération de la définition de classe :

Code:

---

1 2 3 4 5 6 7 8 9 10

var d:ApplicationDomain = ApplicationDomain.currentDomain; if( !d.hasDefinition( "my.package.who.contains.Assets" ) ) { var assetsClass:Class = Class( d.getDefinition( "my.package.who.contains.Assets" ) ); var assets:IAssets = new assetsClass(); var bmp:Bitmap = assets.getImage( "mon_image" ); } else throw new Error( "Assets class doesn't exists..." );

---

Jusqu'ici je n'ai récupéré que des classes de type MovieClip (en gros, des mc qui sont liés à une classe dans un swf créé avec CS4) pour mes besoins, mais je pense que tu dois pouvoir le faire avec n'importe quelle classe...

Après, il ne faudra surement plus utiliser des variables statiques comme le montrait Ellene genre Assets.MON_IMAGE mais faire en sorte que la classe Assets te retourne le bitmap voulu via une méthode getImage

Oué, je sais, ça devient compliqué et faut bien comprendre que ce sont des concepts... Pas sur que ça puisse marcher, mais à priori, ça devrai :P :mrgreen:

Euh ouais en effet ça devient plus compliqué ^^'

J'ai commencé par faire une classe de ce genre :

Code:

---

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

package { import flash.display.Sprite;   public class Assets extends Sprite { public static const TEST:String = "Ceci est un test";   public function Assets() { } } }

---

Je le compile et j'obtiens un Assets.swf, que je place à côté de mon Widget.swf.

Dans mon widget je fais:

Code:

---

1 2 3 4 5 6 7 8

var swfLoader:Loader = new Loader(); swfLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, swfLoaderComplete); swfLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, swfLoaderError); swfLoader.load(new URLRequest("Assets.swf"));   function swfLoaderComplete(event:Event):void { var maClasse:Class; maClasse = event.target.applicationDomain.getDefinition("Assets"); Alert.show(maClasse.TEST); }

---

J'obtiens bien ma classe et sa variable TEST.
Quand tu parles d'import de librairie c'est une autre méthode non ?

J'ai l'impression que ce que j'ai fais c'est d'intégrer un swf à mon appli comme si je voulais afficher un movie clip ou autre objet graphique (la classe doit apparemment hériter de Sprite), c'est une mauvaise méthode?

Et aussi il aime pas du tout les Bindable et autre meta. Quand je fais:

Code:

---

1 2 3

[Embed(source="buy.png")] [Bindable] public static var BUY:Class;

---

Il me dit:
1202: Accès à la propriété non définie PropertyChangeEvent dans le package mx.events.

et me rajoute des erreurs au niveau du package:
1172: La définition mx.binding:BindingManager est introuvable.
1172: La définition mx.core:IPropertyChangeNotifier est introuvable.
1172: La définition mx.utils:ObjectProxy est introuvable.
1172: La définition mx.utils:UIDUtil est introuvable.

Si je rajoute import mx.*; il me dit pareil, que la définition mx est introuvable :/

Re,

Non, c'est bien de ça que je parlais au niveau de "l'import de librairie"... c'est du chargement de swf à l'intérieur du Main.

Pour ce qui est des méta, essaye de mettre Bindable avant Embed, pour voir...

En fait j'ai créé un projet "ActionScript", donc il y a des classes que je ne peux pas utiliser et le data binding doit en faire partie.
Par exemple je ne peux pas créer un composant Image ^^'
J'ai pas dû créer le projet qu'il faut..

Je dois bosser sur un autre truc donc j'essayerai demain!

Je viens de faire des tests avec 2 projets différents et ça (scusez moi du terme) nique sa race, ce truc :aie:


On va faire ça dans l'ordre...
Tout d'abord, je crée un projet pur actionScript, que je nomme "testEmbed".
Par défaut, il va me créer un fichier "testEmbed.as" comme point d'entrée, qui va hériter de Sprite.

Dans ce fichier, j'ai ça :

Code:

---

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

package { import flash.display.Sprite;   public class testEmbed extends Sprite { public function testEmbed() { var a:Assets = new Assets(); a = null; } } }

---

Je suis obligé d'instancier Assets pour que la classe soit bien importée dans le swf...


Je vais ensuite créer mon interface IAssets :

Code:

---

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

package { import flash.display.Bitmap;   public interface IAssets { function getAsset( alias:String ):Class function getPicture( alias:String ):Bitmap function toString():String } }

---

3 méthodes qui devront être implémentées dans ma future classe Assets. Comme je n'étais pas sur du résultat, j'ai déclaré une méthode getAsset qui me retourne une classe, et une méthode getPicture qui me retourne une instance de bitmap.

Voici maintenant le code de ma classe Assets :

Code:

---

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

package { import flash.display.Bitmap;   public class Assets implements IAssets {   [Bindable] [Embed( "assets/fr.png" ) ] private var _fr:Class;   [Bindable] [Embed( "assets/de.png" ) ] private var _de:Class;   [Bindable] [Embed( "assets/bg.png" ) ] private var _bg:Class;   private var _store:Object = new Object();   public function Assets() { this._store['fr'] = _fr; this._store['de'] = _de; this._store['bg'] = _bg; }   public function getAsset( alias:String ):Class { return this._store[alias]; }   public function getPicture( alias:String ):Bitmap { // oué, je sais, c'est un peu tordu comme code... return new this._store[alias]() as Bitmap }   public function toString():String { return "Assets"; } } }

---

Comme dans une interface, on ne peut pas déclarer de méthodes ou propriétés statiques, je vais être obligé de travailler avec une instance de ma classe Assets dans la classe qui va charger mon swf, pas d'accès via Assets.XYZ mais c'est pas vraiment grave... Enfin y a peut-être moyen, je n'ai pas testé en profondeur les possibilités... Bref...

Je compile ma classe testEmbed, et j'ai en retour un swf tout beau tout neuf, qui est sensé contenir juste l'importation de ma classe Assets implémentant IAssets


Maintenant que j'ai mon swf de "librairie", je crée un nouveau fichier ActionScript dans mon projet, que je nomme "Main" et (dans flexBuilder) je fais click-droit sur le fichier, "set as default application". Dorénavant, c'est Main qui sera mon point d'entrée... Ce qui est marrant, c'est que Flex va continuer également à compiler testEmbed en tant que swf, en + de Main. Donc il me compile maintenant 2 swf's dans mon projet.

Code de Main :

Code:

---

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

package { import flash.display.Bitmap; import flash.display.Loader; import flash.display.Sprite; import flash.events.Event; import flash.net.URLRequest; import flash.system.ApplicationDomain;   [SWF(width="770", height="580", frameRate="30", backgroundColor="#333333")] public class Main extends Sprite { public var loader:Loader; private var _assets:IAssets;   public function Main() { super();   this._init(); }   private function _init():void { this.loader = new Loader(); var url:URLRequest = new URLRequest( "testEmbed.swf" );   this.loader.contentLoaderInfo.addEventListener( Event.COMPLETE, this._onComplete ); this.loader.load( url ); }   private function _onComplete( event:Event ):void { trace( "onComplete !!" );   var d:ApplicationDomain = this.loader.contentLoaderInfo.applicationDomain; if( d.hasDefinition( "Assets" ) ) { var assetClass:Class = Class( d.getDefinition( "Assets" ) ); this._assets = new assetClass() as IAssets; trace( this._assets.toString() );   // test 1, affichage via getAsset var cFr:Class = this._assets.getAsset( "fr" ); var fr:Bitmap = new cFr(); this.addChild( fr );   // test 2, affichage via getPicture var de:Bitmap = this._assets.getPicture( "de" ); de.x = 200; this.addChild( de ); } }   } }

---

Je compile le tout, j'ouvre Main.html dans mon navigateur, et hop, j'ai le drapeau français qui s'affiche tout à gauche (pfff, je suis suisse et j'affiche le drapeau français... n'importe nawak :mrgreen:) et le drapeau allemand qui s'affiche à 200px du bord gauche.

Tout ça pour démontrer qu'en utilisant getAsset je récupère une classe que je peux exploiter, et getPicture me retourne directement un bitmap.

testEmbed.swf fait 12ko, alors que Main.swf n'en fait que 4... J'ai donc la certitude que Main.swf n'embarque pas les images qui sont embarquée dans testEmbed.swf. Et pourtant j'ai bien accès aux méthodes getAsset et getPicture via l'auto-completion, grace à mon interface IAssets qui est présente dans les 2 swfs. C'est la seule chose que se partagent les swfs.



Maintenant, je crée un projet Flex, ce qui me crée un fichier testEmbedFlex.mxml. Je rajoute mon interface IAssets dans le projet mxml, et j'implémente le mxml de la manière suivante :

Code:

---

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

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="_init()">   <mx:Script> <![CDATA[   public var loader:Loader = new Loader(); [Bindable] public var _assets:IAssets;   private function _init():void { var url:URLRequest = new URLRequest( "testEmbed.swf" );   this.loader.contentLoaderInfo.addEventListener( Event.COMPLETE, this._onComplete ); this.loader.load( url );   }   private function _onComplete( event:Event ):void { trace( "onComplete !!" );   var d:ApplicationDomain = this.loader.contentLoaderInfo.applicationDomain; if( d.hasDefinition( "Assets" ) ) { var assetClass:Class = Class( d.getDefinition( "Assets" ) ); this._assets = new assetClass() as IAssets; trace( this._assets.toString() ); }   }   ]]> </mx:Script>     <mx:Image source="{_assets.getAsset('fr')}" /> <mx:Image x="200" source="{_assets.getPicture('de')}" /> </mx:Application>

---

Une fois compilé, je rajoute encore mon fichier testEmbed.swf de mon premier projet dans le répertoire bin-debug du projet Flex.
J'ai le même code de chargement qu'avant pour le swf librairie. Mais cette fois je rends [Bindable] mon instance d'Assets (en tant que IAssets, comme avant bien entendu) et j'ai 2 images dans le code mxml, dont la source fait appel une fois à la méthode getAsset, et une fois à la méthode getPicture... Ben le résultat est identique que lors de mon premier test. 2 images affichées dans le swf final.

Si c'est pas beau l'AS3 :ccool:

Enjoy !

Alors la, merci Titouille de nous faire partager ca, (tu t'embêtes ou bien? :mrgreen: )

Ca mériterais presque un tuto ... :ccool:

Citation:

---

Envoyé par Jim_Nastiq

Alors la, merci Titouille de nous faire partager ca, (tu t'embêtes ou bien? :mrgreen: )

Ca mériterais presque un tuto ... :ccool:

---

Nan, je m'embête pas, mais comme c'est des concepts que j'utilise actuellement, ça m'intéressais de tester ça d'une manière un peu plus approfondie (tu me connais :P)

Il ne me reste plus grand chose à faire là :mrgreen:
Je vois pas trop quoi dire à part un gros merci à toi pour le temps que tu y as passé :p
Au moins ça a aussi l'air de te servir! Ça me rassure ^^

Si tu sais plus quoi faire il y a plein d'autres choses qui me prennent la tête depuis pas mal de temps :aie: mais je te libère pour ce soir :p

Bien pratique ce truc quand même...

Sauf que j'ai toujours les mêmes erreurs que la dernière fois à propos du Bindable :cry:

Citation:

---

Il me dit:
1202: Accès à la propriété non définie PropertyChangeEvent dans le package mx.events.

et me rajoute des erreurs au niveau du package:
1172: La définition mx.binding:BindingManager est introuvable.
1172: La définition mx.core:IPropertyChangeNotifier est introuvable.
1172: La définition mx.utils:ObjectProxy est introuvable.
1172: La définition mx.utils:UIDUtil est introuvable.

Si je rajoute import mx.*; il me dit pareil, que la définition mx est introuvable :/

---

EDIT: En virant les Bindable, ça compile et ça marche quand même .. ^^ puisqu'on les sauvegarde dans "store" à priori ya pas besoin de les binder.

Re,

Bon, j'en ai fait non pas un tuto mais une ressource sur mon blog (faut bien que je l'alimente de temps en temps, hem...). http://www.titouille.ch/node/188

C'est un peu plus complet et bien commenté (en anglais, comme à mon habitude).

Pour ton problème de message d'erreur, je ne vois pas trop pourquoi ça plante... Mais il est clair que le tag Bindable sur les images n'a plus vraiment lieu d'être, puisque on l'utilise sur l'instance d'Assets (casté en IAssets, je me répète, je sais :P) dans l'exemple Flex. Ce n'est pas parce qu'on sauvegarde dans store, contrairement à ce que tu peux penser. C'est simplement parce qu'on n'y accède pas directement comme c'était fait dans l'exemple d'Ellene (via la variable statique). La le tag Bindable est posé sur l'instance d'Assets et c'est une méthode qui nous retourne le bon objet. Le tag Bindable permet de rendre une instance de classe accessible via mxml. Si tu n'utilise pas de mxml, il est inutile (si mes souvenirs sont bons...).

Attention tout de même à placer un petit "throw new Error( ... )" lorsqu'on essaye de récupérer un objet dans _store qui n'y existe pas à l'alias donné ;)