Share
Cette astuce explique comment utiliser une image en tant qu'arrière-plan de site Web et la redimensionner proportionnellement à la taille de la scène. Idéal pour les fichiers SWF pleine hauteur et pleine largeur dans une page Web..
icône iMac par bobbyperux.
Regardez ce sur quoi nous allons travailler. Redimensionnez la fenêtre de votre navigateur et cliquez sur le SWF pour redimensionner automatiquement l'image..
Commençons par créer un nouveau fichier Actionscript 3.0. Enregistrez-le sous le nom resize.fla où vous voulez - je suppose C: \ resize \ resize.fla
Créons les dossiers dont nous avons besoin pour ce tutoriel. Si vous connaissez les chemins de classes et que vous avez votre propre chemin, créez le dossier. \ org \ display \ à l'intérieur (en supposant que vous n'en ayez pas déjà un avec le même nom).
Sinon, créez le dossier \ org \ display dans le même dossier que le document resize.fla (par exemple: C: \ resize \ org \ display).
Importez une image dans la bibliothèque de votre fichier FLA afin que nous puissions l'utiliser pour tester l'effet. Cliquez sur Fichier> Importer> "Importer dans la bibliothèque"..
Dans la boîte de dialogue qui s'ouvre, recherchez le fichier que vous souhaitez utiliser. L'image du ciel que j'ai choisie est disponible dans le téléchargement source en haut de la page..
Ensuite, nous exportons notre image pour ActionScript, afin que nous puissions y faire référence dans notre code..
Commencez par ouvrir votre bibliothèque (si vous ne pouvez pas la voir, cliquez sur Fenêtre> Bibliothèque), cliquez avec le bouton droit de la souris sur l'image, puis cliquez sur Propriétés..
Changez son nom en "Ciel".
Si les options avancées ne sont pas visibles, cliquez sur Avancé dans le coin inférieur droit de la fenêtre Propriétés. Cochez les options "Exporter pour ActionScript" et "Exporter dans l'image 1" en utilisant le nom Ciel pour la classe et flash.display.BitmapData pour la classe de base. Assurez-vous également que l'option "Autoriser le lissage" est cochée. cette option garantira que nous conservons une bonne qualité d'image lors du redimensionnement de l'image.
Cliquez sur OK pour fermer le panneau Propriétés. Donc, maintenant nous avons tout configuré dans notre FLA, vous pouvez le sauvegarder.
Créons maintenant un nouveau document ActionScript et enregistrez-le dans notre \ org \ display \ dossier en tant que OffsetResize.as (par exemple: C: \ resize \ org \ display \ OffsetResize.as), ou à l'intérieur du \ org \ display \ dossier dans votre classpath.
Suivant: code. Découvrez les commentaires.
package org.display // Importer les classes nécessaires pour cet objet import flash.display.Sprite; import flash.display.DisplayObject; import flash.events.Event; // Création d'une nouvelle classe d'extension de la classe Sprite public class OffsetResize extend Sprite // Création des constantes statiques pour un maximum et un minimum // Nous allons utiliser cela pour la propriété offsetType public static const MAX: String = "max"; public statique const MIN: String = "min"; // Le type de redimensionnement, que l'image soit plus grande ou plus petite que la scène private privé var _offsetType: String; // fonction constructeur Fonction public OffsetResize ($ child: DisplayObject, $ offsetType: String = "max"): void // The offsetType; si aucune valeur n'est définie, la valeur "max" sera automatiquement prise en compte _offsetType = $ offsetType; // Ajoute l'enfant ici, n'importe quel type de DisplayObject addChild ($ child); // Vérifie si cet objet est sur scène. Si tel est le cas, appelez la fonction init () if (stage) init (); // S'il n'est pas sur scène, il l'écoute dès qu'il est ajouté à la scène, puis appelle la fonction init () sinon addEventListener (Event.ADDED_TO_STAGE, init); // Ceci va vérifier quand cet objet est retiré de la scène et appeler la fonction end () addEventListener (Event.REMOVED_FROM_STAGE, end); // La fonction init () (appelée lorsque l'objet est dans la phase) // Le paramètre Event = null est parce que nous avons utilisé init () sans aucun paramètre dans le constructeur // et qu'il est également utilisé comme écouteur d'événement. (ADDED_TO_STAGE) fonction privée init (e: Event = null): void // Détecte le redimensionnement de la scène et appelle la fonction stageResize () stage.addEventListener (Event.RESIZE, stageResize); // Appelez la fonction stageResize () maintenant, trop stageResize (); // La fonction stageResize () sera appelée à chaque fois que l'étape est redimensionnée // Le paramètre e: Event = null a été appelé, car nous avons appelé la fonction stageResize () sans paramètre privé function stageResize (e: Event = null): void // Calculez le rapport de largeur en divisant la largeur de la scène par la largeur de l'objet. var px: Number = stage.stageWidth / width; // Calculez le rapport de hauteur en divisant la hauteur de la scène par la hauteur de l'objet var py: Number = stage.stageHeight / height; / * Ceci est l'opérateur ternaire; sur une ligne, il vérifie si _offsetType est "max". Si tel est le cas, il définit la variable div comme valeur maximale entre le rapport de largeur et le rapport de hauteur. Sinon, il définit la variable div comme valeur minimale entre le rapport de largeur et le rapport de hauteur. Ainsi, cette ligne est responsable de savoir si l'image est plus grande ou plus petite que la scène. * / var div: Number = _offsetType == "max"? Math.max (px, py): Math.min (px, py); // Ces deux lignes redimensionnent cet objet en fonction du rapport de division. // Si nous utilisons scaleX ou scaleY ici, cela ne fonctionnera pas comme nous en avons besoin. largeur * = div; hauteur * = div; // Ces deux lignes sont responsables du centrage de cet objet sur la scène. x = (stage.stageWidth / 2) - (width / 2); y = (stage.stageHeight / 2) - (height / 2); // Cette fonction est appelée lorsque cet objet est supprimé de la scène, car nous n'avons plus besoin de la fonction stageResize (). End (e: Event): void // Supprime l'auditeur RESIZE de la scène. removeEventListener (Event.RESIZE, stageResize); / * Nous créons ici le paramètre offsetType pour pouvoir modifier le redimensionnement dynamique de l'objet * / public, ensemble de fonctions offsetType (type: String): void _offsetType = type; // Après avoir changé le type, nous appelons à nouveau la fonction stageResize pour mettre à jour if (stage) stageResize (); // Juste pour si nous voulons savoir ce qu'est le offsetType comme fonction publique get offsetType (): String return _offsetType;
Vous pouvez maintenant enregistrer le fichier OffsetResize.as. Vous pouvez le fermer si vous voulez. à partir de maintenant, nous ne l'éditerons plus, nous l'utilisons simplement dans d'autres classes.
Revenez maintenant à la FLA et affectons-lui une classe de documents. (Vous n'êtes pas familier avec les classes de document? Lisez cette introduction rapide.)
Ouvrez le panneau Propriétés du fichier FLA en cliquant dans un espace vide de la scène (sans aucun objet sélectionné), puis en cliquant sur Fenêtre> Propriétés..
Dans le panneau qui s'ouvre, tapez "Principal" pour la classe (ou classe de document, dans Flash CS3)..
Enregistrez à nouveau la FLA mais ne la fermez pas.
Nous pourrions écrire notre code directement dans la timeline, mais ce n'est pas une bonne habitude; l'objectif de la classe de document est d'éliminer la programmation chronologique.
Créez donc un nouveau fichier ActionScript et enregistrez-le sous le nom "Main.as" dans le même dossier que votre fichier FLA (par exemple: C: \ resize \ Main.as).
Codons maintenant (voir les commentaires dans le code):
package // Importons les classes nécessaires import org.display.OffsetResize; import flash.display.Sprite; import flash.display.Bitmap; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.events.MouseEvent; // Nous étendons la classe Sprite, plutôt que MovieClip, car nous n'utiliserons aucune animation de scénario ici. Public class Main extend Sprite // Ce sera l'instance de notre objet personnalisé OffsetResize private var _bg: OffsetResize; // Le constructeur public function Main (): void / * Nous pourrions utiliser la propriété stage directement ici, mais je suppose qu'un grand nombre de personnes créent un document comme "base.swf" qui charge le "main.swf" file - auquel cas notre main.swf n'aurait pas la propriété stage. Mais il vérifie s'il existe une propriété stage. Nous pouvons utiliser ce swf que nous allons créer avec ou sans le base.swf; dans ce cas, nous l’utiliserons sans le base.swf, mais nous sommes prêts à l’utiliser avec ce dernier si nous le souhaitons. Ainsi, cette ligne vérifiera si notre fichier swf est sur la scène et, le cas échéant, appellera init (). * / if (stage) init (); // S'il n'est pas sur la scène, la fonction init () n'est appelée que si elle est ajoutée à la scène. AddEventListener (Event.ADDED_TO_STAGE, init); // La fonction init est appelée uniquement lorsque l'objet est à l'étape // Il a été expliqué avant de l'utiliser dans la fonction constructeur fonction privée init (e: Event = null): void // Définition de la manière dont l'étape redimensionnera (il ne sera pas redimensionné) et son alignement (coin supérieur gauche) stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; // Souviens-toi de l'image dans la bibliothèque? Eh bien, c'est pourquoi nous l'avons exporté pour AS. // Créons un objet Bitmap avec cette image: var picture: Bitmap = new Bitmap (new Sky (0,0)); // Maintenant, nous créons une instance de la classe OffsetResize que nous avons codée auparavant. // Le deuxième paramètre est facultatif et peut être laissé vide. sa valeur peut être OffsetResize.MAX ou OffsetResize.MIN. _bg = new OffsetResize (picture, OffsetResize.MIN); // ajoute l'instance de OffsetResize à l'étape avec l'index enfant 0, ainsi elle sera derrière tout (c'est un arrière-plan) stage.addChildAt (_bg, 0); // Le code jusqu'à présent est suffisant pour que cela fonctionne, mais je vais montrer comment changer le type offsetType dynamiquement. // ajoutons donc un événement MOUSE_DOWN, qui appellera la fonction mouseDown () lorsque nous cliquons sur la scène. stage.addEventListener (MouseEvent.MOUSE_DOWN, mouseDown); // Cette fonction est appelée à chaque fois que l'on clique sur la fonction privée Stage MouseDown (e: MouseEvent): void / * Il s'agit de l'opérateur ternaire, il s'agit d'une version compacte de cette instruction if longue: if (_bg.offsetType == OffsetResize.MAX) _bg.offsetType = OffsetResize.MIN; else _bg.offsetType = OffsetResize.MAX; * / _bg.offsetType = _bg.offsetType == OffsetResize.MAX? OffsetResize.MIN: OffsetResize.MAX;
Vérifiez si ça va.
Si toutes ces conditions sont remplies, vous pouvez le tester maintenant!
Nous avons créé une classe personnalisée appelée "OffsetResize", qui redimensionne un objet spécifié en fonction de la taille de la scène. Si vous l'avez créé dans votre chemin de classe, vous pouvez l'utiliser où vous voulez: il vous suffit d'importer l'objet OffsetResize et de l'utiliser; c'est extensible et réutilisable. Mais rappelles toi à utiliser avec du contenu évolutif, par exemple un fichier SWF en HTML qui occupe 100% de la largeur et de la hauteur.
Merci d'avoir lu! Postez des questions dans les commentaires.
Accentsconagua