Share
La navigation est une partie cruciale de votre site Web, mais constitue souvent un ennui à construire et à maintenir. Dans ce tutoriel, je vais décrire un moyen rapide et efficace d'utiliser les compétences de base d'ActionScript, combinées avec un peu de votre créativité, pour construire des systèmes de navigation intuitifs et conviviaux. Ok, il est temps de se salir les mains, eh bien… en sueur peut-être…
Ce tutoriel explique comment éviter de double-cliquer sur des éléments dans le menu, élément très négligé qui améliore votre expérience en ligne. Vous apprendrez également à créer et à combiner facilement plusieurs tableaux. Nous allons d'abord mettre en scène la scène, placer les images clés et les étiquettes, puis ajouter du code ActionScript à la fin. Nous allons également apprendre à créer des transitions de page qui ajouteront un petit plus intéressant à votre site Web..
Rétrospectivement, ce tutoriel est très simple, mais il couvre de nombreux joyaux cachés. Soyez créatif, liez les données avec xml, modifiez les formes du masque, changez les états du bouton rollOver et profitez-en.
Créez un nouveau document ActionScript 3: 600 pixels, 400 pixels, 30 images par seconde et utilisez du blanc comme arrière-plan. Tout d’abord, créons le bouton. Dessinez une zone de texte sur la scène et nommez-la "txt". Pour ce faire, accédez à votre panneau de propriétés (CTRL F3 / Fenêtre> Propriétés> Propriétés). Maintenant convertissez-le en un symbole (F8 / Modify> Convert to Symbol), choisissez MovieClip et assurez-vous que le point d’enregistrement est en haut à gauche. Nommez l'instance "button_text_mc".
Sur un nouveau calque, créez un rectangle qui correspond aux limites de votre texte. Cela fonctionnera comme une zone active de votre bouton. Le convertir en un symbole.
Sélectionnez maintenant les deux calques et convertissez-les en symbole. Nommez cette instance "hitarea_mc". Assurez-vous de mettre la valeur alpha de "hitarea_mc" à zéro dans la fenêtre des propriétés..
Faisons maintenant un support pour nos boutons. Bien sûr, vous pouvez rendre cela plus avancé en faisant une navigation dynamique complète avec xml ou php, mais pour les besoins de ce tutoriel, nous allons utiliser
du code ActionScript pour nommer nos éléments de menu et remplir la fonctionnalité.
Faites glisser une occurrence du clip "button_movieclip" sur la scène pour chaque élément que vous souhaitez pour votre navigation. Nous allons utiliser 6 dans ce cas. Donnez maintenant à chaque instance un nom unique. J'ai choisi b1, b2,… jusqu'à b6. Ensuite, nous allons résumer tout cela dans un nouveau MovieClip nommé "menu_total".
La bonne chose à ce sujet est que si nous voulons l’utiliser plus tard, nous pouvons simplement faire glisser le clip "menu_total" hors de la bibliothèque et l’utiliser directement. Vous devriez maintenant avoir un seul MovieClip sur scène avec six boutons que nous transformerons en navigation..
Aah la partie amusante. Un peu d'animation et de ruse. Comme vous le voyez dans l'exemple, le menu ne se révèle que lorsque le curseur de la souris se déplace près de la zone de menu et de la ligne. Pour y parvenir, nous aurons besoin d'une zone de frappe invisible et de quelques images clés pour passer à un autre état de vue..
Assurez-vous que vous êtes dans le MovieClip "menu_total" et créez 2 nouveaux calques tout en haut de vos calques: l'un nommé "code", l'autre nommé "étiquettes". Sélectionnez le calque "étiquettes" et ajoutez une image clé vierge sur les images 1, 2, 10, 24, 25, 37. Nommez maintenant la deuxième étiquette émaillée "CLOSED", la 10ème étiquette framel "OVER" et la 25ème étiquette émaillée "OUT"..
Créez un nouveau calque sous le calque des boutons et nommez-le "hit_area", puis prenez le clip "hitarea_mc" de votre bibliothèque et placez-le à gauche des boutons. Enfin, redimensionnez-le pour que l'utilisateur dispose d'un espace pour déplacer la souris. Assurez-vous que les images clés de "HOVER" n’atteignent que le cadre 10..
Créez encore un autre calque et nommez-le "menu_out", puis passez à l'image 10 et placez une autre copie de "hit_area_mc" sur la scène. Attribuez-lui le nom d'occurrence "HOVEROUT_MC" et assurez-vous que ces deux MovieClips ont une valeur alpha de 0. De plus, ces deux films doivent également se chevaucher un peu. Sinon, Flash perd le test de frappe lorsque vous déplacez la souris vers les boutons.
OK, avec tout ce qui est fait, vos cadres et étiquettes devraient maintenant ressembler à ceci:
Voici à quoi devraient ressembler les zones actives de la souris:
Voici à quoi devrait ressembler le deuxième hitarea: il commence par l'image clé de l'état over.
Regardons maintenant le masquage.
Tout au long de votre animation pour les états rollOver / rollOut, créez un MovieClip vide et attribuez-lui un nom d'occurrence "loaderclip"..
Ce morceau dépend entièrement de vous et de votre imagination, mais voici une base qui devrait vous aider à démarrer. Créez un nouveau fichier ActionScript 3.0 aux mêmes dimensions que votre fichier principal. Construisez votre page in / out animation. Assurez-vous de placer un arrêt (); commande à l’état final de votre animation (l’endroit où le contenu réel viendra). Enregistrez vos fichiers en tant que page1.swf, page2,… dans la limite du nombre de boutons que vous avez créés, dans ce cas 6.
Dans mon exemple tout à fait simple, j'ai commencé avec une petite boîte qui interpelle le long de la chronologie d'alpha 0 à 100 tout en atteignant sa hauteur finale..
Bon, maintenant un peu de temps ActionScript. Tout d’abord, vous pouvez pimenter tout ce qui se passe dans le menu comme vous le souhaitez. Par exemple, vous pouvez utiliser des animations rollOver / rollOut plus avancées..
Par souci de ce tutoriel, j'ai choisi un effet très simple.
Vous devrez télécharger et importer la classe opensource construite par Grant Skinner appelée "tweenmax". Assurez-vous de télécharger la version AS3. Nous allons également utiliser les classes intégrées pour les transitions.
Avec votre couche de code sélectionnée sur la première image, entrez le code dans les étapes suivantes (je vais expliquer chaque ligne dans les commentaires).
Remarque: à partir de ce moment, il est très facile de créer un nouveau tableau avec toutes vos actions et de le lier au gestionnaire onRelease, de la même manière que vous associez les noms des boutons aux clips réels. Avec un minimum d'effort, vous pouvez construire un système de navigation très puissant qui peut être réutilisé encore et encore en un rien de temps. Vous pouvez construire une classe pour cela, mais ce n'est pas le but de ce tutoriel..
importer gs.TweenMax; importer fl.motion.easing. *; importer fl.transitions. *; importer fl.transitions.easing. *;
// variables pour le basculement du bouton, out, hit state var speed: Number = 0.3; var motion: Function = Sine.easeOut; var colourOver: String = "0x9BE07C"; var colorOut: String = "0x000000"; var coloréRelease: String = "0xFF0000"; // stocke les boutons en tant qu'objet pour une utilisation ou une référence ultérieure. var btn: Object; var disabledBtn: Object; // La variable currentPage, nextPage contient les MovieClips que nous allons charger. var currentPage: MovieClip = null; var nextPage: MovieClip = null; // le chargeur var loader: Loader; // quel MovieClip charger var var urlRequest: URLRequest; // le nom de notre menu movieclip.MENUNAME.txt.text = "MENU>";
Accentsconagua
// nous allons d'abord faire référence à tous les boutons de la scène. var: Array = new Array (b1, b2, b3, b4, b5, b6); // ce tableau contient tous les noms que nous voulons utiliser pour nos boutons var button_name: Array = new Array ("Accueil", "A propos de nous", "Travaux sélectionnés", "Références", "Emplois", "Contact"); // ce tableau stocke le fichier swf que nous voulons charger var swf_array: Array = new Array ("swf1.swf", "swf2.swf", "swf3.swf", "swf4.swf", "swf5.swf", " swf6.swf "); for (var i: Chaîne dans les boutons) // assigne le tableau nom-bouton au trombone de nos boutons boutons [i] .button_txt.txt.text = nom-bouton [i]; // assigne quel swf nous allons charger pour chacun des boutons boutons [i] .currentPage = swf_array [i]; // déclare que nous utiliserons le MovieClip comme bouton de bouton [i] .buttonMode = true; // s'assure que le clip button_txt ne réagit pas aux boutons de la souris [i] .button_txt.mouseChildren = false; // ajoute les écouteurs pour nos boutons button [i] .addEventListener (MouseEvent.CLICK, onCLICK); boutons [i] .addEventListener (MouseEvent.MOUSE_OVER, onOVER); boutons [i] .addEventListener (MouseEvent.MOUSE_OUT, onOUT);
function onCLICK (event: MouseEvent): void // assurez-vous que la variable de notre cible actuelle est stockée, nous l'adresserons plus tard à la fonction pour la désactiver. btn = event.currentTarget; disableBtn (btn);; fonction onOVER (event: MouseEvent): void btn = event.currentTarget; // ici nous interpolons à la couleur que nous avons assignée précédemment aux variables. TweenMax.to (btn, vitesse, teinte: couleurOver, facilité: mouvement);; fonction onOUT (événement: MouseEvent): void btn = event.currentTarget; TweenMax.to (btn, vitesse, teinte: couleurOut, facilité: mouvement);;
C’est le cœur de notre projet. Chaque étape importante est commentée dans le code.
function disableBtn (btn: Object): void // si le bouton est désactivé, nous nous assurerons que tous les événements sont à sa place afin que nous puissions le réutiliser si (disabledBtn) disabledBtn.buttonMode = true; disabledBtn.mouseEnabled = true; TweenMax.to (disabledBtn, rapidité, teinte: couleurOut, facilité: mouvement); disabledBtn.addEventListener (MouseEvent.CLICK, onCLICK); disabledBtn.addEventListener (MouseEvent.MOUSE_OUT, onOUT); disabledBtn.addEventListener (MouseEvent.MOUSE_OVER, onOVER); TweenMax.to (btn, vitesse, teinte: couleurRelease, facilité: mouvement); // désactiver signifie ne plus pouvoir l'utiliser, aussi supprimons-nous toutes les fonctionnalités btn.buttonMode = false; btn.mouseEnabled = false; btn.removeEventListener (MouseEvent.CLICK, onCLICK); btn.removeEventListener (MouseEvent.MOUSE_OUT, onOUT); btn.removeEventListener (MouseEvent.MOUSE_OVER, onOVER); // assurez-vous que le bouton actuellement sélectionné est étiqueté comme disabledBtn. disabledBtn = btn; // Créer une nouvelle instance de chargeur loader = new Loader (); // ajoute la variable currentPage à la demande d'URL urlRequest = new URLRequest (btn.currentPage); // charge la requête url loader.load (urlRequest); // une fois le fichier chargé, nous allons déclencher la fonction fileLoaded loader.contentLoaderInfo.addEventListener (Event.COMPLETE, isLoaded); function isLoaded (event: Event): void // Le chargeur contient maintenant la page que nous allons afficher plus tard nextPage = event.target.content; // vérifie s'il existe une currentPage if (currentPage! = null) // tween l'alpha à zéro // alors attendez… pourquoi utilisons-nous 2 tweenclasses différentes? Eh bien, juste pour vous montrer les avantages et les inconvénients des deux. Décidez vous-même celui qui vous convient le mieux pour vos projets. var tweenAlpha: Tween = new Tween (currentPage, "alpha", Regular.easeOut, 1, 0, .7, true); // De plus, vous pouvez faire en sorte que la page en cours exécute une animation sortante supplémentaire. Assurez-vous de jouer avec la longueur de votre alpha pour qu'il ne disparaisse pas avant la fin de l'animation. currentPage.gotoAndPlay (31); // currentPageGone sera appelé à la fin de l'interpolation tweenAlpha.addEventListener (TweenEvent.MOTION_FINISH, currentPageOut); else // s'il n'y a pas de currentPage, nous déclencherons la fonction showNextPage. doNextPage (); function doNextPage (): void // positionne le loaderclip comme nextPage nextPage.x = 238.0; nextPage.y = 0; // Tween l'alpha de 0 à 1 var tweenAlpha: Tween = new Tween (nextPage, "alpha", Regular.easeOut, 0, 1, .3, true); // Ajoute la page suivante à la scène addChild (nextPage); // La page suivante est maintenant notre page actuelle - déroutant? Ce n'est pas. Nous remplaçons la page suivante par notre page actuelle. currentPage = nextPage; // Une fois l'animation terminée, nous allons déclencher cette fonction function currentPageOut (event: Event): void // Supprimer complètement la page en cours de la scène removeChild (currentPage); // Montrons la page suivante doNextPage (); // ne place pas de commande stop car nous allons atterrir directement sur l'image 2.
Enfin, nous progressons d’une image. Assurez-vous d'être à l'image 2 du MovieClip Menu_total.
// ajouter un eventlistener pour le mousemove HOVER.addEventListener (MouseEvent.MOUSE_MOVE, openmenu); function openmenu (e: Event): void // lorsque les valeurs x et y de la souris sont à l'intérieur du clip MovieClip nommé "HOVER", la valeur la plus basse est true HOVER.hitTestPoint (parent.mouseX, parent.mouseY, true) gotoAndPlay ( "PLUS DE"); // assurez-vous de retirer l'auditeur afin d'éviter tout déclenchement accidentel. HOVER.removeEventListener (MouseEvent.MOUSE_MOVE, openmenu); Arrêtez();
Passons maintenant à l’image 24 du clip menu_total.
// ajouter un eventlistener pour le mousemove HOVER_OUT.addEventListener (MouseEvent.MOUSE_MOVE, menuout); function menuout (e: Event): void // lorsque les valeurs x & y de la souris sont à l'intérieur du clip MovieClip nommé "HOVER_OUT", la valeur la plus basse est true HOVER_OUT.hitTestPoint (parent.mouseX, parent.mouseY, true) gotoAndPlay ( "EN DEHORS"); // assurez-vous de retirer l'auditeur afin d'éviter tout déclenchement accidentel. HOVER_OUT.removeEventListener (MouseEvent.MOUSE_MOVE, menuout); Arrêtez();
Sur la dernière image de votre animation, définissez simplement la ligne de code suivante. La raison en est que nous sautons l’image 1 pour que le menu ne se charge plus, perdant ainsi l’état actif / désactivé.
gotoAndStop ("FERMÉ") Nous y sommes donc! Vous avez appris à activer / désactiver les boutons cliqués d'un tableau contenant des données combinées, à utiliser des techniques de masquage et à créer des systèmes de menus simples mais efficaces pouvant être réutilisés avec un minimum d'effort. Tout cela avec une transition de page simple mais efficace. J'espère que vous avez apprécié celui-ci et que vous avez trouvé un moyen pratique d'accélérer votre flux de travail en Flash..
