Share
I codici QR sono ovunque in questi giorni: pubblicità su riviste, cartelloni pubblicitari, persino spot televisivi. È probabile che tu abbia un telefono in tasca che può leggere un codice QR e decodificare l'URL o il messaggio contenuto all'interno. In questo tutorial imparerai come creare un file SWF in grado di invertire la procedura: crea un codice QR da un URL o un messaggio. Continuare a leggere!
Diamo un'occhiata all'app finale su cui lavoreremo:
Usando elementi grafici pre-creati creeremo un'interfaccia piacevole che sarà alimentata da diverse classi ActionScript 3.
Il codice farà buon uso di una classe Encoder QR Code, creata da Jean-Baptiste Pin.
Apri Flash e crea un documento di 480 pixel di larghezza e 480 pixel di altezza. Imposta la frequenza dei fotogrammi su 24 fps.
Verrà visualizzata un'interfaccia dall'aspetto colorato, che include più forme, pulsanti e altro.
Le forme semplici sono state create utilizzando gli strumenti di disegno di Flash, quindi non sarà necessario includerne la creazione.
L'immagine sopra mostra il Nomi di istanza usato nel MovieClip. Quelli che iniziano con a Lettera maiuscola siamo Nomi di classi di libreria e non dovrebbe essere sul palco.
Useremo un motore di interpolazione diverso dal predefinito incluso in Flash, questo aumenterà le prestazioni oltre ad essere più facile da usare.
Puoi scaricare TweenNano dal suo sito ufficiale.
Faremo uso di una fantastica libreria di codici a codice QR che può essere scaricata da qui. Con questo tutorial puoi imparare di più sull'uso di librerie esterne nel tuo codice.
Nota del redattore: per ottenere i migliori risultati, utilizzare il file SWC, non le classi nella cartella \ org \.
Aggiungi il nome della classe al Classe campo nel Pubblicare sezione del Proprietà pannello per associare il FLA alla classe del documento principale.
Creare una nuova classe ActionScript 3.0 (Cmd + N) e salvarla come Main.as nella tua cartella di classe.
Crea la tua struttura di base per iniziare a scrivere il tuo codice.
pacchetto import flash.display.Sprite; public class Main estende Sprite public function Main (): void // constructor code
Queste sono le classi che dovremo importare affinché la nostra classe funzioni, il importare direttiva rende disponibili classi e pacchetti definiti esternamente al codice.
import flash.display.Sprite; import flash.events.MouseEvent; importare org.qrcode.QRCode; import flash.display.Bitmap; import com.greensock.TweenNano; import com.greensock.easing.Expo;
Queste sono le variabili che useremo, leggere i commenti nel codice per saperne di più su di loro, alcuni dei loro nomi sono auto spieganti quindi non ci sarà alcun commento lì.
private var textView: TextView; private var smsView: SMSView = new SMSView (); private var emailView: EmailView = new EmailView (); private var linkView: LinkView = new LinkView (); private var lastView: Sprite; private var currentTarget: String; // stringa corrente per convertire private var qrImg: Bitmap;
Il costruttore è una funzione che viene eseguita quando viene creato un oggetto da una classe, questo codice è il primo ad essere eseguito quando si crea un'istanza di un oggetto o viene eseguita utilizzando la classe documento.
Chiama le funzioni necessarie per avviare l'app. Controlla quelle funzioni nei passaggi successivi.
funzione public final Main (): void addTextView (); addListeners ();
La prima funzione eseguita dal costruttore. Istanzia il TextView e lo aggiunge allo stage. Questa sarà la vista predefinita che verrà mostrata all'avvio dell'applicazione. Include una chiamata per rimuovere la vista attualmente visibile (nel caso ce ne sia una) e inoltre esegue un Tween come dettaglio dell'interfaccia.
funzione finale privata addTextView (): void removeLastView (); textView = new TextView (); textView.x = stage.stageWidth * 0.5; textView.y = 110; addChild (textView); TweenNano.from (textView, 0.5, y: textView.y - 10, alpha: 0, facilità: Expo); lastView = textView;
Questo codice gestisce la posizione e l'animazione di SMSView. Viene chiamato quando viene premuto il tasto del tasto SMS.
funzione finale privata addSMSView (): void removeLastView (); smsView = new SMSView (); smsView.x = stage.stageWidth * 0.5; smsView.y = 150; addChild (SMSVIEW); TweenNano.from (smsView, 0.5, y: smsView.y - 10, alpha: 0, facilità: Expo); lastView = smsView;
Il codice EmailView. Posizionerà e animerà questa vista sul palco.
funzione finale privata addEmailView (): void removeLastView (); emailView = new EmailView (); emailView.x = stage.stageWidth * 0.5; emailView.y = 155; addChild (emailView); TweenNano.from (emailView, 0.5, y: emailView.y - 10, alpha: 0, facilità: Expo); lastView = emailView;
Questa è la scheda finale, rimuove l'ultima vista visibile e aggiunge il LinkView allo stage.
funzione finale privata addLinkView (): void removeLastView (); linkView = new LinkView (); linkView.x = stage.stageWidth * 0.5; linkView.y = 110; addChild (LinkView); TweenNano.from (linkView, 0.5, y: linkView.y - 10, alpha: 0, facilità: Expo); lastView = linkView;
Questa funzione rimuove la vista attualmente visibile dallo stage e la libera per la garbage collection.
funzione finale privata removeLastView (): void if (lastView! = null) removeChild (lastView); lastView = null;
Il prossimo codice collega i pulsanti alle funzioni corrispondenti. Ciò abiliterà la navigazione basata su schede.
funzione finale privata addListeners (): void abcBtn.addEventListener (MouseEvent.MOUSE_UP, indicatorHandler); smsBtn.addEventListener (MouseEvent.MOUSE_UP, indicatorHandler); emailBtn.addEventListener (MouseEvent.MOUSE_UP, indicatorHandler); linkBtn.addEventListener (MouseEvent.MOUSE_UP, indicatorHandler); refreshBtn.addEventListener (MouseEvent.MOUSE_UP, refreshCode);
L'Indicatore MovieClip è la piccola freccia che mostra la scheda attiva. Questa funzione la colloca nella posizione corretta e chiama la funzione di tabulazione.
Accentsconagua
private final function indicatorHandler (e: MouseEvent): void indicator.x = e.target.x; switch (e.target.name) case 'abcBtn': addTextView (); rompere; case 'smsBtn': addSMSView (); rompere; case 'emailBtn': addEmailView (); rompere; case 'linkBtn': addLinkView (); rompere; default: trace ('Errore nomi pulsanti'); Questa funzione verrà eseguita quando si preme il pulsante Aggiorna, si determina la stringa corrente da convertire e il QRObject codificare() metodo per generare una bitmap che viene successivamente aggiunta allo stage.
funzione finale privata refreshCode (e: MouseEvent): void switch (lastView) case textView: currentTarget = textView.textTF.text; rompere; case smsView: currentTarget = 'SMSTO:' + smsView.phoneTF.text + ':' + smsView.contentTF.text; rompere; case emailView: currentTarget = 'SMTP:' + emailView.toTF.text + ':' + emailView.subjectTF.text + ':' + emailView.bodyTF.text; rompere; case linkView: currentTarget = linkView.linkTF.text; if (currentTarget.indexOf (': //') == -1) currentTarget = 'http: //' + currentTarget; // aggiunge automaticamente http: // alla parte anteriore dei collegamenti se richiesto break; default: trace ('Target Error'); if (qrImg! = null) removeChild (qrImg); qrImg = null; var qrObj: QRCode = new QRCode (); qrObj.encode (currentTarget); qrImg = new Bitmap (qrObj.bitmapData); qrImg.x = stage.stageWidth * 0.5 - (qrImg.width * 0.5); qrImg.y = 300 - (qrImg.height * 0.5); addChild (qrImg); TweenNano.from (qrImg, 1, alpha: 0, ease: Expo); Usa questa applicazione per generare i tuoi codici QR personalizzati e ricorda di esplorare i file sorgente.
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
