Share
Dans ce didacticiel, vous apprendrez à créer des fenêtres déplaçables à l'aide de Flash et AS3. Je couvrirai les bases du glisser-déposer, des limites de la fenêtre, de l'ajout de contenu et de la réduction de la fenêtre.
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
Okey, allons-y! Créez un nouveau document en appuyant sur CTRL + N et en sélectionnant Fichier Flash (ActionScript 3). Définissez la taille de la scène sur 600x400 px et la couleur d’arrière-plan sur #EEE. Dans la fenêtre Propriétés, définissez la classe sur les fenêtres et enregistrez votre fichier sous windows.fla.
Sélectionnez l'outil Rectangle (R) et tracez un rectangle de 280x90 px. Sélectionnez votre forme, accédez à la palette Couleur (Fenêtre> Couleur) et créez un dégradé de #FFF à #CCC..
Appuyez sur F pour l'outil Dégradé, sélectionnez votre dégradé, faites-le pivoter de 90 degrés (en maintenant le bouton Shift enfoncé pendant que vous faites pivoter) et raccourcissez-le pour l'adapter au rectangle..
Sélectionnez toute la forme, appuyez sur F8 pour convertir en symbole, nommez-le windowArea et mettre le point d'enregistrement en haut à gauche.
Sélectionnez le symbole et dans la fenêtre Propriétés, définissez le nom de l'instance sur windowArea.
Pour la bordure, utilisez le filtre luminescent, avec un flou de 2 pixels, force 500%, couleur # 666666. J'ai utilisé une lueur car si vous utilisez un trait, lorsque vous redimensionnez la fenêtre, le trait sera également redimensionné.
Sélectionnez à nouveau l'outil Rectangle (R) et tracez un rectangle de 280x22 px et un trait de 1px de la couleur # 666. Créez un autre rectangle par-dessus, mais cette fois dans les options Rectangle, définissez le rayon de l'angle du rectangle sur 5..
Maintenant, éliminez les coins nécessaires comme sur l'image ci-dessous.
Ensuite, peignez votre forme, sélectionnez-la, accédez à la palette Couleur (Fenêtre> Couleur) et créez un dégradé de # 999 à # 333. Faites pivoter le dégradé de 90 degrés, comme nous l'avons fait à l'étape précédente..
Sélectionnez la forme tout, appuyez sur F8. Prénom: windowbar; Type: bouton; Inscription: en haut à gauche.
Sélectionnez le symbole et dans la fenêtre Propriétés, définissez le nom de l'instance sur windowbar.
Double-cliquez sur la forme, créez images clés pour le Plus de et Vers le bas États. Maintenant changez les couleurs pour chacun.
J'ai choisi:
Créez un rectangle rond avec un rayon de 14x11 px, 5px et changez-le pour qu'il ressemble à quelque chose comme ci-dessous.
Le signe moins que vous faites en créant un rectangle 5x2 px avec la couleur # 999. Définissez le nom de l'instance sur minimiser.
J'ai utilisé les mêmes couleurs de la windowBar, mais l'état UP avec un alpha de 40% pour le dégradé.
Organisez toutes les formes sous la forme d’une fenêtre, appuyez sur F8 et créez un MovieClip avec le nom. la fenêtre et inscription: en haut à gauche.
Dans la bibliothèque, cliquez avec le bouton droit sur la fenêtre et accédez à Propriétés. Définissez la classe sur la fenêtre. De cette façon, la fenêtre sera assignée à la classe que nous allons créer plus tard.
Sélectionnez le symbole et dans le Fenêtre de propriétés définir le nom de l'instance sur la fenêtre. Dans les filtres, cliquez sur Ajouter un filtre (le bouton entouré dans l'image ci-dessous), et ajoutez une ombre portée avec la couleur # 333 comme ci-dessous:
Double-cliquez sur le symbole pour le modifier. Tout sélectionner (CTRL + A), Clic droit> Distribuer aux calques.
Dans un nouveau calque, écrivez le texte du titre de la fenêtre avec Arial, 11 pt, couleur #CCC, espacement des lettres: 1. Réglez-le sur Texte dynamique et nommez-le titre de fenêtre.
Maintenant que la conception est terminée, commençons à coder notre scène. La première chose à faire est de créer notre fichier ActionScript..
Appuyez sur Ctrl + N ou allez dans Fichier> Nouveau et sélectionnez Fichier ActionScript. Enregistrez-le dans le même répertoire et sous le même nom (windows.as) de votre fichier FLA.
Créons maintenant notre paquet et importons les classes nécessaires:
package import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.events.KeyboardEvent; import flash.events.ContextMenuEvent; import flash.geom.Rectangle; import flash.filters.DropShadowFilter; import flash.text.TextFormat; import fl.transitions.Tween; import fl.transitions.easing. *; import fl.transitions.TweenEvent; La fenêtre de la classe publique étend MovieClip
Vous devez maintenant attribuer des fonctions à nos boutons. Vous aurez besoin d’une fonction pour commencer à faire glisser le windowbar, une autre pour arrêter le glissement, une pour amener la fenêtre en haut lorsque vous cliquez dessus et une autre pour la minimiser.
Ajouter ces auditeurs d'événement à la Fonction publique Fenêtre () dans notre code:
fenêtre de classe publique étend MovieClip // variables public var title: String; fonction publique Window () // set windowTitle title = windowTitle.text; windowTitle.mouseEnabled = false; // windows functions this.addEventListener (MouseEvent.MOUSE_UP, onWindowClick); this.windowBar.addEventListener (MouseEvent.MOUSE_DOWN, onWindowStartDrag); this.windowBar.addEventListener (MouseEvent.MOUSE_UP, onWindowStopDrag); this.minimizeBtn.addEventListener (MouseEvent.MOUSE_UP, minimiseWindow);
Le public var Titre est utilisé pour le titre de la fenêtre. Nous utiliserons cela plus tard.
Depuis le titre de fenêtre est un texte dynamique, nous désactivons ses fonctions de la souris afin qu’elles n’affectent pas la zone de déplacement de la souris. windowbar.
C'est là que nous commençons à nous amuser! Copiez le code suivant après le Fonction publique Fenêtre ():
/ * START DRAG ********************************************* ************ / fonction privée onWindowStartDrag (e: MouseEvent): void var windowWidth = this.width; var windowHeight = this.height; var windowBarWidth = e.target.width; var windowBarHeight = e.target.height; var boundsRect: Rectangle; // les limites glissables de la fenêtre if (windowArea.visible) boundsRect = new Rectangle (0, 0, stage.stageWidth-windowWidth, stage.stageHeight-windowHeight); else boundsRect = new Rectangle (0, 0, stage.stageWidth-windowBarWidth, stage.stageHeight-windowBarHeight); // trace (boundsRect); this.startDrag (false, boundsRect); // amène la fenêtre à l'avant stage.addChild (this);
La première chose que nous faisons ici est de créer des variables pour les largeurs et les hauteurs de la fenêtre. windowbar.
Ensuite, les limites de la fenêtre. Nous allons créer deux limites: une lorsque la fenêtre est normale (si windowArea est visible) et une autre lorsqu'elle est réduite. Pour cela, vous créez un rectangle de la taille de la scène. Le rectangle prend en charge quatre attributs (x, y, largeur, hauteur). Il commencera dans le coin de l'écran (x: 0; y: 0) et s'étendra à l'autre coin de l'écran. Parce que les limites sont liées à la point d'inscription de la fenêtre, nous devrons soustraire la largeur et la hauteur de la fenêtre (ou le windowbarau cas où la fenêtre est minimisée).
Une fois les limites définies, nous allons définir la fenêtre à faire glisser. Nous allons traîner ce, la classe de fenêtre. En d'autres termes, toute la fenêtre.
this.startDrag (false, boundsRect);
le startDrag La fonction prend en charge deux attributs: lockCenter et bounds. Si vous ne voulez pas de limites, écrivez simplement ceci:
this.startDrag (false);
Si nous avons plusieurs fenêtres, nous devrons amener la fenêtre actuelle en haut de l'écran. Nous faisons cela avec le addChild en l'ajoutant à nouveau à la scène:
// amène la fenêtre à l'avant stage.addChild (this);
Celui-ci est vraiment simple. Nous allons utiliser le stopDrag fonctionner ici. Il suffit de copier ce qui suit dans votre code après la précédente onWindowStartDrag une fonction:
/ * STOP DRAG ********************************************* ************ / fonction privée onWindowStopDrag (e: MouseEvent): void this.stopDrag ();
Encore une fois, très simple. Lorsque nous cliquons sur la fenêtre, nous la plaçons à l'avant à l'aide de addChild.
/ * CLIC FENÊTRE ******************************************** ************ / fonction privée onWindowClick (e: MouseEvent): void // amène la fenêtre à l'avant stage.addChild (this);
Pour minimiser / afficher la fenêtre, nous allons basculer la visibilité de la windowArea comme ça:
/ * MINIMIZE WINDOW ******************************************** ************ / function private minimWindow (e: MouseEvent): void windowArea.visible =! windowArea.visible;
Vous pouvez améliorer cela en masquant et en masquant la fenêtre, et inversement:
/ * MINIMIZE WINDOW ******************************************** ************ / fonction privée minimWindow (e: MouseEvent): void var fade: Tween; if (windowArea.visible) fade = new Tween (windowArea, "alpha", Strong.easeOut, 1, 0, 0,5, vrai); fade.addEventListener (TweenEvent.MOTION_FINISH, fadeFinish); else fade = new Tween (windowArea, "alpha", Strong.easeOut, 0, 1, 0.5, true); windowArea.visible =! windowArea.visible; fade.start (); fonction fadeFinish (e: TweenEvent): void windowArea.visible =! windowArea.visible;
Tween prend en charge les valeurs suivantes:
Tween (objet, "propriété", EasingType, begin, end, duration, useSeconds);
Pour une lecture plus approfondie, utilisez le LiveDocs.
Dans notre cas, ce que nous faisons est, si le windowArea est visible (signifiant: non minimisé), il disparaîtra progressivement windowArea et quand l’interpolation se termine (TweenEvent.MOTION_FINISH), il va cacher le windowArea. Vice versa si c'est minimisé.
Nous allons utiliser la variable t pour changer le titre de fenêtre. Les deux autres lignes servent uniquement à résoudre un problème d'espacement des lettres. Si vous ne les écrivez pas, Flash remettra à zéro l'espacement des lettres..
/ * FIXER LE TITRE DE WINDOW ******************************************* ************* / fonction publique Titre (t: String): void var fmt: TextFormat = windowTitle.getTextFormat (); windowTitle.text = t; windowTitle.setTextFormat (fmt); // espacement des lettres issue title = t;
Cette fonction sera utilisée plus tard comme ceci:
Accentsconagua
YourWindowName.Title ("Nom de votre fenêtre"); Cette fonction recevra deux attributs: la largeur et la hauteur de la fenêtre. Si aucun des deux n'est rempli, sa taille par défaut sera définie (280x112 px)
Ce que nous faisons ici est de changer la largeur de la windowbar, la windowArea et le titre de fenêtre. Pour la hauteur il suffit de changer le windowArea, laissant la hauteur de la fenêtre à sa taille par défaut, comme une fenêtre normale.
Lors du redimensionnement, nous devrons réinitialiser la position du bouton de réduction. Qui est égal à la largeur de la fenêtre moins la largeur du bouton et 6px.
/ * RÉGLER LA TAILLE DE WINDOW ******************************************* ************* / fonction publique Size (Width: int = 280, Height: int = 112): void // change width windowBar.width = Width; windowArea.width = Width; windowTitle.width = Largeur - 45; // change la hauteur du contenu windowArea.height = Height; // réinitialiser minimiserBtn échelle / position minimiserBtn.x = largeur - minimiserBtn.width - 6;
Cette fonction sera utilisée plus tard comme ceci:
YourWindowName.Size (350,200);
Tu te souviens quand on a placé une ombre portée sous la fenêtre? Eh bien, si vous placez la fenêtre par code, vous devez également ajouter l'ombre portée par code..
Tous les attributs ci-dessus peuvent être définis par code. Copiez la fonction et modifiez les valeurs selon vos goûts:
/ * SET FILTER: DROP SHADOW ***************************************** *************** / fonction publique DropShadow (color: String = "333333"): void var dropShadow: DropShadowFilter = new DropShadowFilter (); dropShadow.blurX = 5; dropShadow.blurY = 5; dropShadow.strength = 1; dropShadow.quality = 1; // 1- bas; 2- moyen; 3 haute (max: 15) dropShadow.angle = 45; dropShadow.distance = 1; dropShadow.alpha = 1; dropShadow.knockout = false; dropShadow.inner = false; dropShadow.hideObject = false; dropShadow.color = int ("0x" + couleur); this.filters = new Array (dropShadow); // ajouter un filtre à la fenêtre Cette fonction recevra une chaîne avec le code hexadécimal de la couleur. Si ce n'est pas rempli, la valeur de couleur par défaut sera # 333333.
le qualité peut aller de 1 à 15, soit 1 2 3 - bas, moyen et haut. Nous avons utilisé bas, ici.
le Couleur doit être converti d'un Chaîne à un int.
Après avoir défini les attributs, nous devons ajouter le filtre à la fenêtre, comme dans la dernière ligne. Cela va créer un Tableau de filtres. Ce qui signifie que vous pouvez également ajouter d'autres filtres à la fenêtre..
this.filters = new Array (dropShadow);
Cette fonction sera utilisée plus tard comme ceci:
VotreWindowName.DropShadow ("FF0000"); // ajoute une ombre rouge Maintenant, changez votre fichier Flash, créez un nouveau calque, nommez-le as3 et appuyez sur F9 pour le code ActionScript (ou accédez à Fenêtre> Actions).
L'ajout d'une fenêtre est très simple. Tout ce que vous avez à faire est de créer une variable (appelons-la ma fenêtre), l'assigner à la La fenêtre la classe et l'ajout de la fenêtre à la scène:
var myWindow: window = nouvelle fenêtre; addChild (myWindow);
Cela produira une fenêtre avec ses valeurs par défaut.
Vous pouvez modifier plusieurs attributs de la fenêtre:
Encore une fois, la première chose à faire est de créer la variable assignée par la classe Window:
var myWindow: window = nouvelle fenêtre;
Ensuite, vous pouvez commencer à changer les attributs:
myWindow.Title ("Cabo Verde"); myWindow.DropShadow ("66CC00"); // ajoute une belle ombre de chaux myWindow.Size (350 200);
myWindow.x = 20; myWindow.y = 20;
addChild (myWindow);
Le code tout sera comme ça:
var myWindow: window = nouvelle fenêtre; myWindow.Title ("Cabo Verde"); myWindow.DropShadow ("66CC00"); myWindow.Size (350 200); myWindow.x = 20; myWindow.y = 20; addChild (myWindow); 
Voici un autre exemple avec deux fenêtres ajoutées par code et une autre par défaut dans la scène:
var janela: window = nouvelle fenêtre; var janela02: window = nouvelle fenêtre; janela.Title ("Cabo Verde"); janela.DropShadow ("66CC00"); janela.Size (350 200); janela.x = 20; janela.y = 20; janela02.Title ("Ninjas!"); janela02.DropShadow ("FF0000"); janela02.Size (250 200); janela02.x = 40; janela02.y = 150; addChild (janela); addChild (janela02); 
Si vous avez besoin de connaître le titre de la fenêtre, vous pouvez utiliser ceci:
trace (janela.title);
Bravo d'avoir suivi jusqu'à présent! Vous devriez maintenant avoir obtenu un résultat similaire à celui que nous avions examiné au début:
Si vous remarquez maintenant, vous pouvez changer tous les attributs de la fenêtre mais le contenu reste le même. Alors créons le contenu.
Ouvrez le MovieClip de la fenêtre, créez un nouveau calque pour le contenu et sélectionnez Insertion> Nouveau symbole (CTRL + F8). Choisissez MovieClip, nommez-le contenu et cliquez sur OK. Maintenant placez-le à X: 0, Y: 22.
Sélectionnez le nouveau symbole de contenu que vous venez de créer et définissez son nom d'occurrence sur CONTENU.
Double-cliquez sur le contenu, nommez le calque existant. contenu et en créer un autre nommé as3. Dans le dernier cas, appuyez sur F9 et écrivez:
Arrêtez();
Ce sera notre contenu par défaut. Sens, rien!
Maintenant créer un autre image clé et placez une image par exemple. Gardez à l'esprit la taille de la fenêtre que vous utiliserez. Ajoutez une autre image clé et écrivez du texte dessus. Nous avons maintenant 3 images clés: 1. pas de contenu, 2. image, 3. texte.
Quant au code, ajoutez ceci à votre fichier de classe:
/ * CHANGER LE CONTENU ********************************************* ************ / fonction publique Contenu (c: int): void CONTENT.gotoAndStop (c);
Vraiment simple. Nous dirons simplement à quelle image clé nous voudrons aller..
Vous devrez également changer le minimiserWindow fonction à ceci:
/ * MINIMIZE WINDOW ******************************************** ************ / fonction privée minimWindow (e: MouseEvent): void var fade: Tween; if (windowArea.visible) CONTENT.visible =! CONTENT.visible; fade = new Tween (windowArea, "alpha", Strong.easeOut, 1, 0, 0.5, true); fade.addEventListener (TweenEvent.MOTION_FINISH, fadeFinish); else fade = new Tween (windowArea, "alpha", Strong.easeOut, 0, 1, 0.5, true); windowArea.visible =! windowArea.visible; CONTENT.visible =! CONTENT.visible; fade.start (); fonction fadeFinish (e: TweenEvent): void windowArea.visible =! windowArea.visible;
Dans l'exemple précédent, ajoutez ceci au code:
janela.Content (2); // va à l'image clé de l'image
Voici le code complet:
var janela: window = nouvelle fenêtre; var janela02: window = nouvelle fenêtre; janela.Title ("Cabo Verde"); janela.DropShadow ("66CC00"); janela.Size (350,240); janela.Content (2); // va à l'image clé de l'image janela.x = 20; janela.y = 20; janela02.Title ("Ninjas!"); janela02.DropShadow ("FF0000"); janela02.Size (250 200); janela02.Contenu (3); // va à l'image clé du texte janela02.x = 40; janela02.y = 150; addChild (janela); addChild (janela02); Il existe donc un moyen simple de créer une fenêtre déplaçable (un peu comme nous le voyons sous Windows). Si vous voulez aller plus loin, vous pouvez modifier le contenu MovieClip, ajouter du texte, des boutons, des images, etc. Vous pouvez ajouter des barres de défilement, appeler du contenu via XML ou tout autre choix. Les possibilités sont infinies!
Voici un autre exemple génial:
Ceci est eXOTRik, et j'espère que vous avez trouvé cela utile. C'est mon premier tutoriel, j'espère vous apporter quelques astuces de ninja. Ayaaaa!
