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és 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

Code exemple ultra-simple:

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

Code ActionScript:

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

Si vous voulez repositionner l'image et/ou changer ses dimensions:

• flash-cs5-load-external-pictures-2.fla
• 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);

	}
}

Importer une image avec la classe Loader

Il faut d'abord créer une occurrence de la classe Loader. On ne peut pas charger qu'une seule image à la fois quand on définit un objet loader. Ensuite, l'image est chargée par le biais de la classe URLRequest. 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;

Charger un swf

Code exemple

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