Share
În acest tutorial veți învăța cum să creați ferestre draggable utilizând Flash și AS3. Voi acoperi elementele de bază ale drag & drop, limitele ferestrelor, adăugarea de conținut și modul de minimizare a ferestrei.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
Okey, hai să mergem! Creați un nou document apăsând CTRL + N și selectând Fișier Flash (ActionScript 3). Setați dimensiunea scenei la 600x400 px și culoarea de fundal la #EEE. În fereastra Proprietăți, setați clasa la ferestre și salvați fișierul ca windows.fla.
Selectați instrumentul Rectangle (R) și desenați un dreptunghi cu o rezoluție de 280x90 px. Selectați forma, mergeți la paleta Culoare (Fereastră> Culoare) și creați un gradient de la #FFF la #CCC.
Apăsați F pentru instrumentul Gradient, selectați gradientul, rotiți-l cu 90 de grade (ținând apăsat butonul Shift în timp ce rotiți) și scurtându-l astfel încât să se adapteze dreptunghiul.
Selectați toată forma, apăsați F8 pentru a converti la simbol, denumiți-o windowArea și setați punctul de înregistrare în partea stângă sus.
Selectați simbolul și în fereastra Proprietăți setați numele instanței la windowArea.
Pentru graniță, utilizați filtrul Glow, cu o dimensiune de 2px, cu o intensitate de 500%, cu culoarea # 666666. Am folosit o strălucire, pentru că dacă folosiți un accident vascular cerebral, atunci când redimensionați fereastra, accidentul va fi redimensionat.
Selectați din nou instrumentul Rectangle (R) și trageți un dreptunghi cu 280x22 px și un clic 1px cu culoarea # 666. Creați un alt dreptunghi în partea de sus a acestui lucru, dar de această dată în opțiunile dreptunghiului setați raza de colț dreptunghiular la 5.
Acum, eliminați colțurile necesare ca în imaginea de mai jos.
Apoi, vopsiți forma, selectați-o, mergeți la paleta Culoare (Fereastră> Culoare) și creați un gradient de la # 999 la # 333. Rotiți gradientul la 90 de grade, așa cum am făcut la pasul anterior.
Selectați toată forma, apăsați F8. Nume: windowBar; Tip: Buton; Înregistrare: în partea stângă sus.
Selectați simbolul și în fereastra Proprietăți setați numele instanței la windowBar.
Faceți dublu clic pe forma, creați keyframes pentru Peste și Jos state. Acum schimba culorile pentru fiecare.
Am ales:
Creați un dreptunghi rotund cu raze de 14x11 px, 5px și modificați-l astfel încât să pară ceva mai jos.
Semnul minus pe care îl faci creând un dreptunghi 5x2 px cu culoarea # 999. Setați numele instanței la minimizeBtn.
Am folosit aceleași culori din fereastră, dar statul UP cu un alfa de 40% pentru gradient.
Aranjați toate formele sub forma unei ferestre, apăsați F8 și creați un filmClip cu numele fereastră și înregistrare: partea stângă sus.
În bibliotecă, faceți clic dreapta pe Fereastră și accesați Proprietăți. Setați clasa la fereastră. În acest fel, fereastra va fi atribuită clasei pe care o vom crea mai târziu.
Selectați simbolul și în Proprietăți fereastră setați numele instanței la fereastră. În Filtre, faceți clic pe Adăugați un filtru (butonul încorporat din imaginea de mai jos) și adăugați o Shadow Drop cu culoarea # 333 ca în cele de mai jos:
Faceți dublu clic pe simbolul pentru ao edita. Selectați toate (CTRL + A), Faceți clic dreapta> Distribuie în straturi.
Într-un nou strat, scrieți textul pentru titlul ferestrei cu Arial, 11pt, color #CCC, spațierea literelor: 1. Setați-l la Text dinamic și numește-o windowTitle.
Acum, când proiectul este complet, să începem să codificăm scena noastră. Primul lucru pe care îl vom face este crearea fișierului nostru ActionScript.
Apăsați Ctrl + N sau mergeți la File> New și selectați Fișier ActionScript. Salvați-l în același director și cu același nume (windows.as) din fișierul dvs. FLA.
Acum, să creați pachetul nostru și să importați clasele necesare:
pachet import flash.display.MovieClip; importul flash.events.Event; importul 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; fereastra publica de clasa extinde MovieClip
Acum trebuie să alocați funcții butoanelor noastre. Veți avea nevoie de o funcție atunci când începem să tragem windowBar, altul pentru a opri tragerea, pentru a aduce fereastra în sus atunci când faceți clic pe ea, iar alta pentru ao minimiza.
Adăugați acești ascultători de evenimente la funcția publică funcțională () în codul nostru:
fereastra publica de clasa extinde MovieClip // variabile publice titlu titlu: String; funcția publică funcțională () // set windowTitle title = windowTitle.text; windowTitle.mouseEnabled = false; // windows funcționează acest.addEventListener (MouseEvent.MOUSE_UP, onWindowClick); this.windowBar.addEventListener (MouseEvent.MOUSE_DOWN, peWindowStartDrag); this.windowBar.addEventListener (MouseEvent.MOUSE_UP, peWindowStopDrag); this.minimizeBtn.addEventListener (MouseEvent.MOUSE_UP, minimizeWindow);
Publicul var titlu este folosit pentru titlul ferestrei. Vom folosi mai târziu.
Din moment ce windowTitle este un text dinamic pe care îl dezactivați funcțiile mouse-ului astfel încât să nu afecteze zona de tragere a acestuia windowBar.
Aici începem să ne distrăm! Copiați următorul cod după funcția publică funcțională ():
/ * START DRAG ********************************************** ************ / funcția privată onWindowStartDrag (e: MouseEvent): void var windowWidth = acest.width; var windowHeight = this.height; var fereastrăBarWidth = e.target.width; var windowBarHeight = e.target.height; var limiteRect: dreptunghi; // limitele draggibile ale ferestrei dacă (windowArea.visible) boundsRect = nou dreptunghi (0, 0, stage.stageWidth-windowWidth, stage.stageHeight-windowHeight); altfel boundsRect = nou dreptunghi (0, 0, stage.stageWidth-windowBarWidth, stage.stageHeight-windowBarHeight); / / trace (boundsRect); this.startDrag (false, boundsRect); // aduce fereastra in fata stage.addChild (aceasta);
Primul lucru pe care îl facem aici este crearea de variabile la lățimea și înălțimea ferestrei și a ferestrei windowBar.
Apoi, limitele ferestrei. Vom crea două limite: una când fereastra este normală (dacă windowArea este vizibilă) și alta când este minimizată. Faceți acest lucru creând un dreptunghi cu dimensiunea scenei. Dreptunghiul suporta patru atribute (x, y, lățime, înălțime). Va începe în colțul ecranului (x: 0; y: 0) și se va extinde în celălalt colț al ecranului. Deoarece limitele sunt legate de punct de înregistrare din fereastră, va trebui să scăpăm lățimea și înălțimea ferestrei (sau windowBarîn cazul în care fereastra este minimizată).
După ce limitele au fost stabilite, vom seta fereastra pentru a trage. Vom trage acest, clasa ferestrelor. Cu alte cuvinte, întreaga fereastră.
this.startDrag (false, boundsRect);
startDrag funcția suportă două atribute: lockCenter și limite. Dacă nu doriți limite doar scrieți acest lucru:
this.startDrag (false);
Dacă avem mai multe ferestre, va trebui să aducem fereastra curentă în partea superioară a ecranului. Facem asta cu addChild prin adăugarea din nou la scenă:
// aduce fereastra in fata stage.addChild (aceasta);
Acesta este foarte simplu. Vom folosi stopDrag funcționează aici. Trebuie doar să copiați codul după codul precedent onWindowStartDrag funcţie:
/ * STOP DRAG ********************************************** ************ / funcția privată onWindowStopDrag (e: MouseEvent): void this.stopDrag ();
Din nou, foarte simplu. Când faceți clic pe fereastră, o vom aduce în față folosind addChild.
/ * WINDOW CLICK ********************************************** ************ / funcția privată onWindowClick (e: MouseEvent): void // aduce fereastra la stage.addChild (acest lucru);
Pentru a minimiza / afișa fereastra, vom comuta vizibilitatea ferestrei windowArea asa:
/ * MINIMIZARE WINDOW ********************************************** ************ / funcția privată minimizeWindow (e: MouseEvent): void windowArea.visible =! windowArea.visible;
Puteți îmbunătăți acest lucru prin estomparea ferestrei și ascunderea acesteia și invers:
/ * MINIMIZARE WINDOW ********************************************** ************ / funcția privată minimizeWindow (e: MouseEvent): void var fade: Tween; dacă (windowArea.visible) fade = nou Tween (windowArea, "alpha", Strong.easeOut, 1, 0, 0.5, true); fade.addEventListener (TweenEvent.MOTION_FINISH, fadeFinish); altceva fade = nou Tween (windowArea, "alpha", Strong.easeOut, 0, 1, 0.5, true); windowArea.visible =! windowArea.visible; fade.start (); funcția fadeFinish (e: TweenEvent): void windowArea.visible =! windowArea.visible;
Tween acceptă următoarele valori:
Tween (obiect, "proprietate", EasingType, începutul, sfârșitul, durata, utilizarea secțiunilor);
Pentru citirea mai detaliată, utilizați LiveDocs.
În cazul nostru, ceea ce facem este, dacă windowArea este vizibilă (adică nu este minimalizată), va dispărea windowArea și când finisajele se termină (TweenEvent.MOTION_FINISH), va ascunde windowArea. În caz contrar, dacă este redus la minimum.
Vom folosi variabila T pentru a schimba windowTitle. Celelalte două linii sunt doar pentru a rezolva o problemă de spațiere a literelor. Dacă nu le scrieți, Flash va reseta spațierea literelor la zero.
/ * SETAREA TITLULUI WINNER ********************************************* ************* / funcția publică Titlu (t: String): void var fmt: TextFormat = windowTitle.getTextFormat (); windowTitle.text = t; windowTitle.setTextFormat (FMT); // spațiarea literelor titlu titlu = t;
Această funcție va fi utilizată mai târziu astfel:
Accentsconagua
YourWindowName.Title ("Numele ferestrei dvs."); Această funcție va primi două atribute: lățimea și înălțimea ferestrei. Dacă nici una nu este completă, va fi setată la dimensiunea implicită (280x112 px)
Ceea ce facem aici este schimbarea lățimii windowBar, windowArea si windowTitle. Pentru înălțimea pe care tocmai am schimba windowArea, lăsând înălțimea Ferestrei la dimensiunea implicită, la fel ca o fereastră normală.
Când redimensionăm, va trebui să resetăm poziția butonului Minimize. Care este egal cu lățimea ferestrei minus lățimea butonului și 6px.
/ * SETAREA DIMENSIUNII WINDOWULUI ********************************************* ************* / funcție publică Dimensiune (Lățime: int = 280, Înălțime: int = 112): void // schimbare lățime windowBar.width = Lățime; windowArea.width = Lățime; windowTitle.width = Lățime - 45; // modificați înălțimea conținutului windowArea.height = Înălțime; // reinițializați scalarea / poziția minimizeBtn minimizeBtn.x = Lățimea - minimizeBtn.width - 6;
Această funcție va fi utilizată mai târziu astfel:
YourWindowName.Size (350,200);
Amintiți-vă când am plasat o Umbre de Drop sub fereastră? Dacă plasați fereastra prin cod, va trebui să adăugați și umbra prin cod.
Toate atributele de mai sus pot fi setate prin cod. Copiați funcția și modificați valorile în funcție de gustul dvs.:
/ * SET FILTRU: DROP SHADOW ******************************************* *************** / funcția publică DropShadow (culoare: String = "333333"): void var dropShadow: DropShadowFilter = nou DropShadowFilter (); dropShadow.blurX = 5; dropShadow.blurY = 5; dropShadow.strength = 1; dropShadow.quality = 1; // 1- mic; 2-mediu; 3 - mare (max: 15) dropShadow.angle = 45; dropShadow.distance = 1; dropShadow.alpha = 1; dropShadow.knockout = false; dropShadow.inner = false; dropShadow.hideObject = false; dropShadow.color = int ("0x" + culoare); this.filters = Array nou (dropShadow); // adăugați filtrul în fereastră Această funcție va primi un șir cu codul hexazecimal al culorii. Dacă aceasta nu este completă, valoarea implicită a culorii va fi # 333333.
calitate poate merge de la 1 la 15, fiind 1 2 3 - scăzut, mediu și înalt. Am folosit-o jos, aici.
culoare trebuie să fie convertite de la Şir la un int.
După definirea atributelor, trebuie să adăugăm filtrul la fereastră ca în ultima linie. Acest lucru va crea un mulțime de filtre. Ceea ce înseamnă că puteți adăuga și alte filtre în fereastră.
this.filters = Array nou (dropShadow);
Această funcție va fi utilizată mai târziu astfel:
YourWindowName.DropShadow ( "FF0000"); // adaugă o umbră roșie
Acum schimbați fișierul dvs. Flash, creați un strat nou, denumiți-l AS3 și apăsați F9 pentru ActionScript (sau mergeți la Window> Actions).
Adăugarea unui Fereastră este foarte simplă. Tot ce trebuie să faceți este să creați o variabilă (să o numim myWindow), care îl atribuie Fereastră clasă și adăugați fereastra la etapă:
var myWindow: fereastră = fereastră nouă; addChild (myWindow);
Aceasta va produce un Fereastră cu valorile sale implicite.
Puteți schimba mai multe atribute ale ferestrei:
Din nou, primul lucru pe care trebuie să-l faceți este să creați variabila atribuită clasei Window:
var myWindow: fereastră = fereastră nouă;
Apoi puteți începe să modificați atributele:
myWindow.Title ("Cabo Verde"); myWindow.DropShadow ( "66CC00"); / / adaugă o umbra de vară frumoasă
myWindow.Size (350,200);
myWindow.x = 20; myWindow.y = 20;
addChild (myWindow);
Tot codul va fi astfel:
var myWindow: fereastră = fereastră nouă; myWindow.Title ("Cabo Verde"); myWindow.DropShadow ( "66CC00"); myWindow.Size (350,200); myWindow.x = 20; myWindow.y = 20; addChild (myWindow); 
Iată un alt exemplu, cu două ferestre adăugate prin cod și una implicită în stadiu:
var janela: fereastră = fereastră nouă; var janela02: fereastră = fereastră nouă; 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); 
Dacă trebuie să cunoașteți titlul ferestrei, puteți folosi acest lucru:
trace (janela.title);
Bine facut pentru urmatoarele pana acum! Ar fi trebuit să realizați un rezultat similar cu ceea ce am privit la început:
Dacă observați până acum, puteți modifica toate atributele ferestrei, dar conținutul rămâne același. Deci, să creăm conținutul.
Deschideți fereastra MovieClip, creați un nou strat pentru conținut și accesați Insert> New Symbol (CTRL + F8). Alegeți filmul, denumiți-l conţinut și apăsați OK. Acum puneți-l la X: 0, Y: 22.
Selectați noul simbol de conținut pe care tocmai l-ați creat și setați numele instanței acestuia CONŢINUT.
Faceți dublu clic pe conținut, denumiți stratul existent conţinut și să creeze un alt nume AS3. În cel de-al doilea, apăsați F9 și scrieți:
Stop();
Acesta va fi conținutul nostru implicit. Înțeles, nimic!
Acum creați un altul cadru cheie și plasați o imagine, de exemplu. Țineți cont de mărimea ferestrei pe care o veți utiliza. Adăugați un alt cadru cheie și scrieți un text în el. Acum avem 3 cadre cheie: 1. nu conținut, 2. imagine, 3. text.
În ceea ce privește codul, adăugați acest lucru la fișierul de clasă:
/ * SCHIMBĂ CONȚINUTUL ********************************************** ************ / funcția publică Conținut (c: int): void CONTENT.gotoAndStop (c);
Foarte simplu. Vom spune doar la ce cadru cheie vom dori să mergem.
De asemenea, va trebui să schimbați minimizeWindow funcția la aceasta:
/ * MINIMIZARE WINDOW ********************************************** ************ / funcția privată minimizeWindow (e: MouseEvent): void var fade: Tween; dacă (windowArea.visible) CONTENT.visible =! CONTENT.visible; fade = Tween nou (windowArea, "alpha", Strong.easeOut, 1, 0, 0.5, true); fade.addEventListener (TweenEvent.MOTION_FINISH, fadeFinish); altceva fade = nou Tween (windowArea, "alpha", Strong.easeOut, 0, 1, 0.5, true); windowArea.visible =! windowArea.visible; CONTENT.visible =! CONTENT.visible; fade.start (); funcția fadeFinish (e: TweenEvent): void windowArea.visible =! windowArea.visible;
În exemplul anterior, adăugați codul respectiv:
janela.Content (2); // se duce la gama de imagini
Iată codul complet:
var janela: fereastră = fereastră nouă; var janela02: fereastră = fereastră nouă; janela.Title ("Cabo Verde"); janela.DropShadow ( "66CC00"); janela.Size (350,240); janela.Content (2); // se duce la cheia de imagine janela.x = 20; janela.y = 20; janela02.Title ( "Ninjas!"); janela02.DropShadow ( "FF0000"); janela02.Size (250,200); janela02.Content (3); // merge la cheia de text janela02.x = 40; janela02.y = 150; addChild (janela); addChild (janela02); Deci, există o modalitate simplă de a crea o fereastră draggable (la fel ca în Windows). Dacă doriți să mergeți mai departe, puteți schimba conținutul MovieClip, adăugând text, butoane, imagini etc. Puteți adăuga bare de derulare, convorbiri prin XML sau orice vă puteți gândi. Posibilitățile sunt nesfârșite!
Iată un alt exemplu minunat:
Acesta este eXOTRik, și sper că ați găsit acest lucru util. Este primul meu tutorial, sper să vă aduc niște trucuri ninja. Ayaaaa!
