Share
În acest Tutorial Premium, vom învăța cum să manipulați Bitmap-urile în ActionScript 3 pentru a produce o aplicație utilă de recoltare a imaginilor. Continua să citești!
Imagine de către Swami Stream licențiată sub Creative Commons.
Folosind Flash Tools vom crea o interfață atractivă care va fi alimentată de mai multe clase ActionScript 3 cum ar fi MouseCursor, Bitmap, BitmapData, Rectangle, Point, Tween, FileReference și chiar biblioteci externe.
Utilizatorul va putea să taie o imagine de mai multe ori pentru a selecta ulterior cea mai bună opțiune și ao salva pe disc.
Deschideți Flash și creați un document cu înălțime de 600 de pixeli, de 400 de pixeli înălțime. Setați rata cadrelor la 24fps.
O interfață asemănătoare mac-like vă va alimenta codul, aceasta implică mai multe butoane bazate pe cronologie, cursoare personalizate și multe altele.
Continuați cu pașii următori pentru a afla cum să creați această interfață grafică.
Fără știință în fundal, creați doar un dreptunghi negru de 600x400 pixeli și centrați-l în scenă. De asemenea, puteți schimba culoarea de fundal în Stage Properties.
Vom avea nevoie de o imagine pentru a decupa, selecta imaginea preferata si importa-o in faza (Cmd + R).
Imagine de către Swami Stream licențiată sub Creative Commons.
Vom face un cursor personalizat să îl folosească ca un feedback către utilizator, permițându-i să știe unde poate recolta.
Selectați instrumentul Rectangle (R) și faceți un dreptunghi alb înalt de 3px, înalt de 17px.
Duplicați forma (Cmd + D) și rotiți-o cu 90 de grade pentru a forma o cruce.
Repetați acest proces cu un dreptunghi de negru înalt de 1px, de 15 px.
Transformați forma finală la MovieClip (F8) și setați numele instanței acesteia cursor.
Aceste butoane acționează acțiuni secundare bazate pe recoltă, aceste acțiuni fiind:
Selectați Instrumentul primitiv dreptunghi (R) și modificați raza de colț la 10, desenați un dreptunghi de 70x18px și completați-l cu # 666666.
Duplicați forma (Cmd + D), redimensionați-o la 68x16px și schimbați culoarea spre acest gradient liniar # 222222 la # 444444. Utilizați instrumentul de transformare a gradientului (F) pentru a roti gradientul.
Apoi, utilizați instrumentul Text (T) pentru a scrie o etichetă pentru buton. Utilizați acest format: Lucida Grande Regular, 12pt, #CCCCCC.
Utilizați aceeași tehnică pentru a crea butoanele Anulare și Ștergere.
Un buton GUI bine realizat are 4 stări:
Conversați butoanele în MovieClip și faceți dublu clic pe ele pentru a intra în modul de editare. Deschideți panoul Timeline (fereastră> Cronologie).
Veți observa că Sus statul este deja creat, acestea sunt formele pe care le-ați convertit în MovieClip.
Apăsați F6 pentru a crea un nou cadru și a schimba umplutura de gradient de formă centrală la # 222222, # 5B5B5B. Acesta va fi Peste stat.
Pentru Jos , selectați forma centrală și rotiți-o vertical (Modificați> Tranform> Flip Vertical).
Lovit stat este în mod implicit, suprafața mai mare a formei, pe măsură ce zona pe care o dăm clic pe care o dorim este întregul buton, nu va fi nevoie să creați un cadru pentru acest.
Când toate butoanele sunt gata, ieșiți din modul de editare și plasați-le după cum se arată în următoarea imagine. Textul alb indică numele instanței butonului.
O bară de butoane va fi utilizată pentru a plasa și a evidenția butonul de decupare.
Utilizați instrumentul Rectangle pentru a crea un dreptunghi de 600x50 px și completați acest gradient fill #AFAFAF la # C4C4C4. Aliniați bara din partea inferioară a scenei.
Pentru a crea un efect gravat, trageți două linii de 600x1px și plasați-le deasupra barei de butoane, umpleți-o cu # 858585, iar cealaltă cu # D8D8D8.
Butonul Crop (Crop) va porni funcția Main ActionScript care va manipula bitmap-urile din scenă.
Cu instrumentul Rectangle, creați dreptunghiuri de 33x6px și 26x6px și le folosiți pentru a forma un unghi drept.
Duplicați forma și rotiți-o cu 180 de grade pentru a forma un pătrat.
Deplasați forma duplicată 5px în sus și 5px spre dreapta.
Umpleți forma rezultată cu această umplutură de gradient: # 444444 la # 222222. Utilizați instrumentul Transformare gradient pentru a roti umplerea.
Puteți adăuga mai multe detalii adăugând o umbră; duplicați forma actuală și mutați-o cu 1px în jos și 1px dreapta.
În cele din urmă, transformați forma în MovieClip și denumiți-o cropButton.
Forma culturii este o imagine care va fi utilizată pentru a indica zona care va fi decupată.
Selectați Instrumentul dreptunghi și schimbați culoarea cursei în alb și culoarea de umplere la alb cu 1% alfa (acest lucru ne va ajuta să tragem forma culturii). Desenați un pătrat de 10x10px și centrați-l.
Selectați o parte de 1px a pătratului și schimbați culoarea în negru.
Duplicați forma și faceți totul pe toată partea.
Repetați acest proces pe toate laturile.
Convertiți rezultatul în MovieClip și denumiți-l cropShape, marchează Exportați pentru ActionScript cutie.
Faceți dublu clic pe acesta pentru a intra în modul de editare, pentru a crea un nou cadru cheie în cadrul 5 și pentru a roti forma la 180 de grade.
Adăugați mai mult 4 cadre și ieșiți din modul de editare.
Aceasta incheie partea grafica, sa incepem cu ActionScript!
Creați o nouă clasă ActionScript 3.0 (Cmd + N) și salvați-o ca Main.as în dosarul dvs. de clasă.
Cuvântul cheie pentru pachete vă permite să vă organizați codul în grupuri care pot fi importate de alte scripturi, este recomandat să le numiți începând cu o literă mică și să utilizați intercaps pentru următoarele cuvinte, de exemplu: myClasses. Este, de asemenea, obișnuit să le denumiți utilizând site-ul companiei: com.mycompany.classesType.myClass.
În acest exemplu, folosim o singură clasă, deci nu este necesar să creați un folder de clase.
pachet
Acestea sunt clasele pe care trebuie să le importăm pentru ca clasa noastră să funcționeze import directiva face ca clasele și pachetele definite extern să fie disponibile pentru codul dvs..
import flash.display.Sprite; importul flash.events.MouseEvent; import flash.ui.Mouse; import flash.ui.MouseCursor; import flash.display.BitmapData; import flash.display.Bitmap; import flash.geom.Rectangle; import flash.geom.Point; import fl.transitions.Tween; import fl.transitions.easing.Strong; import flash.net.FileReference; import flash.utils.ByteArray; import com.adobe.images.JPGEncoder; importul flash.events.Event;
Pentru a salva cultura imaginii, vom folosi o clasă care face parte din as3corelib. Urmați linkul și descărcați biblioteca.
Aici declarăm clasa utilizând clasă definirea cuvântului cheie urmat de numele pe care îl dorim pentru clasă, amintiți-vă că trebuie să salvați fișierul utilizând acest nume.
extinde cuvântul cheie definește o clasă care este o subclasă a unei alte clase. Subclasa moștenește toate metodele, proprietățile și funcțiile, astfel încât le putem folosi în clasa noastră.
clasa publică principală extinde Sprite
Acestea sunt variabilele pe care le vom folosi, citiți comentariile din cod pentru a afla mai multe despre ele.
private var cropShape: CropShape; // Aceasta este o instanță a formei de cultură pe care am creat-o înainte de privat var pointX: Number; // Aceasta var va tine pozitia x unde forma cultului este pornita priv var varYY: Number; // Acest var va tine pozitia y unde se porneste forma culturii private var adaugat: Boolean; // Verifică dacă forma culturii este în imagini privitoare la var privat: Array = Array nou (); // Stochează imaginile culturi private var bmd: BitmapData; // Un obiect de date bitmap, utilizat pentru a manipula principalele date de imagine private var bmd2: BitmapData; // Un al doilea obiect de date bitmap, acesta va conține datele imaginii pe care dorim să o salvăm privat var croppedImage: Sprite; // Susține imaginile tăiate private var cropThumb: int = 0; // Numărul de degete deja creat privat var thumbPosX: Array = [5, 5, 5, 505, 505, 505]; // stochează pozițiile x ale thumb thumbs: array = [37, 135, 233, 37, 135, 233]; // Stochează pozițiile y ale degetului privat var tween: Tween; // Un obiect tween, biblioteca de animație implicită în fișierul private privat varReference: FileReference; // Folosit pentru salvarea fișierului pe disc privat var byteArray: ByteArray; // Stochează datele binare, folosite pentru a salva fișierul pe disc privat var jpg: JPGEncoder = nou JPGEncoder (); // encoder privat var zoomed: Boolean; // Verifică dacă miniaturile sunt mărite sau deconectate privat var currentCrop: Bitmap; // Menține thumbnail-ul curent mărit, cel care va fi salvat privat var currentSprite: *; // folosit pentru a ști ce degetul mare este activ privat var latestX: Number; // Verifică cele mai recente x de la miniatură privată privat var latestY: Number; // Verifică ultimul y al degetului mare
Constructorul este o funcție care rulează atunci când un obiect este creat dintr-o clasă, acest cod este primul care se execută atunci când faceți o instanță a unui obiect sau executați utilizând Clasa de documente.
funcția publică Main (): void
Acestea sunt ascultătorii care vor fi definiți la lansare, aceștia adăugând practic evenimente legate de mouse-uri la butoane.
imaginea.addEventListener (MouseEvent.MOUSE_DOWN, getStartPoint); image.addEventListener (MouseEvent.MOUSE_UP, stopDrawing); cropButton.addEventListener (MouseEvent.MOUSE_UP, crop); image.addEventListener (MouseEvent.MOUSE_OVER, customCursor); image.addEventListener (MouseEvent.MOUSE_OUT, removeCustomCursor); saveButton.addEventListener (MouseEvent.MOUSE_UP, saveImage); cancelButton.addEventListener (MouseEvent.MOUSE_UP, anula); clearButton.addEventListener (MouseEvent.MOUSE_UP, clearThumbs);
Acest cod ascunde butoanele care nu sunt utilizate în acest moment.
saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false; cursor.visible = false;
Următoarea funcție face ca cursorul personalizat să fie vizibil când indicatorul mouse-ului este peste imaginea principală.
funcția privată customCursor (e: MouseEvent): void cursor.visible = true; Mouse.hide (); cursor.startDrag (true);
Ascunde cursorul personalizat când indicatorul mouse-ului părăsește imaginea principală.
funcția privată removeCustomCursor (e: MouseEvent): void cursor.visible = false; Mouse.show (); cursor.stopDrag ();
O funcție foarte importantă, stochează și stochează coordonatele click-ului mouse-ului și plasează în ele rolul "Shape crop", valoarea curentă va fi utilizată mai târziu pentru a determina dimensiunea formei culturii.
funcția privată getStartPoint (e: MouseEvent): void pointX = mouseX; pointY = mouseYY; dacă (! added) cropShape = CropShape (); cropShape.x = pointX; cropShape.y = pointY; addChild (cropShape); adăugat = adevărat; altceva removeChild (cropShape); cropShape = CropShape (); cropShape.x = pointX; cropShape.y = pointY; addChild (cropShape);
Adaugă un ascultător în imaginea principală pentru a extinde forma de decupare pe mișcarea mouse-ului și adaugă ascultătorului să se oprească extinderea pe mouse.
image.addEventListener (MouseEvent.MOUSE_MOVE, drawCropShape); cropShape.addEventListener (MouseEvent.MOUSE_UP, StopDrawing);
Extinde forma de cultură în funcție de coordonatele salvate și cele curente.
funcția privată drawCropShape (e: MouseEvent): void cropShape.width = mouseX - pointX; cropShape.height = mouseY - pointY;
Opresc extinderea formei culturii și adaugă niște ascultători care vor fi utilizați de următoarele funcții.
funcția privată stopDrawing (e: MouseEvent): void image.removeEventListener (MouseEvent.MOUSE_MOVE, drawCropShape); cropShape.addEventListener (MouseEvent.MOUSE_OVER, showHandCursor); cropShape.addEventListener (MouseEvent.MOUSE_OUT, hideHandCursor); cropShape.addEventListener (MouseEvent.MOUSE_DOWN, dragCrop); cropShape.addEventListener (MouseEvent.MOUSE_UP, stopDragCrop);
Utilizează clasa Mouse pentru a manipula cursorul mouse-ului, acest cod va afișa cursorul de mână atunci când mouse-ul este peste forma culturii.
funcția privată showHandCursor (e: MouseEvent): void Mouse.cursor = MouseCursor.HAND;
Restorează comportamentul original al cursorului mouse-ului.
funcția privată hideHandCursor (e: MouseEvent): void Mouse.cursor = MouseCursor.AUTO;
Forma culturii va fi draggabilă, ceea ce va ajuta la selectarea cu ușurință a zonei dorite.
funcția privată dragCrop (e: MouseEvent): void cropShape.startDrag ();
Oprește trageți mouse-ul în sus.
funcția privată stopDragCrop (e: MouseEvent): void cropShape.stopDrag ();
Această funcție se va ocupa de decuparea imaginilor, utilizând datele bitmap și clasa sprite pentru a crea o serie de miniaturi care vor fi ușor de salvat.
funcția privată (e: MouseEvent): void
Următoarele linii se ocupă de datele bitmap necesare pentru a decupa imaginea.
bmd = BitmapData nouă (image.width, image.height, false, 0x00000000); // Creează un nou obiect de date bitmap folosind dimensiunea imaginii principale bmd.draw (imagine); // Copiază datele principale ale imaginii în instanța bmd2 = BitmapData nou (cropShape.width, cropShape.height, false, 0x00000000); // Creează un nou bitmap utilizând dimensiunea reală a formei culturii
Următoarea linie copiază pixelii imaginii principale situate în poziția formei culturii la obiectul de date bitmap BMP2.
Parametrii funcționează după cum urmează:
bmd2.copyPixeli (bmd, nou dreptunghi (cropShape.x - imagine.x, cropShape.y - imagine.y, cropShape.width, cropShape.height), new Point (0, 0));
Vom lăsa utilizatorul să se recolteze de șase ori și să salveze aceste previzualizări din partea laterală a imaginii principale, pentru aceasta vom crea un bitmap nou care va stoca datele bitmap ale miniaturii decupate și apoi îl vom adăuga ca o sprite de 90x70 pixeli.
De asemenea, adăugăm un ascultător pentru a mări și micșora miniaturile.
în cazul în care (cropThumb < 6) var bmp:Bitmap = new Bitmap(bmd2); var thumb:Sprite = new Sprite(); thumb.addChild(bmp); thumb.width = 90; thumb.height = 70; thumb.addEventListener(MouseEvent.MOUSE_UP, zoomThumb); addChild(thumb);
Pe măsură ce creăm un nou sprite în fiecare recoltă, ultima sprite va fi inaccesibilă folosind numele instanței sale, timpul pentru a folosi matricea creată anterior.
Această matrice va memora miniaturile create pentru a le accesa în afara funcției.
images.push (degetul mare);
Când utilizatorul apasă butonul de decupare, este creată o miniatură utilizând imaginea decupată, această miniatură este mai târziu animată pe laturile aplicației, în funcție de o variabilă.
Poziția miniaturilor este determinată de această variabilă și de thumbPos matrice.
tween = noul Tween (degetul mare, "x", Strong.easeOut, cropShape.x, thumbPosX [cropThumb], 0,5, true); tween = nou Tween (degetul mare, "y", Strong.easeOut, cropShift.y, thumbPosY [cropThumb], 0.5, true); cropThumb ++; // Adaugă unul la numărul de degete
Următoarea funcție este utilizată pentru a salva imaginea pe disc.
În primul rând, utilizează metoda jpg.encode () și salvează datele rezultate în tabloul de octeți, apoi obiectul fileReference este utilizat pentru a afișa un dialog de salvare în care utilizatorul poate redenumi fișierul creat (deși este setat un nume implicit).
funcția privată saveImage (e: MouseEvent): void fileReference = FileReference nou (); byteArray = jpg.encode (actualCrop.bitmapData); fileReference.save (byteArray, "Crop.jpg"); fileReference.addEventListener (Event.COMPLETE, saveComplete);
Odată ce imaginea este salvată, miniaturile sunt eliminate din scenă și din matrice. Butoanele sunt ascunse și imaginea principală revine.
funcția privată saveComplete (e: Event): void pentru (var i: int = 0; i < images.length; i++) removeChild(images[i]); cropThumb = 0; images = []; tween = new Tween(image,"y",Strong.easeOut,image.y,stage.stageHeight / 2 - image.height / 2 - 30,0.5,true); added = false; saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false;
Există, de asemenea, un buton de anulare care vă va permite să răsfoiți miniaturile fără a salva niciuna dintre ele.
Când acest buton este apăsat, acesta returnează toate miniaturile în postică și aduce înapoi imaginea principală pentru a decupa mai mult (dacă este posibil).
anularea funcției private (e: MouseEvent): void tween = nou Tween (currentSprite, "width", Strong.easeOut, currentSprite.width, 90,0,5, true); tween = Tween nou (currentSprite, "height", Strong.easeOut, currentSprite.height, 70,0,5, true); tween = noul Tween (currentSprite, "x", Strong.easeOut, currentSprite.x, latestX, 0.5, true); tween = noul Tween (currentSprite, "y", Strong.easeOut, currentSprite.y, latestY, 0.5, true); tween = nou Tween (imagine, "y", Strong.easeOut, imagine.y, stage.stageHeight / 2 - imagine.height / 2 - 30,0,5, true); added = false; saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false; cropButton.visible = true; zoomed = false;
Dacă utilizatorul a decupat de 6 ori permisiunea aplicației și niciuna dintre ele nu este rezultatul așteptat, există întotdeauna o modalitate de a tăia și mai multe ori. Aceasta este sarcina pe care butonul clar îl va atinge.
Elimină toate miniaturile de pe scenă și din matrice, returnează imaginea principală în scenă și ascunde butoanele neutilizate.
funcția privată clearThumbs (e: MouseEvent): void pentru (var i: int = 0; i < images.length; i++) removeChild(images[i]); cropThumb = 0; images = []; tween = new Tween(image,"y",Strong.easeOut,image.y,stage.stageHeight / 2 - image.height / 2 - 30,0.5,true); added = false; saveButton.visible = false; cancelButton.visible = false; clearButton.visible = false;
Vom folosi clasa de documente în acest tutorial, dacă nu știți cum să o utilizați sau sunteți puțin confuză vă rugăm să citiți acest QuickTip.
Rezultatul final este o aplicație utilă Image Cropping care vă învață cum să manipulați bitmap-urile pentru a le modifica și aproape fără a ști asta, ați învățat de asemenea cum să creați și să implementați o interfață foarte frumoasă.
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
Accentsconagua