Share
Un CheckBox est un élément d'interface utilisateur graphique qui permet à l'utilisateur de faire une ou plusieurs sélections parmi plusieurs options..
Dans ce tutoriel, nous allons créer une case à cocher Switch inspirée de l'interface utilisateur graphique de l'iPhone. Lisez la suite pour savoir comment!
En utilisant les outils de dessin Flash, nous allons créer un commutateur vectoriel qui sera contrôlé par les classes. Une classe se chargera de tout le comportement du commutateur et une autre vérifiera simplement la valeur du commutateur. Allons-y!
Ouvrez Flash et créez un nouveau fichier Flash (ActionScript 3)..
Définissez la taille de la scène sur 600x300 et la couleur sur # EFEFF0.
Nous allons maintenant créer les graphiques Switch.
Sélectionnez l'outil Rectangle primitif (R) et créez un rectangle de 280 x 80 pixels, en le remplissant avec ce dégradé linéaire: # 505052, # ACADB1.
Utilisez l'outil de transformation du dégradé pour faire pivoter le dégradé horizontalement et modifier le rayon de l'angle (panneau de propriétés) sur 10..
Nous allons dessiner deux arrière-plans pour le commutateur, l’arrière-plan OFF et l’arrière-plan ON.
Dupliquez la forme précédente et changez sa taille en 276x76 px. Changez le grandient linéaire en # 9A9A9A, # F4F3F6 et déplacez le dernier sélecteur de couleur (panneau de couleurs) sur la moitié de la barre..
Sélectionnez l'outil Texte (T) et créez un champ de texte statique. Écrivez "OFF" et placez-le à droite de l'arrière-plan.
J'ai utilisé Helvetica Neue Bold, 48 pt, # 8C8C8C.
Nous allons maintenant ajouter un bouton qui peut être déplacé pour modifier la valeur du commutateur..
Utilisez l'outil Rectangle pour créer un rectangle de 120x80 px et remplissez-le avec # A19FA0, définissez le rayon de l'angle sur 10..
Dupliquez la forme et redimensionnez-la à 116x76 px, remplissez-la avec #FCFCFE.
Pour donner la touche finale au bouton, répétez le processus et remplissez la forme avec un dégradé linéaire # D7D7D7, #FCFCFE. Utilisez l'outil de transformation de dégradé pour faire pivoter le remplissage..
Dupliquez la bordure et l'arrière-plan OFF, supprimez le texte et modifiez le dégradé de la bordure en # 0D4372, # 6193D2.
Ensuite, changez le dégradé d’arrière-plan en # 0C68B5, # 479FF9, # 6DB0F6.
Placez la forme de la bordure du bouton sur le côté droit.
Casser (Cmd + B) les formes pour les couper.
Utilisez le même format de texte pour ajouter le texte "ON" à l'arrière-plan.
Convertissez le bouton déplaçable en MovieClip et nommez-le "zone". Comme vous pouvez l’imaginer, ce sera la zone qui sera déplacée pour modifier la valeur du commutateur..
Assurez-vous que le point d’enregistrement est positionné comme celui des images.
Sélectionnez toutes les formes, y compris le MovieClip et convertissez-les à nouveau, nommez le résultat "curseur".
Utilisez n'importe quelle forme de bordure pour créer un autre MovieClip. Ce sera le masque qui masquera une partie des graphiques. Nommez-le "msk".
Convertissez tout à nouveau vers MovieClip et double-cliquez dessus.
Créez un nouveau calque puis coupez et collez le clip du masque dessus. Cliquez avec le bouton droit sur le calque de masque et sélectionnez l'option "Masque"..
Cela va finir tous les graphiques. Maintenant, votre commutateur devrait ressembler à ceci (notez le point d’enregistrement):
Ouvrez la bibliothèque et cliquez avec le bouton droit sur votre symbole de commutateur. Sélectionnez Propriétés, cochez la case "Exporter pour ActionScript" et écrivez "Commutateur" comme nom de classe..
Créez un nouveau document ActionScript et enregistrez-le sous le nom "Switch.as"..
Importer les classes requises. Si vous avez besoin d’aide spécifique pour l’une d’elles, consultez l’aide Flash (F1)..
package import fl.transitions.Tween; import fl.transitions.easing.Strong; import flash.display.Sprite; import flash.events.MouseEvent; import flash.geom.Rectangle;
Ce sont les variables que nous allons utiliser, expliquées dans le commentaire de code.
public class Switch étend Sprite private var tween: Tween; // Un objet Tween pour l'animation publique var stat: Boolean = false; // Ceci est une variable publique, elle est utilisée pour connaître la valeur Switch en dehors de cette classe.
La fonction constructeur. Cette fonction ajoute les auditeurs.
fonction publique Switch (): void slider.area.addEventListener (MouseEvent.MOUSE_DOWN, switchDrag); slider.area.addEventListener (MouseEvent.MOUSE_UP, checkPosition);
Cette fonction gère le glissement du bouton en fonction de sa position.
fonction privée switchDrag (e: MouseEvent): void if (! stat) // Si Switch est désactivé, nous pouvons faire glisser vers la droite e.target.parent.startDrag (true, nouveau Rectangle (0, 0, e.target) .parent.parent.msk.width / 1,75, 0)); else e.target.parent.startDrag (true, nouveau rectangle (e.target.parent.parent.msk.width / 1.75, 0, -e.target.parent.msk.width / 1.75, 0)) ;
Ce code vérifie la position du bouton glissable. En fonction de sa valeur, il revient à la position d'origine ou reste dans la nouvelle.
fonction privée checkPosition (e: MouseEvent): void e.target.parent.stopDrag (); if (e.target.parent.x> = 140) e.target.parent.x = 160; stat = true; else if (! stat && e.target.parent.x < 140) tween = new Tween(e.target.parent,"x",Strong.easeOut,e.target.parent.x,0,1,true); stat = false; // OFF to ON if (e.target.parent.x <= 20) e.target.parent.x = 0; stat = false; else if (stat && e.target.parent.x > 20) tween = new Tween (e.target.parent, "x", Strong.easeOut, e.target.parent.x, 160,1, true); stat = true;
Voici un exemple d'utilisation de votre nouveau commutateur.
Créez un nouveau document ActionScript et enregistrez-le sous le nom "Main.as"..
Accentsconagua
package import Switch; // Importe la classe import flash.display.Sprite; import flash.events.MouseEvent; classe publique Main étend Sprite fonction publique Main (): void iSwitch.addEventListener (MouseEvent.MOUSE_UP, checkState); // iSwitch est une instance de la classe Switch fonction privée checkState (e: MouseEvent): void if (iSwitch.stat) trace ("Switch is ON!"); else trace ("Switch is OFF!"); Retournez au fichier .Fla et dans le panneau Propriétés, ajoutez "Principal" dans le champ Classe pour en faire la classe de document..
Vous avez créé un commutateur entièrement personnalisable à utiliser dans vos applications! N'oubliez pas que vous pouvez créer vos propres skins et ajouter beaucoup plus de fonctionnalités aux états ON et OFF..
Merci d'avoir lu!
