Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Créer un diaporama pas à pas - 9 - Formater du texte, Utiliser des polices d'écriture - Centrer des MovieClips

Compatible ActionScript 2. Cliquer pour en savoir plus sur les compatibilités.Par lilive (Olivier Tarasse), le 13 septembre 2008

Objectif

Cette série de tutoriaux, à l'usage des débutants en ActionScript 2, présente des notions fondamentales de programmation par le biais de la réalisation d'un diaporama en ligne.

Si vous n'êtes pas intéressés par la création d'un diaporama, mais que vous lisez cet article pour apprendre certaines notions de programmation, vous pouvez directement vous rendre aux sections suivantes:

En ce qui concerne le diaporama, nous allons apporter deux améliorations, qui vont nous permettre d'aborder les notions cités ci-dessus:

  • L'affichage automatique du numéro des images au fur et à mesure de leur défilement, avec une mise en forme du texte et une police de notre choix,
  • La possibilité d'afficher des images de différents formats (portrait, paysage, …) en les positionnant correctement dans la zone d'affichage.

Et en bonus, nous regarderons un peu ce qu'il est possible de faire comme variantes pour la transition entre les images, et voir au-delà du fondu-enchaîné.Voici le diaporama tel qu'il sera à la fin de cet article:

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.


I - Mise en forme des champs de texte et intégration de polices d'écriture

1- Introduction

Jusque-là, dans les diaporamas exemples, pour simplifier les choses, le numéro de chaque image était marqué directement sur l'image:

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Ce résultat n'était pas obtenu par programmation, mais simplement en rajoutant du texte sur les fichiers d'images avec un logiciel graphique. Nous allons maintenant faire en sorte que le numéro de l'image affichée s'écrive dans la barre horizontale dégradée, pour ne plus vandaliser nos belles images par ces numéros blancs.

Ceci n'est pas très compliqué à réaliser. Nous savons déjà nous servir de la classe TextField, comme vu ici. Il suffit de créer un nouveau TextField, et de trouver le bon endroit dans le code ou modifier sa propriété text. En guise d'exercice, je vous propose d'essayer de le réaliser par vous-même, pour obtenir un résultat semblable à celui-ci:

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

2- Une solution

Voici une façon de faire 1):

// Création du champ de texte:
var numberTF:TextField = this.createTextField("numbers", this.getNextHighestDepth(), 100, 300, 295, 20);
numberTF.textColor = 0x333333;
numberTF.autoSize = "right";
 
function afficherImageActuelle() {
	progressMC._visible = false;
	// Modification du texte:
	numberTF.text = "Image " + (imageActuelle + 1) + " sur " + nbrImages;
	if (imagesMC[imageActuelle].isLoaded) {
		startFondu(imagesMC[imageActuelle]);
	} else {
		chargerImage(imageActuelle);
		afficherProgressBar();
		if (isPlayPressed) clearPlayInterval();
	}
}

J'ai choisi de modifier le texte dans la fonction afficherImageActuelle, qui est appelée à chaque fois que l'image change.

3- Créer le champ de texte avec Flash IDE

Une autre façon de faire, si vous utilisez Flash IDE, est de créer le champ de texte non pas avec le code createTextField mais avec l'outil Texte. Ceci permet de placer le champ de texte à la souris. Pour le faire il suffit de sélectionner l'outil Texte dans la barre d'outil, et de dessiner le cadre délimitant le champ de texte là où on veut le placer. Il est possible d'écrire dedans “Image 1 sur 4” par exemple, pour avoir un aperçu du résultat. Dans la fenêtre des propriétés, choisissez “Texte dynamique”, la couleur voulue, et l'alignement du texte à droite. Donnez numbers comme nom au champ de texte créé, et utilisez simplement ce code 2):

// Définition de la variable d'accès au champ de texte:
var numberTF:TextField = this["numbers"];
 
function afficherImageActuelle() {
	progressMC._visible = false;
	// Modification du texte:
	numberTF.text = "Image " + (imageActuelle + 1) + " sur " + nbrImages;
	if (imagesMC[imageActuelle].isLoaded) {
		startFondu(imagesMC[imageActuelle]);
	} else {
		chargerImage(imageActuelle);
		afficherProgressBar();
		if (isPlayPressed) clearPlayInterval();
	}
}

Le résultat est le même que ce que nous avions obtenu en créant le champ de texte avec du code au 2) .

Pour en savoir plus sur cette façon de créer un champ de texte lire l'Aide de Flash > Utilisation de Flash > Utilisation de texte > Création de texte.

4- Choisir la police d'écriture et la mise en forme du texte

Sans précision sur la police d'écriture à utiliser pour un champ de texte créé avec createTextField, FlashPlayer utilise “Times New Roman” sous Windows, “Times” sous Mac OS, et pour les autres système d'exploitation je ne sais pas, la documentation de Flash ne le précisant pas.

Nous pourrions désirer utiliser une autre police d'écriture.

Un objet TextField ne permet pas d'agir directement sur tous les paramètres de mise en forme du texte. Il permet certes de modifier la couleur (TextField.textColor), mais n'offre guère plus de possibilités. Pour agir sur les autres paramètres, comme la taille des caractères, la police, la graisse, l'espacement des caractères, l'alignement, etc., il faut passer par un objet TextFormat:

var numberTF:TextField = this.createTextField("numbers", this.getNextHighestDepth(), 100, 302, 295, 20);
// Définit un format de texte:
var textFormat:TextFormat = new TextFormat();
textFormat.font = "Arial";
textFormat.size = 11;
textFormat.bold = true;
textFormat.color = 0x333333;
textFormat.align = "right";
// Assigne ce format au champ de texte:
numberTF.setNewTextFormat(textFormat);

A partir de numberTF.setNewTextFormat(textFormat); l'affichage du texte de numberTF correspondra à la mise en forme spécifiée par textFormat.

Une autre façon d'appliquer un TextFormat à un TextField est de faire numberTF.setTextFormat(textFormat) . Ceci applique le format au texte qui est déjà affiché par le TextField, mais n'agira pas si on modifie par la suite le contenu du TextField. Dans notre cas l'utilisation de setNewTextFormat est donc la plus appropriée.

Par contre, si vous créez le champ de texte avec l'outil Texte de flash IDE, vous pouvez choisir en même temps la police, la couleur, la taille et tous les autres paramètres de mise en forme, et ceci sans rajouter aucun code par rapport au 3) .

5- Intégrer une police

Le problème qui peut se poser avec l'usage d'une police d'écriture particulière est qu'on ne peut être sûr que l'utilisateur à la police choisie installée sur son ordinateur. Si ce n'est pas le cas, FlashPlayer va choisir une police de substitution. Rien n'assure que cette police de substitution va donner un résultat convenable.

Une façon de régler le problème est d'intégrer la police utilisée directement dans le swf. L'inconvénient de cette méthode est que le swf en est alourdi, et mettra un peu plus longtemps à se charger.

Pour intégrer une police au swf si vous utilisez Flash IDE:
Lire l'Aide de Flash > Formation à ActionScript 2.0 dans Adobe Flash > Utilisation du texte et des chaînes > Utilisation des polices > Intégration des polices.
Donnez comme nom “Police” à la police que vous intégrez. Puis, pour pouvoir utiliser cette police avec ActionScript, il faut faire un clic droit sur la police dans la bibliothèque, choisir Liaison, et cocher Exporter pour ActionScript et Exporter dans la première image.

Pour intégrer une police au swf si vous utilisez swfmill:
Il faut ajouter au fichier xml la ligne suivante, dans la librairie 3):

<library>
	<font id="Police" import="C:\WINDOWS\Fonts\Vera.ttf"/>
</library>

Remplacez “C:\WINDOWS\Fonts\Vera.ttf” par le fichier de police que vous souhaitez ajouter.

Pour utiliser une police intégrée:
Une fois la police intégrée, vous pouvez l'utiliser en l'affectant à l'objet TextFormat. Pour que Flash comprenne qu'il s'agit d'une police intégrée, il faut également définir la propriété embedFonts du TextField sur true:

var numberTF:TextField = this.createTextField("numbers", this.getNextHighestDepth(), 100, 302, 295, 20);
numberTF.embedFonts = true;
var textFormat:TextFormat = new TextFormat();
textFormat.font = "Police";
textFormat.size = 11;
textFormat.bold = true;
textFormat.color = 0x333333;
textFormat.align = "right";
numberTF.setNewTextFormat(textFormat);

Et voilà le résultat (j'ai pour ma part utilisé la police Bitstream Vera Sans) :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

6- Intégrer seulement les caractères utilisés

Si vous comparez la taille du swf obtenu en intégrant une police à celle du swf précédent, vous constaterez une augmentation sensible, ce qui a pour conséquence un temps de chargement plus long pour l'utilisateur. Avec la police Bitstream Vera Sans que j'ai utilisée, le swf a augmenté de 20Ko.

Pour réduire cette taille, il est possible de n'intégrer que les caractères nécessaires. Ici nous n'avons besoin que des lettres “Imagesur”, du caractère d'espacement, et des chiffres de 0 à 9.

Pour choisir les caractères à intégrer avec swfmill:
Il suffit d'ajouter un paramètre glyphs au xml 4):

<library>
	<font id="Police" import="C:\WINDOWS\Fonts\Vera.ttf" glyphs="Imagesur 0123456789"/>
</library>

Pour choisir les caractères à intégrer avec Flash IDE:
Il ne faut plus passer par l'intégration directe de la police dans la bibliothèque, comme nous l'avons fait au 5). Cette fois, nous n'avons plus le choix et devons créer le champ de texte avec l'outil texte comme au 3).
Cette fois, entrez “Image 0123456789 sur” dans le champ de texte, puis cliquez sur le bouton “Intégrer…” dans la fenêtre des propriétés. Choisissez alors “Remplissage automatique”. Les caractères à intégrer seront choisis automatiquement à partir du texte du champ, d'où l'utilité d'y avoir écrit “Image 0123456789 sur”.
N'oubliez pas d'utiliser à nouveau le code simplifié du 3), puisque nous définissons la mise en forme du texte dans la fenêtre des propriétés et que nous n'avons plus besoin d'un objet TextFormat:

// Définition de la variable d'accès au champ de texte:
var numberTF:TextField = this["numbers"];
 
function afficherImageActuelle() {
	progressMC._visible = false;
	// Modification du texte:
	numberTF.text = "Image " + (imageActuelle + 1) + " sur " + nbrImages;
	if (imagesMC[imageActuelle].isLoaded) {
		startFondu(imagesMC[imageActuelle]);
	} else {
		chargerImage(imageActuelle);
		afficherProgressBar();
		if (isPlayPressed) clearPlayInterval();
	}
}

Cette fois, le swf avec police intégrée n'est que de 2Ko plus lourd.

7- Message de chargement

Tant que nous y sommes, nous allons utiliser également ce nouveau champ de texte pour y écrire le message indiquant que le chargement est en cours, plutôt que de garder ce message au-dessus de la barre de préchargement.

Nous pouvons donc purger le code de tout ce qui concerne le TextField progressTF, tant sa création que son utilisation dans la fonction afficherProgressBar. Puis modifions afficherProgressBar pour que le message de chargement soit affiché dans numberTF, et onLoadInit pour qu'il soit effacé 5):

function afficherProgressBar() {
	progressMC.clear();
	drawFilledRectangle(progressMC, 0, 0, 400, 300, 0, 50);
	drawRectangle(progressMC, 100, 140, 200, 15, 2, 0xffffff, 100);
	// Le message de chargement s'affiche maintenant dans numberTF:
	numberTF.text = "Chargement de l'image " + (imageActuelle + 1) + " sur " + nbrImages;
	progressMC._visible = true;
}
 
mclListener.onLoadInit = function (mc:MovieClip) {
	mc._width = 400;
	mc._height = 300;
	mc._visible = false;
	mc.isLoaded = true;
	if (mc == imagesMC[imageActuelle]) {
		progressMC._visible = false;
		// Effacer le message de chargement de numberTF:
		numberTF.text = "Image " + (imageActuelle + 1) + " sur " + nbrImages;
		startFondu(imagesMC[imageActuelle]);
		if (isPlayPressed) initPlayInterval();
	}
	var nextImageToLoad:Number = findNextImageToLoad();
	if (nextImageToLoad != undefined) chargerImage(nextImageToLoad);
}

N'oublions pas d'intégrer les caractères nécessaires pour écrire le message de chargement:

Pour swfmill:

<library>
	<font id="Police" import="C:\WINDOWS\Fonts\Vera.ttf" glyphs=" Chargemntdl'i.Isu0123456789"/>
</library>

Pour Flash IDE:
Entrez “Chargement de l'image Image 0123456789 sur” dans le champ de texte, cliquez de nouveau le bouton “Intégrer…” de la fenêtre des propriétés, et de nouveau le bouton “Remplissage automatique”.

Voici notre nouveau résultat (Pour voir les messages de chargement, rechargez la page pour que le chargement des images redémarre):

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.


II - Centrer des MovieClips

Dans les exemples donnés au long de ces tutoriaux, la zone d'affichage des images fait 400×300 pixels. La façon la plus simple et la plus optimisée pour y afficher les images chargées est que les images fassent aussi 400×300 pixels. Ainsi les images sont naturellement correctement “cadrées” dans la zone d'affichage.

1- Optimiser la taille des images

Lors de la cinquième partie, vous avez peut-être commencé à utiliser des fichiers d'images d'une taille supérieure (en pixels) à celle de la zone d'affichage du diaporama. Cela nous a été utile pour tous les essais relatifs aux chargements et préchargement. Comme nous en avons terminé avec ces questions, revenons à une taille d'image optimisée pour le diaporama, c'est-à-dire à des images qui font exactement la même taille que celle de la zone d'affichage.

Nous n'avons donc plus besoin de redimensionner les images une fois qu'elles sont chargées, ce que nous faisions au début de la méthode onLoadInit de l'écouteur du chargement:

mclListener.onLoadInit = function (mc:MovieClip) {
	// redimensionnement des images:
	mc._width = 400;	// largeur,
	mc._height = 300;	// hauteur.
 
	mc._visible = false;
	mc.isLoaded = true;
	if (mc == imagesMC[imageActuelle]) {
		progressMC._visible = false;
		numberTF.text = "Image " + (imageActuelle + 1) + " sur " + nbrImages;
		startFondu(imagesMC[imageActuelle]);
		if (isPlayPressed) initPlayInterval();
	}
	var nextImageToLoad:Number = findNextImageToLoad();
	if (nextImageToLoad != undefined) chargerImage(nextImageToLoad);
}

Effaçons donc les deux lignes qui ne servent plus à rien si nos images font la même taille que la zone d'affichage 6) :

mclListener.onLoadInit = function (mc:MovieClip) {
	mc._visible = false;
	mc.isLoaded = true;
	if (mc == imagesMC[imageActuelle]) {
		progressMC._visible = false;
		numberTF.text = "Image " + (imageActuelle + 1) + " sur " + nbrImages;
		startFondu(imagesMC[imageActuelle]);
		if (isPlayPressed) initPlayInterval();
	}
	var nextImageToLoad:Number = findNextImageToLoad();
	if (nextImageToLoad != undefined) chargerImage(nextImageToLoad);
}

2- Le problème

Ces images de 400×300 pixels sont par exemple des photos, prises au format 4:3 . Mais on peut aussi vouloir afficher dans le diaporama des photos “verticales”, au format 3:4 . On peut aussi vouloir utiliser tout autre format d'image que celui-là, qui ne cadre pas exactement avec les dimensions de la zone d'affichage. Voici ce qui se passe avec le diaporama actuel si des photos de l'album sont de formats différents, à savoir 194×300 pixels et 400×192 pixels:

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

On pourrait préférer que les photos soient toutes centrées dans la zone d'affichage.

Le problème est que quand on crée les MovieClips qui vont accueillir les photos, par la ligne …

imagesMC[iImage] = this.createEmptyMovieClip("image" + iImage, this.getNextHighestDepth());

… les MovieClips créés sont positionnés sur la scène au point de coordonnées (x=0, y=0), c'est-à-dire le coin supérieur gauche de la scène. Quand par la suite les images sont chargées, elles s'affichent en positionnant leur coin supérieur gauche sur les coordonnées du MovieClip qui les accueille. Ceci fait que les images s'affichent toutes en haut à gauche.

Pour centrer les images dans la zone d'affichage, il va falloir calculer quelles coordonnées donner aux MovieClips correspondants. Nous allons faire un peu de géométrie facile pour trouver comment nous y prendre.

3- Trouver les coordonnées du centre d'un rectangle

Partons de la situation suivante:

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Nous avons une zone rectangulaire (indiquée en bleu) placée sur la scène. La grille numérotée permet de lire les coordonnées des objets sur la scène. Si vous n'êtes pas au clair avec l'utilisation des coordonnées (x, y) pour repérer des positions sur la scène, prenez le temps de lire le chapitre “Repère” de cet excellent article.

Le rectangle fait 300 pixels de large et 200 pixels de haut. Il est placé sur la scène pour que son coin supérieur gauche (le point vert) soit aux coordonnées (x=100,y=50), que nous noterons (100,50). La coordonnée x est appelée absisse du point, la coordonnée y est l'ordonnée.

En ActionScript, nous pourrions décrire ce rectangle par 4 variables:

var rectX:Number = 100;
var rectY:Number = 50;
var rectWidth:Number = 300; // largeur
var rectHeight:Number = 200; // hauteur

Cherchons quelles sont les coordonnées du centre du rectangle (le point jaune). Nous pouvons facilement lire grâce à la grille que ces coordonnées sont (centreX=250,centreY=150). Comment pourrions-nous calculer ces coordonnées à partir de rectX, rectY, rectWidth et rectHeight ?

Calcul de centreX, absisse du centre:
Le rectangle fait 300 pixels de large,
Donc la moitié de la largeur du rectangle est 150 pixels.
Le point jaune est donc placé 150 pixels à droite du bord gauche du rectangle.
Le bord gauche du rectangle est placé à rectX=100 sur la scène,
Donc centreX vaut 100 + 150 = 250.
La formule pour calculer centreX est donc: centreX = rectX + (rectWidth / 2)

De même pour l'ordonnée du centre: centreY = rectY + (rectHeight / 2)

Voici le code ActionScript complet pour calculer les coordonnées du centre du rectangle:

var rectX:Number = 100;
var rectY:Number = 50;
var rectWidth:Number = 300;
var rectHeight:Number = 200;
var centreX:Number = rectX + rectWidth / 2;
var centreY:Number = rectY + rectHeight / 2;

Remarque: Les parenthèses autour de rectWidth / 2 sont inutiles car l'opérateur de division / est prioritaire par rapport à l'opérateur d'addition +. La division sera donc effectuée en premier, et le résultat sera ensuite additionné à rectX. Pour en savoir plus à ce sujet, lire l'Aide de Flash > Formation à ActionScript 2.0 dans Adobe Flash > Eléments fondamentaux du langage et de la syntaxe > Présentation des opérateurs > Priorité et associativité des opérateurs.

4- La classe Rectangle

ActionScript offre une classe Rectangle qui permet de décrire un rectangle avec un seul objet:

var rect:Rectangle = new Rectangle(100, 50, 300, 200);

Un tel code crée un nouvel objet Rectangle de dimensions 300×200 pixels, et de coordonnées (100,50). Cela ne dessine absolument pas un rectangle sur la scène, c'est juste une manière plus efficace de stocker les coordonnées et les dimensions d'un rectangle, avec un seul objet rect plutôt que 4 variables séparées rectX, rectY, rectWidth et rectHeight.

L'objet rectangle ainsi créé à plusieurs propriétés, notamment les propriétés x, y, width, height. Ainsi, les formules pour calculer centreX et centreY deviennent:

var rect:Rectangle = new Rectangle(100, 50, 300, 200);
var centreX:Number = rect.x + rect.width / 2;
var centreY:Number = rect.y + rect.height / 2;

Outre le fait de réduire le nombre de lignes de code et de le rendre plus lisible, l'utilisation d'un objet Rectangle offre d'autres avantages, puisque cet objet à des méthodes toutes faites qui peuvent servir par exemple à le déplacer, l'agrandir, calculer son intersection avec un autre rectangle, etc. Nous ne nous servirons pas de ces méthodes ici, pour en savoir plus à ce sujet voyez l'Aide de Flash > Référence du langage ActionScript 2.0 > Classes ActionScript > Rectangle.

Dernière précision: Pour pouvoir utiliser la classe Rectangle comme dans les codes donnés plus haut, il faut “importer” la classe Rectangle en ajoutant une fois pour toutes dans le code, avant de s'en servir, la ligne:

import flash.geom.Rectangle;

Le sujet de l'importation des classes, relié à la notion de packages de classes, dépasse le cadre de ce tutoriel. Nous n'avons pas besoin d'en savoir plus pour le moment, il nous suffit de savoir qu'il faut mettre le import une fois dans notre code pour utiliser la classe Rectangle. (Je vous donne toutefois la rubrique de l'aide où vous pouvez trouver l'information, par soucis d'être complet: Aide de Flash > Formation à ActionScript 2.0 dans Adobe Flash > Classes > Présentation de la programmation orientée objet et de Flash > Présentation des packages).

Donc, pour tester le calcul des coordonnées du centre d'un rectangle, vous pouvez placer et exécuter ce code dans un nouveau document:

import flash.geom.Rectangle;
var rect:Rectangle = new Rectangle(100, 50, 300, 200);
var centreX:Number = rect.x + rect.width / 2;
var centreY:Number = rect.y + rect.height / 2;
trace("centreX = " + centreX + "    centreY = " + centreY);

5- Centrer un MovieClip dans un rectangle

Penchons-nous maintenant sur ce cas:

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Imaginons que nous ayons un MovieClip nommé unClip de largeur 100 pixels et de hauteur 150 pixels. Ce MovieClip est représenté par le rectangle rouge dans la figure, et est placé au point de coordonnées (50,150).

Nous voudrions modifier la position de ce MovieClip pour qu'il soit centré par rapport au rectangle bleu, pour obtenir ce résultat:

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Comment faire?

Pour modifier la position d'un MovieClip, il suffit de modifier ses propriétés _x et _y. Par exemple…

import flash.geom.Rectangle;
var rect:Rectangle = new Rectangle(100, 50, 300, 200);
var centreX:Number = rect.x + rect.width / 2;
var centreY:Number = rect.y + rect.height / 2;
// Déplacer le MovieClip:
unClip._x = centreX;
unClip._y = centreY;

… va donner ce résultat:

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Le MovieClip est positionné sur le point jaune, mais ce n'est pas encore ce que nous voulons: il est “trop à droite” et “trop bas”.

De combien de pixels faudrait-il le ramener vers la gauche? Autrement dit: De combien faudrait-il diminuer son absisse? Il faudrait le ramener de la moitié de sa largeur. Or la largeur d'un MovieClip peut-être obtenue grâce à sa propriété _width. Donc la moitié de sa largeur est unClip._width/2. Pour le placer sur le point jaune, mais à la moitié de sa largeur vers la gauche, nous pouvons faire:

unClip._x = centreX - unClip._width / 2;
unClip._y = centreY;

Ce qui donnera:

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

De même, pour faire remonter le MovieClip de la moitié de sa hauteur, il faut diminuer son ordonnée de la moitié de sa hauteur:

unClip._x = centreX - unClip._width / 2;
unClip._y = centreY - unClip._height / 2;

Le MovieClip est maintenant centré:

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Remarque:

Cette façon de faire suppose que le point d'alignement du MovieClip unClip est en haut à gauche. C'est-à-dire que le contenu du MovieClip est placé dans le MovieClip de façon à ce que le point de coordonnées (0,0) du MovieClip soit le point le plus haut et le plus à gauche du MovieClip. C'est bien ce qui se passe si un MovieClip est créé par createEmptyMovieClip, et que son contenu est chargé à partir d'un fichier image, comme dans le diaporama. Ce pourrait être différent si par exemple le MovieClip avait été créé et dessiné dans Flash IDE, où il est possible de choisir un autre point d'alignement.

6- Pour les images du diaporama

Nous savons maintenant comment centrer les images dans la zone d'affichage du diaporama. Commençons par définir la zone d'affichage à l'aide d'un objet Rectangle, et calculons son point central 7):

import flash.geom.Rectangle;
var zoneAffichage:Rectangle = new Rectangle(0, 0, 400, 300);
var centreAffichageX:Number = zoneAffichage.x + zoneAffichage.width / 2;
var centreAffichageY:Number = zoneAffichage.y + zoneAffichage.height / 2;

Vous pouvez très simplement modifier la position et les dimensions de votre zone d'affichage en modifiant les chiffres donnés.

Puis centrons nos images au fur et à mesure qu'elles sont chargées. Nous devons attendre qu'une image soit chargée pour pouvoir la centrer, puisque avant la fin du chargement sa dimension nous est inconnue. Le centrage doit donc se faire dans le onLoadInit:

mclListener.onLoadInit = function (mc:MovieClip) {
	// Deux nouvelles lignes pour centrer le MovieClip:
	mc._x = centreAffichageX - mc._width / 2;
	mc._y = centreAffichageY - mc._height / 2;
	mc._visible = false;
	mc.isLoaded = true;
	if (mc == imagesMC[imageActuelle]) {
		progressMC._visible = false;
		numberTF.text = "Image " + (imageActuelle + 1) + " sur " + nbrImages;
		startFondu(imagesMC[imageActuelle]);
		if (isPlayPressed) initPlayInterval();
	}
	var nextImageToLoad:Number = findNextImageToLoad();
	if (nextImageToLoad != undefined) chargerImage(nextImageToLoad);
}

Nous pouvons tester ce nouveau diaporama. Bien sûr vous devez changer les images présentes dans le répertoire images pour y mettre des images de différents formats. Ces images doivent avoir soit une largeur égale à celle de votre zone d'affichage, soit une hauteur égale, soit les deux. Vous trouverez en pièce jointe de telles images 8).

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

III - Améliorer la transition

Ce changement fait apparaître un petit problème avec le fondu enchaîné que nous avions. En effet, ce fondu fait augmenter l'opacité de l'image à faire apparaître, devant l'image précédente, puis rend brusquement invisible cette dernière. Dans le cas où la nouvelle image ne recouvre pas entièrement l'ancienne, la disparition brusque de celle-ci n'est pas du meilleur effet. Modifions donc le fondu pour qu'il fasse dorénavant disparaître progressivement l'image précédente, en même temps qu'il fait apparaître la nouvelle:

function transition() {
	incomingImageMC._alpha += 10;
	// une nouvelle ligne ici:
	displayedImageMC._alpha -= 10;
	if (incomingImageMC._alpha >= 100) finaliserTransition();
}

Et voilà, c'était facile:

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.


Et nous avons terminé pour l'instant. Mais pour que ce chapitre III ne se sente pas complexé d'être aussi court et facile par rapport à ses frères, et que travailler sur la transition m'a donné des idées, je vous propose quelques variantes que vous pouvez essayer de réaliser. Les codes correspondants se trouvent en pièce jointe 9) :


L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
Une autre transition avec l'opacité (_alpha)


L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
Transition avec la position (_x)


L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
Transition en augmentant l'échelle (_xscale et _yscale)


L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
Une autre transition en utilisant l'échelle.


Conclusion

Vous voici maintenant plus outillés pour manipuler les champs de texte et déplacer des MovieClips. Le diaporama, quand à lui, est tout à fait mûr pour que nous nous attaquions enfin à la mise en place des vignettes d'images miniaturisées. Pour ceci, rendez-vous à l'article suivant.

Je ne vous répète plus, si vous rencontrez des difficultés ou si vous avez des suggestions d'améliorations pour ce tutoriel, de vous rendre sur le forum et d'ajouter une réponse au message concernant ce tutoriel. Ah tiens, si, je vous le répète finalement :-D .


Pour en savoir plus

Pour avoir des précisions ou des renseignements complémentaires, vous pouvez consulter 10):

  • Au sujet de la création et de l'utilisation de champs de textes:
    • Aide de Flash > Référence du langage ActionScript 2.0 > Classes ActionScript > TextField.
    • Aide de Flash > Référence du langage ActionScript 2.0 > Classes ActionScript > TextFormat.
    • Aide de Flash > Formation à ActionScript 2.0 dans Adobe Flash > Utilisation du texte et des chaînes.
    • Aide de Flash > Utilisation de Flash > Utilisation de texte > Création de texte.
    • Aide de Flash > Formation à ActionScript 2.0 dans Adobe Flash > Utilisation du texte et des chaînes > Utilisation des polices > Intégration des polices.
    • Un tutoriel vidéo est disponible ici.
  • Au sujet de la priorité des opérateurs: Aide de Flash > Formation à ActionScript 2.0 dans Adobe Flash > Eléments fondamentaux du langage et de la syntaxe > Présentation des opérateurs > Priorité et associativité des opérateurs.
  • Au sujet de la classe Rectangle: Aide de Flash > Référence du langage ActionScript 2.0 > Classes ActionScript > Rectangle.


Navigation: Sommaire | page précédente page suivante Index

1) , 2) , 3) , 4) , 5) , 6) , 7) , 8) , 9) Vous pouvez télécharger les fichiers de code correspondants à cet article et les swf compilés, le tout dans une archive compressée. Si vous utilisez Flash IDE, cliquez ici. Si vous utilisez un environnement intégrant mtasc et swfmill, cliquez ici
10) Les références à l'aide de Flash concernent la documentation de Flash CS3, accessible par l'IDE de Flash CS3 ou par le site d'Adobe (Support > Documentation).