Share
Dans ce didacticiel, vous apprendrez à créer un Image Rotator simple à partir de zéro en utilisant Flash, XML et ActionScript 3.0..
Ce rotateur d'image est créé presque entièrement à partir de code seul.
Au cours des premières étapes, nous allons définir les propriétés du fichier Fla et intégrer des polices pour améliorer l’image de l’image. Nous ajoutons également un préchargeur pour indiquer la transition automatique des images.
Ouvrez Flash et créez un nouveau fichier Flash (ActionScript 3.0)..
Définissez la taille de la scène sur 600 x 300 px et la vitesse du cadre sur 24 ips.
Afin de mieux regarder notre application, nous utiliserons des polices incorporées..
Ouvrez le panneau Bibliothèque (Cmd + L) et cliquez avec le bouton droit de la souris dans la zone des éléments pour afficher un menu contextuel..
Sélectionner Nouvelle police et choisissez une police que vous aimez. N'oubliez pas de sélectionner la taille réelle que vous allez utiliser dans le film.
J'ai utilisé Helvetica Bold pour le titre de l'image et FFF Harmony pour la description..
Un MovieClip de préchargement sera utilisé pour indiquer la progression, ce qui indiquera à l'utilisateur que les images sont lues automatiquement..
Dans cet exemple, j'ai utilisé le préchargé inspiré par Apple que nous avions créé auparavant ici sur ActiveTuts +. Nous allons simplement utiliser l'animation, il n'y a donc pas besoin de copier le code. Notre code passera à l’image suivante chaque fois que l’animation du préchargeur boucle.
Ce ne serait pas un Image Rotator sans images, alors choisissez-les dans votre collection personnelle ou téléchargez-en quelques-uns pour les tester..
Ce sont les images de la démo, obtenues à partir de Flickr, toutes avec une licence Creative Commons.
Herbe 01 par 100kr
impact profond sur la couleur de la planète par spettacolopuro
Yosemite: couleurs d'automne par tibchris
Les images ont été redimensionnées à 600x300 px pour s'adapter à la taille du film.
Un fichier XML sera chargé par l'application. Ce fichier contiendra toutes les informations sur les images telles que le titre, l'URL de l'image et la description..
Ouvrez votre éditeur préféré et écrivez:
Créez un nouveau document ActionScript et enregistrez-le sous. ImageRotator.as.
Ce sont les cours obligatoires. Pour une description plus détaillée de chaque classe, reportez-vous à l'aide de Flash (appuyez sur F1 dans Flash)..
package import fl.transitions.Tween; import fl.transitions.easing.Strong; import fl.transitions.TweenEvent; import flash.display.Sprite; import flash.net.URLLoader; import flash.net.URLRequest; import flash.display.Loader; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFieldAutoSize; import flash.text.AntiAliasType; import flash.utils.Timer; import flash.events.TimerEvent; import flash.events.Event; import flash.events.MouseEvent;
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 ferons en sorte que notre classe de documents étende Sprite, car elle n'a pas besoin de calendrier.
Classe publique ImageRotator étend Sprite
Ce sont les variables que nous allons utiliser; chacun est expliqué dans les commentaires.
private var xml: XML; // Stocke les informations du fichier xml private var urlLoader: URLLoader; // Charge l'URL du fichier XML private var imagesVector: Vector.= nouveau vecteur. (); // Stocke les images chargées dans l'objet Loader private var imagesCounter: int = 0; privé tween: Tween; private var lastTarget: *; // Obtient la dernière image cliquée, en mode de transition manuelle private var tweening = false; var privé infoCounter: int = 0; // Modifie les informations XML pour afficher des informations var privéesPanel: Sprite = new Sprite (); private var titleField: TextField = new TextField (); description de la variable privée: TextField = new TextField (); private var titleFormat: TextFormat = new TextFormat (); private var descriptionTF: TextFormat = new TextFormat (); var timer privé: minuterie; private var preloader: Preloader = new Preloader (); // Le préchargeur dans la bibliothèque privée var a été ajouté: Boolean; // Vérifie si le préchargeur est au stade private var titleFont: Helvetica = new Helvetica (); // Instancie les polices incorporées private var bitmapFont: Harmony = new Harmony ();
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 que vous l'exécutez à l'aide de la classe de document. Dans ce cas, ce sera le premier code exécuté au démarrage de notre fichier SWF..
Les paramètres initiaux ont des valeurs par défaut; cela nous permettra d'utiliser la classe comme classe de document et comme exemple.
Les paramètres sont l'URL du fichier XML et le temps d'attente de l'objet Minuteur pour effectuer une transition entre les images. ce nombre doit être plus haute que la durée de la transition Tween (une seconde par défaut).
fonction publique ImageRotator (xmlPath: String = "images.xml", intervalle: int = 2000): void
Ce code va à l'intérieur du constructeur. Il démarre le minuteur, définit le format de texte par défaut pour les champs de texte et appelle la fonction loadXML.
minuterie = nouvelle minuterie (intervalle); titleFormat.bold = true; titleFormat.font = titleFont.fontName; titleFormat.color = 0xFFFFFF; titleFormat.size = 14; descriptionTF.font = bitmapFont.fontName; descriptionTF.color = 0xEEEEEE; descriptionTF.size = 8; titleField.defaultTextFormat = titleFormat; titleField.autoSize = TextFieldAutoSize.LEFT; titleField.embedFonts = true; titleField.antiAliasType = AntiAliasType.ADVANCED; description.defaultTextFormat = descriptionTF; description.autoSize = TextFieldAutoSize.LEFT; description.embedFonts = true; loadXML (xmlPath);
Cette fonction utilise l'objet URLLoader pour charger le fichier XML spécifié dans le paramètre du constructeur. La fonction parseXML (à l'étape suivante) est configurée pour s'exécuter lorsque le chargement est terminé.
fonction privée loadXML (file: String): void urlLoader = new URLLoader (nouvelle URLRequest (fichier)); urlLoader.addEventListener (Event.COMPLETE, parseXML);
Les données XML sont attribuées à l’objet XML et une fonction de chargement des images est appelée.
fonction privée parseXML (e: Event): void xml = new XML (e.target.data); Chargement des images();
Une instruction for est utilisée pour obtenir le nombre d'images dans le fichier XML, les charger à l'aide d'un objet Loader et stocker ce Loader dans un objet Vector précédemment défini. Lorsque le chargement d'une image est terminé, la fonction sortImages est exécutée.
fonction privée loadImages (): void for (var i: int = 0; i < xml.children().length(); i++) var loader:Loader = new Loader(); loader.load(new URLRequest(xml.children()[i].@src)); imagesVector.push(loader); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, sortImages);
Cette fonction ajoute les images à la scène et les trie. lorsque toutes les images sont chargées, il appelle les fonctions qui créent le panneau d'information et les écouteurs de la souris.
fonction privée sortImages (e: Event): void imagesCounter ++; for (var i: int = imagesVector.length - 1; i> = 0; i--) // retourne en arrière… addChild (imagesVector [i]); //… afin que les images au début du XML se retrouvent au premier plan if (imagesCounter == imagesVector.length) // Si toutes les images sont chargées createInfoPanel (); timer.addEventListener (TimerEvent.TIMER, autoChange); timer.start (); addPreloader (); addActions ();
Nous utilisons un pour déclaration pour définir les écouteurs de la souris pour chaque image. C'est une forme de contrôle très simple. lorsque l'utilisateur clique sur une image, la fonction de gestionnaire changeImage sera appelée.
fonction privée addActions (): void for (var i: int = 0; i < imagesVector.length; i++)//Gets the number of images //Sets the listener, changeImage function will be executed when an image is clicked imagesVector[i].addEventListener(MouseEvent.MOUSE_UP, changeImage);
Ce code sera exécuté lorsque l'utilisateur clique sur une image. Lisez les commentaires dans le code pour plus de détails.
fonction privée changeImage (e: MouseEvent): void timer.stop (); // Arrête le chronomètre si (ajouté) // Vérifie si le préchargeur est en phase. Si vrai, le supprime, s'il est déjà supprimé, rien ne se passe removeChild (préchargeur); ajouté = faux; if (! tweening) // Si une transition n'est pas en cours lastTarget = e.target; // Récupère l'image cliquée tween = new Tween (e.target, "alpha", Strong.easeOut, 1,0,1, true); // Démarrer une transition tween.addEventListener (TweenEvent.MOTION_FINISH, changeDepth); // L'image va changer de profondeur quand la transition sera faite tweening = true; // indique qu'une transition est en cours infoCounter ++; // Change l'enfant qui sera chargé à partir du xml if (infoCounter> = xml.children (). Length ()) // Si infoCounter est supérieur au nombre total d'images infoCounter = 0; // Réinitialiser titleField.text = xml.children () [infoCounter]. @ Titre; // Appliquer les modifications aux champs de texte description.text = xml.children () [infoCounter]. @ la description; else titleField.text = xml.children () [infoCounter]. @ Titre; // Appliquer les modifications aux champs de texte description.text = xml.children () [infoCounter]. @ la description;
La transition entre les images est basée sur une interpolation alpha. Vous verrez donc l'image suivante une fois la transition terminée. Cependant, si vous cliquez dessus, vous cliquerez sur la même image qu'auparavant, bien qu'elle ne soit pas visible. Cela corrigera ça.
fonction privée changeDepth (e: TweenEvent): void // Lorsque l'alpha est égal à 0 setChildIndex (lastTarget, 0); // déplace l'image afin qu'elle soit derrière les autres lastTarget.alpha = 1; // Restaure sa visibilité tweening = false; // Marquer l'interpolation comme étant complète
Cela créera un panneau semi-transparent, avec du texte généré à partir des balises Title et Description du XML..
fonction privée createInfoPanel (): void // Dessine un rectangle noir avec 50% d'alpha infoPanel.graphics.beginFill (0x000000, 0.5); infoPanel.graphics.drawRect (0, 0, 600, 50); infoPanel.graphics.endFill (); // Positionne et définit la valeur du champ de titre titleField.text = xml.children () [infoCounter]. @ Titre; titleField.x = 5; titleField.y = 5; // Positionne et définit la valeur du champ de description description.text = xml.children () [infoCounter]. @ la description; description.x = 7; description.y = 22; infoPanel.y = 250; // Positionne ce panneau en bas // Ajoute les enfants infoPanel.addChild (titleField); infoPanel.addChild (description); addChild (infoPanel);
Ce code gère la transition automatique; il est déclenché par l'événement TIMER de l'objet Timer.
fonction privée autoChange (e: TimerEvent): void infoCounter ++; // Change l'enfant qui sera chargé depuis XML lastTarget = imagesVector [xml 1 = "-" 2 = "infoCounter" language = ". Children (). Length ()"] [/ xml]; // Obtient la dernière image tweened tween = new Tween (imagesVector [xml 1 = "-" 2 = "infoCounter" language = ". Children (). Length ()"] [/ xml], "alpha", Strong .easeOut, 1,0,1, vrai); // Crée un alpha tween / * Les mêmes actions que la transition manuelle, informations de changement, etc. * / tween.addEventListener (TweenEvent.MOTION_FINISH, changeDepth); interpolation = vrai; if (infoCounter> = xml.children (). length ()) infoCounter = 0; titleField.text = xml.children () [infoCounter]. @ Titre; description.text = xml.children () [infoCounter]. @ la description; else titleField.text = xml.children () [infoCounter]. @ Titre; description.text = xml.children () [infoCounter]. @ la description;
Ce morceau de script ajoute et place le préchargeur.
fonction privée addPreloader (): void added = true; preloader.scaleX = 0,08; preloader.scaleY = 0,08; preloader.x = (600 - preloader.width / 2) - 12; précharge.y = (300 - précharge.hauteur / 2) - 12; addChild (préchargeur);
Ceci termine la ImageRotator classe.
Il y a deux façons d'utiliser cette classe. Vous pouvez l'utiliser dans votre code en tant qu'instance ou en tant que classe de document avec les paramètres par défaut définis précédemment.
Si vous choisissez d'instancier cette classe et de l'utiliser dans votre code, voici un exemple d'utilisation:
Accentsconagua
importer ImageRotator; var ir: ImageRotator = new ImageRotator ("images.xml", 1100); addChild (ir); De cette façon, vous pouvez définir le fichier XML à charger et l'intervalle de la transition sans avoir à modifier le code de la classe..
Sinon, voir l'étape suivante.
Dans le fichier .fla, accédez au panneau de propriétés et écrivez ImageRotator dans le champ Classe. Rappelez-vous que cela utilisera les paramètres par défaut.
Ceci est juste un exemple de rotateur d'image et un bon moyen de commencer à créer votre propre galerie d'images géniale.
Merci d'avoir lu!
