Share
Au cours de ce didacticiel, nous utiliserons le panneau de projet de Flash pour créer un menu AS3 animé verticalement. L'ensemble du processus vous permettra de personnaliser facilement tous les aspects du menu à l'aide des constructeurs paramétrés. Continuez à lire pour en savoir plus!
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Commencez par créer un nouveau projet. Ouvrez Flash et accédez à Fichier> Nouveau, puis sélectionnez Projet Flash. Le panneau de projet apparaîtra.
Dans la liste déroulante Projets, sélectionnez Nouveau projet. Tapez le nom du projet "AnimatedMenu". Dans le dossier racine, parcourez et choisissez l'emplacement où vous souhaitez enregistrer votre projet. vous pouvez sélectionner un dossier existant ou en créer un nouveau. Assurez-vous que la version d'ActionScript est définie sur ActionScript 3.0 et cliquez sur Créer un projet..
Maintenant que le projet est créé, nous allons ajouter un nouveau dossier pour y regrouper nos classes. Toujours dans le même panneau "Projet", cliquez sur l'icône "Nouveau dossier" en bas, nommez le nouveau dossier "Classes" et cliquez sur Créer un dossier..
Au cours de ce didacticiel, nous utiliserons les classes TweenLite de GreenSock pour l’interpolation. Nous devons donc l’ajouter à notre projet. Téléchargez-le et extrayez-le, placez-le dans votre dossier de projet (vous aurez donc AnimatedMenu / com / greensock /).
Maintenant, si vous actualisez le panneau Projet, vous devriez voir cette structure:
Cliquez sur l'icône "Nouveau fichier" dans le panneau Projet pour créer un nouveau fichier, nommez-le "AnimatedMenu.fla" (assurez-vous que le type de fichier est un fichier Flash) et cliquez sur Créer un fichier..
Définissez la taille de la scène sur 600x350px.
Sélectionnez le dossier Classes et cliquez sur l'icône "Nouveau fichier", définissez le type de fichier sur ActionScript, nommez-le "Principal". Ce sera notre classe de documents. Si vous n'êtes pas familiarisé avec les classes de documents, cette astuce sur l'utilisation d'une classe de documents vous aidera à:.
Cela nous permettra d'utiliser n'importe quelle classe située dans notre dossier Classes sans avoir à changer le nom du paquet. Allez dans Fichier> Paramètres de publication, sélectionnez l'onglet Flash, puis cliquez sur Paramètres ActionScript. Cliquez sur le bouton "Ajouter un nouveau chemin" et écrivez le chemin relatif './Classes'.
Dans le package Classes, importez la classe Sprite et utilisez-la pour étendre la classe "Main". Voici le code:
package Classes import flash.display.Sprite; public class Main étend Sprite
Ce sont les variables que nous allons utiliser (Élément du menu est une classe ActionScript que nous créerons plus tard)
private var item1: MenuItem; private var item2: MenuItem; private var item3: MenuItem; private var item4: MenuItem;
Maintenant, nous allons coder le constructeur, il contient le code qui sera exécuté lorsque cette classe sera appelée.
fonction publique Main (): void
Instanciez la classe MenuItem pour créer quatre éléments de menu avec différentes couleurs, étiquettes, fonctionnalités et positions:
// Crée quatre occurrences de la classe MenuItem et précise les paramètres (x, y, couleur, libellé, URL). item1 = new MenuItem (100,60,0x28D9E9, "Page d'accueil", "http://active.tutsplus.com/"); item2 = new MenuItem (140,150,0xA8FA2D, "Services", "http://psd.tutsplus.com/"); item3 = new MenuItem (120,240,0xFC30FC, "À propos de moi", "http://net.tutsplus.com/"); item4 = new MenuItem (160,330,0xEE2B2B, "Contacts", "http://vector.tutsplus.com/");
Vous pouvez modifier les URL pour qu'elles pointent vers d'autres sites..
Ce code ajoute simplement les quatre éléments créés précédemment à la scène.
// Ajoute les éléments à la scène. addChild (item1); addChild (item2); addChild (item3); addChild (item4);
Maintenant nous en avons fini avec la classe Main, voici le code complet de cette classe.
package Classes import flash.display.Sprite; classe publique Main étend Sprite private var item1: MenuItem; private var item2: MenuItem; private var item3: MenuItem; private var item4: MenuItem; public function Main (): void // Créez quatre instances de la classe MenuItem et spécifiez les paramètres (x, y, couleur, libellé, URL). item1 = new MenuItem (100,60,0x28D9E9, "Page d'accueil", "http://active.tutsplus.com/"); item2 = new MenuItem (140,150,0xA8FA2D, "Services", "http://psd.tutsplus.com/"); item3 = new MenuItem (120,240,0xFC30FC, "À propos de moi", "http://net.tutsplus.com/"); item4 = new MenuItem (160,330,0xEE2B2B, "Contacts", "http://vector.tutsplus.com/"); // Ajoute les éléments à la scène. addChild (item1); addChild (item2); addChild (item3); addChild (item4);
Cette classe est trop courte pour effectuer toutes les fonctions que notre menu est censé faire. Nous allons donc créer la classe "MenuItem.as" qui contient les fonctions nécessaires à notre menu..
Ajoutez un nouveau fichier ActionScript 3 dans le dossier Classes, exactement comme vous l'avez fait pour Main.as. Nommez-le "MenuItem.as".
Ce sont les classes que nous devons importer pour notre nouvelle classe. N'oubliez pas que vous pouvez toujours les consulter dans le LiveDocs.
package Classes import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; importer com.greensock. *; importer com.greensock.TweenLite; importer com.greensock.easing. *; importez com.greensock.plugins. *; import flash.text.TextField; import flash.media.Sound; import flash.net.navigateToURL; import flash.net.URLRequest;
Déclarer le Élément du menu class (doit avoir le même nom que son nom de fichier "MenuItem") et étendre la classe Sprite.
Classe publique MenuItem étend Sprite
Ce sont les variables dont nous avons besoin pour le moment, nous en ajouterons d'autres au fur et à mesure de notre progression dans ce tutoriel..
private var rect1: DynamicMovie = new DynamicMovie (); // Utilise la classe DynamicMovie à la place de la classe Sprite. private var rect2: DynamicMovie = new DynamicMovie (); // Cela nous permet de changer le point d'enregistrement. private var rect3: DynamicMovie = new DynamicMovie (); // On peut donc faire pivoter les rectangles autour de leurs centres. private var X: Number; private var Y: Number; private var Couleur: uint;
Film dynamique est une classe AS3 basée sur une ancienne classe AS2 écrite par Darron Schall; cette classe AS3 étend MovieClip et ajoute un nouvel ensemble de propriétés (x2, y2, rotation2, scaleX2, scaleY2, mouseX2, mouseY2) qui vous permettent de manipuler l’image-objet en fonction d’un point d’enregistrement contextuel pouvant être défini à l’aide de la touche setRegistration () méthode.
Nous avons besoin de cette classe pour faire pivoter les rectangles autour de leurs centres. Alors plaçons-le.
Vous trouvez cette classe dans le dossier source de ce didacticiel ou vous pouvez la télécharger à l'adresse oscartrelles.com, puis placez-la simplement dans le dossier Classes pour qu'elle soit reconnue par notre code..
Ceci est le constructeur du MenuItem.
fonction publique MenuItem (posX: Number, posY: Number, couleur: uint, Titre: String, URL: String) // Récupère les paramètres de position et de couleur. X = posX; Y = posY; Couleur = couleur; // Appelez la fonction addRect pour ajouter 3 rectangles avec les paramètres spécifiés. addRect (rect1, X-12, Y, 360,62, couleur, 0,3,3); addRect (rect2, X-4, Y, 360,62, couleur, 0,4,0); addRect (rect3, X, Y, 360,62, Color, 0,7, -2);
Cette fonction est chargée de dessiner les rectangles en fonction des paramètres donnés: position, largeur, hauteur, couleur, alpha et rotation.
fonction privée addRect (rect: film dynamique, X: nombre, Y: nombre, largeur: nombre, hauteur: nombre, couleur: uint, alpha: nombre, rotation: nombre) rect.setEnregistrement (X + (largeur / 2), Y + ( hauteur / 2)); rect.graphics.beginFill (couleur, alpha); rect.graphics.drawRect (X, Y, largeur, hauteur); addChild (rect); rect.rotation2 = rotation;
Maintenant vous pouvez le tester et vous verrez ceci:
Bien sûr, nous ne pouvons pas appeler cela un menu si nous n’ajoutons pas d’étiquettes. Nous en traiterons dans la prochaine étape.
Retournez dans votre fichier AnimatedMenu.fla et ajoutez un nouveau symbole (Ctrl + F8); nommez-le "Text_mc" et sélectionnez "Exporter pour ActionScript".
Maintenant, à l'intérieur de ce symbole, ajoutez un TextField dynamique de 160 x 30 pixels à l'aide de l'outil Texte (T). C'est la police que j'ai utilisée: Creampuff Regular, 24px, #FFFFFF. Nommez l'instance "txtLabel".
Sélectionnez le TextField et allez à Fenêtre> Aligner (Ctrl + K) et appuyez sur les boutons "Aligner le bord gauche" et "Aligner le bord supérieur" (assurez-vous que la case "Aligner sur la scène" est cochée)
Après avoir créé le champ de texte avec la police spécifiée, nous devons l’intégrer pour afficher le texte correctement..
Alors allez à Texte> Incorporation de polices, donnez-lui un nom (par exemple "Font1"), sélectionnez la police Creampuff dans la liste déroulante Famille, dans les plages de caractères, sélectionnez toutes les majuscules et minuscules, puis appuyez sur le bouton "plus" situé dans la partie gauche. Voir l'image ci-dessous:
Pour ajouter des étiquettes aux éléments de menu, nous allons instancier la Text_mc MovieClip. Ajoutez cette ligne de code aux variables de la MenuItem.as fichier.
private txt var: Text_mc = new Text_mc ();
Nous devons maintenant assigner à TextField le titre donné dans les paramètres du constructeur.
Ajouter ce code à la fin du constructeur.
// Assigne un titre à TextField et le place. txt.txtLabel.text = Titre; txt.x = X + 70; txt.y = Y + 16; addChild (txt);
Voici ce que vous devriez obtenir:
Dans les prochaines étapes, nous ajouterons quelques fonctions pour animer le menu..
Pour transformer notre élément de menu en un bouton, nous devons ajouter un rectangle transparent dessus et définir le boutonMode à vrai. Alors ajoutez cette variable à la liste des variables.
private var menuButton: DynamicMovie = new DynamicMovie ();
A la fin du constructeur, ajoutez ce code:
// Utilisez la fonction addRect pour dessiner un rectangle transparent sur l'élément de menu. addRect (menuButton, X-10, Y-5.380.80, Couleur, 0,0); buttonMode = true;
Ajoutez les écouteurs d’événement suivants au bouton de menu à la fin du constructeur.
menuButton.addEventListener (MouseEvent.MOUSE_OVER, mouseOver); menuButton.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); menuButton.addEventListener (MouseEvent.CLICK, mouseClick);
Cette fonction sera appelée lorsque la souris survolera bouton de menu.
fonction privée mouseOver (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); // Rotation des rectangles. nouveau TweenLite (rect1, .3, rotation2: -4); nouveau TweenLite (rect2, .3, rotation2: 0); nouveau TweenLite (rect3, .3, rotation2: 5); // interpelle le texte. timeline.append (nouvelle TweenLite (txt, .3, x: X + 45, scaleX: 1.1, scaleY: 1.1)); timeline.append (nouvelle TweenLite (txt, .3, x: X + 70, alpha: 1)); // Ajoute un filtre de rayonnement au texte .; nouveau TweenMax (txt, .3, glowFilter: couleur: 0xffffff, alpha: 1, blurX: 5, flou: 5, force: 1, qualité: 3);
Nous utilisons ici les classes TimelineLite et TweenMax de GreenSock pour animer le bouton. Recherchez sur le site Activetuts + plus de tutoriels sur GreenSock.
Lorsque la souris est éteinte, cette fonction ramène le menu à sa position initiale..
fonction privée mouseOut (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); // Fait pivoter les rectangles vers leur position initiale. nouveau TweenLite (rect1, .3, rotation2: 3); nouveau TweenLite (rect2, .3, rotation2: 0); nouveau TweenLite (rect3, .3, rotation2: -2); // retourne l'animation du texte. timeline.append (nouvelle TweenLite (txt, .3, x: X + 65, alpha: .9)); timeline.append (nouveau TweenLite (txt, .3, x: X + 70)); nouveau TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 0, blurX: 0, flou: 0, force: 0, qualité: 3);
Cette fonction ouvre l'URL spécifiée lorsque l'utilisateur clique sur l'élément de menu..
fonction privée mouseClick (e: MouseEvent) // Ouvre l'URL demandée. browseToURL (new URLRequest (myURL));
Vous devriez ajouter cette variable à la liste des variables.
private var myURL: String;
Et ajoutez cette instruction au constructeur.
myURL = URL;
C'est ce que vous devriez avoir. Survolez le menu pour voir l'animation.
Ajoutons maintenant un effet de bulles sympa.
Cette fonction créera un nombre de bulles avec une position, une taille et un alpha aléatoires dans les deux sens. C'est le code:
fonction privée bubble (position: Number, direction: Number) // Créez 50 bulles, vous pouvez modifier le nombre pour obtenir plus ou moins de bulles. pour (var i = 0; i<50; i++) var bubble:DynamicMovie= new DynamicMovie(); //Set the registration point for the current bubble. bubble.setRegistration(X+position,Y); //Give the bubble the same color as the menu item and a random alpha (but greater than 0.2). bubble.graphics.beginFill(Color,Math.random()+0.2); //draw a circle with a random position and radius. bubble.graphics.drawCircle(X + position + Math.random() * i,Y + 55 - Math.random() * i,Math.random()*5); //add the bubble at the third index so that it is under the menuButton. addChildAt(bubble,3); //Tween the Bubble randomly according to the direction. new TweenLite(bubble,Math.random() + 1,x2:X - 80 * direction + position - Math.random() * i,y2:Y - Math.random() * i,alpha:0,ease:Circ.easeOut);
Nous devons appeler le bulles() fonctionne lorsque la souris survole l’élément de menu. Alors ajoutez ce code à la mouseOver () une fonction:
// bulles de gauche. bulles (70,1); // Right bubbles bubbles (270, -1);
Voici ce que nous obtenons:
Nous allons terminer en ajoutant un effet sonore au menu lorsque celui-ci est survolé par la souris. Pour ce faire, téléchargez le son à partir d'ici (téléchargez le fichier mp3). Puis importez-le dans la bibliothèque, Fichier> Importer> Importer dans la bibliothèque. Renommez-le "MySound.mp3".
Ouvrez ses propriétés et cliquez sur Avancé; la fenêtre affichera du contenu supplémentaire, sélectionnez "Exporter pour ActionScript" et nommez la classe "MySound".
Pour ajouter l'effet sonore, instanciez le son importé précédemment dans la bibliothèque et lisez-le. Placez ce code dans le mouseOver () une fonction.
var mySound: MySound = new MySound (); mySound.play ();
Nous avons fini avec notre menu! Voici le code complet du MenuItem.as:
package import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; importer com.greensock. *; importer com.greensock.TweenLite; importer com.greensock.easing. *; importez com.greensock.plugins. *; import flash.text.TextField; import flash.media.Sound; import flash.net.navigateToURL; import flash.net.URLRequest; Classe publique MenuItem étend Sprite private var rect1: DynamicMovie = new DynamicMovie (); // utilise la classe DynamicMovie à la place de la classe Sprite. private var rect2: DynamicMovie = new DynamicMovie (); // Ceci nous permet de modifier le point d’enregistrement. private var rect3: DynamicMovie = new DynamicMovie (); // Nous pouvons donc faire pivoter les rectangles autour de leurs centres. private var menuButton: DynamicMovie = new DynamicMovie (); private var X: Number; private var Y: Number; private var Couleur: uint; private txt var: Text_mc = new Text_mc (); private var myURL: String; fonction publique MenuItem (posX: Number, posY: Number, couleur: uint, Titre: String, URL: String) // Récupère les paramètres de position et de couleur. X = posX; Y = posY; Couleur = couleur; myURL = URL; // Appelez la fonction addRect pour ajouter 3 rectangles avec les paramètres spécifiés. addRect (rect1, X-12, Y, 360,62, couleur, 0,3,3); addRect (rect2, X-4, Y, 360,62, couleur, 0,4,0); addRect (rect3, X, Y, 360,62, Color, 0,7, -2); // Assigne un titre à TextField et le place. txt.txtLabel.text = Titre; txt.x = X + 70; txt.y = Y + 16; addChild (txt); // Utilisez la fonction addRect pour dessiner un rectangle transparent sur l'élément de menu. addRect (menuButton, X-10, Y-5.380.80, Couleur, 0,0); buttonMode = true; menuButton.addEventListener (MouseEvent.MOUSE_OVER, mouseOver); menuButton.addEventListener (MouseEvent.MOUSE_OUT, mouseOut); menuButton.addEventListener (MouseEvent.CLICK, mouseClick); fonction privée addRect (rect: film dynamique, X: nombre, Y: nombre, largeur: nombre, hauteur: nombre, couleur: uint, alpha: nombre, rotation: nombre) rect.setEnregistrement (X + (largeur / 2), Y + (hauteur / 2)); rect.graphics.beginFill (couleur, alpha); rect.graphics.drawRect (X, Y, largeur, hauteur); addChild (rect); rect.rotation2 = rotation; fonction privée mouseOver (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); var mySound: MySound = new MySound (); mySound.play (); // Rotation des rectangles. nouveau TweenLite (rect1, .3, rotation2: -4); nouveau TweenLite (rect2, .3, rotation2: 0); nouveau TweenLite (rect3, .3, rotation2: 5); // interpelle le texte. timeline.append (nouvelle TweenLite (txt, .3, x: X + 45, scaleX: 1.1, scaleY: 1.1)); timeline.append (nouvelle TweenLite (txt, .3, x: X + 70, alpha: 1)); // Ajoute un filtre de rayonnement au texte .; nouveau TweenMax (txt, .3, glowFilter: couleur: 0xffffff, alpha: 1, blurX: 5, flou: 5, force: 1, qualité: 3); // bulles de gauche. bulles (70,1); // Right bubbles bubbles (270, -1); fonction privée mouseOut (e: MouseEvent) var timeline: TimelineLite = new TimelineLite (); // Fait pivoter les rectangles vers leur position initiale. nouveau TweenLite (rect1, .3, rotation2: 3); nouveau TweenLite (rect2, .3, rotation2: 0); nouveau TweenLite (rect3, .3, rotation2: -2); // retourne l'animation du texte. timeline.append (nouvelle TweenLite (txt, .3, x: X + 65, alpha: .9)); timeline.append (nouveau TweenLite (txt, .3, x: X + 70)); nouveau TweenMax (txt, .3, glowFilter: color: 0xffffff, alpha: 0, blurX: 0, flou: 0, force: 0, qualité: 3); fonction privée mouseClick (e: MouseEvent) // Ouvre l'URL demandée. browseToURL (new URLRequest (myURL)); private function bubbles (position: Number, direction: Number) // Créez 50 bulles, vous pouvez modifier le nombre pour obtenir plus ou moins de bulles. pour (var i = 0; i<50; i++) var bubble:DynamicMovie= new DynamicMovie(); //Set the registration point for the bubble. bubble.setRegistration(X+position,Y); //Give the bubble the same color as the menu item and a random alpha but upper than 0.2. bubble.graphics.beginFill(Color,Math.random()+0.2); //draw a circle with a random Position and Radius. ; bubble.graphics.drawCircle(X + position + Math.random() * i,Y + 55 - Math.random() * i,Math.random()*5); //add the bubble at the third index to be under the menuButton.; addChildAt(bubble,3); //Tween the Bubble randomly according to the direction. new TweenLite(bubble,Math.random() + 1,x2:X - 80 * direction + position - Math.random() * i,y2:Y - Math.random() * i,alpha:0,ease:Circ.easeOut);
Et voici le résultat final:
Vous pouvez maintenant créer votre propre menu et le personnaliser en ajoutant des éléments de menu, en modifiant les couleurs, en modifiant le texte…
Le menu a été codé dans une classe ActionScript séparée, ce qui vous permet de l'utiliser facilement dans d'autres projets..
Je tiens à vous remercier pour la lecture; J'espère que tu as aimé!
Accentsconagua