Le composant Flex <mx:Image> permet d'importer des fichiers JPEG, PNG, GIF, et SWF à l'exécution. Vous pouvez aussi embarquer ces fichiers à la compilation en utilisant @Embed(source='nomFichierImage').
Les images embarquées sont chargées immédiatement, car elles font déjà partie du fichier Flex SWF. Cependant, elle font augmenter la taille du SWF et vous devez recompiler à chaque modification.
L'alternative à cela est de charger les ressources à l'exécution. Vous pouvez charger une ressource depuis le système de fichiers local là où la SWF est situé ou y accéder depuis une ressource distante (par HTTP typiquement).
Cependant, le temps que l'image se charge, une espace transparent est affiché sans donner à l'utilisateur d'information sur la progression du téléchargement de l'image.
Pour remédier à ce problème, Tony Fendall a crée un composant extrêmement pratique. Son composant, appelé LoadingImage permet d'avoir une barre de chargement représentant le taux de téléchargement actuel de l'image, et cela de façon automatique.
Ce composant extends la classe Image pour en garder l'ensemble des fonctionnalités de <mx:Image> et les même paramètres. Vous pouvez donc remplacer tous vos tags <mx:Image> par <controls:LoadingImage> et vous verrez apparaitre la barre de chargement par défaut.
Le composant LoadingImage ajoute de nouvelles propriétés, ainsi vous pouvez choisir la taille de la ProgressBar (progressPercentWidth et progressHeight). Vous pouvez bien sur modifier d'autres informations directement dans la classe LoadingImage, la couleur de la barre de chargement par exemple.
Ci-dessous, un exemple d'application simple:
Flex Source Code Download: Télécharger le code source complet de l'application
This movie requires Flash Player 11
Vous pouvez télécharger directement ce composant Flex LoadingImage ou consulter les sources de l'exemple.
14 août 2008
Bonjour,
Dans une application de book, je fais le chargement des images dynamiquement via cs3, cela avec une boucle, mes images ne pouvant être embarqués par cette méthode, j'ai trouvé une solution pour détecter la fin des chargement de ces images (Event.COMPLETE), je peux mettre le code si ça intéresse.
Ma question est: Connaissez vous une solution d'attente (chargement...) conviviale me permettant de remplacer mon "chargement en cours, veuillez patienter"
Merci
Dean
14 août 2008
Re
je viens de lire le post suivant
http://www.flex-tutorial.fr/2008/05/29/flex-preloader-creer-un-preloader-personnalise/
intéressant.
19 septembre 2008
Merci pour le script. Il est formateur
24 janvier 2011
Bonjour,
Dans le souhait de pouvoir distribuer mon Appli Web je charge mes images dans le SWF comme tu a montré : @Embed(source='nomFichierImage') .
Mais voila à un certain moment dans mon code je change d'image en fonction d'une sélection sur une liste et cela pose probleme :
Faites pas attention au sujet :p
Si j'effectue un alert de srcImg ça me retourne @Embed(source'file:/D:/Program Files/EasyPHP-5.3.3/www/img/Sandwich/thon.jpg') mais l'image n'est pas affiché.
Or si j'enleve @Embed(source=' ') les images s'affiche.
Merci d'avance
24 janvier 2011
Bonjour,
La directive Embed sert à compiler un élément avec l'application. A la compilation, l'élément 'list.selectedItem' n'a donc aucune valeur. Il n'est pas possible d'Embed une image dont le path est dynamique puisque celui-ci doit être définit à la compilation
Fabien
24 janvier 2011
Oki
Merci beaucoup je sais pas pourquoi j'y ai pas pensé.
24 janvier 2011
De rien
Bonne chance pour la suite,
Fabien
24 janvier 2011
Merci par contre je vois pas comment faire j'ai essayé en fessant :
[as]if(list.selectedItem.name=="Thon"){
descripSan.text="Baguettine, préparation à base de thon et de mayonnaise, tomates, salade verte";
imgSandwich.source="@Embed(source='file:/D:/Program Files/EasyPHP-5.3.3/www/img/Sandwich/thon.jpg')";
} [as]
Mais ça ne marche toujours pas car les images ne sont alors pas compilé.
Je vois pas d'autre moyen que de compiler toutes les images et les afficher au bon moment.
Je vais trouver ( si je trouve pas, tu verras un commentaire d'aide avant la fin de la journée
)
24 janvier 2011
ReBonjour,
on ne peut pas affecter une propriété dynamiquement à un @Embed. Le @Embed est une directive qui va compiler un élément dans l'application. Pour cela, on a la notation:
A la compilation, monImage sera "rempli" avec l'image et on pourrait donc faire
Dans votre cas, les images semblent disponibles dans le dossier "img" de votre serveur web. Il vous suffit donc de faire imgSandwich.source = "img/Sandwich/thon.jpg" (peut-être avec un / au départ). Flex ira chercher à la volée l'image et la chargera. Les images ne seront pas compilées avec l'application. Pour cela, il vous faudra faire:
pour chaque image que vous souhaitez embarquer.
Fabien
24 janvier 2011
Oki merci je vais tester ça,
En jouant avec la visibilité des images j'ai réussi mais c'est pas type top ( la girafe)
Et merci encore
1 juillet 2011
Bonjour, j'utilise la classe mx.controls.Image pour afficher une image et je souhaiterai récupérer les dimensions de cette image, est-ce possible ?
Merci d'avance !
1 juillet 2011
Salut Julien,
Oui, les propriétés width / height d'Image te donnent ces valeurs
Fabien
1 juillet 2011
Tout d'abord merci pour la réponse rapide,
j'aurai moi aussi aimé que ce soit aussi simple mais ces propriétés restent à zéro !
voici mon code :
et impossible d'obtenir width et height...
1 juillet 2011
Oui il faut attendre que l'image soit chargée, donc s'abonner a l'evenement "complete" de l'image.
Fabien