Share
In questo tutorial spiegherò come accedere e utilizzare l'Elenco di visualizzazione durante la creazione di una galleria di immagini basate su XML con ActionScript 3.0.
Usando XML caricheremo dinamicamente e otterremo informazioni sulle immagini, forniremo loro una posizione centrale casuale, aggiungere una cornice, aggiungere funzionalità di trascinamento e, infine, utilizzeremo un'interpolazione per gestire l'animazione dello zoom.
Apri Flash e crea un nuovo file Flash (ActionScript 3).
Imposta le dimensioni dello stage su 600x350 e aggiungi un gradiente radiale grigio (#EEEEEE, #DDDDDD).
Aggiungeremo un'animazione di precaricamento per informare l'utente quando il contenuto viene caricato. In questo caso ho usato il preloader ispirato ad Apple che abbiamo creato prima. Poiché utilizzeremo solo l'animazione, non è necessario importare la classe o utilizzare un identificatore di esportazione.
Posiziona il preloader sul palco e centralo.
Incorporeremo un carattere, un'attività estremamente semplice quando si aggiunge un campo di testo allo stage nell'IDE di Flash, ma un po 'diverso con ActionScript.
Aprire il pannello Libreria e fare clic con il pulsante destro del mouse nell'area degli elementi senza selezionarne uno, verrà visualizzato un menu contestuale.
Fare clic su "Nuovo carattere" per aprire una finestra di dialogo, dare un nome al carattere e selezionare quello che si desidera utilizzare come mostrato nell'immagine seguente.
Questo creerà una classe del font che hai selezionato, verrà creata un'istanza al passaggio 9.
Creiamo il file XML.
Apri il tuo editor XML o di testo preferito e scrivi:
Quando hai finito, salvalo come "images.xml" nella tua cartella xml.
Il codice che useremo verrà scritto in una singola classe che verrà utilizzata come Document Class nel file FLA.
Creare un nuovo file ActionScript (File> Nuovo)
Salvalo come "Main.as".
Inizieremo con:
classi di pacchetti
Il pacchetto parola chiave ti consente di organizzare il tuo codice in gruppi che possono essere importati da altri script, si consiglia di nominarli partendo da una lettera minuscola e utilizzare gli intercapori per le parole successive, ad esempio: galleryClasses.
Se non vuoi raggruppare i tuoi file in un pacchetto o hai solo una classe, puoi usarla direttamente dalla tua cartella di origine, ma l'idea deve essere organizzata.
import flash.display.Sprite; import flash.display.MovieClip; import flash.net.URLLoader; import flash.net.URLRequest; import flash.display.Loader; import flash.events.Event; import flash.filters.BitmapFilter; import flash.filters.DropShadowFilter; import flash.text.TextFormat; import flash.text.TextField; import flash.text.AntiAliasType; import flash.events.MouseEvent; importare fl.transitions.Tween; importare fl.transitions.easing.Strong; importare fl.transitions.TweenEvent;
Queste sono le classi di cui avremo bisogno per realizzare questa galleria. Se hai bisogno di aiuto con una classe specifica, usa la Guida di Flash (F1).
la classe pubblica Main estende MovieClip
Il si estende keyword definisce una classe che è una sottoclasse di un'altra classe. La sottoclasse eredita tutti i metodi, le proprietà e le funzioni, in questo modo possiamo usarli nella nostra classe.
Useremo metodi e proprietà specifici di MovieClip per estendere l'utilizzo della classe MovieClip.
var xml: XML; // L'oggetto XML che analizzerà il file XML var images: Array = new Array (); // Questo array memorizzerà le immagini caricate var imagesLoaded: int = 0; // Un contatore, conta le immagini caricate var imagesTitle: Array = new Array (); // Le proprietà del titolo del file XML interpolazione: Tween; // Gestisce l'animazione var ingrandita: Boolean = false; // Controlla se un'immagine è ingrandita, false di default var canClick: Boolean = true; // Controlla se l'utente può fare clic su un'immagine per ingrandirla, true per default var lastX: int; // Memorizza la proprietà x dell'ultima immagine che è stata cliccata var lastY: int; // Memorizza la proprietà y dell'ultima immagine su cui è stato fatto clic var textformat: TextFormat = new TextFormat (); // Una schermata var di TextFormat Object: Sprite = new Sprite (); // Una schermata nera per mettere a fuoco il formato var dell'immagine attivaFont: Avenir = new Avenir (); // Questo è il carattere incorporato
Il costruttore è una funzione che viene eseguita quando un oggetto viene creato da una classe. Questo codice è il primo ad essere eseguito quando si crea un'istanza di un oggetto o quando si utilizza la Document Class.
In questa funzione imposteremo le proprietà dell'oggetto TextFormat che useremo per visualizzare un titolo o una descrizione di ogni immagine. Crea la schermata nera che appare quando l'utente fa clic su un'immagine e chiama la funzione che carica il file XML desiderato.
public function Main (): void textformat.color = 0xFFFFFF; textformat.font = formatFont.fontName; textformat.size = 17; // Usa le stesse dimensioni che hai usato quando hai incorporato il font dalla libreria screen.graphics.beginFill (0x111111, .75); screen.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); screen.graphics.endFill (); loadXML ( "xml / images.xml");
Questa funzione carica il file XML fornito dal parametro "file". Aggiungiamo anche un listener da gestire quando il carico è completo.
funzione privata loadXML (file: String): void var urlLoader: URLLoader = new URLLoader (); var urlReq: URLRequest = new URLRequest (file); URLLoader.load (urlReq); urlLoader.addEventListener (Event.COMPLETE, handleXML);
Qui convertiamo il file XML caricato in un oggetto XML valido utilizzando il parametro "data" di URLLoader. Quindi usiamo un'istruzione "for" per creare un Loader per ogni immagine nell'XML. Ulteriori informazioni sono disponibili nel commento.
funzione privata handleXML (e: Event): void xml = new XML (e.target.data); per (var i: int = 0; i < xml.children().length(); i++) var loader:Loader = new Loader(); loader.load(new URLRequest(String(xml.children()[i].@src))); images.push(loader); //Adds the Loaders to the images Array to gain access to them outside this function imagesTitle.push(xml.children()[i].@title); //Adds the title attribute content to the array to use it outside this function loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded); //A listener to the function that will be executed when an image is loaded
Quando un Caricatore ha caricato un'immagine dall'XML, viene eseguito il seguente codice:
funzione privata caricata (e: Event): void imagesLoaded ++; // Aggiunge uno alla variabile imagesLoaded if (xml.children (). Length () == imagesLoaded) // Quando tutte le immagini vengono caricate ... removeChild (preloader); // Rimuove il Preloader MovieClip prepareImages (); // Questa funzione è spiegata nel prossimo passaggio
Questa funzione aggiungerà il frame, il TextField per visualizzare il titolo o la descrizione, lo sfondo nero usato per quello e un filtro ombra. Prendiamolo in parti.
funzione privata prepareImages (): void for (var i: int = 0; i < images.length; i++) //These actions will be applied to all the images loaded so we use a "for" and the "images" array to do that var container:Sprite = new Sprite(); //A container that will store the image, frame, TextField, TextField background and shadow var frame:Sprite = new Sprite(); //The Frame Sprite var infoArea:Sprite = new Sprite(); //The TextField background var infoField:TextField = new TextField(); //The TextField
Questo crea una cornice bianca attorno all'immagine.
frame.graphics.beginFill (0xFFFFFF); frame.graphics.drawRect (-20, -20, images [i] .width + 40, images [i] .height + 80); frame.graphics.endFill ();
Il rettangolo verrà posizionato sotto l'immagine da utilizzare come cornice.
Questo crea un rettangolo nero nella parte inferiore dell'immagine, dove sarà il campo di testo.
infoArea.graphics.beginFill (0x111111, 0,75); infoArea.graphics.drawRect (0, 0, images [i] .width, 60); infoArea.graphics.endFill (); infoArea.y = images [i] .height - 60;
Il codice seguente imposta le proprietà TextField e ne aggiunge il contenuto.
infoField.defaultTextFormat = textformat; infoField.embedFonts = true; // Devi aggiungere questo per usare il carattere incorporato infoField.antiAliasType = AntiAliasType.ADVANCED; // Questa proprietà mostrerà il testo più chiaramente infoField.width = images [i] .width - 5; infoField.height = 20; infoField.text = imagesTitle [i]; // Il contenuto, ottenuto dall'XML e archiviato nell'array
Qui impostiamo la scala desiderata delle immagini. Poiché tutto sarà all'interno di Container Sprite, è necessario ridimensionarlo.
container.scaleX = 0,3; container.scaleY = 0.3;
Le immagini avranno una posizione casuale basata sul centro dell'area dello stage. Usiamo la matematica per questo.
container.x = stage.stageWidth / 4 + Math.floor (Math.random () * (stage.stageWidth / 4)); container.y = stage.stageHeight / 5 + Math.floor (Math.random () * (stage.stageHeight / 5));
Questo creerà un filtro ombra.
var shadowFilter: BitmapFilter = new DropShadowFilter (3, 90, 0x252525, 1, 2, 1, 15); // Distanza, angolo, colore, alfa, sfocatura, intensità, qualità var filterArray: Array = [shadowFilter]; container.filters = filterArray; // Applica il filtro
È ora di aggiungere i bambini, l'ordine in cui li aggiungiamo è l'ordine in cui verranno inseriti nell'elenco di visualizzazione, quindi assicurati di aggiungerli in questo modo.
infoArea.addChild (infoField); // Aggiunge il campo di testo allo sfondo del campo di testo container.addChild (frame); // Aggiunge il Frame al Container container.addChild (images [i]); // Aggiunge l'immagine nella parte superiore del frame nel contenitore infoArea.visible = false; // Impostiamo le informazioni sull'immagine come invisibili per default container.addChild (infoArea); // Aggiunge l'area informazioni in cima a tutto
Sebbene potessimo aggiungere gli Listener ad ogni Sprite in precedenza, li aggiungerò ora che si trovano all'interno del contenitore per mostrarti come funziona l'Elenco di visualizzazione.
container.getChildAt (1) .addEventListener (MouseEvent.MOUSE_UP, zoomHandler); // Questa è l'immagine caricata dall'XML, questo è l'oggetto Loader container.getChildAt (0) .addEventListener (MouseEvent.MOUSE_DOWN, dragImage); // Questo è il frame container.getChildAt (0) .addEventListener (MouseEvent.MOUSE_UP, stopDragImage); // Frame addChild (container); // Infine, aggiungiamo il contenitore allo stage
Nel passaggio precedente abbiamo aggiunto due listener al Frame delle immagini. Queste funzioni si prenderanno cura del trascinamento.
Usiamo "parent" perché vogliamo trascinare tutti gli oggetti, poiché il "target" è il Frame Sprite, l'oggetto genitore è il Container.
private function dragImage (e: MouseEvent): void e.target.parent.startDrag (); private function stopDragImage (e: MouseEvent): void e.target.parent.stopDrag ();
Questa funzione è responsabile dello zoom avanti e indietro. Il suo listener si trova nell'immagine reale, quindi facendo clic su Frame non si chiamerà questa funzione.
Nota dell'editore: Per qualche ragione, il altrimenti se () la dichiarazione all'interno di questa funzione zoomHandler stava facendo il nostro crash di evidenziatore della sintassi. Poiché non vuole essere visualizzato sulla pagina, ho reso disponibile la funzione per il download. Ci scusiamo per l'inconveniente, Ian.
Alcune azioni devono essere eseguite quando le Tween sono finite, queste sono quelle azioni.
funzione privata zoomInFinished (e: TweenEvent): void zoomed = true; // Modifica le variabili in base all'evento canClick = true; tween.obj.getChildAt (2) .visible = true; // Imposta l'area Informazioni su visibile funzione privata zoomOutFinished (e: TweenEvent): void zoomed = false; removeChild (schermo); // Rimuove la schermata nera tween.obj.getChildAt (0) .addEventListener (MouseEvent.MOUSE_DOWN, dragImage); // Aggiunge il listener di trascinamento a Frame Sprite
Torna al FLA e aggiungi Principale come la Document Class nel pannello delle proprietà. Se salvi la tua classe in un pacchetto devi aggiungere anche il nome del pacchetto, qualcosa del tipo: yourpackage.Main
Metti alla prova il tuo file e guarda la tua galleria di lavoro!
Come sempre, prova diverse cose nel tuo codice per creare la galleria come desideri.
Spero che ti sia piaciuto questo tutorial, grazie per la lettura!
Accentsconagua