Astuce Redimensionnement des fichiers SWF à l'aide de BrowserCanvas

Avez-vous déjà eu besoin de redimensionner votre fichier SWF intégré en fonction de l'interaction / de la saisie utilisateur, comme par exemple comment Newgrounds vous permet de redimensionner certains jeux Flash pour les adapter à l'écran? Cela peut être fait en utilisant JavaScript et le Interface externe classe en ActionScript. Mais si vous ne savez pas JavaScript du tout?

Eh bien, heureusement pour vous, il y a cette petite classe appelée NavigateurCanvas qui fait tout le travail moche pour vous et dans cette astuce, je vais vous montrer comment l'utiliser.

---

Conditions préalables

Tout d'abord, nous avons besoin d'un éditeur de code. Je vais utiliser FlashDevelop pour ce tutoriel parce que nous allons écrire à la fois ActionScript et HTML et c'est un bon éditeur de code pour les deux. Ce n’est pas une obligation, vous pouvez donc utiliser le logiciel de votre choix. Si vous souhaitez l'utiliser, mais ne savez pas comment, consultez le guide du débutant de FlashDevelop..

Ensuite vous avez besoin du NavigateurCanvas classe alors allez ici et téléchargez-le et lisez un aperçu plus détaillé de celui-ci.

Vous aurez également besoin d'une image représentant le contenu (j'ai utilisé le logo Activetuts +) et d'une image représentant le gestionnaire de redimensionnement. J'ai inclus les deux dans la source de téléchargement, donc ça devrait aller..

Maintenant que nous sommes prêts, commençons!

Remarque: Au cours des six premières étapes, j’ai expliqué comment se préparaient les préparatifs et comment créer une interface utilisateur sans se référer aux données réelles. NavigateurCanvas classe. Si vous ne souhaitez pas les suivre, vous pouvez passer directement à l'étape 7 et continuer à utiliser le projet fourni dans le package de téléchargement. Vous pouvez le trouver dans le la source dossier et sous le SWFResize - un jalon dossier.

---

Étape 1: Créer un nouveau projet

Ouvrir FlashDevelop et créer un nouveau projet en allant à Projet> Nouveau projet? . Donnez-lui un nom et appuyez sur D'accord.

Copiez également le com dossier du fichier téléchargé dans le répertoire source de votre projet.

---

Étape 2: Ajout et incorporation des actifs

Placer le active.png et arrows.png images du package téléchargé dans un les atouts dossier à l'intérieur du poubelle répertoire de votre projet.

Ensuite, ouvrez le Main.as fichier et placez-y les quatre lignes en surbrillance (le reste aura déjà été créé automatiquement par FlashDevelop):

 package import flash.display.Sprite; import flash.events.Event; public class Main étend Sprite [Embed (source = '? / bin/assets/active.png')] public var logo: Class; [Incorporer (source = '?? / Bin/assets/arrows.png')] flèches de variable publique: Class; fonction publique Main (): void if (stage) init (); sinon addEventListener (Event.ADDED_TO_STAGE, init);  fonction privée init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); 

Cela incorporera les deux actifs afin que nous puissions les utiliser au moment de l'exécution.

---

Étape 3: Préparer le terrain

À l'heure actuelle, la scène a ses paramètres par défaut: un fond blanc, une cadence d'images de 24 ips et une taille de 800 x 600 pixels - ce qui est trop volumineux pour nous permettre de démontrer cet effet..

Ajoutez la ligne en surbrillance juste avant la déclaration de classe:

 [SWF (width = "400", height = "300", backgroundColor = "0x313131", frameRate = "60")], classe publique Main étend Sprite

Nous voudrons également définir le mode échelle et l'alignement de la scène. Pour cela nous ajouterons le setStage () méthode à notre classe et l'appeler de l'intérieur du init () méthode.

 fonction privée setStage (): void stage.align = "TL"; stage.scaleMode = "noScale"; stage.addEventListener (Event.RESIZE, onStageResize);  fonction privée onStageResize (e: Event): void 

Comme vous pouvez le constater, j’ai également ajouté un auditeur d’événement sur la scène du Event.RESIZE événement, avec sa fonction de gestionnaire appropriée onStageResize ().

---

Étape 4: Ajout du contenu

D'accord. Nous avons maintenant notre scène configurée et nous allons continuer en ajoutant du contenu.

Ajoutez d’abord ces deux variables à notre classe:

 private var _logo: Bitmap; var_arrows privé: Sprite;

Maintenant, ajoutez le createObjects () méthode et l'appeler de l'intérieur du init () méthode:

 fonction privée init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); setStage (); createObjects ();  fonction privée createObjects (): void _logo = new logo () as Bitmap; addChild (_logo); _arrows = new Sprite (); _arrows.buttonMode = true; _arrows.addChild (nouvelles flèches () en tant que Bitmap); addChild (_arrows); 

Cela va instancier nos objets et les ajouter à la liste d'affichage.

Si vous compilez le code maintenant, vous verrez que ces deux se chevauchent alors positionnons-les.

---

Étape 5: positionnement

Considérons que nous aurions besoin que notre contenu reste toujours au centre de la scène et que le gestionnaire de redimensionnement soit dans le coin inférieur droit de la scène. Nous allons utiliser les deux méthodes suivantes pour le faire.

le positionLogo () va centrer le contenu sur la scène?

 fonction privée positionLogo (): void _logo.x = stage.stageWidth * 0.5 - _logo.width * 0.5; _logo.y = stage.stageHeight * 0.5 - _logo.height * 0.5; 

? et le positionArrows () définira le gestionnaire de redimensionnement dans le coin inférieur droit de la scène:

 fonction privée positionArrows (): void _arrows.x = stage.stageWidth - _arrows.width - 30; _arrows.y = stage.stageHeight - _arrows.height - 30; 

Enfin, appelons-les de l'intérieur du init () méthode pour faire le positionnement réel.

 fonction privée init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); setStage (); createObjects (); positionLogo (); positionArrows (); 

En outre, il est maintenant temps de modifier le onStageResize () gestionnaire pour positionner le logo chaque fois que la scène est redimensionnée.

 fonction privée onStageResize (e: Event): void positionLogo (); 

Compilez le code et vérifiez le résultat. Ça a l'air bien, n'est-ce pas? :)

---

Étape 6: Terminer l'interface utilisateur

La dernière chose que nous devons faire pour que notre interface utilisateur soit complète est de lui ajouter de l'interactivité.

Ajouter ces deux MouseEvent les auditeurs après la dernière ligne de la createObjects () méthode

 _arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp);

Ajoutez également leurs fonctions de gestionnaire correspondantes:

 fonction privée onMouseDown (e: MouseEvent): void _arrows.startDrag (); addEventListener (Event.ENTER_FRAME, onEnterFrame);  fonction privée onMouseUp (e: MouseEvent): void _arrows.stopDrag (); _arrows.x = stage.stageWidth - _arrows.width - 30; _arrows.y = stage.stageHeight - _arrows.height - 30; removeEventListener (Event.ENTER_FRAME, onEnterFrame);  fonction privée onEnterFrame (e: Event): void 

Comme vous pouvez le voir SOURIS VERS LE BAS et le MOUSE_UP les gestionnaires d'événements sont utilisés pour le gestionnaire de redimensionnement et un ENTER_FRAME écouteur d'événements est utilisé pour exécuter le code pour le redimensionnement. Nous ajouterons le code correspondant dans le onEnterFrame () gestionnaire dans les étapes ultérieures.

---

Étape 7: Utilisation du NavigateurCanvas Classe

Jusqu'à présent, nous ne faisions que la programmation AS3 de base sans discuter de l'idée de ce tutoriel: redimensionner la zone occupée par le fichier SWF dans la page Web. Celles-ci n'étaient pas nécessaires, mais je les ai conçues pour simuler un scénario réel simplifié..

Pour commencer, nous allons d'abord ajouter une nouvelle variable appelée _Toile de type BrowserCanvas:

 private var _canvas: BrowserCanvas;

Remarque: Si vous n'utilisez pas d'éditeur de code qui importe automatiquement les classes utilisées, n'oubliez pas de le faire vous-même..

Après avoir créé la variable, instanciez-la dans le createObjects () méthode.

 fonction privée createObjects (): void _canvas = new BrowserCanvas (stage); _logo = new logo () en tant que Bitmap; addChild (_logo); _arrows = new Sprite (); _arrows.buttonMode = true; _arrows.addChild (nouvelles flèches () en tant que Bitmap); addChild (_arrows); _arrows.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDown); _arrows.addEventListener (MouseEvent.MOUSE_UP, onMouseUp); 

Comme vous pouvez le voir NavigateurCanvas La classe prend les trois paramètres suivants:

• étape -- c'est une référence à la scène. Ceci sera utilisé pour s'assurer que le bon film Flash est ciblé
• containerId -- c'est une référence à la balise div ou object qui contient le film et que nous voulons redimensionner. Ce n'est vraiment nécessaire que si plusieurs instances du même fichier SWF sont incorporées dans la même page.
• navigateurHacks -- une liste de piratages à appliquer. Vous n'avez pas réellement besoin de passer ceci car il applique par défaut tous les hacks

Remarque: Si vous compilez le code maintenant, vous devriez obtenir l'erreur suivante:

Erreur n ° 2067: l'interface ExternalInterface n'est pas disponible dans ce conteneur. ExternalInterface nécessite Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 et versions ultérieures, ou d'autres navigateurs prenant en charge NPRuntime..

En effet, le fichier SWF n'est pas encore incorporé dans un conteneur HTML. Le film se compilera quand même avec succès, mais si vous ne voulez pas obtenir cette erreur, vous pouvez ajouter une instruction if pour vérifier si le film se trouve dans le bon conteneur. Cela peut être facilement fait en vérifiant la ExternalInterface.available propriété avant d'instancier le NavigateurCanvas objet.

 if (ExternalInterface.available) _canvas = new BrowserCanvas (stage);

---

Étape 8: Redimensionnement du fichier SWF

La dernière chose que nous devons faire dans Flash est d’ajouter le code qui effectue le redimensionnement. Ce code sera exécuté de l'intérieur du onEnterFrame () gestionnaire d'événements:

 fonction privée onEnterFrame (e: Event): void if (_canvas) var w: Number = _arrows.x + _arrows.width + 30; var h: Number = _arrows.y + _arrows.height + 30; _canvas.width = w.toString (); _canvas.height = h.toString (); 

le w et h les variables sont utilisées pour calculer la largeur et la hauteur de la scène appropriées, après quoi nous définissons les propriétés de largeur et de hauteur du _Toile objet à la largeur et la hauteur correspondantes. Ces deux propriétés doivent être définies en tant que chaînes.

Remarque: La déclaration if est là pour vérifier si le _Toile object a été instancié, car si nous compilons le code et utilisons le gestionnaire de redimensionnement, nous recevrons une erreur. Cela se produit à cause du conteneur inapproprié à nouveau. Comme le film est lu dans le lecteur autonome, il n’existe pas de conteneur HTML. _Toile l'objet n'a pas été instancié (regardez l'étape précédente).

Compiler le projet et passer à l'étape suivante.

---

Étape 9: en HTML

Maintenant que la partie Flash est terminée, nous devons un peu travailler en HTML, car certaines étapes sont nécessaires pour que cela fonctionne correctement..

Si vous utilisez FlashDevelop vous devriez avoir un fichier HTML appelé index.html généré automatiquement dans le poubelle annuaire; sinon, créez-le. Ça devrait ressembler à ça:

Il s’agit d’un fichier HTML simple avec le fichier SWF incorporé à l’aide de SWFObject..

Remarque: Si vous n'avez pas SWFObject vous pouvez obtenir si d'ici et placer le SWFObject.js fichier dans un dossier appelé js placé dans le même dossier que votre index.html et fichiers SWF.

Cela fonctionnera également avec l’intégration de base en utilisant le