Share
Dans ce didacticiel, vous apprendrez à créer une liste déroulante activée par des mouvements de souris en haut et en bas, à différentes vitesses, en fonction de la position du curseur. Je couvrirai également la préparation des données de liste avec PHP, le chargement de données XML et une brève explication de l'algorithme que j'ai proposé. Prendre plaisir!
L'autre jour, alors que je testais un téléphone intelligent, j'ai vu l'un de ces effets d'interpolation de liste sympas et ordonnés. Alors, j'ai commencé à penser à comment obtenir un tel effet dans Flash, j'ai fait des recherches sur le Web et, honnêtement, je n'ai pas trouvé exactement ce que je cherchais. Voici donc le résultat de ma petite mission.
Après quelques recherches, j'ai trouvé un bon algorithme. Il relie simplement le mouvement de la souris au pourcentage de la zone visible (celle-ci sera ensuite identifiée comme étant le masque) qui est réellement pointée. Ensuite, le conteneur est déplacé dans la même proportion.
Supposons, par exemple, que la souris se trouve près du bas de l'accolade bleue. Dans ce scénario, le conteneur se déplacerait de 20% vers le haut.
Comme vous pouvez le constater, cela fonctionne très bien. Lorsque le curseur de la souris atteint le haut ou le bas de la zone visible, nous avons la certitude que nous avons atteint le début ou la fin de la liste. Cette technique est assez simple car nous n’avons pas à nous soucier de la liste, par exemple, du début et de la suite..
Mais… Et si nous avons des centaines d’éléments de liste? Maintenant nous avons un problème. Si notre zone visible (masque) a, disons, une hauteur de 500 pixels et que nous avons une liste de 100 éléments (toute la zone de contenu), chacun d'eux ayant une hauteur de 20 pixels, en déplaçant la souris d'un quart de la zone visible. (masque) entraînerait la transition de 20 éléments (400px / 20px) à la vitesse de la lumière. Donc, je suppose que cette approche ne résulterait pas très bien.
Alors, je suis venu avec cette solution:
En gros, j'ai défini deux zones - en dessous et au dessus du centre. Chaque zone a une valeur associée. Cette valeur est calculée en fonction de la distance entre le curseur de la souris et le centre. Donc, si nous associons cette valeur à une variable, nous pourrions modifier la vitesse en fonction de la position de la souris. Le signe moins est juste pour décider de la direction du mouvement.
Cela dit, obtenons du contenu réel.
Nous utiliserons un fichier XML externe pour alimenter l'application car:
Nous avons donc besoin d'une grande liste d'éléments… Qu'en est-il de la liste des pays du monde entier??
(Cette étape est un peu un sujet supplémentaire car je vais utiliser une autre langue pour m'aider à préparer le fichier XML. Donc, si cela ne vous intéresse pas, ne vous inquiétez pas, ce sera dans les fichiers à télécharger.)
Je viens de chercher sur Google [liste des pays du monde] et dans le premier résultat, j'ai cette liste:
(source: http://www.listofcountriesoftheworld.com)
Copiez le tout dans un fichier texte et enregistrez-le. Je l'ai nommé countries.txt.
Le script ci-dessous est écrit en PHP. Vous aurez besoin d'un serveur Web pour l'exécuter. J'utilise wampserver, un joli pack qui installe PHP, MySQL et Apache en quelques clics.
Pour utiliser ce script, vous devez initialiser le serveur Web et l'exécuter dans un sous-répertoire de votre répertoire \ www \. Une dernière remarque: le script et le countries.txt doivent être dans le même dossier.
'. "\ n"); fwrite ($ fp, ''. "\ n"); foreach ($ lignes en tant que $ line) $ line = rtrim ($ line, "\ r \ n"); $ pattern = '/ \ d + \ s * /'; $ replacement = "; $ line = preg_replace ($ pattern, $ replacement, $ line); $ str =" \ t ". ' '); fclose ($ fp); ?>- '. ligne $. '
'. "\ n"; fwrite ($ fp, $ str); fwrite ($ fp, '
La sortie de ce script sera enregistrée dans un fichier portant le nom data.xml. Si vous ne comprenez pas cette étape, ne vous inquiétez pas car vous pouvez le télécharger ici..
Si vous regardez la démo, vous remarquerez que notre application possède une interface, des boutons, etc. Commençons donc à rassembler tous les graphiques.
Ouvrez votre Adobe Flash et créez un nouveau fichier ActionScript 3 avec les paramètres suivants:
Enregistrez le fichier. J'ai appelé le mien scroll.fla.
Fichier> Importer> Importer sur la scène et sélectionnez l'image background.jpg (toutes les images sont incluses dans assets.zip, dans le téléchargement source)..
À présent:
Fenêtre> aligner
Cela ouvrira le panneau d’alignement. Centrez l'image sur la scène en cliquant sur les boutons montrés dans l'image ci-dessous.
Et maintenant, donnez à votre calque le nom d’arrière-plan (n'oubliez pas de le verrouiller):
Créez un nouveau calque et importez le fichier image pad.png. Le processus d'importation est exactement le même que lors de l'étape précédente. Appuyez sur F8 pour le convertir en MovieClip et nommez-le mcPad. Cliquez ensuite sur la case à cocher Exporter pour ActionScript et, dans le champ de saisie Classe, tapez le nom Pad.
Fondamentalement, nous définissons le pad MovieClip comme une sous-classe de la classe MovieClip elle-même. Par conséquent, nous pouvons l’utiliser directement à partir de notre code et le traiter comme un MovieClip normal car il hérite de la classe MovieClip. Assez cool hein?
Supprimez maintenant cette instance de la scène, mais pas de la bibliothèque (car comme je l’ai dit, nous allons l’utiliser à partir du code)..
Importez l’image itemBackground.jpg, appuyez sur F8 pour la convertir en MovieClip. Donnez-lui le nom mcItem. Encore une fois, exportez pour ActionScript et nommez la classe Item.
Maintenant, le processus sera légèrement différent:
Enfin, verrouillez le calque Par-dessus, revenez au scénario principal et supprimez l'occurrence de clip mcItem de la scène..
Pour cette application, j'utilise la police Arial Rounded MT Bold Negrito (c'est une police gratuite, j'ai téléchargé la mienne à partir d'ici). Comme ce n'est pas une police système, nous devrons l'importer aussi:
Dans le scénario principal, nous n’avons besoin que du calque Arrière-plan pour pouvoir supprimer les calques restants.
Voilà pour l'outil de création Flash. Commençons à coder.
Créez un nouveau fichier ActionScript, enregistrez-le sous DocumentClass.as. Ensuite, ajoutez ce code:
package import flash.display.MovieClip; Classe publique DocumentClass étend MovieClip private var _pad: MovieClip; fonction publique DocumentClass () _pad = new Pad (); addChild (_pad); _pad.x = stage.stageWidth / 2 - _pad.width / 2; _pad.y = stage.stageHeight / 2 - _pad.height / 2;
(Si vous n'êtes pas sûr de ce que nous faisons ici, consultez cette brève introduction aux classes de document.)
Se souvenir du mdPad MovieClip? Rappelez-vous que nous l'avons exporté pour ActionScript. Donc, chaque fois que nous voulons instancier ce MovieClip, il suffit de taper
nouveau pad ();
Ce code crée essentiellement une instance du mcPad MovieClip et l'ajoute à la scène à l'aide de la méthode addChild (). Alors maintenant, le _tampon est sur notre liste d'affichage!
Ensuite, je l'ai centré sur la scène (verticalement et horizontalement).
Testez l'application et vous devriez voir la disposition de fond sur le lecteur flash.
Notre application utilisera un conteneur pour contenir tous les éléments ensemble. Nous allons donc créer un nouveau MovieClip dans DocumentClass. Déclarez la propriété:
private var _container: MovieClip;
À l'intérieur du constructeur, à la fin:
_container = new MovieClip (); addChild (_container);
Ajoutez les instructions d'importation suivantes:
import flash.events.Event; import flash.net.URLRequest; import flash.net.URLLoader;
Déclarez les propriétés suivantes:
public var loader: URLLoader; données var publiques: XML; éléments var publics: XMLList;
Puis implémentez les méthodes suivantes:
Accentsconagua
fonction privée dataLoad (): void loader = new URLLoader (); loader.addEventListener (Event.COMPLETE, dataLoaded); loader.load (new URLRequest ("data.xml")); fonction privée dataLoaded (event: event): void trace ("Data Loaded."); Enfin, ajoutez cet appel de méthode au constructeur:
dataLoad ();
Jusqu'à présent, nous avons:
package import flash.display.MovieClip; import flash.events.Event; import flash.net.URLRequest; import flash.net.URLLoader; Classe publique DocumentClass étend MovieClip private var _pad: MovieClip; private var _container: MovieClip; public var loader: URLLoader; fonction publique DocumentClass () _pad = new Pad (); addChild (_pad); _pad.x = stage.stageWidth / 2 - _pad.width / 2; _pad.y = stage.stageHeight / 2 - _pad.height / 2; _container = new MovieClip (); addChild (_container); dataLoad (); fonction privée dataLoad (): void loader = new URLLoader (); loader.addEventListener (Event.COMPLETE, dataLoaded); loader.load (new URLRequest ("data.xml")); fonction privée dataLoaded (événement: événement): void trace (nouveau code XML (événement.target.data.toString ())); Testez l'application et vous devriez voir dans la console toutes les données XML. Allons-nous en.
Ajoutez les instructions d'importation suivantes:
import flash.text.TextFormat; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.Font;
Ajoutez ces nouvelles variables:
données var publiques: XML; éléments var publics: XMLList; private var _item: Item; private var _itemTextField: TextField; private var _defaultFormat: TextFormat = new TextFormat (); private var _arialRounded: Police = new ArialRounded (); private var _textFieldXPosition: uint = 10; private var _textFieldYPosition: uint = 13; private var _textFieldWidth: uint = 240; private var _textFieldHeight: uint = 25; private var _itemPosition: uint = 49;
Mettez à jour la méthode dataLoaded:
fonction privée dataLoaded (événement: événement): void // cette propriété contient les données de données XML chargées = new XML (event.target.data); // la propriété items contient tous les éléments répétés items = data.item; // this itère sur chaque élément pour (var i = 0; i < items.length(); i++) // remember the mcItem? We are instantiating that MovieClip _item = new Item(); // sets the Over layer MovieClip's alpha to 0 _item.item_btn_over.alpha = 0; // creates the Item textfield _itemTextField = new TextField(); _itemTextField.x = _textFieldXPosition; _itemTextField.y = _textFieldYPosition; _itemTextField.selectable = false; _itemTextField.width = _textFieldWidth; _itemTextField.height = _textFieldHeight; _itemTextField.embedFonts = true; _defaultFormat.color = 0x111112; _defaultFormat.font = _arialRounded.fontName; _defaultFormat.size = 18; _itemTextField.defaultTextFormat = _defaultFormat; _itemTextField.text = items[i].toString(); // adds the textfield to the item's display list _item.addChild(_itemTextField); // positions each item vertically based on the iteration value _item.y = i * _itemPosition; _item.buttonMode = true; _item.mouseChildren = false; // adds the item to the container display list _container.addChild(_item);
Nous avons maintenant créé plus de 200 boutons et les avons affichés à l'écran. Si vous exécutez l'application, vous remarquerez que cette liste commence à la position (0, 0) et remplit toute la scène. Ce n'est pas ce que nous voulons donc gérons cela dans la prochaine étape.
Créons une forme pour masquer la liste afin que nous ne voyions que la zone visible, comme dans l'image précédente:
À la fin, nous allons centrer le masque et le conteneur. Alors, ajoutez une autre déclaration d'importation:
import flash.display.Shape;
Propriétés:
private var _mask: Shape; private var _maskWidth: uint = 288; private var _maskHeight: uint = 290; private var _paddingTop: uint = 120;
Et… Dans la méthode dataLoaded à la fin, ajoutez le code suivant:
_mask = new Shape (); _mask.graphics.beginFill (0xFF0000); _mask.graphics.drawRect (0, 0, _maskWidth, _maskHeight); _mask.graphics.endFill (); // centre le masque horizontalement sur la scène _mask.x = stage.stageWidth / 2 - _container.width / 2; // positionne le masque verticalement à 120 pixels du haut _mask.y = _paddingTop; addChild (_mask); // assigne le masque au conteneur _container.mask = _mask; // centre le conteneur horizontalement sur la scène _container.x = stage.stageWidth / 2 - _container.width / 2; // positionne le conteneur verticalement à une certaine valeur _container.y = _paddingTop;
Juste une petite amélioration… Actuellement, notre conteneur a beaucoup de trous car il y a une marge entre chaque article. Nous allons donc lui donner un fond pour éviter des résultats indésirables lors de l'écoute d'événements.
Propriété:
private var _background: Shape;
Toujours dans la méthode dataLoaded, sous le code existant:
_background = new Shape (); _background.graphics.beginFill (0xFFFFFF); _background.graphics.drawRect (0, 0, _container.width, _container.height); _background.graphics.endFill (); _container.addChildAt (_background, 0);
Comme vous le savez probablement, les auditeurs écoutent les événements. Ici, nous en utiliserons un pour l’événement MouseOver et un autre pour l’événement MouseOut..
Ajoutez ceci à la fin de la méthode dataLoaded:
_container.addEventListener (MouseEvent.MOUSE_OVER, movingOver); _container.addEventListener (MouseEvent.MOUSE_OUT, movingOut);
Implémentons maintenant les méthodes movingOver et movingOut:
fonction privée movingOver (event: MouseEvent): void _container.removeEventListener (MouseEvent.MOUSE_OVER, movingOver); fonction privée movingOut (event: MouseEvent): void _container.addEventListener (MouseEvent.MOUSE_OVER, movingOver);
Maintenant, nous pouvons écouter des événements, plus spécifiquement MOUSE_OVER et MOUSE_OUT. Les événements sont comme des messages qui notifient tout objet en attente du même événement. Le "message" indique simplement que l'événement s'est produit. Dans ce cas, le _récipient L’objet écoutera les événements MouseOver et MouseOut. Quand ils ont lieu le _récipient a la capacité de réagir en conséquence.
Donc, nous assignons d’abord les auditeurs d’événement à la _récipient objet et, plus tard, si le _récipient est survolé, l'écouteur MouseOver est supprimé. Au contraire, lorsque la souris est hors de portée _récipient object the mouse over listener est à nouveau affecté au _récipient.
Le flux d'événements est un mécanisme puissant qui permet au programmeur de gérer plusieurs objets avec un seul écouteur d'événements. Donc, comme vous l'imaginez probablement, _container.addEventListener "écoutera" les événements impliquant le conteneur, les éléments et la forme d'arrière-plan, c'est-à-dire le conteneur et tout ce qu'il contient. Vous pouvez le confirmer en ajoutant le code suivant dans en mouvement et déménager méthodes:
trace (event.target);
Cela tracera l'objet qui a envoyé l'événement.
En écoutant cet événement, nous pouvons définir un comportement qui se produira à chaque image, dans notre cas 63 fois par seconde. C'est pourquoi l'événement OnEnterFrame est très utile pour les animations basées sur le fps. Nous aurons besoin de cela pour déplacer notre parchemin, de sorte que le en mouvement et déménager les méthodes devraient ressembler à ceci:
fonction privée movingOver (event: MouseEvent): void _container.removeEventListener (MouseEvent.MOUSE_OVER, movingOver); addEventListener (Event.ENTER_FRAME, enterFrame); fonction privée movingOut (event: MouseEvent): void removeEventListener (Event.ENTER_FRAME, enterFrame); _container.addEventListener (MouseEvent.MOUSE_OVER, movingOver);
Ajoutez ces propriétés:
var_maxSpeed privé: uint = 15; private var _speed: Number;
Ajoutez la méthode suivante à la fin du code (sous le déménager méthode) . Ce sera exécuté chaque image, grâce à l'écouteur d'événements EnterFrame que nous avons créé plus tôt. Je vais expliquer ce que ce code fait ci-dessous.
function enterFrame (event: Event): void _speed = (_mask.height / 2 - _mask.mouseY) / (_mask.height / 2) * _maxSpeed; _container.y + = _speed; if (_container.y> = _paddingTop) removeEventListener (Event.ENTER_FRAME, enterFrame); _container.y = _paddingTop; if (_container.y <= _mask.height - _container.height + _paddingTop) removeEventListener(Event.ENTER_FRAME, enterFrame); _container.y = _mask.height - _container.height + _paddingTop;
Et voici la logique du scroller:
_speed = (_mask.height / 2 - _mask.mouseY) / (_mask.height / 2) * _maxSpeed;
Cette ligne de code obtient la vitesse en divisant la moitié de la hauteur de la scène par la position Y de la souris.
Disons que la moitié de la scène est 200px et que le curseur de la souris est à la position 300px. En appliquant la formule on obtient:
(200 - 300) / 200 * 15 (_vitesse maximale propriété) = -7,5 qui est négatif, donc la liste nous donnera un mouvement vers le bas. C'est précisément ce que nous recherchons. Si le curseur de la souris était au-dessus du centre, nous aurions une valeur positive et la liste se déplacerait vers le haut..
Ensuite, avec cette déclaration:
_container.y + = _speed;
Nous assignons la vitesse réelle, chaque image (63 fois par seconde) à la _container.y position. Ensuite, nous vérifions avec les déclarations if si la position y du conteneur est où elle est supposée être. Rappelez-vous cette image:
Je vais utiliser la bibliothèque TweenMax de greensock (que vous pouvez télécharger à partir d'ici) pour animer chaque bouton de façon répétée (lorsque la souris survole ou quitte l'élément)..
Ajoutez cette déclaration d'importation:
importer gs. *;
Mettre à jour le en mouvement et déménager méthodes:
fonction privée movingOver (event: MouseEvent): void _container.removeEventListener (MouseEvent.MOUSE_OVER, movingOver); addEventListener (Event.ENTER_FRAME, enterFrame); if (event.target is Item) TweenMax.to (Item (event.target) .item_btn_over, .2, alpha: 1); fonction privée movingOut (event: MouseEvent): void removeEventListener (Event.ENTER_FRAME, enterFrame); _container.addEventListener (MouseEvent.MOUSE_OVER, movingOver); if (event.target is Item) TweenMax.to (Item (event.target) .item_btn_over, .2, alpha: 0);
Analysons ce code en détail. le event.target référencera l'objet qui enverra l'événement, dans ce cas MouseOver ou MouseOut. Cet objet pourrait être un _article, la _Contexte ou la _récipient mais nous ne sommes intéressés que par Article objets donc nous spécifions:
if (event.target est Item)
Ensuite, si c'est le cas, nous animerons n'importe quel objet Item ayant envoyé l'événement en tapant Item (event.target) .item_btn_over. le item_btn_over est le nom d'instance du mcItemOver MovieClip que nous avons créé à l'étape 7. .2 est le temps de l'animation, et dans le dernier paramètre, nous spécifions quelle propriété nous voulons animer (alpha).
En ce moment, notre application fonctionne plutôt bien. Cependant, nous avons du code répété et une application très centralisée. Notez que le dataLoaded la méthode fait presque tout.
Actionscript offre un excellent support pour la programmation orientée objet. Nous pourrions l'utiliser pour dissocier le chargement de données de la logique d'application, etc..
Il existe un modèle de conception appelé Model View Controller qui fonctionne très bien avec les interfaces utilisateur. Ce modèle sépare fondamentalement l'application en trois couches distinctes. Le modèle traite de la logique métier, du traitement des données. Le contrôleur gère les interactions humaines avec l'application. Et enfin, la vue traite de l'interface visuelle de l'application.
Dans ce cas, notre application est trop petite pour implémenter ce modèle. Adoptons donc simplement le modèle et une vue / contrôleur divers à notre application. D'abord, traitons simplement du code répété.
Créez un nouveau fichier ActionScript et tapez le code suivant:
package com.tutsplus.active.util import flash.display. *; public class Align fonction statique publique centerInStage (stage: Stage, mc: DisplayObject): void mc.x = stage.stageWidth / 2 - mc.width / 2; mc.y = stage.stageHeight / 2 - mc.height / 2; fonction statique publique centerHorizontallyInStage (stage: Stage, mc: DisplayObject): void mc.x = stage.stageWidth / 2 - mc.width / 2; fonction statique publique centerVerticallyInStage (stage: Stage, mc: DisplayObject): void mc.y = stage.stageHeight / 2 - mc.height / 2;
Nous devons effectuer cette tâche plusieurs fois. J'ai donc décidé de créer une classe qui aligne n'importe quel objet d'affichage sur la scène chaque fois que nous l'appelons. Pour que cela fonctionne, vous devez créer une structure de répertoire comme celle-ci:
\ com \ tutsplus \ active \ util \
dans votre répertoire de production ou dans votre chemin de classe. Ensuite, dans la DocumentClass refactorisée, vous verrez comment utiliser cette classe..
Le modèle gère le comportement et les données du domaine d'application, répond aux demandes d'informations sur son état (généralement à partir de la vue) et répond aux instructions pour changer d'état (généralement à partir du contrôleur).
source: MSDN.
Charger les données et les stocker dans des structures de données sont de bonnes opérations pour composer notre modèle. Créez un nouveau fichier ActionScript et appelez-le ScrollModel.as:
package import flash.events.Event; import flash.net.URLRequest; import flash.net.URLLoader; import flash.events.EventDispatcher; la classe ScrollModel étend EventDispatcher public var loader: URLLoader; données var publiques: XML; éléments var publics: XMLList; Const statique public MODEL_UPDATE: String = "modelChange"; fonction publique ScrollModel () loader = new URLLoader (); loader.addEventListener (Event.COMPLETE, dataLoaded); fonction publique load (req: URLRequest): void loader.load (req); fonction privée dataLoaded (event: Event): void data = new XML (event.target.data); items = data.item; dispatchEvent (nouvel événement (ScrollModel.MODEL_UPDATE));
Avec cette mise à jour, notre dataLoaded la méthode a seulement 3 lignes de code maintenant!
C'est presque le même code que celui que nous avons utilisé dans DocumentClass pour charger les données, à une différence près:
dispatchEvent (nouvel événement (ScrollModel.MODEL_UPDATE));
Après avoir affecté plus de 200 articles à la propriété XMLList, cette ligne de code distribue un événement à celui qui l'écoute. En pratique, nous devrons savoir quand cela se produira pour utiliser ces données dans une autre classe..
Créez un nouveau fichier Actionscript et nommez-le ScrollBox.as:
package import flash.display.Sprite; import flash.display.Stage; import flash.events.Event; import flash.events.MouseEvent; import flash.display.Shape; import flash.text.TextFormat; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.Font; importer gs. *; import com.tutsplus.active.util.Align; public class ScrollBox étend Sprite private var _container: Sprite; private var _item: Item; private var _itemTextField: TextField; private var _defaultFormat: TextFormat = new TextFormat (); private var _arialRounded: Police = new ArialRounded (); private var _textFieldXPosition: uint = 10; private var _textFieldYPosition: uint = 13; private var _textFieldWidth: uint = 240; private var _textFieldHeight: uint = 25; private var _itemPosition: uint = 49; private var _mask: Shape; private var _maskWidth: uint = 288; private var _maskHeight: uint = 290; private var _paddingTop: uint = 120; private var _background: Shape; var_maxSpeed privé: uint = 15; private var _speed: Number; private var _items: XMLList; private var _stage: Stage; public var scrollModel: ScrollModel; fonction publique ScrollBox (stage: Stage, m: ScrollModel) this.scrollModel = m; this._stage = stage; scrollModel.addEventListener (ScrollModel.MODEL_UPDATE, createRollingScroller); fonction privée createRollingScroller (event: Event = null): void _container = new Sprite (); _stage.addChild (_container); _items = scrollModel.items; pour (var i = 0; i < _items.length(); i++) _item = new Item(); _item.item_btn_over.alpha = 0; _itemTextField = new TextField(); _itemTextField.x = _textFieldXPosition; _itemTextField.y = _textFieldYPosition; _itemTextField.selectable = false; _itemTextField.width = _textFieldWidth; _itemTextField.height = _textFieldHeight; _itemTextField.embedFonts = true; _defaultFormat.color = 0x111112; _defaultFormat.font = _arialRounded.fontName; _defaultFormat.size = 18; _itemTextField.defaultTextFormat = _defaultFormat; _itemTextField.text = _items[i].toString(); _item.addChild(_itemTextField); _item.y = i * _itemPosition; _item.buttonMode = true; _item.mouseChildren = false; _container.addChild(_item); _background = new Shape(); _background.graphics.beginFill(0xFFFFFF); _background.graphics.drawRect(0, 0, _container.width, _container.height); _background.graphics.endFill(); _container.addChildAt(_background, 0); _mask = new Shape(); _mask.graphics.beginFill(0xFF0000); _mask.graphics.drawRect(0, 0, _maskWidth, _maskHeight); _mask.graphics.endFill(); Align.centerHorizontallyInStage(_stage, _mask); _mask.y = _paddingTop; addChild(_mask); _container.mask = _mask; Align.centerHorizontallyInStage(_stage, _container); _container.y = _paddingTop; _container.addEventListener(MouseEvent.MOUSE_OVER, movingOver); _container.addEventListener(MouseEvent.MOUSE_OUT, movingOut); private function movingOver (event:MouseEvent):void _container.removeEventListener(MouseEvent.MOUSE_OVER, movingOver); addEventListener(Event.ENTER_FRAME, enterFrame); if (event.target is Item) TweenMax.to(Item(event.target).item_btn_over, .2, alpha:1); private function movingOut (event:MouseEvent):void removeEventListener(Event.ENTER_FRAME, enterFrame); _container.addEventListener(MouseEvent.MOUSE_OVER, movingOver); if (event.target is Item) TweenMax.to(Item(event.target).item_btn_over, .2, alpha:0); function enterFrame(event:Event):void _speed = (_mask.height / 2 - _mask.mouseY) / (_mask.height / 2) * _maxSpeed; _container.y += _speed; if (_container.y >= _paddingTop) removeEventListener (Event.ENTER_FRAME, enterFrame); _container.y = _paddingTop; if (_container.y <= _mask.height - _container.height + _paddingTop) removeEventListener(Event.ENTER_FRAME, enterFrame); _container.y = _mask.height - _container.height + _paddingTop;
Notez les méthodes de classe Align que nous utilisons:
Align.centerHorizontallyInStage (_stage, _mask); Align.centerHorizontallyInStage (_stage, _container);
Il ne reste plus qu'à utiliser la méthode Align.centerHorizontallyInStage () pour aligner n'importe quel objet d'affichage horizontalement.
le createRollingScroller méthode ne commencera que lorsque nous aurons fini de stocker toutes les données dans le éléments: XMLList propriété.
Changer le DocumentClass:
package import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.net.URLRequest; import flash.net.URLLoader; importer flash.events. *; import com.tutsplus.active.util.Align; Classe publique DocumentClass étend MovieClip private var _pad: MovieClip; public var scrollModel: ScrollModel; public var scrollBox: ScrollBox; fonction publique DocumentClass () config (); scrollModel = new ScrollModel (); scrollModel.load (new URLRequest ("data.xml")); scrollBox = new ScrollBox (stage, scrollModel); fonction privée config (): void _pad = new Pad (); addChild (_pad); Align.centerInStage (stage, _pad); Encore une fois, notez à quel point il est facile de centrer des objets d’affichage sur la scène avec la Align.centerInStage () méthode:
Align.centerInStage (stage, _pad);
C'est tout pour l'instant les gars! J'ai couvert des su
