Flash AS3 - Chargement de fichiers SWF et d'images

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Introduction

En ActionScript 3.0, les fichiers SWF ainsi que les images sont chargées avec la classe Loader. Pour charger un fichier SWF externe, vous devez définir quatre étapes en ActionScript :

1. Créer un objet URLRequest avec l'adresse URL du fichier.
2. Créer un objet Loader.
3. Appeler la méthode load() de l'objet Loader en lui passant en paramètre l'occurrence de l'objet URLRequest.
4. Appeler la méthode addChild() pour un conteneur d'objet d'affichage. Autrement dit, vous devez ajouter l'instance crée de l'objet chargé à un objet de type "conteneur" (DisplayObject). Typiquement, on ajoute un élément à la timeline principale.

Charger une image

Le principe

Il faut d'abord créer une occurrence de la classe Loader. On va l'appeler loader. Ensuite, l'image est identifiée par le biais de la classe URLRequest et ensuite chargée par la méthode load' de l'object loader. L'instruction addChild( ) consiste à afficher cette image dans la scène. La position de cette image est précisée par les paramètres x et y. Si on ne les précise pas, l'image sera chargée aux coordonnées 0, 0, c'est--à-dire dans le coin supérieur gauche de la scène.

var myLoader:Loader = new Loader( );
var myLoaderReq:URLRequest = new URLRequest("decor.jpg");
myLoader.load(myLoaderReq);
addChild(myLoader);
myLoader.x = 100;
myLoader.y = 200;

Code exemple ultra-simple:

• flash-cs5-load-external-pictures.fla (si vous voulez expérimenter)
• flash-cs5-load-external-pictures.swf

Code ActionScript de l'exemple (pareil que ci-dessus):

var request:URLRequest = new URLRequest("image.jpg"); 
var loader:Loader = new Loader() 
loader.load(request); 
addChild(loader);

Exemple qui repositionne l'image et change ses dimensions:

• flash-cs5-load-external-pictures-2.fla (source Flash)
• flash-cs5-load-external-pictures-2.swf

Code ActionScript:

// Load the picture
var request:URLRequest = new URLRequest("pics/mad1.jpg"); 
var loader:Loader = new Loader() 
loader.load(request); 

// Manage the event that picture is loaded
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, pict_is_loaded)

// position, resize and then add to the scene
function pict_is_loaded (e:Event) {
	var pict = loader.content;
	pict.x = 100;
	pict.y = 100;
	pict.width = 224;
	pict.height = 168;
 	addChild(pict);
	// trace (loader.content);
}

Charger plusieurs images

• flash-cs5-load-external-pictures-3.fla
• flash-cs5-load-external-pictures-3.swf

Cet exemple montre:

• Comment charger une série d'images: A mon avis, il est difficile de charger des images en parallèle, donc je les charge une après les autre. Autrement dit, on doit définir un event handler pour tester si une image est chargé, ensuite dans la fonction de gestion (pict_is_loaded), on peut lancer le chargement du suivant etc. Donc on commence par invoquer la fonction load_image avec le premier image. Dans la suite c'est la fonction pict_is_loaded qui va invoquer load_image.
• Chaque image qui est chargé est mise dans le tableau picture_list
• Une fois qu'on a tout (voir le test dans la fonction pict_is_loaded, on appelle la fonction render_pictures pour redimensionner et positionner les images.

Disclaimer: programmer c'est pour les jeunes ... ceci est un code vite fait bien fait d'après ce que j'ai compris du manuel et qu'on peut probablement rendre plus joli.

// adapt the next two lines for your needs
var picture_name_list = ["mad1","mad2","mad3","mad4","mad5","mad6","mad7","mad8","mad9"];
var directory = "pics";

// global variables
var picture_list = new Array();
var total_pictures = picture_name_list.length;
var loader:Loader = new Loader();
var pictures_loaded = 0;

// call the load_image function with the first picture only (!)
load_image(picture_name_list[0]);

// This function will load a picture (well just start loading it)
// It is crucial to understand that we defined a function to capture the 
// "picture is now loaded event" and that will deal with the loaded image. 
// Before a Bitmap is fully loaded you can't do anything with it !
function load_image(img_name)
{
	var request:URLRequest = new URLRequest(directory + "/" + img_name + ".jpg");
	loader.load(request);
}

// Manage the event that one picture is loaded (see comment above)

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, pict_is_loaded);

// position, resize and then add to the list of pictures;
function pict_is_loaded(e:Event)
{
	var pict = e.target.content;
	// insert the picture into an array for display once we loaded all
	picture_list.push(pict);
	// increment picture count;
	pictures_loaded++;
	// load pictures one by one
	if (pictures_loaded < total_pictures)
	{
		load_image(picture_name_list [pictures_loaded]);
	}
	else
	{
		// means we are done loading and can call the rendering function
		render_pictures();
	}
}

function render_pictures()
{
	var layer:int = -1;
	var pict:Bitmap;
	for (var i:int=0; i < total_pictures; i++)
	{
		// get a picture from the list and resize it
		pict = picture_list[i];
		pict.width = 224;
		pict.height = 168;
		// this is code to display pictures in columns of 3
		var posi = i % 3;
		if (posi == 0)
		{
			layer = layer + 1;
		}
		pict.x = posi * pict.width;
		pict.y = layer * pict.height;
		//trace(pict + "x=" + pict.x + ",y=" + pict.y);
		// positioned pictures are then added to the stage
		addChild (pict);

	}
}

Charger un swf

Code exemple

var request:URLRequest = new URLRequest("externalSwf.swf"); 
var loader:Loader = new Loader() 
loader.load(request); 
addChild(loader);