Enhance Din Flash utforminger med Drabare Windows
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil du lære hvordan du kan lage flyttbare vinduer ved hjelp av Flash og AS3. Jeg skal dekke grunnleggende drag & slipp, vindus grenser, legge til innhold, og hvordan du kan minimere vinduet
Endelig resultat Forhåndsvisning
La oss ta. en titt på det endelige resultatet vi skal jobbe mot:
Trinn 1: Lag en ny fil
Okey, la oss gooo! Opprett et nytt dokument ved å trykke CTRL + N og velge Flash-fil (Actionscript 3) Hit F for Gradient Tool, velg gradient, rotere det 90 grader (ved å holde Skift-tasten mens du roterer) og forkorte den slik at den tilpasser seg rektangelet. Velg alle formen, traff F8 for å Konverter til Symbol, name it windowArea Hotell og satt registreringspunkt til øverst til venstre. Velg symbolet og i vinduet Egenskaper satt forekomstnavnet til windowArea For grensen, bruker Glow filter, med en 2px blur, styrke 500%, farge # 666666. Jeg brukte en glød fordi hvis du bruker et slag, når du endrer størrelsen på Window slaget vil også endre størrelsen Velg rektangelverktøyet (R ) igjen og tegne et rektangel med 280x22 px og en 1px stroke med fargen # 666. Lag en firkant på toppen av dette, men denne gangen i rektangelet Options satt rektangelhjørneradiusen til 5. Nå eliminere de nødvendige hjørnene som på bildet under. Deretter maling figuren, velger du det, gå til fargepaletten (Vindu > Color) og lage en gradient fra # 999 til # 333. Roter gradient 90 grader, som vi gjorde på forrige trinn. Velg all form, traff F8. Navn: windowBar Velg symbolet og i vinduet Egenskaper satt forekomstnavnet til windowBar Dobbeltklikk på figuren, lage keyframes Jeg har valgt. Lag en runde rektangel med 14x11 px, 5px radius, og endre den slik at den ser omtrent slik ut under. minustegn du gjøre ved å opprette et rektangel 5x2 px med fargen # 999. Sett forekomst navn til minimizeBtn Jeg brukte de samme fargene fra windowBar, men UP staten med 40% alfa for graderingen. Ordne alle former i form av et vindu, traff F8 og skape en MovieClip med navnet vindu Hotell og registrering. øverst til venstre I Biblioteket, høyreklikk vinduet og gå til Egenskaper. Sett klassen til vindu Velg symbolet og i Egenskaper vindu Dobbeltklikk på symbolet for å redigere den . Velg alle (CTRL + A), Høyre Click > Distribuere til lag I et nytt lag, skriver teksten for vinduets tittel med Arial, 11pt, farge #CCC, brev-avstand.: 1. Sett den til Dynamic Text Hotell og navn det windowTitle Nå som designet er ferdig, la oss starte koding vår scene. Det første vi skal gjøre er å lage vår Actionscript-fil Nå la oss lage vår pakke og importere de nødvendige klasser:. Nå må du tilordne funksjoner til våre knapper. Du trenger en funksjon til når vi begynner å dra på windowBar Legg disse hendelsen lyttere til offentlig funksjon Window () i koden vår: Det offentlige Var tittelen brukes for vinduets tittel. Vi skal bruke dette senere. Siden windowTitle er et dynamisk tekst vi deaktivere sine musen fungerer slik at de ikke vil påvirke dra område av windowBar. Det er her vi begynner å ha det gøy! Kopier følgende kode etter offentlig funksjon Window (): Twitter /* 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 flyttbare grenser if (windowArea.visible) {boundsRect = new rektangel (0, 0, stage.stageWidth-windowWidth, stage.stageHeight-windowHeight); } Else {boundsRect = new rektangel (0, 0, stage.stageWidth-windowBarWidth, stage.stageHeight-windowBarHeight); } //Spore (boundsRect); this.startDrag (falsk, boundsRect); //Bringe vindu til stage.addChild front (denne);} Det første vi gjør her er å lage variabler til bredder og høyder av vinduet og windowBar Deretter vinduets grenser.. Vi vil opprette to grenser: en når vinduet er normalt (hvis windowArea er synlig) og en annen når det er minimert. Du gjør dette ved å opprette et rektangel med størrelsen på scenen. Rektangelet støtter fire attributter (x, y, bredde, høyde). Det vil starte i hjørnet av skjermen (x: 0; y: 0) og utvide til det andre hjørnet av skjermen. Fordi grensene er relatert til registreringspunktet Etter at grensene er satt, vil vi sette i vinduet for å dra. Vi skal dra denne Den startdrag funksjonen støtter to attributter:. LockCenter sprang. Hvis du ikke vil at noen grenser bare skrive dette: Hvis vi har flere vinduer vi trenger for å bringe gjeldende vindu til toppen av skjermen. Vi gjør dette med addChild Dette er veldig enkelt. Vi bruker stopdrag funksjon her. Bare kopier følgende i koden etter forrige onWindowStartDrag funksjon: Twitter /* STOP DRAG ****************************** **************************** /privat funksjon onWindowStopDrag (e: MouseEvent): void {this.stopDrag ();} Igjen, veldig enkel. Når vi klikker vinduet vi vil få det til fronten ved hjelp addChild. Twitter /* VINDU KLIKK **************************** ****************************** /privat funksjon onWindowClick (e: MouseEvent): void {//bringe vinduet foran scenen. addChild (denne);} For å minimere /vise vinduet, vil vi veksle synligheten av windowArea som dette: Twitter /* Minimer vindu * ************************************************** ******* /privat funksjon minimizeWindow (e: MouseEvent): void {! windowArea.visible windowArea.visible =;} Du kan forbedre dette ved fading ut av vinduet og skjule det, og vice-versa: Twitter /* Minimer vindu ******************************************* *************** /privat funksjon minimizeWindow (e: MouseEvent): void {var fade: Tween; if (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:. For mer omfattende lesing, bruker LiveDocs Vi vil bruke variabelen t å endre windowTitle. De to andre linjene er bare for å løse et brev avstand problemet. Hvis du ikke skrive dem Flash vil tilbakestille bokstavavstand til null Twitter /* SET vinduets tittel. ************************** ******************************** /offentlig funksjon Tittel (t: String): void {var FMT: tekstformat = windowTitle .getTextFormat (); windowTitle.text = t; windowTitle.setTextFormat (FMT); //Brev mellomrom problemet title = t;} Denne funksjonen vil bli brukt senere som dette: Denne funksjonen vil motta to attributter: Bredde og Høyde i vinduet. Hvis ingen er fylt, vil det bli satt til standardstørrelsen ( 280x112 px Det vi gjør her er bredden på windowBar, den windowArea og windowTitle endres. For høyden vi bare endre windowArea tallet, forlater høyden på vinduet til standardstørrelse, akkurat som et vanlig vindu. Når du endrer størrelsen vi må nullstille posisjonen minimer-knappen. Som er lik vinduets bredde minus knappen bredde og 6PX. Twitter /* SET vinduets SIZE **************************** ****************************** /offentlig funksjon Størrelse (Bredde: int = 280, Høyde: int = 112): void { //endre bredde windowBar.width = Bredde; windowArea.width = Bredde; windowTitle.width = Bredde - 45; //Endre innhold høyde windowArea.height = Høyde; //Null minimizeBtn skala /stilling minimizeBtn.x = Bredde - minimizeBtn.width - 6;} Denne funksjonen vil bli brukt senere som dette: Husker da vi plassert en Drop Shadow under vinduet? Vel, hvis du plasserer vinduet ved koden du må legge skyggen av kode i tillegg. Alle de ovennevnte egenskaper kan settes av kode. Kopier funksjon og endre verdiene i henhold til din egen smak: Twitter /* SET FILTER: Skygge *************************** ******************************* /offentlig funksjon Dropshadow (farge: String = "333333"): void {var drop: DropShadowFilter = new DropShadowFilter (); dropShadow.blurX = 5; dropShadow.blurY = 5; dropShadow.strength = 1; dropShadow.quality = 1; //1- lav; 2- medium; 3- høy (max 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 (drop); //Legger filter til vinduet} Denne funksjonen vil motta en streng med fargens heksadesimale koden. Hvis dette ikke er fylt, vil standard fargeverdi være # 333333 Kvaliteten kan gå fra 1 til 15, som er en to tre -. Lav, middels og høy. Vi brukte lav, her. Fargen må konverteres fra en String Etter å ha definert attributtene vi må legge til filtrere bort til vinduet som i den siste linjen. Dette vil skape en Array Denne funksjonen vil bli brukt senere som dette. Nå endre til din Flash-fil, opprette et nytt lag, name it AS3 Hotell og treffer F9 for Actionscript (eller gå til Vindu > Handlinger) Legge til en Window er svært enkel.. Alt du trenger å gjøre er å lage en variabel (la oss kalle det MyWindow), tildele det til Window klassen og legge til Window til scenen: Dette vil produsere et vindu med sine standardverdier Du kan endre flere attributter i vinduet: Igjen, er den første tingen å gjøre for å skape den variabel tildeles av Window-klasse: Deretter kan du begynne å endre attributtene: all kode vil bli som dette: Her er et annet eksempel med to vinduer lagt til av kode og en standard man i den fasen: Hvis du trenger å vite vinduets tittel, kan du bruke denne: Godt gjort for å følge så langt! Du skal nå ha oppnådd et resultat som ligner på det vi så på i begynnelsen: Hvis du legger merke til nå, du kan endre alt vinduets egenskaper, men innholdet er det samme. Så la oss lage innholdet åpne vinduet er MovieClip, opprette et nytt lag for innholdet og gå til Sett >.; New Symbol (CTRL + F8). Velg MovieClip, name it innhold Hotell og trykk OK. Nå plasserer den på X: 0, Y:. 22 Velg det nye innholdet symbolet du nettopp opprettet, og sette forekomst navn til innhold Dobbeltklikk på innhold, navngi den eksisterende. lag innhold Hotell og opprette en ny en som heter AS3 Dette vil være vårt standardinnhold. Betydning, ingenting! Nå opprette en keyframe Hotell og plassere et bilde for eksempel. Husk at størrelsen på vinduet du skal bruke. Legg til en annen nøkkelbilde og skrive litt tekst i den. Nå har vi 3 nøkkel: 1. ingen innhold, 2. image, 3. tekst Som for koden, legg dette til klassen din fil. Twitter /* endre innhold ****** ************************************************** ** /offentlig funksjon Innhold (c: int): void {CONTENT.gotoAndStop (c);} Virkelig enkel. Vi vil bare si som keyframe vi får lyst til å gå til Du må også endre minimizeWindow funksjonen til dette. Twitter /* Minimer vindu ********* ************************************************* /privat funksjon minimizeWindow (e: MouseEvent): void {var fade: Tween; if (windowArea.visible) {CONTENT.visible = CONTENT.visible!; visne = 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 (); funksjon fadeFinish (e: TweenEvent): void {windowArea.visible = windowArea.visible;! }} I forrige eksempel, legger dette til koden: Her er den komplette koden: Så, det er en enkel måte å lage en flyttbare vindu (mye som vi ser på Windows). Hvis du ønsker å gå videre, kan du endre innholdet MovieClip, legge til tekst, knapper, bilder, etc. Du kan legge rullefelt, ringe innhold gjennom XML, eller hva du kan tenke på. Mulighetene er uendelige Her er en annen fantastisk eksempel: Dette er eXOTRik, og jeg håper du fant dette nyttig. Det er min første tutorial, håper å gi deg noen mer ninja triks. Ayaaaa!
. Satt scenen størrelsen til 600x400 px og bakgrunnsfargen til #EEE. I vinduet Egenskaper, satt klassen vinduer Hotell og lagre filen som windows.fla
Trinn 2:. Design windowArea
< p> Velg rektangelverktøyet (R) og tegne et rektangel med 280x90 px. Velg din form, gå til fargepaletten (Vindu > Color). Og lage en gradient fra #FFF til #CCC
.
Trinn 3:. Design windowBar Button
; Type: Button; Påmelding:. Øverst til venstre
stater. Nå endre fargene for hver enkelt
< em> Down Bilde: gradient fra # 9933CC til # 660099
Trinn 4: Lag Minimer Button
.
Trinn 5: Lag Window
. På denne måten vinduet vil bli tildelt til den klassen vi skal opprette senere.
satt forekomstnavnet til vindu
. I Filters, klikk Legg til filter plakater (den sirklet knappen i bildet nedenfor), og legge til en Drop Shadow med fargen # 333 like nedenfor:
Trinn 6:. Lag Action File
Hit Ctrl + N eller gå til Fil >.; Ny og velger Action File
. Lagre den i samme katalog, og med samme navn ( windows.as
) av FLA fil
Pakke {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; importere fl.transitions.easing. *; import fl.transitions.TweenEvent; public class vindu strekker MovieClip {}}
Trinn 7: Legg tilstelninger Lyttere
, en annen for å stoppe dra, en å bringe vinduet til toppen når du klikker på den, og en annen for å minimere den.
public class vindu strekker MovieClip {//variabler offentlig Var tittel: String; offentlig funksjon Window () {//satt windowTitle title = windowTitle.text; windowTitle.mouseEnabled = false; //Vinduer funksjoner 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); }}
Trinn 8: onWindowStartDrag Funksjon
av vinduet, må vi trekke fra vinduet bredde og høyde (eller windowBar
er i tilfelle vinduet er minimert).
, vindusklassen. Med andre ord, hele vinduet
this.startDrag (falsk, boundsRect);
this.startDrag (false);
ved å legge den igjen til etappe:
//bringe vinduet til frontstage.addChild (denne);
Trinn 9: onWindowStopDrag Funksjon
Trinn 10: Ta med vindu til front
Trinn 11: minimizeWindow Funksjon
Tween (objekt, "eiendom", EasingType, begynne, end, varighet, useSeconds);
< p> I vårt tilfelle, hva vi gjør er, hvis windowArea er synlig (altså: ikke minimert), vil det visne ut windowArea og når tween er ferdig (TweenEvent.MOTION_FINISH), vil det skjule windowArea. Vice versa hvis det er minimert
Trinn 12:. Sett Tittel
YourWindowName.Title ("Navn på vinduet");
Trinn 13: Sett Størrelse
)
YourWindowName.Size (350 200);
Trinn 14 : Gi det en Nice Shadow
til en int
.
av filtre. Hvilket betyr at du kan legge til andre filtrene til Window samt
this.filters = new Array (drop);
YourWindowName.DropShadow ("FF0000"); //Legger en rød skygge
Trinn 15: Legge til et vindu med kode
Var MyWindow: window = nytt vindu, addChild (MyWindow);
Trinn 16:. Endre verdiene
Tittel
Shadow
Størrelse
X og Y posisjon
Innhold
Var MyWindow: window = nytt vindu;
Endre tittel:
myWindow.Title ("Cabo Verde" ); Endre Shadow:
myWindow.DropShadow ("66CC00"); //Legger en fin lime skygge Endre størrelse:
myWindow.Size (350 200); Endre Stilling:
myWindow.x = 20; myWindow.y = 20; Legge vinduet for å etappe:
addChild (MyWindow);
Var MyWindow: window = nytt vindu, myWindow.Title ("Cabo Verde"); myWindow.DropShadow (" 66CC00 "); myWindow.Size (350 200); myWindow.x = 20; myWindow.y = 20; addChild (MyWindow);
Trinn 17: Bruke Tilleggs Windows
Var janela: window = nytt vindu; Var janela02: window = 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);
trace (janela.title);
Milestone
Trinn 18: forskjellig innhold i Windows
. I sistnevnte, traff F9 og skrive:
stop ();
Trinn 19: Endring av innhold i de etiske
janela.Content (2); //Går til bildet keyframe
Var janela: window = nytt vindu; Var janela02: window = nytt vindu, janela.Title ("Cabo Verde"); janela.DropShadow (" 66CC00 "); janela.Size (350240); janela.Content (2); //Går til bildet keyframejanela.x = 20; janela.y = 20;janela02.Title("Ninjas!");janela02.DropShadow("FF0000");janela02.Size(250,200);janela02.Content(3); //Går til teksten keyframejanela02.x = 40; janela02.y = 150; addChild (janela); addChild (janela02);
Konklusjon