Astuce reproduire la fonctionnalité Stacks de Mac OS X avec AS3

La fonctionnalité Stacks fait partie de Mac OS depuis Leopard et constitue un excellent moyen de gérer les éléments d’affichage. Dans cette astuce, nous allons imiter cette fonctionnalité à l'aide de classes ActionScript 3..


Aperçu du résultat final

Jetons un coup d'œil au résultat final sur lequel nous allons travailler:


Étape 1: bref aperçu

Nous allons utiliser la classe géniale créée par PixelFumes et des graphiques personnalisés pour créer un menu Stacks dans Flash. Vous pouvez télécharger la source de la classe sur le site du développeur..


Étape 2: Configurez votre fichier Flash

Lancez Flash et créez un nouveau document Flash, réglez la taille de la scène sur 508x243px et la cadence sur 24 images par seconde..


Étape 3: interface

C'est l'interface que nous allons utiliser. le fond est une image prise de mon bureau et les logos sympas font partie du réseau Tuts +.

Convertissez les logos en MovieClip et marquez le Exporter pour ActionScript case à cocher. Le carré gris est un bouton de scène appelé stackButton.


Étape 4: ActionScript

Créez une nouvelle classe ActionScript (Cmd + N), enregistrez le fichier sous Main.as et écrivez les lignes suivantes; s'il vous plaît lire les commentaires dans le code pour bien comprendre le comportement de la classe.

 package import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; importer com.pixelfumes.stacks.Stack; // N'oubliez pas d'importer la classe personnalisée import fl.transitions.easing.Elastic; public final class Main étend Sprite private var stack: Stack = new Stack (); // Crée un nouveau conteneur de pile / * Les variables suivantes sont les noms de MovieClips, vous pouvez ajouter n'importe quel MovieClip aux piles * / private: NT = new NT (); // Nettuts + logo private var at: AT = new AT (); // Activetuts + logo private var mt: MT = new MT (); // Mobiletuts + logo public fonction finale Main (): void / * Définit les propriétés de la pile * / stack.setRadius (240); stack.setAngle (35); stack.setStartAngle (0); stack.setOpenEasing (Elastic.easeOut); stack.setOpenTime (1); stack.setCloseEasing (Elastic.easeOut); stack.setCloseTime (0,5); / * Ajoute les éléments au conteneur de pile * / stack.addItem (nt); stack.addItem (at); stack.addItem (mt); / * Positionne et ajoute les piles à la scène * / addChild (pile); stack.x = stackButton.x; stack.y = stackButton.y; / * Écoute les clics sur le stack stack * / stackButton.addEventListener (MouseEvent.MOUSE_DOWN, stackClick);  fonction finale privée stackClick (e: Event): void if (stack.getStackOpen () == false) // si la pile est fermée, ouvrez-la stack.openStack ();  else // la pile est ouverte, fermez-la donc stack.closeStack (); 

Étape 5: Classe de document

Ajoutez le nom de la classe à la Classe champ dans le Publier section de la Propriétés panneau.


Conclusion

Vous avez créé un menu Stacks utile pour vos applications ou votre site Web. Vous pouvez adapter le projet à vos besoins ou utiliser cette technique pour créer vos piles personnalisées..

J'espère que vous avez aimé ce petit conseil, merci d'avoir lu!