Share
I denne opplæringen lærer du hvordan du oppretter trekkbare vinduer ved hjelp av Flash og AS3. Jeg vil dekke grunnleggende om dra og slipp, vindugrenser, legge til innhold og hvordan du minimerer vinduet.
La oss se på det endelige resultatet vi vil jobbe for:
Okey, la oss gooo! Opprett et nytt dokument ved å trykke CTRL + N og velge Flash-fil (ActionScript 3). Still scenestørrelsen til 600x400 px og bakgrunnsfargen til #EEE. I vinduet Egenskaper setter du klassen til vinduer og lagre filen som windows.fla.
Velg Rectangle Tool (R) og tegne et rektangel med 280x90 px. Velg din form, gå til Fargepaletten (Vindu> Farge) og opprett en gradient fra #FFF til #CCC.
Hit F for Gradient Tool, velg din gradient, roter den 90 grader (ved å holde Shift-knappen mens du roterer) og forkort den slik at den tilpasser rektangelet.
Velg all form, trykk F8 for å konvertere til symbol, navn den windowArea og sett registreringspunktet til øverst til venstre.
Velg symbolet og i Egenskaper-vinduet angi forekomstnavnet til windowArea.
For grensen, bruk Glow-filteret, med 2px uskarphet, styrke 500%, farge # 666666. Jeg brukte en glød fordi hvis du bruker et slag, når du endrer størrelsen på vinduet, vil strokeet også endre størrelsen.
Velg rektangulærverktøyet (R) igjen og tegne et rektangel med 280x22 px og et 1px slag med fargen # 666. Opprett et annet rektangel på toppen av dette, men denne gangen i rektangulær-alternativet stiller du rektangulære hjørneradius til 5.
Nå, fjern de nødvendige hjørnene som på bildet nedenfor.
Deretter måler du figuren, velger den, går til Fargepaletten (Vindu> Farge) og lager en gradient fra # 999 til # 333. Roter gradienten 90 grader, som vi gjorde på forrige trinn.
Velg all form, trykk F8. Navn: windowBar; Type: Knapp; Registrering: øverst til venstre.
Velg symbolet og i Egenskaper-vinduet angi forekomstnavnet til windowBar.
Dobbeltklikk på formen, opprett nøkkelbilder for Over og Ned stater. Endre fargene for hver enkelt.
Jeg har valgt:
Lag et runde rektangel med 14x11 px, 5px radius, og endre det slik at det ser ut som under.
Minustegnet du gjør ved å lage et rektangel 5x2 px med fargen # 999. Sett instansnavnet til minimizeBtn.
Jeg brukte de samme fargene fra vinduet Bar, men UP-staten med en 40% alfa for gradienten.
Ordne alle former i form av et vindu, trykk F8 og opprett en MovieClip med navnet vindu og registrering: øverst til venstre.
I biblioteket, høyreklikk på vinduet og gå til Egenskaper. Sett klassen til vindu. På denne måten vil vinduet bli tildelt klassen vi skal skape senere.
Velg symbolet og i Egenskaper vindu sett instansnavnet til vindu. I filtrene klikker du Legg til filter (den sirklede knappen i bildet nedenfor), og legg til en Drop Shadow med fargen # 333 som nedenfor:
Dobbeltklikk på symbolet for å redigere det. Velg alt (CTRL + A), Høyreklikk> Distribuere til lag.
I et nytt lag skriver du teksten for vinduets tittel med Arial, 11pt, farge #CCC, letteravstand: 1. Sett den til Dynamisk tekst og nev det windowTitle.
Nå som designen er ferdig, la oss begynne å kode vår scene. Det første vi skal gjøre er å opprette vår ActionScript-fil.
Trykk Ctrl + N eller gå til File> New og velg ActionScript-fil. Lagre det i samme katalog og med samme navn (windows.as) av FLA-filen din.
La oss nå lage vår pakke og importere de nødvendige klassene:
pakke import flash.display.MovieClip; importere flash.events.Event; importer flash.events.MouseEvent; importer flash.events.KeyboardEvent; importer flash.events.ContextMenuEvent; importer flash.geom.Rectangle; importer flash.filters.DropShadowFilter; importer flash.text.TextFormat; importere fl.transitions.Tween; importere fl.transitions.easing. *; importere fl.transitions.TweenEvent; offentlig klassevindu strekker seg til MovieClip
Nå må du tilordne funksjoner til knappene våre. Du trenger en funksjon til når vi begynner å dra windowBar, en annen for å stoppe dra, en for å bringe vinduet til toppen når du klikker på det, og et annet for å minimere det.
Legg til disse hendelseslytterne til offentlig funksjon vindu () i vår kode:
offentlig klasse vinduet strekker seg MovieClip // variabler offentlig var tittel: String; offentlig funksjon Window () // sett windowTitle title = windowTitle.text; windowTitle.mouseEnabled = false; // windows fungerer 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, minimizeWindow);
Det offentlige var tittel brukes til vinduets tittel. Vi bruker dette senere.
Siden windowTitle er en dynamisk tekst vi deaktiverer musfunksjonene, slik at de ikke vil påvirke slepebanen til windowBar.
Det er her vi begynner å ha det gøy! Kopier følgende kode etter offentlig funksjon vindu ():
/ * START DRAG ********************************************* ************ / privat funksjon onWindowStartDrag (e: MouseEvent): void var windowWidth = this.width; var windowHeight = this.height; var windowBarWidth = e.target.width; var windowBarHeight = e.target.height; var boundsRect: Rektangel; // vinduets trekkbare grenser hvis (windowArea.visible) boundsRect = new Rectangle (0, 0, stage.stageWidth-windowWidth, stage.stageHeight-windowHeight); else boundsRect = nytt rektangel (0, 0, stage.stageWidth-windowBarWidth, stage.stageHeight-windowBarHeight); // spor (boundsRect); this.startDrag (false, boundsRect); // bringe vinduet til forsiden .addChild (dette);
Det første vi gjør her er å skape variabler til bredder og høyder av vinduet og windowBar.
Deretter er vinduets grenser. Vi lager to grenser: en når vinduet er normalt (hvis windowArea er synlig) og et annet når det er minimert. Du gjør dette ved å lage et rektangel med størrelsen på scenen. Rektangelet støtter fire attributter (x, y, bredde, høyde). Den starter i hjørnet av skjermen (x: 0; y: 0) og strekker seg til det andre hjørnet av skjermen. Fordi grensene er relatert til registreringssted av vinduet, må vi trekke vinduets bredde og høyde (eller windowBarer i tilfelle vinduet er minimert).
Etter at grensene er satt, setter vi vinduet for å dra. Vi drar dette, Vinduet klassen. Med andre ord, hele vinduet.
this.startDrag (false, boundsRect);
De startdrag funksjonen støtter to attributter: lockCenter og grenser. Hvis du ikke vil ha noen grenser, skriv bare dette:
this.startDrag (false);
Hvis vi har flere vinduer, må vi bringe det nåværende vinduet øverst på displayet. Vi gjør dette med addChild ved å legge det igjen til scenen:
// bringe vinduet til forsiden .addChild (dette);
Denne er veldig enkel. Vi bruker stopdrag funksjon her. Bare kopier følgende til koden din etter forrige onWindowStartDrag funksjon:
/ * STOP DRAG ********************************************* ************ / privat funksjon onWindowStopDrag (e: MouseEvent): void this.stopDrag ();
Igjen, veldig enkelt. Når vi klikker på vinduet, tar vi det med forsiden addChild.
/ * WINDOW CLICK ********************************************* ************ / privat funksjon onWindowClick (e: MouseEvent): void // bringe vindu til frontstadiet.addChild (dette);
For å minimere / vise vinduet, skifter vi synligheten til windowArea som dette:
/ * MINIMER VINDEN ******************************************** ************ / privat funksjon minimereWindow (e: MouseEvent): void windowArea.visible =! windowArea.visible;
Du kan forbedre dette ved å falme ut av vinduet og gjemme det, og omvendt:
/ * MINIMER VINDEN ******************************************** ************ / privat funksjon minimereWindow (e: MouseEvent): void var fade: Tween; hvis (windowArea.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; fade.start (); funksjon fadeFinish (e: TweenEvent): void windowArea.visible =! windowArea.visible;
Tween støtter følgende verdier:
Tween (objekt, "eiendom", EasingType, start, slutt, varighet, useSeconds);
For mer omfattende lesing, bruk LiveDocs.
I vårt tilfelle er det vi gjør, hvis windowArea er synlig (betyr: ikke minimert), vil den forsvinne windowArea og når tweenen er ferdig (TweenEvent.MOTION_FINISH), det vil gjemme windowArea. Omvendt om det er minimert.
Vi bruker variabelen t å endre windowTitle. De to andre linjene er bare for å løse et problem med brevavstand. Hvis du ikke skriver dem, vil Flash nullstille brevavstanden.
/ * SETT WINDOW'S TITLE ******************************************** ************* / offentlig funksjon Tittel (t: String): void var fmt: TextFormat = windowTitle.getTextFormat (); windowTitle.text = t; windowTitle.setTextFormat (FMT); // brevavstand problem title = t;
Denne funksjonen vil bli brukt senere slik:
Accentsconagua
YourWindowName.Title ("Navn på vinduet"); Denne funksjonen vil få to attributter: Bredden og høyden til vinduet. Hvis ingen er fylt, blir den satt til standardstørrelsen (280x112 px)
Det vi gjør her er å endre bredden på windowBar, de windowArea og windowTitle. For høyden endrer vi bare windowAreas, forlater høyden på vinduet til standardstørrelsen, akkurat som et normalt vindu.
Når du skal endre størrelsen, må vi nullstille posisjonen til Minimer knappen. Som er lik vinduets bredde minus knappens bredde og 6px.
/ * SETT WINDOW SIZE ******************************************** ************* / offentlig funksjon Størrelse (bredde: int = 280, høyde: int = 112): void // endre breddevinduetBar.width = Bredde; windowArea.width = Bredde; windowTitle.width = Bredde - 45; // endre innholdshøydevinduetArea.height = Høyde; // reset minimizeBtn skala / posisjon minimizeBtn.x = Bredde - minimizeBtn.width - 6;
Denne funksjonen vil bli brukt senere slik:
YourWindowName.Size (350,200);
Husk da vi setter en Drop Shadow under vinduet? Vel, hvis du plasserer vinduet med kode, må du legge til dråpeskyggen etter kode også.
Alle de ovennevnte attributter kan angis etter kode. Kopier funksjonen og endre verdiene i henhold til din egen smak:
/ * SET FILTER: DROP SHADOW ****************************************** *************** / offentlig funksjon DropShadow (farge: String = "333333"): void var dropShadow: DropShadowFilter = new DropShadowFilter (); dropShadow.blurX = 5; dropShadow.blurY = 5; dropShadow.strength = 1; dropShadow.quality = 1; // 1 lav; 2- medium; 3- høy (maks: 15) dropShadow.angle = 45; dropShadow.distance = 1; dropShadow.alpha = 1; dropShadow.knockout = false; dropShadow.inner = false; dropShadow.hideObject = false; dropShadow.color = int ("0x" + farge); this.filters = new Array (dropShadow); // legg til filter i vinduet Denne funksjonen vil motta en streng med fargens heksadesimale kode. Hvis dette ikke er fylt, vil standardfargeverdien være # 333333.
De kvalitet kan gå fra 1 til 15, være 1 2 3 - lav, middels og høy. Vi brukte lavt, her.
De farge må konverteres fra a string til en int.
Etter å ha definert attributtene må vi legge til filteret i vinduet som i den siste linjen. Dette vil skape en Array av filtre. Som betyr at du kan legge til andre filtre i vinduet også.
this.filters = new Array (dropShadow);
Denne funksjonen vil bli brukt senere slik:
YourWindowName.DropShadow ( "FF0000"); // legger til en rød skygge
Bytt nå til Flash-filen din, opprett et nytt lag, navn det AS3 og klikk F9 for ActionScript (eller gå til Window> Actions).
Å legge til et vindu er veldig enkelt. Alt du trenger å gjøre er å opprette en variabel (la oss kalle det MyWindow), tilordne den til Vindu klassen og legg til vinduet til scenen:
var myWindow: vindu = nytt vindu; addChild (MyWindow);
Dette vil produsere et vindu med standardverdiene.
Du kan endre flere attributter av vinduet:
Igjen, det første du må gjøre er å opprette variabelen som er tilordnet av Vinduet klassen:
var myWindow: vindu = nytt vindu;
Deretter kan du begynne å endre attributter:
myWindow.Title ("Cabo Verde"); myWindow.DropShadow ( "66CC00"); // legger til en fin kalkskygge
myWindow.Size (350,200);
myWindow.x = 20; myWindow.y = 20;
addChild (MyWindow);
Alle kodene vil bli slik:
var myWindow: vindu = nytt vindu; myWindow.Title ("Cabo Verde"); myWindow.DropShadow ( "66CC00"); myWindow.Size (350,200); myWindow.x = 20; myWindow.y = 20; addChild (MyWindow); 
Her er et annet eksempel med to vinduer lagt til med kode og standard i scenen:
var janela: vindu = nytt vindu; var janela02: vindu = nytt vindu; 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); 
Hvis du trenger å vite vinduets tittel, kan du bruke dette:
spor (janela.title);
Godt gjort for å følge så langt! Du burde nå ha oppnådd et resultat som ligner på det vi så på i begynnelsen:
Hvis du merker nå, kan du endre alle vinduets attributter, men innholdet forblir det samme. Så la oss lage innholdet.
Åpne vinduets MovieClip, opprett et nytt lag for innholdet og gå til Sett inn> Nytt symbol (CTRL + F8). Velg MovieClip, navn den innhold og trykk OK. Legg det nå på X: 0, Y: 22.
Velg det nye innholdssymbolet du nettopp har opprettet, og angi dets forekomstnavn til INNHOLD.
Dobbeltklikk innholdet, navnet på det eksisterende laget innhold og opprett en annen som heter AS3. I sistnevnte slo F9 og skrive:
Stoppe();
Dette vil være vårt standardinnhold. Betydning, ingenting!
Opprett nå en annen keyframe og plasser et bilde for eksempel. Husk størrelsen på vinduet du skal bruke. Legg til en annen keyframe og skriv litt tekst i den. Nå har vi 3 keyframes: 1. ingen innhold, 2. bilde, 3. tekst.
Når det gjelder koden legger du til dette i klassefilen din:
/ * ENDRE INNHOLD ********************************************* ************ / offentlig funksjon Innhold (c: int): void CONTENT.gotoAndStop (c);
Virkelig enkelt. Vi vil bare si hvilken keyframe vi vil gå til.
Du må også endre minimizeWindow funksjon til dette:
/ * MINIMER VINDEN ******************************************** ************ / privat funksjon minimereWindow (e: MouseEvent): void var fade: Tween; hvis (windowArea.visible) CONTENT.visible =! CONTENT.visible; fade = ny 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 (); funksjon fadeFinish (e: TweenEvent): void windowArea.visible =! windowArea.visible;
I forrige eksempel legger du til dette i koden:
janela.Content (2); // går til bilde keyframe
Her er den komplette koden:
var janela: vindu = nytt vindu; var janela02: vindu = nytt vindu; Janela.Title ("Cabo Verde"); janela.DropShadow ( "66CC00"); janela.Size (350,240); janela.Content (2); // går til bilde keyframe janela.x = 20; janela.y = 20; janela02.Title ( "Ninjas!"); janela02.DropShadow ( "FF0000"); janela02.Size (250,200); janela02.Content (3); // går til tekst keyframe janela02.x = 40; janela02.y = 150; addChild (janela); addChild (janela02); Så det er en enkel måte å opprette et trekkbart vindu på (som vi ser på Windows). Hvis du vil gå videre, kan du endre innholdet MovieClip, legge til tekst, knapper, bilder, etc. Du kan legge til rullestenger, ringe innhold via XML, eller hva du kan tenke på. Mulighetene er endeløse!
Her er et annet fantastisk eksempel:
Dette er eXOTRik, og jeg håper du fant dette nyttig. Det er min første opplæring, håper å gi deg flere ninja triks. Ayaaaa!
