Share
Hai mai desiderato creare un'app per foto con una bellissima e maneggevole? In questo tutorial, ti mostrerò come progettare e codificare un visualizzatore di foto Polaroid elegante, incentrato sul design e l'interpolazione.
Diamo un'occhiata al risultato finale su cui lavoreremo:
In questa sezione discuteremo la struttura delle cartelle, inoltre acquisiremo le nostre immagini azionarie.
Per prima cosa creiamo una cartella in cui verrà posizionato il nostro progetto. Lo nomineremo "Polaroid Viewer".
Successivamente copia la struttura di questa cartella:
Quando si creano progetti molto visivi, è molto importante innanzitutto sapere veramente cosa si desidera progettare. Dentro la cartella Design ho sempre i miei concetti visivi e anche nella cartella Design modifico le immagini di cui ho bisogno per un progetto.
Dopo aver finito di lavorare sul mio concetto, procedo alla creazione di un prodotto funzionante, lo faccio all'interno della cartella del progetto. All'interno della cartella del progetto c'è la struttura della cartella bin, lib e src molto nota:
Ora che abbiamo creato le nostre cartelle, passiamo alle immagini. In questo tutorial avremo bisogno di almeno due immagini:
Avrai bisogno di un account di Stock Xchange per scaricare queste immagini, se non ne hai ancora uno, devi registrarti! È un sito web pieno di immagini di scorta gratuite!
Fare clic sui collegamenti per scaricare le immagini, quindi salvarle o spostarle nella cartella Design.
Inoltre avremo bisogno di immagini da posizionare dentro i fotogrammi polaroid. Ecco una lista di immagini che ho usato, ma sentiti libero di usare le tue immagini.
In questa sezione modificheremo le nostre immagini stock. Dopo averlo fatto, importeremo queste immagini all'interno del nostro documento Flash, che creeremo in seguito.
Modificheremo le nostre immagini con Photoshop, userò CS5, tuttavia puoi sempre utilizzare versioni precedenti. Se non sei così sicuro delle tue capacità di Photoshop, puoi scaricare le immagini che ho già modificato. Basta scaricare i file sorgente da questo tutorial e puoi trovare le immagini all'interno di Immagini modificate cartella.
Nell'esempio finale tutte le nostre immagini polaroid si trovano su un pavimento di legno. Ora creeremo questo background.
Crea un nuovo documento in Photoshop con le dimensioni 600x600px.
Aggiungi l'immagine della struttura in legno al documento. Scala in modo tale che sei soddisfatto del risultato finale.
Ho anche aggiunto una mappa sfumatura, impostando i colori su bianco e nero.
Infine, ho modificato la transizione della mappa sfumata all'80%. Per fare ciò, fare clic su una delle frecce in basso, quindi fare clic sul punto al centro del gradiente. Trascina questo punto all'80%.
E voilà! Abbiamo creato il nostro sfondo di legno! Salvalo come documento di Photoshop (.psd) nella nostra cartella Design e nominalo Background.psd.
Vogliamo inserire le nostre immagini all'interno della cornice polaroid. Dobbiamo fare due cose, prima dovremo rimuovere la cornice polaroid dal suo sfondo (bianco), e inoltre dovremo tagliare la parte "foto".
Per fare ciò, creeremo per la prima volta un nuovo documento Photoshop 600x600px. Incolla l'immagine polaroid all'interno del documento, ridimensionala finché non si adatta.
Perché ridimensioniamo l'immagine? Perché stiamo creando un documento Flash 600x600px, e non è necessario avere e caricare un'immagine enorme se non lo scaleremo nemmeno di più di 600 px.
Selezionare lo strumento penna (P) e fare clic sul bordo esterno della cornice polaroid. Quando si lavora con lo strumento Penna, assicurarsi di impostare lo strumento Penna nella sua modalità Percorsi.
Premi Control + Invio (Windows) o Cmd + Invio (Mac) per selezionare il percorso corrente.
Con il percorso selezionato fai clic sul pulsante "Aggiungi maschera di livello". Ora abbiamo isolato la polaroid dal suo sfondo!
Questo passaggio è molto simile a Design Step 4. Seleziona nuovamente lo strumento penna e fai clic intorno all'area interna della cornice della polaroid. Successivamente selezionare il percorso corrente con Ctrl + Invio / Cmd + Invio.
Ora premi Alt sulla maschera nel pannello Livelli. Adesso stai modificando la maschera direttamente.
Seleziona lo strumento Selezione (M). Fai clic con il pulsante destro del mouse sulla selezione e seleziona Riempi> Nero.
Toccate di nuovo Alt sull'icona di maschera, per tornare alla visualizzazione del livello "normale". Abbiamo modificato con successo la nostra maschera e ora la nostra polaroid è pronta per l'uso. Salviamo l'immagine come documento di Photoshop (.psd), ho chiamato il mio documento Polaroid.psd.
In questa sezione useremo (finalmente) Flash. Imposteremo il nostro documento Flash per utilizzare la cartella bidone per l'esportazione e la cartella src per il nostro codice. È ora di aprire Flash!
Crea un nuovo documento Flash (ActionScript 3.0) con Flash Professional. Impostare le dimensioni su 600x600 px e il framerate su 24 fps. Impostare la Document Class su Principale. Modificare anche lo sfondo in nero (# 000000). Salva come "Polaroid.fla", dentro il lib cartella.
Successivamente vai su File> Impostazioni pubblicazione, cambia Polaroid.swf in ? /bin/Polaroid.swf, puoi deselezionare l'opzione HTML. Ora tutto ciò che esportiamo (solo un SWF) sarà nella cartella bin. Non chiudere la finestra delle impostazioni di pubblicazione.
Clicca il Veloce scheda. Successivamente clicca su Pulsante Impostazioni accanto a Script: ActionScript 3.0.
Ora possiamo cambiare il percorso di origine. Vedrai un'icona di cartella con il testo "", cambiarlo "? / src".
Flash utilizzerà il src cartella per tutte le sue classi.
È ora di iniziare a importare la nostra grafica nel nostro documento Flash. Se hai avuto problemi con le immagini, puoi sempre scaricare i file sorgente da questo tutorial in alto. Ci sarà una cartella chiamata "Immagini modificate", all'interno ci saranno le immagini modificate che è possibile utilizzare.
Crea un nuovo documento Flash (ActionScript 3.0) con Flash Professional. Impostare le dimensioni su 600x600 px e il framerate su 24 fps. Modificare anche lo sfondo in nero (# 000000).
Abbiamo salvato le nostre immagini come file .psd perché funzionano così bene con altri prodotti Adobe, come Flash. Dopo aver creato il nostro documento, seleziona File> Importa nella libreria e seleziona Polaroid.psd e Background.psd. Dopo averlo fatto la nostra libreria appare così:
Trascina Background.psd dalla Libreria sul nostro stage, poi convertilo in un clip filmato. Assegnare un nome allo sfondo e selezionare la casella "Esporta per ActionScript". Imposta la classe base su flash.display.Sprite. Dopo averlo fatto, puoi rimuovere di nuovo lo sfondo dal palco.
Perché ho impostato la classe base di Background su Sprite al posto della classe base predefinita MovieClip? Poiché l'unica differenza tra MovieClip e Sprite è che MovieClip può contenere più fotogrammi e che gli sprite non possono. Non abbiamo bisogno di più fotogrammi per il nostro Background, quindi impostiamo la classe base di Background to Sprite.
Proprio come abbiamo fatto con il nostro background, trascina polaroid.psd dalla Libary sul nostro palco. Convertilo in un clip filmato e chiamalo Polaroid, controlla di nuovo il Esporta per ActionScript scatola. Imposta la classe base su flash.display.Sprite.
La nostra Polaroid è ancora sul palco, fare doppio clic su di esso, in modo che possiamo modificarlo. Finora Polaroid ha solo un livello, rinominare questo livello in Cornice Polaroid.
Crea due nuovi livelli, nominandoli Maschera e Titolare dell'immagine.
La nostra Polaroid conterrà un'immagine, questa immagine deve essere visualizzata da qualche parte, ciò sarà fatto in un filmato chiamato "Supporto immagine".
Disegna un rettangolo di circa la dimensione come "area foto" della polaroid, fallo nel Titolare dell'immagine strato. Non importa quale colore sarà il rettangolo. Dopo aver creato questo rettangolo, convertirlo in un clip filmato, nominarlo "Supporto immagine".
Assegna a Image Holder un nome di istanza di imageHolder.
Il titolare dell'immagine conterrà le immagini che verranno caricate. A volte queste immagini sono troppo grandi - prendi ad esempio un'immagine di 400x100px; questa immagine è troppo larga e i suoi bordi si estendono dalla polaroid. Vogliamo evitare questo. Pertanto, dobbiamo nascondere tutte le immagini che si estendono al di fuori dell'area del supporto dell'immagine.
Per fare questo, dobbiamo creare un maschera. Una maschera indica a un livello quale parte deve essere visualizzata e quale parte deve essere nascosta.
Se vogliamo che ogni immagine venga visualizzata all'interno del supporto immagine, senza spigoli sporgenti, dovremmo impostare le dimensioni della maschera alle stesse dimensioni di Image Holder stesso.
Copia il supporto immagine e incollalo in posizione con Ctrl + Maiusc + V (Windows) / Cmd + Maiusc + V (Mac) sul livello Maschera. Successivamente interrompi il supporto immagine copiato con Ctrl + B (Windows) / Cmd + B (Mac).
Infine dobbiamo dire al nostro Maschera strato che è una maschera. Fare clic con il tasto destro sul livello Maschera e selezionare l'opzione Maschera.
È ora di iniziare a programmare, se hai avuto problemi con il Sezione Flash, puoi semplicemente copiare la cartella Sezione Flash completata. Dentro quella cartella c'è tutto il necessario per iniziare a seguire questi passaggi.
Per caricare le nostre immagini, useremo un file XML. Il file XML dirà al nostro prodotto dove si trovano le immagini.
Apri un editor di testo e digita quanto segue:
image_1.jpg IMAGE_2.jpg IMAGE_3.jpg
Dovresti cambiare IMAGE_1.jpg, IMAGE_2.jpg, ecc. In nomi di file reali, che si riferiscono a immagini situate all'interno di bidone cartella. Se non si dispone di immagini, scaricare le immagini che ho citato nel passaggio 3.
Salva questo file XML come images.xml, dentro il bidone cartella.
Prima di iniziare la codifica, è importante sapere quali attività deve svolgere il nostro progetto:
Per codificare tutte queste funzionalità in una classe renderebbe questa classe estremamente complessa, è meglio separare ogni attività in una classe diversa.
Accentsconagua
ImageLoader: Caricherà il file XML e passerà le immagini a PolaroidHolder.PolaroidHolder: Quando riceve le immagini, crea una Polaroid per ogni immagine, quindi anche questo lo assicura solo uno Polaroid viene ingrandito alla volta.Polaroid: L'immagine verrà visualizzata all'interno di questa classe.La classe Main è la classe che Polaroid.fla chiama quando viene avviata.
Creare un nuovo file ActionScript e nominarlo "Main.as", salvalo nella cartella src. La classe Main ha il seguente aspetto.
package import flash.display.MovieClip; public class Main estende MovieClip public function Main (): void
È così vuoto perché prima dobbiamo creare le nostre altre classi, mentre siamo impegnati a continuare ad aggiungere codice alla classe Main.
In questo progetto stiamo caricando diverse risorse: un file xml e varie immagini. Possiamo usare percorsi di file relativi o percorsi assoluti. Lasciatemi spiegare la differenza con un esempio; abbiamo la seguente struttura di cartelle:
Loader.swf deve caricare image1.jpg. Dalla sua posizione attuale Loader.swf deve "aprire" la directory images e caricare image1.jpg. Diamo a Loader.swf il caricamento images / image1.jpg. Questo tipo di caricamento è chiamato caricamento del percorso file relativo, perché l'URL è parente alla posizione corrente di Loader.swf.
Quindi come caricare image1.jpg, indipendentemente da dove si trova Loader.swf? Questo è fatto con caricamento assoluto del percorso file. Il percorso del file inizia dal nucleo superiore, dalla radice. Se è su un computer, la sua radice è un disco rigido. Stiamo implementando il nostro progetto online, quindi la radice sarebbe il server del sito.
Quando il nostro progetto sarà terminato, vorremmo dispiegarlo. Molto probabilmente sarebbe incorporato in una pagina HTML. C'è un piccolo problema. Se Loader.swf vuole caricare, verrà caricato dalla sua posizione corrente, dalla posizione della pagina HTML. Non vogliamo questo, e quindi dobbiamo usare il caricamento assoluto del percorso file.
Ora arriva il problema più grande, non conosceremo la posizione del file HTML. Dobbiamo trovare il assoluto percorso del file .swf e modificare quel percorso in modo da poter caricare le nostre immagini.
Possiamo ottenere il percorso assoluto del file .swf con root.loaderInfo.url.
È tempo di creare il nostro ImageLoader classe.
Creare un nuovo file ActionScript e nominarlo ImageLoader.as, salvalo nella cartella .src. La classe sembra così, è stata commentata a fondo:
pacchetto // importa le classi che devono essere importate flash.net.URLLoader; import flash.net.URLRequest; import flash.events.Event; import flash.display.Loader; import flash.display.Bitmap; import flash.display.Sprite; public class ImageLoader estende Sprite // carica la nostra xml private var xmlLoader: URLLoader = new URLLoader (); // memorizza xml private var xml: XML; // un elenco di percorsi di file per le immagini private var imageFileList: XMLList; // il percorso del file .swf private var swfPath: String; // il percorso della cartella del progetto (dove si trovano le cartelle bin, src e lib) private var projectPath: String; // dobbiamo conoscere il titolo del nostro progetto, quindi possiamo modificare l'URL .swf per ottenere il nostro projectPath private var projectTitle: String; // dobbiamo contare quante immagini abbiamo già caricato conteggio delle variabili private: uint = 0; // dobbiamo memorizzare le immagini, le immagini sono immagini pubbliche di bitmap: Vector.= nuovo vettore. ; public function ImageLoader (_projectTitle: String) // dobbiamo sapere quando ImageLoader è stato aggiunto, quindi possiamo capire quale sia l'url della root addEventListener (Event.ADDED, whenAdded); // memorizza il titolo del progetto projectTitle = _projectTitle; // quando imageLoader ha terminato il caricamento, chiama xmlLoaded xmlLoader.addEventListener (Event.COMPLETE, xmlLoaded); funzione privata whenAdded (event: Event): void // memorizza il percorso swf swfPath = root.loaderInfo.url; // ottiene il nostro projectPath projectPath = swfPath.substr (0, swfPath.length - projectTitle.length); // questa funzione caricherà le immagini da un xml e memorizzerà la funzione pubblica delle immagini load (url: String): void // carica l'xml, che sarà necessario caricare le immagini xmlLoader.load (new URLRequest ( projectPath + url)); private function xmlLoaded (event: Event): void // memorizza l'xml, che xmlLoader ha caricato xml = new XML (event.target.data); // memorizza tutti i collegamenti ai file in un file XMLList imageFileList = new XMLList (xml.image.file); // ora che abbiamo le informazioni sul file, possiamo caricare le immagini loadImages (); private function loadImages (): void per each (var imageFile: String in imageFileList) // crea var imageLoader: Loader = new Loader (); // ogni volta che un'immagine è stata caricata, chiama imageLoaded imageLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, imageLoaded, false, 0, true); imageLoader.load (new URLRequest (projectPath + imageFile)); funzione privata imageLoaded (event: Event): void // contiamo quante immagini abbiamo già caricato, abbiamo appena caricato (un altro) un conteggio ++; // richiama l'immagine Var immagine bitmap: Bitmap = Bitmap (event.target.loader.content); // memorizza l'immagine nelle nostre immagini Vector images.push (immagine); // se questa è l'ultima immagine che dovevamo caricare if (count == imageFileList.length ()) // abbiamo terminato, invia un evento dispatchEvent (new Event ('imagesLoaded')); // - cleanup // scarica il loader event.target.loader.unload (); public function cleanUp (): void xmlLoader.data = null; xmlLoader = null; xml = null; imageFileList = null; conteggio = 0; images = null;
Ora che abbiamo la nostra classe ImageLoader, possiamo migliorare la nostra classe principale.
package import flash.display.MovieClip; import flash.events.Event; public class Main estende MovieClip // una classe personalizzata che è stata creata per caricare tutte le immagini da un file xml come private var imageLoader di Bitmap: ImageLoader; // questa classe manterrà e visualizzerà tutte le nostre polaroid private var polaroidHolder: PolaroidHolder; funzione pubblica Main (): void // carica le nostre immagini, assegna a imageLoader il nome del file .swf, in modo che possa caricare utilizzando percorsi assoluti imageLoader = new ImageLoader ('Polaroid.swf'); addChild (imageLoader); imageLoader.addEventListener ('imagesLoaded', displayImages, false, 0, true); imageLoader.load ( 'pictures.xml'); private function displayImages (event: Event): void // abbiamo caricato tutte le nostre immagini polaroidHolder = new PolaroidHolder (imageLoader.images); addChild (polaroidHolder); // ripulisce anche imageLoader imageLoader.cleanUp (); imageLoader = null; PolaroidHolder riceverà le immagini come un vettore. Dopo aver ricevuto le immagini, creerà una Polaroid per ogni immagine. Creiamo la nostra classe PolaroidHolder:
package import flash.display.MovieClip; import flash.display.Bitmap; import flash.events.MouseEvent; PolaroidHolder di classe pubblica estende MovieClip // questo vettore conterrà tutte le polaroid pubbliche Polaroids var: Vector.= nuovo vettore. ; // con questa variabile non abbiamo una var privata zoomIn: Boolean; // Polaroid viene ingrandito su var var attualePolaroid: Polaroid; funzione pubblica PolaroidHolder (immagini: Vector. ) // codice costruttore per ciascuna (immagine var: bitmap in immagini) // crea una nuova polaroid var polaroid: Polaroid = new Polaroid (immagine); // posiziona e ruota polaroid.x = Math.random () * 200 + 100; polaroid.y = Math.random () * 200; polaroid.rotation = Math.random () * 60 - 30; // aggiungi un click eventListener polaroid.addEventListener (MouseEvent.CLICK, onPolaroidClick); addChild (polaroid); // aggiungilo al polaroid vector polaroids.push (polaroid); funzione privata onPolaroidClick (event: MouseEvent): void // c'è stato un clic su una Polaroid! if (currentPolaroid == null) // no currentPolaroid è stato impostato, stiamo facendo lo zoom in // imposta la Polaroid cliccata come corrente Polaroid currentPolaroid = event.currentTarget come Polaroid; // silenzia tutte le altre Polaroid (quelle che non sono ingrandite) per ciascuna (var polaroid: Polaroid in polaroid) if (polaroid! = currentPolaroid) polaroid.mute (); else // controlla se il clic era sulla polaroid corrente if (event.currentTarget == currentPolaroid) // la stessa polaroid è stata cliccata (di nuovo), ora di ridurre // riattiva tutte le altre Polaroid, esse può rispondere di nuovo agli eventi per ciascuna (var polaroid: Polaroid in polaroid) if (polaroid! = currentPolaroid) polaroid.unmute (); // ora non siamo ingranditi, quindi non abbiamo una polaroid corrente currentPolaroid = null;
Nelle righe 50 e 62, chiamiamo le funzioni mute () e unmute (). Muto rende la Polaroid insensibile a tutti gli eventi, non risponderà a mouse over o clic. Questo è esattamente ciò che vogliamo quando siamo ingranditi. Non vogliamo che le altre Polaroid facciano nulla. Dopo lo zoom, vogliamo che le Polaroid rispondano agli eventi; richiamando l'audio, le Polaroid risponderanno di nuovo ai mouse e ai clic.
Ora è il momento di creare la nostra classe più interessante, la nostra classe Polaroid! Per questa classe avremo bisogno della popolare libreria tweener tweener. Scaricalo e salva la libreria nella cartella src (consulta questa guida per maggiori dettagli).
package import flash.display.MovieClip; import flash.events.MouseEvent; import caurina.transitions. *; import caurina.transitions.properties. *; import flash.display.Bitmap; import flash.events.Event; Polaroid di classe pubblica estende MovieClip // la scala con cui la Polaroid viene ingrandita con const statico privato ZOOMED_IN_SCALE: Number = 1; // la scala alla quale la Polaroid viene rimossa dalla costante statica privata ZOOMED_OUT_SCALE: Number = .6; // l'altezza massima dell'immagine può essere privata var IMAGE_MAX_HEIGHT: Number; // la larghezza massima che un'immagine può essere privata var IMAGE_MAX_WIDTH: Number; // dobbiamo ridimensionare le immagini caricate, ricorda la scala var privata in scala: Number; // quando riduciamo lo zoom, torniamo indietro alla posizione originale della Polaroid e ruotiamo // la coordinata x originale della Polaroid. private var origX: Number; // abbiamo anche bisogno dell'originale y coordinate private var origY: Number; // memorizza la rotazione originale di Polaroid var var origotation: Number; // quando questo booleano diventa true, la Polaroid non risponderà agli eventi del mouse private var muted: Boolean; // abbiamo bisogno di sapere se la Polaroid è stata cliccata public var click: Boolean; funzione pubblica Polaroid (image: Bitmap) // crea la Polaroid come pulsante buttonMode = true; // le dimensioni massime per un'immagine sono limitate dalle dimensioni di imageHolder IMAGE_MAX_HEIGHT = imageHolder.height; IMAGE_MAX_WIDTH = imageHolder.width; // ridimensiona la scala PolaroidX = ZOOMED_OUT_SCALE; scaleY = ZOOMED_OUT_SCALE; // avremo bisogno di ridimensionare l'immagine per adattarla // prima controlla se è un ritratto o un paesaggio se (image.width> image.height) // è un paesaggio // la scala è limitata dal scala altezza dell'immagine = IMAGE_MAX_HEIGHT / image.height; else // è un ritratto // la scala è limitata dalla scala della larghezza dell'immagine = IMAGE_MAX_WIDTH / image.width; // ridimensiona l'immagine image.scaleX = scale; image.scaleY = scala; // aggiungi l'immagine ridimensionata imageHolder.addChild (image); // aggiungi i listener di eventi alla Polaroid; addEventListener (MouseEvent.MOUSE_OVER, onMouseOver); addEventListener (MouseEvent.MOUSE_OUT, onMouseOut); addEventListener (MouseEvent.CLICK, onClick); addEventListener (Event.ADDED, whenAdded); public function mute (): void // chiamando questa funzione farà in modo che Polaroid non risponda agli eventi buttonMode = false; muted = true; public function unmute (): void // chiamando questa funzione renderà la Polaroid rispondere agli eventi buttonMode = true; muted = false; funzione privata whenAdded (event: Event): void // memorizza le coordinate originali e la rotazione di Polaroid origX = x; origY = y; origRotation = rotation; // non avremo più bisogno di questo listener di eventi, rimuoverlo removeEventListener (Event.ADDED, whenAdded); funzione privata onMouseOver (event: MouseEvent): void // risponde solo se la Polaroid non è stata disattivata se (! muted) // risponde solo se la Polaroid non è stata cliccata, facendo clic su Polaroid non dovrebbe rispondere ai mouse over. if (! clicked) // sposta la polaroid in primo piano parent.setChildIndex (this, parent.numChildren - 1); // sposta e ruota la polaroid in una direzione casuale Tweener.addTween (this, x: origX + Math.random () * 30 - 15, y: origY + Math.random () * 30 -15, rotazione: origRotation + Math.random () * 20 - 10, tempo: 1); funzione privata onMouseOut (event: MouseEvent): void // risponde solo se la Polaroid non è stata disattivata se (! muted) // risponde solo se la Polaroid non è stata cliccata se (! ha fatto clic) // sposta la polaroid nella sua posizione originale e rotazione Tweener.addTween (questo, x: origX, y: origY, rotazione: origRotation, time: 1); funzione privata onClick (event: MouseEvent): void // risponde solo se la Polaroid non è stata disattivata se (! muted) // se non è stata cliccata prima se (! ha fatto clic) // we sono stati cliccati, facciamo quel vero clic = vero; // stiamo facendo lo zoom, inviamo un evento (Main lo prenderà in considerazione) dispatchEvent (new Event ('zoomIn')); // ingrandisci la Polaroid al centro dello stage Tweener.addTween (questo, x: stage.stageWidth / 2 - width / 2, y: stage.stageHeight / 2 - height / 2, rotation: 0, scaleX: ZOOMED_IN_SCALE , scaleY: ZOOMED_IN_SCALE, ora: 1); else // siamo già stati cliccati, quindi fai clic su false falsekedked = false; // stiamo zumando, inviamo un evento (Main lo prenderà in considerazione) dispatchEvent (new Event ('zoomOut')); // ingrandisce la polaroid, torna alla sua posizione originale Tweener.addTween (this, x: origX, y: origY, rotation: origRotation, scaleX: ZOOMED_OUT_SCALE, scaleY: ZOOMED_OUT_SCALE, time: 1); Apporta le modifiche come mostrato nel codice qui sotto.
package import flash.display.MovieClip; public class Main estende MovieClip // una classe personalizzata che è stata creata per caricare tutte le immagini da un file xml come private var imageLoader di Bitmap: ImageLoader; private var polaroidHolder: PolaroidHolder; funzione pubblica Main (): void // carica le nostre immagini imageLoader = new ImageLoader (); imageLoader.addEventListener ('imagesLoaded', displayImages, false, 0, true); imageLoader.load ( 'pictures.xml'); private function displayImages (event: Event): void // abbiamo caricato tutte le nostre immagini polaroidHolder = new PolaroidHolder (imageLoader.polaroids); addChild (polaroidHolder); // ripulisce anche imageLoader imageLoader.cleanUp (); imageLoader = null; Sembra funzionare, ma non è molto interessante. Durante lo zoom, l'utente non è "tirato", il nostro prodotto non è abbastanza coinvolgente. Ciò di cui abbiamo bisogno è uno sfondo! Per caso ne abbiamo creato uno in Passaggio 4. È tempo di aggiungere il nostro background!
Abbiamo esportato il nostro background con la classe sfondo.
Non aggiungiamo solo Background come figlio di Main, ma anche lo sfondo diventa più scuro quando siamo ingranditi e alleggerito quando siamo in zoom out. Come facciamo questo? Ogni volta che si fa clic su una Polaroid, viene inviato un evento personalizzato, ingrandire o zoomOut. Possiamo tracciare questo evento, aggiungere solo ascoltatori di eventi alla nostra classe principale, prenderanno in considerazione gli eventi zoomIn e zoomOut e ogni volta che vengono raccolti, possiamo dire al nostro sfondo di schiarire o scurire:
package import flash.display.MovieClip; import flash.events.Event; import caurina.transitions. *; import caurina.transitions.properties. *; public class Main estende MovieClip // una classe personalizzata che è stata creata per caricare tutte le immagini da un file xml come private var imageLoader di Bitmap: ImageLoader; // questa classe mostrerà tutte le nostre Polaroid, ricevendo un vettore di Bitmap private var polaroidHolder: PolaroidHolder; // lo sfondo in legno, bg è un'abbronzatura per lo sfondo privato var bg: Funzione pubblica di background Main (): void // carica le nostre immagini imageLoader = new ImageLoader ('Polaroid.swf'); imageLoader.addEventListener ('imagesLoaded', displayImages,
