Share
Dans ce didacticiel, nous expliquerons comment accéder à la liste d'affichage et l'utiliser tout en créant une galerie d'images basée sur XML avec ActionScript 3.0..
En utilisant XML, nous chargeons et obtenons dynamiquement des informations sur les images, nous leur donnons une position centrale aléatoire, nous ajoutons une image, une fonctionnalité de glissement, et enfin, nous utiliserons une interpolation pour gérer l'animation de zoom.
Ouvrez Flash et créez un nouveau fichier Flash (ActionScript 3)..
Définissez la taille de la scène sur 600x350 et ajoutez un dégradé radial gris (#EEEEEE, #DDDDDD).
Nous allons ajouter une animation de préchargement pour informer l'utilisateur du chargement du contenu. Dans ce cas, j'ai utilisé le préchargeur inspiré par Apple que nous avons créé auparavant. Comme nous allons utiliser uniquement l'animation, il n'est pas nécessaire d'importer la classe ou d'utiliser un identifiant d'exportation..
Placez le préchargeur sur la scène et centrez-le.
Nous allons incorporer une police, une tâche très facile lorsque vous ajoutez un TextField à la scène dans l'IDE Flash, mais un peu différent en utilisant ActionScript..
Ouvrez le panneau Bibliothèque et cliquez avec le bouton droit de la souris dans la zone des éléments sans en sélectionner un. Un menu contextuel apparaît..
Cliquez sur "Nouvelle police" pour ouvrir une boîte de dialogue, donnez un nom à votre police et sélectionnez celle que vous souhaitez utiliser, comme indiqué dans l'image suivante..
Cela va créer une classe de la police que vous avez sélectionnée, nous l'instancierons à l'étape 9.
Créons le fichier XML.
Ouvrez votre éditeur de texte ou XML préféré et écrivez:
Lorsque vous avez terminé, enregistrez-le sous le nom "images.xml" dans votre dossier XML..
Le code que nous allons utiliser sera écrit dans une seule classe qui sera utilisée comme classe de document dans le fichier FLA..
Créer un nouveau fichier ActionScript (Fichier> Nouveau)
Enregistrez-le sous "Main.as".
Nous commencerons par:
classes de package
le paquet mot-clé vous permet d'organiser votre code en groupes pouvant être importés par d'autres scripts, il est recommandé de les nommer en commençant par une lettre minuscule et d'utiliser des intercaps pour les mots suivants, par exemple: galerieClasses.
Si vous ne souhaitez pas regrouper vos fichiers dans un package ou si vous n'avez qu'une seule classe, vous pouvez l'utiliser directement à partir de votre dossier source, mais l'idée est d'être organisé.
import flash.display.Sprite; import flash.display.MovieClip; import flash.net.URLLoader; import flash.net.URLRequest; import flash.display.Loader; import flash.events.Event; import flash.filters.BitmapFilter; import flash.filters.DropShadowFilter; import flash.text.TextFormat; import flash.text.TextField; import flash.text.AntiAliasType; import flash.events.MouseEvent; import fl.transitions.Tween; import fl.transitions.easing.Strong; import fl.transitions.TweenEvent;
Ce sont les classes dont nous aurons besoin pour faire cette galerie. Si vous avez besoin d’aide pour une classe spécifique, utilisez l’aide de Flash (F1)..
Classe publique principale étend MovieClip
le s'étend mot-clé définit une classe qui est une sous-classe d'une autre classe. La sous-classe hérite de toutes les méthodes, propriétés et fonctions, ainsi nous pouvons les utiliser dans notre classe.
Nous allons utiliser des méthodes et des propriétés spécifiques à MovieClip, nous étendons donc à l'aide de la classe MovieClip.
var xml: XML; // Objet XML qui analysera le fichier XML. Var images: Array = new Array (); // Ce tableau stockera les images chargées var imagesLoaded: int = 0; // Un compteur, compte les images chargées var imagesTitle: Array = new Array (); // Les propriétés de titre du fichier XML var tween: Tween; // Gère l'animation var zoomed: Boolean = false; // Vérifie si une image est zoomée, false par défaut var can canClick: Boolean = true; // Vérifie si l'utilisateur peut cliquer sur une image pour l'agrandir, true par défaut var lastX: int; // Stocke la propriété x de la dernière image sur laquelle on a cliqué var lastY: int; // Stocke la propriété y de la dernière image sur laquelle on a cliqué var textformat: TextFormat = new TextFormat (); // Un écran var TextFormat Object: Sprite = new Sprite (); // Un écran noir pour se concentrer sur l'image active var formatFont: Avenir = new Avenir (); // Ceci est la police incorporée
Le constructeur est une fonction qui s'exécute lorsqu'un objet est créé à partir d'une classe. Ce code est le premier à s'exécuter lorsque vous créez une instance d'un objet ou lorsque vous utilisez la classe de document..
Dans cette fonction, nous allons définir les propriétés de l'objet TextFormat que nous utiliserons pour afficher un titre ou une description de chaque image. Crée l'écran noir qui apparaît lorsque l'utilisateur clique sur une image et appelle la fonction qui charge le fichier XML souhaité..
Accentsconagua
fonction publique Main (): void textformat.color = 0xFFFFFF; textformat.font = formatFont.fontName; textformat.size = 17; // Utilisez la même taille que vous avez utilisée pour incorporer la police à partir de la bibliothèque screen.graphics.beginFill (0x111111, .75); screen.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); screen.graphics.endFill (); loadXML ("xml / images.xml"); Cette fonction charge le fichier XML fourni par le paramètre "file". Nous ajoutons également un écouteur à gérer lorsque le chargement est terminé.
fonction privée loadXML (file: String): void var urlLoader: URLLoader = new URLLoader (); var urlReq: URLRequest = new URLRequest (fichier); urlLoader.load (urlReq); urlLoader.addEventListener (Event.COMPLETE, handleXML);
Ici, nous convertissons le fichier XML chargé en un objet XML valide en utilisant le paramètre "data" de l'URLLoader. Nous utilisons ensuite une instruction "for" pour créer un chargeur pour chaque image du code XML. Des informations supplémentaires se trouvent dans le commentaire.
fonction privée handleXML (e: Event): void xml = new XML (e.target.data); pour (var i: int = 0; i < xml.children().length(); i++) var loader:Loader = new Loader(); loader.load(new URLRequest(String(xml.children()[i].@src))); images.push(loader); //Adds the Loaders to the images Array to gain access to them outside this function imagesTitle.push(xml.children()[i].@title); //Adds the title attribute content to the array to use it outside this function loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded); //A listener to the function that will be executed when an image is loaded
Lorsqu'un chargeur a chargé une image à partir du XML, le code suivant est exécuté:
fonction privée chargée (e: Event): void imagesLoaded ++; // Ajoute un élément à la variable imagesLoaded if (xml.children (). Length () == imagesLoaded) // Lorsque toutes les images sont chargées… removeChild (preloader); // Supprime le MovieClip Preloader prepareImages (); // Cette fonction est expliquée à l'étape suivante
Cette fonction ajoutera le cadre, le champ de texte pour afficher le titre ou la description, le fond noir utilisé à cet effet et un filtre ombré. Prenons-le par parties.
fonction privée prepareImages (): void for (var i: int = 0; i < images.length; i++) //These actions will be applied to all the images loaded so we use a "for" and the "images" array to do that var container:Sprite = new Sprite(); //A container that will store the image, frame, TextField, TextField background and shadow var frame:Sprite = new Sprite(); //The Frame Sprite var infoArea:Sprite = new Sprite(); //The TextField background var infoField:TextField = new TextField(); //The TextField
Cela crée un cadre blanc autour de l'image.
frame.graphics.beginFill (0xFFFFFF); frame.graphics.drawRect (-20, -20, images [i] .width + 40, images [i] .height + 80); frame.graphics.endFill ();
Le rectangle sera positionné sous l'image pour être utilisé comme cadre.
Cela crée un rectangle noir dans la partie inférieure de l'image, où le TextField sera.
infoArea.graphics.beginFill (0x111111, 0,75); infoArea.graphics.drawRect (0, 0, images [i] .width, 60); infoArea.graphics.endFill (); infoArea.y = images [i] .height - 60;
Le code suivant définit les propriétés TextField et ajoute son contenu..
infoField.defaultTextFormat = textformat; infoField.embedFonts = true; // Vous devez ajouter ceci pour utiliser la police incorporée infoField.antiAliasType = AntiAliasType.ADVANCED; // Cette propriété affichera le texte plus clairement infoField.width = images [i] .width - 5; infoField.height = 20; infoField.text = imagesTitle [i]; // Le contenu, obtenu à partir du XML et stocké dans le tableau
Ici, nous définissons l’échelle souhaitée des images. Puisque tout sera à l'intérieur du conteneur Sprite, il suffit de le redimensionner.
container.scaleX = 0,3; container.scaleY = 0,3;
Les images auront une position aléatoire basée sur le centre de la scène. Nous utilisons les mathématiques pour cela.
container.x = stage.stageWidth / 4 + Math.floor (Math.random () * (stage.stageWidth / 4)); container.y = stage.stageHeight / 5 + Math.floor (Math.random () * (stage.stageHeight / 5));
Cela va créer un filtre d'ombre.
var shadowFilter: BitmapFilter = new DropShadowFilter (3, 90, 0x252525, 1, 2, 2, 1, 15); // Distance, angle, couleur, alpha, flou, force, qualité var filterArray: Array = [shadowFilter]; container.filters = filterArray; // Appliquer le filtre
Il est temps d'ajouter les enfants, l'ordre dans lequel nous les ajoutons est celui qu'ils prendront dans la liste d'affichage. Assurez-vous donc de les ajouter de cette façon..
infoArea.addChild (infoField); // Ajoute le TextField au TextField Background container.addChild (frame); // Ajoute le cadre au conteneur container.addChild (images [i]); // Ajoute l'image en haut du cadre dans le conteneur infoArea.visible = false; // Nous définissons les informations d'image sur invisible par défaut container.addChild (infoArea); // Ajoute la zone d'information en haut de tout
Bien que nous puissions ajouter les auditeurs à chaque Sprite auparavant, je vais les ajouter maintenant qu'ils se trouvent dans le conteneur pour vous montrer comment fonctionne la liste d'affichage..
conteneur.getChildAt (1) .addEventListener (MouseEvent.MOUSE_UP, zoomHandler); // Ceci est l'image chargée par le XML, il s'agit de l'objet Loader container.getChildAt (0) .addEventListener (MouseEvent.MOUSE_DOWN, dragImage); // Ceci est le conteneur frame.getChildAt (0) .addEventListener (MouseEvent.MOUSE_UP, stopDragImage); // Frame addChild (conteneur); // Enfin, nous ajoutons le conteneur à la scène
Dans l'étape précédente, nous avons ajouté deux écouteurs au cadre des images. Ces fonctions prendront soin de la traînée.
Nous utilisons "parent" parce que nous voulons faire glisser tous les objets, puisque la "cible" est le cadre Sprite, l'objet parent est le conteneur..
fonction privée dragImage (e: MouseEvent): void e.target.parent.startDrag (); fonction privée stopDragImage (e: MouseEvent): void e.target.parent.stopDrag ();
Cette fonction est en charge du zoom avant et arrière. Son écouteur est dans l'image réelle. Un clic dans le cadre n'appelle pas cette fonction..
Note de l'éditeur: Pour une raison quelconque, le sinon si () déclaration dans cette fonction zoomHandler faisait planter notre surligneur de syntaxe. Comme il ne veut pas s'afficher sur la page, j'ai rendu la fonction disponible pour le téléchargement. Désolé pour tout inconvénient, Ian.
Certaines actions doivent être exécutées une fois les Tweens terminées. Ce sont ces actions..
fonction privée zoomInFinished (e: TweenEvent): void zoomed = true; // Modifier les variables en fonction de l'événement canClick = true; tween.obj.getChildAt (2) .visible = true; // Règle la zone d'information sur visible fonction privée zoomOutFinished (e: TweenEvent): void zoomed = false; removeChild (écran); // Supprime l'écran noir tween.obj.getChildAt (0) .addEventListener (MouseEvent.MOUSE_DOWN, dragImage); // Ajoute l'écouteur de glisser au frame sprite
Retournez à la FLA et ajoutez Principale en tant que classe de document dans le panneau Propriétés. Si vous enregistrez votre classe dans un package, vous devez également ajouter le nom du package, par exemple: yourpackage.Main
Testez votre fichier et voyez votre galerie fonctionner!
Comme toujours, essayez différentes choses dans votre code pour créer la galerie comme vous le souhaitez..
J'espère que vous avez apprécié cette commande, merci d'avoir lu!
