Share
Dans ce tutoriel, je vais vous montrer comment créer un menu tel que le Dock d'Apple à l'aide de classes AS3. Nous allons créer un seul fichier AS qui réalisera toute la magie, en l'étendant pour ajouter de nouvelles fonctionnalités..
Tutoriel republiéToutes les quelques semaines, nous revoyons certains des articles préférés de nos lecteurs tout au long de l'histoire du site. Ce tutoriel a été publié pour la première fois en mars 2010.
Voyons d’abord ce que nous allons créer. Passez votre souris sur les icônes pour voir comment elles se déplacent et s’échelonnent.
Commencez par créer un nouveau fichier ActionScript et enregistrez-le sous le nom "DockItem.as". Je sauve le mien à c: /macmenu/org/effects/DockItem.as.
Notez que notre racine de document (où réside le fichier .fla) sera c: / macmenu; le dossier / org / effects formera le package pour la classe DockItem.
Créez un nouveau fichier Flash ActionScript 3.0 et ouvrez-le afin que le fichier DockItem.as et ce fichier .fla soient ouverts. Enregistrez ce fichier .fla dans le dossier racine (le fichier DockItem.as se trouve dans c: / macmenu / org / effects, de sorte que la racine de votre site est c: / macmenu). fla comme c: /macmenu/macmenu.fla.
Maintenant, nous importons ou dessinons des icônes dans le fichier .fla. J'ai importé certaines icônes que j'ai ici depuis un fichier Illustrator, mais vous pouvez bien sûr en créer votre propre et leur appliquer un dégradé.
Sélectionnez une icône, puis cliquez sur Modifier> Convertir en symbole..
Dans la boîte qui s'ouvre, donnez-lui un nom (j'ai nommé ce symbole "étoile") et faites attention au point d'enregistrement; il doit être en bas au centre. Pour la classe, utilisez le même nom (n'oubliez pas que vous ne pouvez pas utiliser d'espaces) et pour la classe Base, utilisez org.effects.DockItem (la classe que nous allons créer). Assurez-vous également que votre type est défini sur Movie Clip..
Alignez ensuite tous les objets vers le bas: tout sélectionner, cliquez sur Fenêtre> Aligner, assurez-vous que le bouton "Scénario" est désélectionné (sinon, il s'alignera au bas de la scène), puis cliquez sur le bouton en haut à droite de cette fenêtre panneau pour aligner tous les objets.
Nous pouvons avoir autant de boutons que nous voulons, alors convertissons toutes nos icônes en symboles. N'oubliez pas de leur attribuer un nom et une classe, de définir tous leurs points d'enregistrement en bas au centre et de définir la classe de base sur org.effects.DockItem..
Voir ci-dessous la présentation de notre bibliothèque et des icônes. notez l'espace entre eux, c'est important pour créer un bon effet.
Si nous testons le film maintenant, une erreur s'affichera, indiquant qu'un fichier ActionScript doit avoir au moins une définition externe et visible. c'est parce que tous nos éléments de menu étendent la classe DockItem, que nous n'avons pas encore écrite. Écrivons-le maintenant…
Commencez à créer le package en étendant la classe Sprite (nous étendrons Sprite car nous n’avons pas d’animation de scénario.)
package org.effects import flash.display.Sprite; Classe publique DockItem étend Sprite
À ce stade, notre DockItem étend la classe Sprite, donc si vous le testez maintenant, cela fonctionnera, mais vous ne verrez aucun effet..
(Confus? Pas habitué à coder avec des classes? Découvrez cette astuce sur l'utilisation d'une classe de document pour une introduction.)
Nous allons maintenant importer toutes les classes nécessaires. Une classe personnalisée est utilisée ici, la classe TweenLite, que vous pouvez télécharger à partir de GreenSock.com. Lorsque vous avez téléchargé TweenLite, extrayez-le dans votre dossier / macmenu / (vous aurez donc un dossier / macmenu / com / greensock /)..
package org.effects import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; importer com.greensock.TweenLite; //http://www.greensock.com/tweenlite import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; Classe publique DockItem étend Sprite
J'ai importé la classe Sprite parce que c'est ce que nous étendons; si vous avez des animations sur la timeline, étendez la classe MovieClip. Nous allons utiliser la classe Event lorsque l'objet personnalisé est ajouté à la scène et utiliser MouseEvent pour vérifier la distance de chaque icône à partir de la souris..
Au cours de cette étape, nous allons déclarer les variables nécessaires:
package org.effects import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; importer com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; Classe publique DockItem étend Sprite private var _initPosition: Number; public var maxXDistance: Number; public var maxYDistance: Number; public var maxScale: Number;
Notez que j'ai utilisé le _initPosition comme privé: il définit simplement la position x initiale de l'icône. La distance de la souris sera toujours mesurée à partir de ce point, car la position x réelle de l'élément changera toujours.
maxXDistance est la distance x maximale sur laquelle la souris affectera l'icône, maxYDistance est la distance y maximale sur laquelle la souris affectera l'icône et maxScale est l'échelle maximale qui sera ajoutée à l'icône (par exemple, si vous le définissez sur 2, l'échelle maximale que l'objet peut atteindre est 3.)
J'ai utilisé des variables publiques pour les trois dernières afin que nous puissions les changer à l'exécution.
La fonction constructeur doit avoir le même nom que la classe (et donc le même nom que le fichier), donc DockItem ():
package org.effects import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; importer com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; Classe publique DockItem étend Sprite private var _initPosition: Number; public var maxXDistance: Number; public var maxYDistance: Number; public var maxScale: Number; fonction publique DockItem ($ maxXDistance: Number = 60, $ maxYDistance: Number = 30, $ maxScale: Number = 2): void maxXDistance = $ maxXDistance; maxYDistance = $ maxYDistance; maxScale = $ maxScale; if (stage) init (); sinon addEventListener (Event.ADDED_TO_STAGE, init); addEventListener (Event.REMOVED_FROM_STAGE, fin);
Pourquoi avons-nous certains paramètres ici? Cela nous permet d'utiliser différentes combinaisons de distances et d'échelles: nous pouvons avoir une courte distance avec une très grande échelle ou une longue distance avec une petite échelle. En outre, nous pouvons déterminer la distance y dans laquelle la souris affectera l'icône..
Comme nous étendons la classe Sprite, nous pouvons ajouter des enfants ou même coder une classe personnalisée pour chaque icône étendant la classe DockItem. Ainsi, si nous l'étendons, nous pouvons utiliser la fonction super () pour transmettre les nouveaux paramètres à la superclasse. Nous pouvons ensuite utiliser la classe DockItem à tout moment et n'importe où.
Dans cette étape, nous définissons les variables maxXDistance, maxYDistance et maxScale sur les valeurs transmises en tant que paramètres. Nous vérifions également si l’objet est sur la scène. Si ce n’est pas le cas, nous ajoutons un événement pour vérifier quand il se trouve. Nous ajoutons également un autre écouteur d'événement pour détecter le moment où l'icône est supprimée de la scène. Nous allons ajouter un événement MOUSE_MOVE à la scène pour obtenir la distance. Il est donc important de savoir s'il est sur la scène..
C’est la fonction qui sera exécutée une fois l’icône créée et ajoutée à la scène. Dans la fonction init (), nous ajoutons simplement un écouteur MouseEvent.MOUSE_MOVE à la scène, définissons la variable _initPosition sur la valeur x de l'objet et écoutons la souris quittant la zone de la scène..
package org.effects import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; importer com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; Classe publique DockItem étend Sprite private var _initPosition: Number; public var maxXDistance: Number; public var maxYDistance: Number; public var maxScale: Number; fonction publique DockItem ($ maxXDistance: Number = 60, $ maxYDistance: Number = 30, $ maxScale: Number = 2): void maxXDistance = $ maxXDistance; maxYDistance = $ maxYDistance; maxScale = $ maxScale; if (stage) init (); sinon addEventListener (Event.ADDED_TO_STAGE, init); addEventListener (Event.REMOVED_FROM_STAGE, fin); fonction privée init (e: Event = null): void _initPosition = x; stage.addEventListener (MouseEvent.MOUSE_MOVE, mouseMove); stage.addEventListener (Event.MOUSE_LEAVE, mouseLeave);
Lorsque la souris survole la scène, cette fonction (déclenchée par l'événement MOUSE_MOVE auquel nous avons ajouté un écouteur lors de la dernière étape) vérifie la position de la souris de l'objet parent et mesure la distance entre l'objet et la position parent de la souris..
Nous utilisons parent.mouseX car cela nous donne la position x de la souris par rapport à l'objet contenant l'icône, plutôt que par rapport au point d'alignement de l'icône.
Nous interpolons également les icônes à leur position de départ si la souris quitte la scène dans le gestionnaire mouseLeave ().
package org.effects import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; importer com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; Classe publique DockItem étend Sprite private var _initPosition: Number; public var maxXDistance: Number; public var maxYDistance: Number; public var maxScale: Number; fonction publique DockItem ($ maxXDistance: Number = 60, $ maxYDistance: Number = 30, $ maxScale: Number = 2): void maxXDistance = $ maxXDistance; maxYDistance = $ maxYDistance; maxScale = $ maxScale; if (stage) init (); sinon addEventListener (Event.ADDED_TO_STAGE, init); addEventListener (Event.REMOVED_FROM_STAGE, fin); fonction privée init (e: Event = null): void _initPosition = x; stage.addEventListener (MouseEvent.MOUSE_MOVE, mouseMove); stage.addEventListener (Event.MOUSE_LEAVE, mouseLeave); fonction privée mouseMove (e: MouseEvent): void var yDistance: Number = Math.abs (parent.mouseY-y); if (yDistance> maxYDistance) if (_initPosition == x) return; else TweenLite.to (this, .3, x: _initPosition, scaleX: 1, scaleY: 1); revenir; // Obtenir la différence entre la position x de la souris parent et la position initiale de l'objet var xDistance: Number = parent.mouseX-_initPosition; // vérifie si la distance de la souris par rapport à l'objet est supérieure à la distance maximale, elle ne peut pas être plus grande… xDistance = xDistance> maxXDistance? maxXDistance: xDistance; // vérifie si la distance est inférieure au négatif de la distance maximale, elle ne peut pas être inférieure… xDistance = xDistance < -maxXDistance ? -maxXDistance : xDistance; //create a variable for the position, assuming that the x position must be the initial position plus the distance of the mouse, but it can't be more than the max distance. var posX=_initPosition-xDistance; //we get the scale proportion here, it goes from 0 to maxScale variable var scale:Number=(maxXDistance-Math.abs(xDistance))/maxXDistance; //the minimum scale is 1, the original size, and the max scale will be maxScale variable + 1 scale=1+(maxScale*scale); //here we use a Tween to set the new position according to the mouse position TweenLite.to(this,.3,x:posX,scaleX:scale,scaleY:scale); private function mouseLeave(e:Event):void TweenLite.to(this,.3,x:_initPosition,scaleX:1,scaleY:1);
Nous vérifions d’abord la distance y (distance verticale entre l’icône et la souris); s'il est plus éloigné que la plage définie avec maxYDistanceVariable, nous vérifions si l'icône est revenue dans sa position d'origine et, dans le cas contraire, nous l'interposons ici. le revenir le mot clé sort de la fonction, donc le reste du code ne sera pas exécuté dans ce cas.
Si la souris est proche de l'icône verticalement, nous utilisons des maths pour déterminer une nouvelle échelle et une nouvelle position pour l'icône en fonction de sa distance horizontale par rapport à la souris, puis l'interpoler avec ces valeurs..
Si nous supprimons l'objet de la scène, nous devons supprimer les écouteurs mouseMove et mouseLeave; sinon, nous pouvons avoir des erreurs chaque fois que la souris est déplacée. Cette fonction est le gestionnaire de l'écouteur REMOVED_FROM_STAGE que nous avons ajouté précédemment. Elle sera donc déclenchée lorsque l'objet sera supprimé..
package org.effects import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; importer com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; Classe publique DockItem étend Sprite private var _initPosition: Number; public var maxXDistance: Number; public var maxYDistance: Number; public var maxScale: Number; fonction publique DockItem ($ maxXDistance: Number = 60, $ maxYDistance: Number = 30, $ maxScale: Number = 2): void maxXDistance = $ maxXDistance; maxYDistance = $ maxYDistance; maxScale = $ maxScale; if (stage) init (); sinon addEventListener (Event.ADDED_TO_STAGE, init); addEventListener (Event.REMOVED_FROM_STAGE, fin); fonction privée init (e: Event = null): void _initPosition = x; stage.addEventListener (MouseEvent.MOUSE_MOVE, mouseMove); stage.addEventListener (Event.MOUSE_LEAVE, mouseLeave); fonction privée mouseMove (e: MouseEvent): void var yDistance: Number = Math.abs (parent.mouseY-y); if (yDistance> maxYDistance) if (_initPosition == x) return; else TweenLite.to (this, .3, x: _initPosition, scaleX: 1, scaleY: 1); revenir; // Obtenir la différence entre la position x de la souris parent et la position initiale de l'objet var xDistance: Number = parent.mouseX-_initPosition; // vérifie si la distance de la souris par rapport à l'objet est supérieure à la distance maximale, elle ne peut pas être plus grande… xDistance = xDistance> maxXDistance? maxXDistance: xDistance; // vérifie si la distance est inférieure au négatif de la distance maximale, elle ne peut pas être inférieure… xDistance = xDistance < -maxXDistance ? -maxXDistance : xDistance; //create a variable for the position, assuming that the x position must be the initial position plus the distance of the mouse, but it can't be more than the max distance. var posX=_initPosition-xDistance; //we get the scale proportion here, it goes from 0 to maxScale variable var scale:Number=(maxXDistance-Math.abs(xDistance))/maxXDistance; //the minimum scale is 1, the original size, and the max scale will be maxScale variable + 1 scale=1+(maxScale*scale); //here we use a Tween to set the new position according to the mouse position TweenLite.to(this,.3,x:posX,scaleX:scale,scaleY:scale); private function mouseLeave(e:Event):void TweenLite.to(this,.3,x:_initPosition,scaleX:1,scaleY:1); private function end(e:Event=null):void stage.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMove); stage.removeEventListener(Event.MOUSE_LEAVE,mouseLeave);
Tout ce que nous faisons dans cette fonction est de supprimer l'écouteur d'événements de la scène..
À ce stade, nous pouvons déjà le tester. cela fonctionnera puisque chaque objet est lié à la classe de base DockItem. Cependant, nous n’avons pas de cadre de sélection pour cliquer (si nous définissons la valeur de notre objet boutonMode propriété à true, nous verrons que nous ne pouvons cliquer dessus que lorsque le graphique est réel.)
Jusqu'à présent, nous pouvons voir l'effet fonctionner, alors allons maintenant transformer chaque élément en un bouton. Nous allons créer un nouveau fichier ActionScript et celui-ci étendra le DockItem - appelons-le DockButton. Son package sera le même que DockItem (org.effects), nous allons donc enregistrer itb dans le même dossier que DockItem.as (exemple: c: /macmenu/org/effects/DockButton.as)
Nous modifions maintenant la classe de base de chaque objet de la bibliothèque. Nous utilisons actuellement org.effects.DockItem comme classe de base, utilisons maintenant org.effects.DockButton.
Si nous testons maintenant, il y aura une erreur. En effet, DockButton.as est toujours vide, codons-le.
OK, maintenant nous allons étendre la classe DockItem, parce que nous voulons utiliser tout ce que nous avons dans DockItem et ajouter quelques astuces supplémentaires (lui permettant d'agir comme un bouton), mais nous ne voulons pas ajouter les nouvelles fonctionnalités à DockItem directement. De cette façon, si nous voulons utiliser le DockItem autrement que comme un bouton ultérieurement, nous le pouvons, mais si nous voulons l'utiliser comme un bouton, nous pouvons utiliser le DockButton..
package org.effects la classe publique DockButton étend DockItem
Si nous testons notre projet maintenant, cela fonctionnera, mais cela fonctionnera exactement comme le DockItem car nous n’avons encore rien ajouté de nouveau..
Importons certaines choses dont nous aurons besoin pour étendre le DockItem. Comme nous étendons le DockItem, nous n'avons pas besoin d'importer les classes qui sont déjà présentes, car nous ne les utiliserons pas directement dans DockButton..
package org.effects import flash.geom.Rectangle; Classe publique DockButton étend DockItem
J'ai importé la classe Rectangle, mais pourquoi? C'est parce que nous allons utiliser le cadre de sélection de notre objet pour créer un faux arrière-plan, afin de permettre au bouton d'être cliquable même si la souris n'est pas précisément au-dessus d'une zone colorée. Créons un fond graphique avec alpha 0 (transparent), nous allons donc avoir un carré sur lequel cliquer.
Comme nous devons créer un cadre de sélection pour DockButton, nous aurons ses propres limites, c'est pourquoi nous avons importé la classe flash.geom.Rectangle.
package org.effects import flash.geom.Rectangle; Classe publique DockButton étend DockItem fonction publique DockButton (): void buttonMode = true; mouseChildren = false; var bounds: Rectangle = getBounds (this); this.graphics.beginFill (0,0); this.graphics.drawRect (bounds.x, bounds.y, bounds.width, bounds.height); this.graphics.endFill ();
Ce que nous avons fait? Nous avons créé un constructeur qui définit d'abord le paramètre buttonMode de l'objet sur true. Par conséquent, notre DockButton sera traité comme un bouton. Ensuite, nous définissons mouseChildren sur false, afin que les événements de souris proviennent de l'objet DockButton, et non de tout autre objet qu'il contient. Nous obtenons ensuite les limites de l'objet à l'aide de getBounds () et dessinons un rectangle transparent à l'aide de l'objet graphique. (La propriété graphics est fournie avec la classe Sprite et nous avons étendu Sprite pour créer notre objet DockItem. Nous avons maintenant étendu notre DockItem pour créer notre objet DockButton. DockButton contient tout ce qui va de la classe Sprite à la classe DockItem.)
OK, vérifions:
Si tout va bien, testez le film…
(À ce stade, si vous souhaitez placer le dossier org / effects dans votre chemin de classe, vous n'aurez pas besoin de copier ce dossier dans chaque projet que vous créez et d'utiliser le DockItem ou le DockButton.)
Pourquoi ne pas changer la couleur du bouton lorsque la souris passe dessus? Dans cette section, je vais enseigner comment. Pour cela, nous allons à nouveau utiliser le moteur TweenLite pour colorer l’objet. Cependant, nous utilisons déjà TweenLite dans l'objet DockItem et nous étendons cet objet à DockButton. Nous voulons étendre DockButton pour changer la couleur, mais nous ne pouvons plus utiliser TweenLite dans le même objet car le nouvel objet TweenLite écrasera l’autre (même avec la propriété écraser: faux dans TweenLite, cela réduira beaucoup les performances si nous l’utilisons directement dans le même objet). Tout n'est pas perdu; nous avons une icône à l'intérieur de chaque objet de la bibliothèque et nous pouvons appliquer la teinte à celle.
Pour ce faire, créons un autre fichier ActionScript, mais enregistrez maintenant celui-ci dans le même dossier que le fichier .fla portant le nom "OverButton.as" (exemple: c: /macmenu/OverButton.as.)
Nous créons d’abord le paquet et importons les classes nécessaires; Puisque nous avons enregistré le fichier OverButton.as dans le même dossier que le fichier .fla, le package sera de niveau supérieur. Il n'est donc pas nécessaire d'écrire "package org.effects":
package import org.effects.DockButton; import flash.display.DisplayObject; import flash.events.MouseEvent; importer com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; Classe publique OverButton étend DockButton
OK, nous étendons donc DockButton cette fois et nous avons importé la classe DisplayObject car nous allons traiter l'icône en tant que DisplayObject. Nous avons également importé MouseEvent, que nous utiliserons pour vérifier si la souris survole l’icône et s’il est éteint. Nous avons également TweenLite pour créer des effets d’interpolation avec la couleur.
package import org.effects.DockButton; import flash.display.DisplayObject; import flash.events.MouseEvent; importer com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; Classe publique OverButton étend DockButton private var _object: DisplayObject; fonction publique OverButton (): void _object = this.getChildAt (0) as DisplayObject; this.addEventListener (MouseEvent.MOUSE_OVER, mouseOver); this.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); TweenPlugin.activate ([TintPlugin]);
Pourquoi avons-nous créé un var_object privé en tant que DisplayObject? Notre icône actuelle est stockée dans cette variable (c'est ce que fait la ligne 13) et est traitée comme un objet DisplayObject; nous allons utiliser l'effet de couleur sur notre icône, pas dans l'objet entier.
Nous ajoutons les écouteurs d'événements de la souris pour vérifier quand la souris est terminée et quand la souris est sortie.
Puisque nous avons créé les écouteurs pour souris et souris, nous allons maintenant créer leurs fonctions:
package import org.effects.DockButton; import flash.display.DisplayObject; import flash.events.MouseEvent; importer com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; Classe publique OverButton étend DockButton private var _object: DisplayObject; fonction publique OverButton (): void _object = this.getChildAt (0) as DisplayObject; this.addEventListener (MouseEvent.MOUSE_OVER, mouseOver); this.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); TweenPlugin.activate ([TintPlugin]); fonction privée mouseOver (e: MouseEvent): void new TweenLite (_object, .5, teinte: 0x990099); fonction privée mouseOut (e: MouseEvent): void new TweenLite (_object, .5, tint: null);
Notez que nous utilisons TweenLite sur _object maintenant, pas sur "ceci" plus. En effet, OverButton étend le DockButton, qui étend le DockItem là où un TweenLite est déjà utilisé. De plus, dans DockButton, nous avons un faux fond alpha 0 qui n'a pas besoin d'être peint..
Pour la propriété de teinte de TweenLite, j'ai utilisé un code de couleur de 0x990099, qui est un violet moyen; si vous utilisez null comme valeur, la teinte sera supprimée doucement.
À ce stade, si vous testez le film, vous ne constaterez aucun changement de couleur, car nous devons à nouveau modifier la classe de base de chaque objet de la bibliothèque. Ouvrez à nouveau la bibliothèque dans le fichier .fla (Fenêtre> Bibliothèque). Cliquez avec le bouton droit sur chaque objet et remplacez sa classe de base par OverButton (et non par org.effects.OverButton, car le fichier de classe ne se trouve pas dans le dossier / org / effects)..
OK, maintenant tu peux le tester!
Dans ce tutoriel, j'ai expliqué comment étendre des objets. L’effet d'ancrage réel est purement mathématique - ce sont les calculs de distance, les paramètres d'échelle - mais il est important de noter dans le code que nous ne pouvons pas utiliser la propriété "x" comme référence de position car la propriété "x" est modifiée à chaque fois. J'espère maintenant que vous comprenez tous mieux le mot clé "extend" et que vous pouvez comprendre comment les calculs sont effectués ici. Merci d'avoir lu :)
Accentsconagua