Cursor personalizat pe acțiuni 3

Această notă este o continuare a uneia din ultimele postări. dar acum se va explica modul de creare a unui cursor personalizat folosind ActionScript 3.0.







Primul pas este ascunderea cursorului standard. În AS 3.0, aceasta se face astfel:

Apoi trebuie să creați martorul cursorului. De regulă, cursoarele au o formă foarte complexă și, prin urmare, pot fi ușor "desenate" prin desenul software. Următorul cod adaugă la scena clipului flash o piesă de lucru pentru cursorul viitor sub forma unei săgeți:

Codul ActionScript 3.0:

Mouse.hide (); var cur: Sprite = Sprite nou (); cur.graphics.lineStyle (2,0x999999,1); cur.graphics.beginFill (0xcccccc); cur.graphics.moveTo (0,0); cur.graphics.lineTo (20,10); cur.graphics.lineTo (10,10); cur.graphics.lineTo (10,20); cur.graphics.endFill (); addChild (cur);

Dar piesa de lucru pentru cursor poate fi creată manual. Pentru a face acest lucru, în programul Adobe Flash, trageți piesa în sine, selectați-o și apăsați F8 de pe tastatură pentru a transforma desenul într-un clip video. Apare o fereastră în care introduceți numele viitorului clip video, selectați tipul "Movie clip" și plasați punctul de înregistrare în colțul din stânga sus. În aceeași fereastră, bifați caseta "Export pentru ActionScript" și introduceți numele clasei în câmpul de introducere (în acest exemplu, acest nume va fi "Cur"). După aceea, scoatem piesa de lucru de pe desktopul programului (dar este salvată în biblioteca proiectului nostru) și scrieți următorul cod pe linia de timp principală:

Mouse.hide (); var cur: Cur = Cur (); addChild (cur);

Cursorii, de regulă, au un efect de umbră. De asemenea, îl putem adăuga la cursorul nostru utilizând filtrul DropShadowFilter:

Mouse.hide (); var cur: Sprite = Sprite nou (); cur.graphics.lineStyle (2,0x999999,1); cur.graphics.beginFill (0xcccccc); cur.graphics.moveTo (0,0); cur.graphics.lineTo (20,10); cur.graphics.lineTo (10,10); cur.graphics.lineTo (10,20); cur.graphics.endFill (); addChild (cur); var umbra: DropShadowFilter = noul DropShadowFilter (); shadow.distance = 5; shadow.color = 0x999999; shadow.alpha = 0.5; shadow.angle = 45; cur.filtre = [umbra];

Și acum ne vom asigura că atunci când mutați cursorul real al mouse-ului (care este ascuns de ochii omului, dar există încă), poziția cursorului nostru de casă se va schimba:

Mouse.hide (); var cur: Sprite = Sprite nou (); cur.graphics.lineStyle (2,0x999999,1); cur.graphics.beginFill (0xcccccc); cur.graphics.moveTo (0,0); cur.graphics.lineTo (20,10); cur.graphics.lineTo (10,10); cur.graphics.lineTo (10,20); cur.graphics.endFill (); addChild (cur); var umbra: DropShadowFilter = noul DropShadowFilter (); shadow.distance = 5; shadow.color = 0x999999; shadow.alpha = 0.5; shadow.angle = 45; cur.filtre = [umbra]; stage.addEventListener (MouseEvent.MOUSE_MOVE, mMove); funcția mMove (eveniment: MouseEvent): void







În principiu, cursorul nostru este gata și lucrează. Dar are cel puțin trei deficiențe, care ar trebui eliminate. În primul rând, la fps redus, cursorul începe să "frâneze", adică se mișcă în jerks și, evident, rămâne în spatele cursorului real al mouse-ului. Corectăm acest defect utilizând metoda updateAfterEvent (). care va efectua actualizarea post-eveniment a ecranului. Deci, noul cod:

Mouse.hide (); var cur: Sprite = Sprite nou (); cur.graphics.lineStyle (2,0x999999,1); cur.graphics.beginFill (0xcccccc); cur.graphics.moveTo (0,0); cur.graphics.lineTo (20,10); cur.graphics.lineTo (10,10); cur.graphics.lineTo (10,20); cur.graphics.endFill (); addChild (cur); var umbra: DropShadowFilter = noul DropShadowFilter (); shadow.distance = 5; shadow.color = 0x999999; shadow.alpha = 0.5; shadow.angle = 45; cur.filtre = [umbra]; stage.addEventListener (MouseEvent.MOUSE_MOVE, mMove); funcția mMove (eveniment: MouseEvent): void

În al doilea rând, dacă uvedom cursorul mouse-ului real, dincolo de film etapa flash, vom vedea în continuare cursorul noastre de casă, care va face paradă cu nerușinare la marginea scenei. Acest lucru nu este bun. Prin urmare, vom prinde evenimentul de ieșire a cursorului mouse-ului în afara scenei filmului flash și vom face cursorul personalizat invizibil dacă acesta va părăsi scena. Pentru aceasta, AS 3.0 are un eveniment special - evenimentul mouseLeave. care este trimis de obiectul Stage de fiecare dată când cursorul mouse-ului părăsește zona de lucru a filmului flash. Și când cursorul se întoarce la scenă, îl facem din nou vizibil. Evenimente, inversează evenimentul mouseLeave, așa cum am înțeles, nu există niciun ActionScript 3.0, dar este destul de ușor să o simulezi.

Al treilea punct important este acela că pentru funcționarea corectă a cursorului cu elemente interactive ale unui film flash, ar trebui să dezactivați evenimentele mouse-ului de urmărire a cursorului. Puteți face acest lucru setând proprietatea mouseEnabled a cursorului personalizat la false.

Ultima dată când modificăm codul și obținem următoarele:

/ * ascunde cursorul mouse-ului standard * / Mouse.hide (); / * crea cursorul personalizat * / var cur: Sprite = Sprite nou (); cur.graphics.lineStyle (2,0x999999,1); cur.graphics.beginFill (0xcccccc); cur.graphics.moveTo (0,0); cur.graphics.lineTo (20,10); cur.graphics.lineTo (10,10); cur.graphics.lineTo (10,20); cur.graphics.endFill (); addChild (cur); / * cursorul personalizat original va fi invizibil * / cur.visible = false; / * interzic urmărirea evenimentelor mouse-ului * / cur.mouseEnabled = false; / * Adauga umbra cursorului * / var umbra: DropShadowFilter = new DropShadowFilter (); shadow.distance = 5; shadow.color = 0x999999; shadow.alpha = 0.5; shadow.angle = 45; cur.filtre = [umbra]; / * Track evenimente se deplasează mouse-ul pe scena si rola de fiecare dată când schimbați poziția cursorului mouse-ului sunt atribuite noi coordonate ale cursorului sprite-cursor * / stage.addEventListener (MouseEvent.MOUSE_MOVE, mMove); funcția mMove (eveniment: MouseEvent): void = 0 coordY> = 0 coordX

Rezultatul acestui cod:

În acest exemplu, totul se face programabil. Dacă ați atras cursorul manual (așa cum este descris mai sus), atunci codul dvs. va arăta astfel:

Mouse.hide (); var cur: Cur = Cur (); addChild (cur); cur.visible = false; cur.mouseEnabled = false; var umbra: DropShadowFilter = noul DropShadowFilter (); shadow.distance = 5; shadow.color = 0x999999; shadow.alpha = 0.5; shadow.angle = 45; cur.filtre = [umbra]; stage.addEventListener (MouseEvent.MOUSE_MOVE, redrawCursor); funcția redrawCursor (eveniment: MouseEvent): void = 0 coordY> = 0 coordX







Trimiteți-le prietenilor: