Discussion :

[yuukuari]

Bonjour

Je travaille sur une application dans laquelle on charge un certain nombre d'images (jusqu'à 200) qu'on affiche à l'écran et l'utilisateur peut passer de l'une à l'autre en scrollant, drag'n'droppant, etc...
Comme charger 200 images de bonne qualité prend énormément de ressources, chaque image est stockée sur un serveur distant dans 2 qualités différentes que j'appellerai imageLQ et imageHQ.

Je charge d'abord toutes les imageLQ de qualité moyenne. Elles sont sauvegardées dans des variables Bitmap et donc utilisables à tout moment. Lorsque l'utilisateur s'arrête sur une image en particulier (l'image 35 par exemple donc l'image imageLQ35 est utilisée), je lance le chargement de sa bonne qualité: imageHQ35.

Lorsque imageHQ35 est chargée, je remplace la source de mon image (imageLQ35) par la nouvelle source (imageHQ35).

Mon problème se situe à ce changement de source.

J'ai d'un côté mon composant Image:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<mx:Image id="image" />

de l'autre mon bitmap imageLQ35 loadé de cette façon:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, imageNotLoaded);
 
var urlRequest:URLRequest = new URLRequest('http://yuukuari.free.fr/Flex/Image1.png');
loader.load(urlRequest);
 
function imageLoaded(event:Event):void {
var mySmoothImage:Bitmap = new Bitmap();
mySmoothImage = event.target.content;
mySmoothImage.smoothing = true;
this.imageLQ35 = mySmoothImage;
}

Pour "placer" ce bitmap dans mon composant Image, je change sa source de cette façon:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.image.source = this.imageLQ35

L'image s'affiche bien.
Lorsque l'utilisateur s'arrête sur cette imageLQ35, je lance le chargement de la même façon que l'image LQ (avec un loader, etc...) et lorsqu'elle est chargée, je fais:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.image.source = this.imageHQ35

A cet instant-là, le bitmap utilisé comme ancienne source de mon composant Image (donc ici imageLQ35) est supprimé, ou plutôt "vidé". Le Bitmap existe toujours mais sa "BitmapData" est elle "null"...
Du coup si je veux revenir à l'ancienne image, imageLQ35, je ne peux pas à moins de la recharger.

J'aimerais que ce changement de source ne supprime pas l'ancienne source d'image :/ j'ai contourné le problème en faisant une copie temporaire du bitmap avant de le changer:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var tempBitmap:Bitmap = this.imageLQ35; //Je copie this.imageLQ35
this.image.source = imageHQ35; //this.imageLQ35 est "vidée"
this.imageLQ35 = tempBitmap; //Je "rempli" this.imageLQ35

Mais bon .. ce serait mieux de régler le problème!

Merci de votre aide

Yuukuari

[titouille]

Hello,

Pourquoi ne pas simplement créer une petite classe qui va permettre de stocker les 2 images, et d'alterner, via la propriété visible, entre l'image LQ et HQ ?? tu pourras même ajouter des transitions pour le passage d'une à l'autre, le tout directement dans la classe...

Ensuite dans ton mxml, à la place d'utiliser le tag mx:Image, tu utiliseras ton propre composant et tu pourras interagir avec lui de manière simple, si tu lui fourni les bonnes propriétés ;-)

[yuukuari]

Salut Titouille

En fait c'est déjà à peu près ce que je fais!
J'ai un composant "Page" qui a plusieurs states.
- Un premier lorsque la page n'est pas encore chargée avec juste un label "En attente..." et une bordure.
- Un second state lorsque le chargement de l'image LQ commence, un composant "Sablier" tourne le temps du chargement.
- Un troisième state lorsque l'image LQ est chargée.
- Un state lorsque le chargement a échoué avec un autre label

Toutes les images LQ sont stockées dans un objet Album et les HQ aussi mais seulement quand j'en ai besoin, parceque si je garde en mémoire toutes les images HQ, mon programme utilise beaucoup trop de mémoire et quelqu'un qui a un PC peu puissant ne pourra pas lire un album de plus de 30 pages...

Pour mieux comprendre tout ça, mon but c'est en fait de pouvoir lire un album (une bande dessinée) composée d'un nombre de pages variable (de 1 à 200) dans un widget de lecture embarqué. Si tu veux un exemple tu peux aller voir ICI

[titouille]

Mais vu ton explication de départ, une fois le HQ chargé, tu vas "écraser" la source de ton image LQ par la HQ... Tu n'utilise donc qu'un seul composant Image pour stocker les 2, en alternance... Pourquoi ne pas utiliser 2 composants images, une qui garde toujours la LQ et l'autre qui stocke la HQ uniquement quand tu en a besoin (à l'affichage de ta page par exemple), et dès que l'utilisateur change de page, tu vide les différentes HQ stockées ? Ou alors je n'ai pas compris ou tu veux en venir...

[yuukuari]

Sisi je pense que tu as tout à fait compris

J'ai pas pensé à utiliser 2 images dans mon composant "Page", c'est vrai que du coup ça évite mon problème (le fait de changer plusieurs fois de source une image) !

J'ai déjà une méthode de mon objet Page qui fait en gros:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
public function setImageSource(bitmap:Bitmap):void
{
	this.image.source = bitmap;
	this.currentState = "loaded";
}
[...]
<mx:Image id="image" name="image" doubleClickEnabled="true" width="100%" verticalCenter="0" horizontalCenter="0"/>

Je pourrais rajouter un second composant Image et modifier ma méthode de cette façon:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
setImageSource(bitmap:Bitmap, quality:int):void
{
	if (quality == this.LQ_QUALITY) {
		this.imageLQ.source = bitmap;
		this.imageLQ.visible = true;
		this.imageHQ.visible = false;
		//Ici par contre je sais pas si c'est comme ça qu'on fait pour supprimer le bitmap?
		//Ou alors je fais un delete sur le bitmapHQ directement
		this.imageHQ.source = null; 
	} else if (quality == this.HQ_QUALITY) {
		this.imageHQ.source = bitmap;
		this.imageHQ.visible = true;
		this.imageLQ.visible = false;
	}
	
	this.currentState = "loaded";
}

Ça marcherait bien pour mon mode de lecture "simple page" où un composant Page ne peut avoir qu'une LQ et une HQ mais pas pour mon autre mode de lecture "double page" pour lequel seulement 2 composants Page sont utilisés pour toutes les LQ et HQ.. Et oui c'est un peu compliqué ^^'
Mais je pense que je vais utiliser ta solution pour le mode simple (édité ^^) page

[titouille]

Vi, après à toi de voir... je lance juste des idées en l'air, ça veut pas dire qu'il faut absolument les utiliser

Bon courage !