Share
In questo tutorial imparerai come creare un semplice Rotatore di immagini da zero usando Flash, XML e ActionScript 3.0.
Questo rotatore di immagini è creato quasi completamente da solo codice.
Durante i primi passi, imposteremo le proprietà del file Fla e incorporeremo alcuni tipi di carattere per migliorare l'aspetto dell'immagine. Aggiungiamo anche un preloader per indicare la transizione automatica delle immagini.
Apri Flash e crea un nuovo file Flash (ActionScript 3.0).
Imposta le dimensioni dello stage su 600 x 300 px e la velocità del fotogramma su 24 fps.
Per dare un aspetto migliore alla nostra applicazione utilizzeremo i caratteri incorporati.
Aprire il pannello Libreria (Cmd + L) e fare clic con il pulsante destro del mouse nell'area degli elementi per visualizzare un menu di scelta rapida.
Selezionare Nuovo carattere e scegli un font che ti piace. Ricordarsi di selezionare la dimensione effettiva che si intende utilizzare nel film.
Ho usato Helvetica Bold per il titolo dell'immagine e FFF Harmony per la descrizione.
Un filmato di preloader MovieClip verrà usato come indicazione del progresso, questo dirà all'utente che le immagini stanno giocando automaticamente.
In questo esempio, ho utilizzato il Preloader di Apple Inspired che abbiamo creato prima qui su ActiveTuts +. Useremo solo l'animazione, quindi non c'è bisogno di copiare il codice. Il nostro codice passerà all'immagine successiva ogni volta che l'animazione del preloader scorre.
Non sarebbe un Image Rotator senza immagini, quindi sceglili dalla tua collezione personale o scaricane alcuni per i test.
Queste sono le immagini della demo, ottenute da Flickr, tutte con una licenza Creative Commons.
Grass 01 di 100kr
impatto profondo sul colore del pianeta da parte di spettacolopuro
Yosemite: colori autunnali di tibchris
Le immagini sono state ridimensionate a 600x300 px per adattarsi alle dimensioni del filmato.
Un file XML verrà caricato dall'applicazione; questo file conterrà tutte le informazioni sulle immagini come Titolo, URL dell'immagine e Descrizione.
Apri il tuo editor preferito e scrivi:
Crea un nuovo documento ActionScript e salvalo come ImageRotator.as.
Queste sono le classi richieste. Per una descrizione più dettagliata di ogni classe, fare riferimento alla Guida di Flash (premere F1 in Flash).
package import fl.transitions.Tween; importare fl.transitions.easing.Strong; importare fl.transitions.TweenEvent; import flash.display.Sprite; import flash.net.URLLoader; import flash.net.URLRequest; import flash.display.Loader; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFieldAutoSize; import flash.text.AntiAliasType; import flash.utils.Timer; import flash.events.TimerEvent; import flash.events.Event; import flash.events.MouseEvent;
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.
Faremo in modo che la nostra classe di documenti estenda Sprite, poiché non ha bisogno di una timeline.
ImageRotator di classe pubblica estende Sprite
Queste sono le variabili che useremo; ciascuno è spiegato nei commenti.
private var xml: XML; // Memorizza le informazioni sul file xml private var urlLoader: URLLoader; // Carica l'URL del file xml private var imagesVector: Vector.= nuovo vettore. (); // Memorizza le immagini caricate nell'oggetto Loader private var imagesCounter: int = 0; interpolazione privata: Tween; private var lastTarget: *; // Ottiene l'ultima immagine cliccata, in modalità di transizione manuale private var tweening = false; private var infoCounter: int = 0; // Modifica le informazioni xml per visualizzare private var infoPanel: Sprite = new Sprite (); private var titleField: TextField = new TextField (); descrizione var privata: TextField = new TextField (); private var titleFormat: TextFormat = new TextFormat (); descrizione var privataTF: TextFormat = new TextFormat (); timer var privato: timer; private var preloader: Preloader = new Preloader (); // Il precaricatore nella variabile privata Library ha aggiunto: Boolean; // Controlla se il preloader è in stage private var titleFont: Helvetica = new Helvetica (); // Instantiate Caratteri incorporati private var bitmapFont: Harmony = new Harmony ();
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 viene eseguita utilizzando la Document Class. In questo caso, sarà il primo codice eseguito all'avvio del nostro SWF.
I parametri iniziali hanno valori predefiniti; questo ci permetterà di usare la classe come una classe di documenti e come un esempio.
I parametri sono l'URL del file XML e il tempo in cui l'oggetto Timer attenderà di effettuare una transizione tra le immagini; questo numero deve essere più alto della durata della transizione Tween (un secondo di default).
funzione pubblica ImageRotator (xmlPath: String = "images.xml", interval: int = 2000): void
Questo codice va all'interno del costruttore. Avvia il timer, imposta il formato di testo predefinito per i campi di testo e chiama la funzione loadXML.
timer = nuovo Timer (intervallo); titleFormat.bold = true; titleFormat.font = titleFont.fontName; titleFormat.color = 0xFFFFFF; titleFormat.size = 14; descriptionTF.font = bitmapFont.fontName; descriptionTF.color = 0xEEEEEE; descriptionTF.size = 8; titleField.defaultTextFormat = titleFormat; titleField.autoSize = TextFieldAutoSize.LEFT; titleField.embedFonts = true; titleField.antiAliasType = AntiAliasType.ADVANCED; description.defaultTextFormat = descriptionTF; description.autoSize = TextFieldAutoSize.LEFT; description.embedFonts = true; loadXML (xmlPath);
Questa funzione utilizza l'oggetto URLLoader per caricare il file XML specificato nel parametro del costruttore. La funzione parseXML (nel passaggio successivo) è impostata per l'esecuzione al termine del caricamento.
funzione privata loadXML (file: String): void urlLoader = new URLLoader (new URLRequest (file)); urlLoader.addEventListener (Event.COMPLETE, parseXML);
I dati xml vengono assegnati all'oggetto xml e viene chiamata una funzione per caricare le immagini.
funzione privata parseXML (e: Event): void xml = new XML (e.target.data); LoadImages ();
Un'istruzione for viene utilizzata per ottenere il numero di immagini nel file xml, caricare le immagini utilizzando un oggetto Loader e archiviare questo Loader in un oggetto Vector, definito in precedenza. Al termine del caricamento di un'immagine, viene eseguita la funzione sortImages.
funzione privata loadImages (): void for (var i: int = 0; i < xml.children().length(); i++) var loader:Loader = new Loader(); loader.load(new URLRequest(xml.children()[i].@src)); imagesVector.push(loader); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, sortImages);
Questa funzione aggiunge le immagini allo stage e le ordina; quando tutte le immagini vengono caricate, chiama le funzioni che creano il pannello delle informazioni e gli ascoltatori del mouse.
funzione privata sortImages (e: Event): void imagesCounter ++; for (var i: int = imagesVector.length - 1; i> = 0; i--) // torna indietro ... addChild (imagesVector [i]); // ... in modo che le immagini all'inizio di XML finiscano in primo piano if (imagesCounter == imagesVector.length) // Se tutte le immagini sono caricate createInfoPanel (); timer.addEventListener (TimerEvent.TIMER, autoChange); timer.start (); addPreloader (); addActions ();
Noi usiamo a per dichiarazione per impostare gli ascoltatori del mouse su ogni immagine. Questa è una forma di controllo molto semplice; quando l'utente fa clic su un'immagine, verrà chiamata la funzione changeImage handler.
funzione privata addActions (): void for (var i: int = 0; i < imagesVector.length; i++)//Gets the number of images //Sets the listener, changeImage function will be executed when an image is clicked imagesVector[i].addEventListener(MouseEvent.MOUSE_UP, changeImage);
Questo codice verrà eseguito quando l'utente fa clic su un'immagine. Leggi i commenti nel codice per i dettagli.
private function changeImage (e: MouseEvent): void timer.stop (); // Ferma il timer se (aggiunto) // Controlla se il preloader è in fase, se è vero, lo rimuove, se già rimosso, non accade nulla removeChild (preloader); aggiunto = falso; if (! tweening) // Se una transizione non è in corso lastTarget = e.target; // Ottieni l'immagine cliccata tween = new Tween (e.target, "alpha", Strong.easeOut, 1,0,1, true); // Avvia una transizione tween.addEventListener (TweenEvent.MOTION_FINISH, changeDepth); // L'immagine cambierà la sua profondità quando la transizione viene eseguita tweening = true; // Indica che è in corso una transizione infoCounter ++; // Cambia il figlio che verrà caricato da xml if (infoCounter> = xml.children (). Length ()) // Se infoCounter è maggiore del numero totale di immagini infoCounter = 0; // Reimposta titleField.text = xml.children () [infoCounter]. @ titolo; // Applica le modifiche ai campi di testo description.text = xml.children () [infoCounter]. @ descrizione; else titleField.text = xml.children () [infoCounter]. @ titolo; // Applica le modifiche ai campi di testo description.text = xml.children () [infoCounter]. @ descrizione;
La transizione tra le immagini è basata sull'interpolazione alpha, quindi vedrai l'immagine successiva al termine della transizione. Tuttavia, se si fa clic su di esso, si farà clic sulla stessa immagine di prima, anche se non è visibile. Questo lo risolverà.
funzione privata changeDepth (e: TweenEvent): void // Quando l'alpha è 0 setChildIndex (lastTarget, 0); // sposta l'immagine in modo che sia dietro gli altri lastTarget.alpha = 1; // Ripristina la sua visibilità tweening = false; // Contrassegna l'interpolazione come completa
Questo creerà un pannello semi-trasparente, con il testo generato dai tag Title e Description dell'XML.
funzione privata createInfoPanel (): void // Disegna un rettangolo nero con 50% alpha infoPanel.graphics.beginFill (0x000000, 0.5); infoPanel.graphics.drawRect (0, 0, 600, 50); infoPanel.graphics.endFill (); // Posiziona e imposta il valore del campo titolo titleField.text = xml.children () [infoCounter]. @ titolo; titleField.x = 5; titleField.y = 5; // Posiziona e imposta il valore del campo descrizione description.text = xml.children () [infoCounter]. @ descrizione; description.x = 7; description.y = 22; infoPanel.y = 250; // Posiziona questo pannello in fondo // Aggiungi i bambini infoPanel.addChild (titleField); infoPanel.addChild (descrizione); addChild (InfoPanel);
Questo codice gestisce la transizione automatica; è attivato dall'evento TIMER dell'oggetto Timer.
funzione privata autoChange (e: TimerEvent): void infoCounter ++; // Cambia il child che verrà caricato da xml lastTarget = imagesVector [xml 1 = "-" 2 = "infoCounter" language = ". Children (). Length ()"] [/ xml]; // Ottiene l'ultima immagine interpolata tween = new Tween (imagesVector [xml 1 = "-" 2 = "infoCounter" language = ". Children (). Length ()"] [/ xml], "alpha", Strong .easeOut, 1,0,1, true); // Crea un'interpolazione alpha / * Le stesse azioni della transizione manuale, modifica delle informazioni ecc. * / Tween.addEventListener (TweenEvent.MOTION_FINISH, changeDepth); tweening = true; if (infoCounter> = xml.children (). length ()) infoCounter = 0; titleField.text = xml.children () [infoCounter]. @ titolo; description.text = xml.children () [infoCounter]. @ descrizione; else titleField.text = xml.children () [infoCounter]. @ titolo; description.text = xml.children () [infoCounter]. @ descrizione;
Questo pezzo di script aggiunge e posiziona il preloader.
funzione privata addPreloader (): void added = true; preloader.scaleX = 0,08; preloader.scaleY = 0.08; preloader.x = (600 - preloader.width / 2) - 12; preloader.y = (300 - preloader.height / 2) - 12; addChild (preloader);
Questo completa il Imagerotator classe.
Ci sono due modi per usare questa classe. Puoi usarlo nel tuo codice come un'istanza o come la classe del documento con i parametri predefiniti che abbiamo impostato in precedenza.
Se scegli di istanziare questa classe e usarla nel tuo codice, questo è un esempio di come usarlo:
Accentsconagua
import ImageRotator; var ir: ImageRotator = new ImageRotator ("images.xml", 1100); addChild (ir); In questo modo è possibile impostare il file xml da caricare e l'intervallo della transizione senza la necessità di modificare il codice di classe.
Altrimenti, vedi il prossimo passo.
Nel file .fla, vai al pannello Proprietà e scrivi Imagerotator nel campo Classe. Ricorda che questo utilizzerà i parametri predefiniti.
Questo è solo un esempio di un rotatore di immagini e un buon modo per iniziare a creare la tua fantastica galleria di immagini.
Grazie per aver letto!
