Share
V-ați dorit vreodată să faceți o aplicație de vizualizare a fotografiilor ușor de gestionat și frumoasă? În acest tutorial, vă voi arăta cum să proiectați și să codificați un vizualizator de fotografii Polaroid, concentrându-vă asupra design-ului și tweening-ului.
Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:
În această secțiune vom discuta despre structura dosarului, de asemenea, vom achiziționa imaginile stocului nostru.
Mai întâi să creăm un dosar în care va fi localizat proiectul nostru. O vom numi "Polaroid Viewer".
După aceea, copiați această structură de directoare:
Atunci când creați proiecte foarte vizuale, este foarte important să știți cu adevărat ce anume doriți să proiectați. În interiorul directorului Design am mereu conceptele mele vizuale și, de asemenea, în folderul Design am editat imaginile de care am nevoie pentru un proiect.
După ce am terminat lucrul la conceptul meu, am continuat să fac un produs de lucru, fac acest lucru în dosarul Proiect. În interiorul directorului Project sunt foarte cunoscutele structuri de bin, lib și src:
Acum, că ne-am creat dosarele, să mergem la imagini. În acest tutorial vom avea nevoie de cel puțin două imagini:
Veți avea nevoie de un cont Xchange pentru a descărca aceste imagini, dacă nu aveți încă unul, ar trebui să vă înscrieți! Este un site plin de imagini gratuite!
Dați clic pe linkurile pentru a descărca imaginile, apoi salvați-le sau mutați-le în folderul Design.
De asemenea, vom avea nevoie de imagini pentru a le plasa interior cadrele polaroid. Iată o listă de imagini pe care le-am folosit, dar nu ezitați să folosiți propriile imagini.
În această secțiune vom edita imaginile stocului nostru. După aceasta, vom importa aceste imagini în documentul nostru Flash, pe care îl vom crea mai târziu.
Vom modifica imaginile noastre cu Photoshop, voi folosi CS5, cu toate acestea, puteți utiliza întotdeauna versiuni mai vechi. Dacă nu sunteți atât de încrezător în abilitățile Photoshop, puteți descărca imaginile pe care le-am editat deja. Doar descărcați fișierele sursă din acest tutorial și puteți găsi imaginile din interiorul Editat Imagini pliant.
În exemplul final toate imaginile noastre polaroid se află pe o podea din lemn. Acum vom crea acest fundal.
Creați un document nou în Photoshop cu dimensiunile 600x600px.
Adăugați imaginea de textură din lemn în document. Scalați-o astfel încât să vă bucurați de rezultatul final.
De asemenea, am adăugat o hartă de gradienți, setând culorile în alb și negru.
În cele din urmă, am schimbat tranziția hărții de gradient la 80%. Pentru a face acest lucru, faceți clic pe una dintre săgețile inferioare, apoi faceți clic pe punctul din mijlocul gradientului. Trageți acest punct la 80%.
Și voila! Am creat fundalul nostru din lemn! Salvați-l ca un document Photoshop (.psd) în folderul Design și denumiți-l Background.psd.
Vrem să plasăm propriile noastre imagini în interiorul cadrului polaroid. Trebuie să facem două lucruri, mai întâi trebuie să scoatem cadrul polaroid din fundalul său (alb) și, de asemenea, va trebui să tăiem partea "foto".
Pentru a face acest lucru, vom crea mai întâi un nou document Photoshop de 600x600 pixeli. Lipiți imaginea polaroid în interiorul documentului, scalați-l până se potrivește.
De ce scade imaginea? Pentru că creăm un document Flash de 600x600px și nu este necesar să încărcăm și să încărcăm o imagine imensă dacă nu vom scala chiar și mai mult de 600 de pixeli.
Selectați instrumentul stilou (P) și faceți clic în jurul marginii exterioare a cadrului polaroidului. Când lucrați cu instrumentul Pen, asigurați-vă că setați instrumentul Pen în modul Cale.
Apăsați Control + Enter (Windows) sau Cmd + Enter (Mac) pentru a selecta calea curentă.
Cu calea selectată faceți clic pe butonul "Adăugați stratul de mască". Acum am izolat polaroidul de fundal!
Acest pas este foarte similar cu designul Pasul 4. Selectați din nou instrumentul stiloului și faceți clic în jurul zonei interioare a cadrului polaroidului. Apoi selectați calea curentă cu Ctrl + Enter / Cmd + Enter.
Acum faceți clic pe Alt pe masca din panoul Straturi. Acum editați direct masca.
Selectați instrumentul Marquee (M). Faceți clic dreapta pe selecția dvs. și selectați Umplere> Negru.
Alt-faceți clic din nou pe pictograma mască, pentru a reveni la vizualizarea "Normal" a stratului. Am editat cu succes masca noastră și acum polaroidul nostru este gata de utilizare. Să salvăm imaginea ca document Photoshop (.psd), mi-am numit documentul Polaroid.psd.
În această secțiune vom folosi (în sfârșit) Flash. Vom seta documentul Flash pentru a utiliza dosarul cos pentru export și folderul src pentru codul nostru. Este timpul să deschideți Flash!
Creați un nou document Flash (ActionScript 3.0) cu Flash Professional. Setați dimensiunile la 600 x 600 pixeli, iar frameratul la 24 fps. Setați clasa de documente la Principal. Modificați și fundalul negru (# 000000). Salvați-o ca "Polaroid.fla", în interiorul lib pliant.
Apoi mergeți la File> Publish Settings, schimbați Polaroid.swf la ? /bin/Polaroid.swf, puteți debifa opțiunea HTML. Acum tot ceea ce vom exporta (doar un SWF) va fi în dosarul bin. Nu închideți fereastra Setări publicare.
Apasă pe bliț tab. Apoi faceți clic pe Butonul Setări lângă Script: ActionScript 3.0.
Acum putem schimba calea sursei. Veți vedea o pictogramă de folder cu textul "", schimba asta la "? / src".
Flash va folosi src dosar pentru toate clasele sale.
Acum este momentul să începeți să importați grafica noastră în documentul nostru Flash. Dacă ați avut probleme cu imaginile, puteți oricând să descărcați fișierele sursă din acest tutorial în partea de sus. Va fi un folder numit "Editat imagini", în interior vor fi imaginile editate pe care le poți folosi.
Creați un nou document Flash (ActionScript 3.0) cu Flash Professional. Setați dimensiunile la 600 x 600 pixeli, iar frameratul la 24 fps. Modificați, de asemenea, fundalul la negru (# 000000).
Am salvat imaginile ca fișiere .psd deoarece funcționează atât de mult cu alte produse Adobe, cum ar fi Flash. După crearea documentului nostru, selectați Fișier> Import la bibliotecă și selectați Polaroid.psd și Background.psd. După aceasta, biblioteca noastră arată astfel:
Trageți Background.psd din Bibliotecă spre scena noastră, apoi convertiți-l într-un clip video. Denumiți-o Context și bifați caseta "Export pentru ActionScript". Setați clasa de bază la flash.display.Sprite. După aceasta, puteți scoate din nou fundalul din scenă.
De ce am stabilit clasa de bază a Fundației în Sprite în loc de clasa de bază implicită MovieClip? Deoarece singura diferență dintre un film și un film Sprite este că filmul MovieClips poate conține mai multe cadre și Sprites nu poate. Nu avem nevoie de mai multe cadre pentru fundalul nostru, așadar să setăm clasa de bază a Fundalului la Sprite.
La fel cum am făcut și cu trecutul nostru, trageți polaroid.psd de la Libary la scena noastră. Conversați-l într-un clip video și numiți-l Polaroid, verificați din nou Exportați pentru ActionScript cutie. Setați clasa de bază la flash.display.Sprite.
Polaroidul nostru este încă pe scenă, faceți dublu-clic pe el, pentru al putea edita. Până acum, Polaroid are doar un strat, redenumiți acest strat Polaroid Frame.
Creați două noi straturi, denumirea acestora Masca și Image Holder.
Polaroidul nostru va conține o imagine, această imagine trebuie afișată undeva, acest lucru se va face într-un clip video numit "Titularul imaginii".
Desenați un dreptunghi de aproximativ dimensiunea ca "zona foto" a polaroidului, faceți acest lucru în Image Holder strat. Nu contează ce culoare va avea dreptunghiul. După crearea acestui dreptunghi, convertiți-l într-un clip video, denumiți-l "Titularul imaginii".
Oferă titularului de imagini un nume de instanță imageHolder.
Image Holder va conține imaginile pe care le vom încărca. Uneori, aceste imagini sunt prea mari - ia, de exemplu, o imagine de 400x100 pixeli; această imagine este mult prea largă, iar marginile sale se vor extinde din polaroid. Vrem să prevenim asta. Prin urmare, trebuie să ascundem toate imaginile care se extind în afara zonei titularului imaginii.
Pentru a face acest lucru, trebuie să creați o masca. O mască spune unui strat care parte trebuie afișată și ce parte trebuie ascunsă.
Dacă vrem ca fiecare imagine să fie afișată în interiorul imaginii, fără ca marginile să iasă în afară, ar trebui să setăm mărimea măștii la aceleași dimensiuni ca și imaginea titularului.
Copiați titlul de imagine și fixați-l cu Ctrl + Shift + V (Windows) / Cmd + Shift + V (Mac) pe strat Masca. După aceea, rupeți copiați imaginea cu Ctrl + B (Windows) / Cmd + B (Mac).
În cele din urmă trebuie să ne spunem Masca strat că este o mască. Faceți clic dreapta pe layerul Mască și selectați opțiunea Masca.
Este timpul să începeți codarea, dacă ați avut probleme cu Secțiunea Flash, puteți să copiați dosarul Secțiunea Flash a fost finalizată. În interiorul acestui dosar este tot ceea ce aveți nevoie pentru a începe să urmați acești pași.
Pentru a încărca imaginile noastre, vom folosi un fișier XML. Fișierul XML va indica produsul nostru în locul în care sunt situate imaginile.
Deschideți un editor de text și tastați următoarele:
IMAGE_1.jpg IMAGE_2.jpg IMAGE_3.jpg
Ar trebui să schimbați IMAGE_1.jpg, IMAGE_2.jpg, etc la nume de fișiere reale, care se referă la imagini situate în interiorul cos pliant. Dacă nu aveți nicio imagine, descărcați imaginile pe care le-am menționat în Pasul 3.
Salvați acest fișier XML ca images.xml, în interiorul cos pliant.
Înainte de a începe codarea, este important să știm ce sarcini trebuie să facă proiectul nostru:
Pentru a codifica toate aceste funcționalități într-o clasă ar face ca această clasă să fie extrem de complexă, este mai bine să separați fiecare sarcină de o clasă diferită.
Accentsconagua
ImageLoader: Va încărca fișierul XML și va transmite imaginile către PolaroidHolder.PolaroidHolder: Când primește imaginile, va crea un Polaroid pentru fiecare imagine, așa că asigură și asta unul singur Polaroid este mărit la un moment dat.polaroid: Imaginea va fi afișată în interiorul acestei clase.Clasa principală este clasa pe care Polaroid.fla o apelează atunci când devine inițiată.
Creați un nou fișier ActionScript și denumiți-l "Main.as", salvați-l în interiorul directorului src. Clasa principală arată după cum urmează.
pachet import flash.display.MovieClip; public class Main extinde MovieClip funcția publică Main (): void
Este atât de goală pentru că mai întâi trebuie să ne creăm celelalte clase, în timp ce suntem ocupați că vom continua să adăugăm cod la clasa principală.
În acest proiect, încărcăm mai multe elemente: un fișier xml și diverse imagini. Putem folosi căile relative de fișiere sau căi absolute. Permiteți-mi să explic diferența cu un exemplu; avem următoarea structură de directoare:
Loader.swf trebuie să încarce image1.jpg. Din poziția sa actuală Loader.swf trebuie să "deschidă" directorul de imagini și să încarce image1.jpg. Spunem Loader.swf pentru încărcare images / image1.jpg. Se solicită acest tip de încărcare încărcarea căii relative a fișierului, pentru că url este rudă la pozitia curenta a lui Loader.swf.
Deci, cum se încarcă imagine1.jpg, indiferent de locul în care se află Loader.swf? Acest lucru se face cu încărcarea căii absolute a fișierului. Calea fișierului pornește de la miezul superior, de la rădăcină. Dacă este pe un computer, rădăcina sa este o unitate hard disk. Implementăm proiectul nostru online, astfel încât rădăcina ar fi serverul de site.
Când proiectul nostru este finalizat, ne-ar plăcea să-l implementăm. Cel mai probabil ar fi încorporat într-o pagină HTML. Există o mică problemă. Dacă Loader.swf dorește să se încarce, se va încărca din locația sa curentă, din locația paginii HTML. Nu vrem acest lucru și, prin urmare, trebuie să folosim încărcarea căii absolute a fișierului.
Acum vine cea mai mare problemă, nu vom cunoaște locația fișierului HTML. Trebuie să găsim absolut calea spre fișierul .swf și editați acea cale pentru a putea încărca imaginile.
Putem obține calea absolută către fișierul .swf cu root.loaderInfo.url.
E timpul să ne creăm ImageLoader clasă.
Creați un nou fișier ActionScript și denumiți-l ImageLoader.as, salvați-l în interiorul folderului .src. Clasa arată astfel, a fost bine comentat:
pachet // importați clasele de care avem nevoie pentru a importa flash.net.URLLoader; import flash.net.URLRequest; importul flash.events.Event; import flash.display.Loader; import flash.display.Bitmap; import flash.display.Sprite; clasa publica ImageLoader extinde Sprite // va incarca xml privat var xmlLoader: URLLoader = new URLLoader (); // stochează xml privat var xml: XML; // o listă de căi de fișiere pentru imaginile private var imageFileList: XMLList; // calea către fișierul .swf privat var swfPath: String; // calea directorului de proiect (unde sunt localizate folderele bin, src și lib) private var projectPath: String; // trebuie să cunoaștem titlul proiectului nostru, astfel încât să putem edita urlul .swf pentru a obține proiectul nostruPath private var projectTitle: String; // trebuie să numărăm numărul de imagini pe care le-am încărcat deja privat count count: uint = 0; // trebuie să stocăm imaginile, imaginile sunt imagini bitmap public var: Vector.= Vector nou. ; funcția publică ImageLoader (_projectTitle: String) // trebuie să știm când a fost adăugat ImageLoader, atunci ne putem da seama care este urlul rădăcină addEventListener (Event.ADDED, cândAdded); // stocați titlul proiectului projectTitle = _projectTitle; // când imageLoader se termină cu încărcare, sunați xmlLoaded xmlLoader.addEventListener (Event.COMPLETE, xmlLoaded); funcția privată cândAdded (eveniment: Eveniment): void // memora calea swf swfPath = root.loaderInfo.url; // obțineți proiectul nostruPath projectPath = swfPath.substr (0, swfPath.length - projectTitle.length); // această funcție va încărca imaginile dintr-un xml și va stoca imaginile încărcarea funcției publice (url: String): void // încărcați xml-ul, care va fi necesar pentru a încărca imaginile xmlLoader.load (nou URLRequest proiectPath + url)); funcția privată xmlLoaded (eveniment: Eveniment): void // depozitați xml, pe care xmlLoader a încărcat xml = nou XML (event.target.data); // memorați toate legăturile de fișiere într-un XMLList imageFileList = noul XMLList (xml.image.file); // acum că avem informațiile despre fișier, putem încărca imaginile loadImages (); funcția privată loadImages (): void pentru fiecare (var imageFile: String în imageFileList) // create var imageLoader: Loader = încărcător nou (); // ori de câte ori o imagine a fost încărcată, apelați imageLoaded imageLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, imageLoaded, false, 0, true); imageLoader.load (noua adresă URLRequest (projectPath + imageFile)); funcția privată imageLoaded (eveniment: Eveniment): void // numărăm numărul de imagini pe care le-am încărcat deja, tocmai am încărcat (altul) un număr ++; // obține imaginea Bitmap var imagine: Bitmap = Bitmap (event.target.loader.content); // Stocheaza imaginea in imaginile noastre Vector images.push (image); // dacă aceasta este ultima imagine pe care trebuie să o încărcăm dacă (count == imageFileList.length ()) // am terminat, expediați un eveniment dispatchEvent (eveniment nou ('imagesLoaded')); // - cleanup // descărcați încărcătorul event.target.loader.unload (); funcția publică cleanUp (): void xmlLoader.data = null; xmlLoader = null; xml = null; imageFileList = null; număr = 0; images = null;
Acum, când avem clasa ImageLoader, putem îmbunătăți clasa noastră principală.
pachet import flash.display.MovieClip; importul flash.events.Event; public class Main Extinde MovieClip // o clasă personalizată pe care am făcut-o, care va încărca toate imaginile dintr-un fișier xml ca Bitmaps private var imageLoader: ImageLoader; // această clasă va ține și va afișa toate Polaroids private var polaroidHolder: PolaroidHolder; funcția publică Main (): void // încărcați imaginile, dați imageLoader numele fișierului .swf, astfel încât să se poată încărca utilizând căile absolute imageLoader = new ImageLoader ('Polaroid.swf'); addChild (imageLoader); imageLoader.addEventListener ('imagesLoaded', displayImages, false, 0, true); imageLoader.load ( 'pictures.xml'); funcția privată displayImages (eveniment: Eveniment): void // am încărcat toate imaginile noastre polaroidHolder = noi PolaroidHolder (imageLoader.images); addChild (polaroidHolder); // de asemenea, curățați imageLoader imageLoader.cleanUp (); imageLoader = null; PolaroidHolder va primi imaginile ca Vector. După primirea imaginilor, va crea un Polaroid pentru fiecare imagine. Să formăm clasa noastră PolaroidHolder:
pachet import flash.display.MovieClip; import flash.display.Bitmap; importul flash.events.MouseEvent; clasa publica PolaroidHolder extinde MovieClip // acest vector va tine toate polaroizii publici polaroids var: Vector.= Vector nou. ; // cu această variabilă nu am privat var zoomedIn: Boolean; // Polaroidului am făcut zoom în privat var actualPolaroid: Polaroid; funcția publică PolaroidHolder (imagini: Vector. ) // codul constructorului pentru fiecare (var var: Bitmap în imagini) // a crea un Polaroid Polaroid Polaroid Polaroid Polaroid = nou Polaroid (imagine); // poziția și rotiți-o polaroid.x = Math.random () * 200 + 100; polaroid.y = Math.random () * 200; polaroid.rotation = Math.random () * 60 - 30; // adăugați un eveniment clicListener polaroid.addEventListener (MouseEvent.CLICK, onPolaroidClick); addChild (polaroid); // adăugați-l la polaroid vectorul polaroids.push (polaroid); funcția privată pePolaroidClick (eveniment: MouseEvent): void // a apărut un clic pe un Polaroid! dacă (actualPolaroid == null) // niciunPolaroid curent nu a fost setat, mărim // setăm Polaroidul pe care l-am făcut clic ca Polaroid curent curentPolaroid = event.currentTarget ca Polaroid; // mute toate celelalte Polaroide (cele care nu sunt mărite) pentru fiecare (var polaroid: Polaroid în polaroizi) if (polaroid! = currentPolaroid) polaroid.mute (); altceva // verificați dacă clicul se afla pe polaroidul curent dacă (event.currentTarget == currentPolaroid) // același clic pe polaroid (din nou), timpul pentru a micșora // a ignora toate celelalte Polaroide, pot răspunde din nou la evenimente pentru fiecare (var polaroid: Polaroid în polaroizi) if (polaroid! = currentPolaroid) polaroid.unmute (); // nu suntem măriți, deci nu avem curent polaroid currentPolaroid = null;
În liniile 50 și 62 numim funcțiile mut() și unmute (). Mute-ul face ca Polaroidul să fie amorțit la toate evenimentele, nu va răspunde la sursele de mouse sau clicurile. Acesta este exact ceea ce ne dorim atunci când suntem măriți. Noi nu vrem să facem și alte Polaroide orice. După ce vom micșora, vrem ca polaroizii să răspundă la evenimente; prin apelarea la dezactivare, Polaroizii vor răspunde din nou la sursele și clicurile de mouse.
Acum este momentul să creați clasa noastră cea mai interesantă, clasa noastră Polaroid! Pentru această clasă vom avea nevoie de popularul tweener de bibliotecă tweening. Descărcați-l și salvați biblioteca în folderul src (pentru mai multe detalii, consultați acest ghid).
pachet import flash.display.MovieClip; importul flash.events.MouseEvent; import caurina.transitions. *; import caurina.transitions.properties. *; import flash.display.Bitmap; importul flash.events.Event; clasa publică Polaroid extinde MovieClip // scara la care Polaroid-ul este mărit în statică statică privată ZOOMED_IN_SCALE: Number = 1; // scara la care Polaroid-ul este micșorat din static static const ZOOMED_OUT_SCALE: Number = .6; // înălțimea maximă a unei imagini poate fi privată var IMAGE_MAX_HEIGHT: Number; // lățimea maximă a unei imagini poate fi privată var IMAGE_MAX_WIDTH: Number; // trebuie să scarăm imaginile încărcate, să ne amintim scara privată scară var: Număr; // Când depărteazăm imaginea, vom deplasa înapoi la poziția originală și rotația Polaroidului // coordonatele originale x ale lui Polaroid. privat var origX: Număr; // avem de asemenea nevoie de originalul y coordinate priv var origY: Number; // Stochează originalul original al lui Polaroid origRotation: Number; // când acest boolean devine adevărat, Polaroidul nu va răspunde la evenimentele mouse-ului private var muted: Boolean; // trebuie să știm dacă Polaroidul a fost apăsat pe butonul public var clic: Boolean; funcția publică Polaroid (imagine: Bitmap) // a face Polaroid un buton buttonMode = true; // dimensiunile maxime ale unei imagini sunt limitate de dimensiunile imaginii IMAGE_MAX_HEIGHT = imageHolder.height; IMAGE_MAX_WIDTH = imageHolder.width; // scala scara Polaroid în josX = ZOOMED_OUT_SCALE; scaleY = ZOOMED_OUT_SCALE; // va trebui să redimensionăm imaginea pentru a se potrivi // verifica mai întâi dacă este un portret sau un peisaj dacă (image.width> image.height) // este un peisaj // scara este limitată de scara înălțimii imaginii = IMAGE_MAX_HEIGHT / image.height; altceva // este un portret // scara este limitată de scara de lățime a imaginii = IMAGE_MAX_WIDTH / image.width; // scară imaginea image.scaleX = scară; image.scaleY = scară; // adăugați imaginea scalată imageHolder.addChild (imagine); // adăugați ascultători de evenimente la Polaroid; addEventListener (MouseEvent.MOUSE_OVER, onMouseOver); addEventListener (MouseEvent.MOUSE_OUT, onMouseOut); addEventListener (MouseEvent.CLICK, onClick); addEventListener (Event.ADDED, cândAdded); funcția publică mute (): void // apelarea acestei funcții va face ca Polaroid să nu răspundă la evenimente buttonMode = false; muted = true; funcția publică unmute (): void // apelarea acestei funcții va face ca Polaroid să răspundă la evenimente buttonMode = true; muted = false; funcția privată cândAdded (eveniment: Eveniment): void // memorează coordonatele originale și rotația lui Polaroid origX = x; origY = y; origRotation = rotație; // nu mai avem nevoie de acest ascultător de evenimente, elimină removeEventListener (Event.ADDED, cândAdded); funcția privată onMouseOver (eveniment: MouseEvent): void // reacționa numai dacă Polaroid nu a fost dezactivat dacă (! muted) // răspunde doar dacă Polaroid nu a fost apăsat, a făcut clic pe Polaroids nu ar trebui să răspundă la surplusul mouse-ului. dacă (! a făcut clic pe) // mutați polaroidul la părintele frontal.setChildIndex (aceasta, parent.numChildren - 1); // muta și transforma polaroidul într-o direcție aleatorie Tweener.addTween (aceasta, x: origX + Math.random () * 30-15, y: origY + Math.random () * 30 -15, rotation: origRotation + Math.random () * 20 - 10, timpul: 1); funcția privată onMouseOut (eveniment: MouseEvent): void // reacționa numai dacă Polaroid nu a fost dezactivat dacă (! muted) // reacționează numai dacă Polaroid nu a fost apăsat dacă (! mutați polaroidul înapoi în poziția inițială și în rotație Tweener.addTween (aceasta, x: origX, y: origY, rotation: origRotation, time: 1); funcția privată onClick (eveniment: MouseEvent): void // reacționa numai dacă Polaroid nu a fost dezactivat dacă (! muted) // dacă nu a fost făcut clic înainte dacă (! 'am fost apasat, sa facem ca a fost adevarat clicked = true; // zoomem, trimiteți un eveniment (Main va alege acest lucru) dispatchEvent (noul eveniment ('zoomIn')); // măriți Polaroidul în centrul scenei Tweener.addTween (aceasta, x: stage.stageWidth / 2 - lățime / 2, y: stage.stageHeight / 2 - înălțime / 2, rotație: 0, scaleX: ZOOMED_IN_SCALE , scaleY: ZOOMED_IN_SCALE, ora: 1); altceva // am fost deja clicuți, deci fă clic pe false clicked = false; // vom micșora, vom trimite un eveniment (Main va alege acest lucru) dispatchEvent (eveniment nou ('zoomOut')); // măriți polaroidul, reveniți la poziția inițială Tweener.addTween (aceasta, x: origX, y: origY, rotation: origRotation, scaleX: ZOOMED_OUT_SCALE, scaleY: ZOOMED_OUT_SCALE, time: 1); Efectuați modificările după cum se vede în codul de mai jos.
pachet import flash.display.MovieClip; public class Main Extinde MovieClip // o clasă personalizată pe care am făcut-o, care va încărca toate imaginile dintr-un fișier xml ca Bitmaps private var imageLoader: ImageLoader; private var polaroidHolder: PolaroidHolder; funcția publică Main (): void // încărcați imaginile noastre imageLoader = new ImageLoader (); imageLoader.addEventListener ('imagesLoaded', displayImages, false, 0, true); imageLoader.load ( 'pictures.xml'); funcția privată displayImages (eveniment: Eveniment): void // am încărcat toate imaginile noastre polaroidHolder = noi PolaroidHolder (imageLoader.polaroids); addChild (polaroidHolder); // de asemenea, curățați imageLoader imageLoader.cleanUp (); imageLoader = null; Se pare că funcționează, dar nu este foarte interesant. Atunci când măriți imaginea, utilizatorul nu este "tras în", produsul nostru nu este suficient de imersiv. Avem nevoie de un fundal! Din întâmplare am creat unul în Pasul 4. Este timpul să adăugăm fundalul nostru!
Ne-am exportat fundalul cu clasa fundal.
Nu numai că vom adăuga fundalul ca fiu al lui Main, de asemenea, vom întuneca fundalul în momentul în care suntem măriți și vom lumina când vom fi micșorați. Cum facem asta? Ori de câte ori se face clic pe un Polaroid, acesta trimite un eveniment personalizat, mareste sau a micsora. Putem urmări acest eveniment, doar să adăugăm ascultători de evenimente la clasa noastră principală, vor prelua evenimentele zoomIn și zoomOut și ori de câte ori vor fi luate, vom putea spune Fundalului nostru să lumineze sau să întunecă:
pachet import flash.display.MovieClip; importul flash.events.Event; import caurina.transitions. *; import caurina.transitions.properties. *; public class Main Extinde MovieClip // o clasă personalizată pe care am făcut-o, care va încărca toate imaginile dintr-un fișier xml ca Bitmaps private var imageLoader: ImageLoader; // această clasă va afișa toate Polaroidele noastre, primind un Vector de Bitmaps private var polaroidHolder: PolaroidHolder; // fundalul din lemn, bg este o abstractizare pentru fundalul privat var bg: Funcția publică de bază Main (): void // încărcați imaginile noastre imageLoader = new ImageLoader ('Polaroid.swf'); imageLoader.addEventListener ('imagesLoaded', displayImages, false, 0, true); addChild (imageLoader); imageLoader.load ( 'pictures.xml'); // adăugați bg-ul nostru ca un copil bg = new Background (); addChild (bg); / / adăuga ascultător de evenimente, așa că știm când ne-am apropiat sau ieșit // Al treilea parametru al addEventListener este adevărat, așa că putem capta evenimentul, atunci când "bubbles" din polaroid addEventListener ('zoomIn', onZoomIn, Adevărat); addEventListener ('zoomOut', onZoomOut, true); funcția privată displayImages (eveniment: Eveniment): void // am încărcat toate imaginile noastre polaroidHolder = noi PolaroidHolder (imageLoader.images); addChild (polaroidHolder); // de asemenea, curățați imageLoader imageLoader.cleanUp (); imageLoader = null; funcția privată onZoomIn (evenimen
