Astuce étirez votre fichier SWF avec Stage.ScaleMode

Que se passe-t-il lorsqu'un site Web fourre votre SWF dans une zone où il ne correspond pas? Dans ce petit conseil, vous apprendrez à prendre en main la manière dont votre fichier SWF évolue.


Étape 1: Configurez votre fichier SWF

Commencez un nouveau projet Flash et réglez votre scène sur une largeur de 350 pixels et une hauteur de 250 pixels.

Créez une classe de document de base (consultez ce conseil rapide pour plus d'informations):

 package import flash.display.Sprite; Classe publique Main Etend Sprite Fonction publique Main () 

La FLA (et le SWC, pour ceux qui n'utilisent pas Flash Pro) dans le fichier zip contient deux actifs:

CheckedBackground, qui a la même taille que la scène, avec son point d'alignement dans le coin supérieur gauche.

Visage, qui est environ la moitié de la scène, avec son point d'enregistrement au centre.

Positionnez-les sur la scène comme suit:

 Classe publique Main (extension) Sprite variable privée vérifiéeBackground: CheckedBackground; visage privé var: visage; fonction publique Main () checkedBackground = new CheckedBackground (); checkedBackground.x = 0; checkedBackground.y = 0; this.addChild (vérifié en arrière-plan); face = new Face (); face.x = stage.stageWidth / 2; // centre le visage horizontalement face.y = stage.stageHeight / 2; // centre la face verticalement this.addChild (face); 

Exécutez votre fichier SWF:


Étape 2: étirer la fenêtre du lecteur

Agrandissez la fenêtre, réduisez-la, étirez-la et hors de proportion, et voyez comment le contenu change:

C'est le mode d'échelle par défaut de Flash, MONTRE TOUT. Le contenu n'est jamais déformé et vous pouvez toujours voir toute la scène. Cela signifie que vous obtenez un effet "boîte aux lettres" si vous vous étirez hors de proportion.


Étape 3: essayez le mode d'échelle NO_BORDER

MONTRE TOUT est le mode de balance par défaut, mais nous pouvons en utiliser trois autres.

Importez la classe StageScaleMode:

 import flash.display.StageScaleMode;

Celui-ci contient des constantes statiques pouvant être utilisées pour définir le mode d'échelle. Essayons PAS DE FRONTIÈRE; ajoutez cette ligne à votre fonction constructeur:

 stage.scaleMode = StageScaleMode.NO_BORDER;

Exécutez votre fichier SWF et étirez-le à nouveau:

Comme le nom le suggère, PAS DE FRONTIÈRE évite l'effet letterbox. Le contenu reste proportionnel mais remplit toujours la surface disponible, même si cela signifie rogner les bords.


Étape 4: essayez le mode d'échelle EXACT_FIT

Modifiez la ligne qui définit le mode d'échelle comme suit:

 stage.scaleMode = StageScaleMode.EXACT_FIT;

Essaye le:

EXACT_FIT permet aux bords de la scène de coller aux bords de la surface disponible, ce qui entraîne une distorsion si le joueur est surdimensionné.


Étape 5: essayez le mode d'échelle NO_SCALE

Pour vérifier le mode d'échelle final, modifiez la ligne comme suit:

 stage.scaleMode = StageScaleMode.NO_SCALE;

Vérifiez-le:

Avec NO_SCALE, le contenu ne change pas du tout de taille; ils restent centrés dans la fenêtre du lecteur, même si cela signifie que vous devez recadrer d'énormes quantités d'arêtes ou laisser des bordures massives de tous les côtés.


Conclusion

Stage.scaleMode vous permet de contrôler l'apparence de votre fichier SWF si un site Web modifie la taille de la zone disponible. C'est également utile pour créer des applications AIR et des sites Web plein écran. NO_SCALE est un choix particulièrement judicieux dans la mesure où (associé à un écouteur d’événement RESIZE), il vous permet d’adapter tout le contenu à la fenêtre, tout en maintenant la taille et les proportions des éléments individuels..

Pour en savoir plus, consultez la série de Franci Zidar sur des sites Web évolutifs en plein écran :)