Lag en QR Code Generator i Flash Bruke AS3

Create en QR Code Generator i Flash Bruke AS3
Del
Del
7
Del

Denne Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av

QR-koder er overalt i disse dager. Magasin-annonser, plakater, og med TV-reklamer. Sjansen er at du har en telefon i lommen som kan lese en QR-kode og dekode URL eller budskap som finnes. I denne opplæringen vil du lære hvordan du oppretter en SWF som kan reversere prosessen: opprette en QR-kode fra en URL eller melding. Les videre



Endelig resultat Forhåndsvisning

La oss ta en titt på det endelige programmet vi skal jobbe mot:



Trinn 1: Kort oversikt

Ved hjelp av pre-laget grafiske elementer vi vil skape god jakt grensesnitt som vil bli drevet av flere Actionscript 3 klasser.

Koden vil gjøre god bruk av en QR-kode Encoder klasse, laget av Jean . -Baptiste Pin



Trinn 2: Flash Dokumentinnstillinger

Åpne Flash og lage en 480 piksler bred, 480 piksler høy dokument. Sett Frame rate til 24fps




Trinn 3:. Interface


En fargerik fint utseende grensesnitt vil bli vist, innebærer dette flere . former, knapper og
mer enkle former ble opprettet ved hjelp av Flash Tegneverktøy så det vil ikke være nødvendig å inkludere deres skapelse



Trinn 4:. forekomstnavn Anmeldelser


Bildet over viser Forekomst Names
brukes i movieclips
. De som starter med en Capital Letter
er Bibliotek klasse navn
og bør ikke være på scenen



Trinn 5:. TweenNano


Vi vil bruke en annen tween-motoren fra standard inkludert i Flash, vil dette øke performace samt å være enklere å bruke.

Du kan laste ned TweenNano Anmeldelser fra sin offisielle hjemmeside



Trinn 6:. QR-kode Library


Vi vil gjøre bruk av en fantastisk QR-kode Encoder bibliotek som kan lastes ned herfra. Du kan lære mer om bruk av eksterne biblioteker i koden din med denne opplæringen

Red.anm:.. Bruk SWC-filen, ikke klasser i \\ org \\ mappe, for best resultat



Trinn 7: Sett hoved Class


Legg til klassenavnet til Class
feltet i Publiser
seksjon av Egenskaper
panel knytte FLA med hoveddokumentet klasse



Trinn 8:. opprette en ny Action Class


Opprett en ny (Cmd + N) Actionscript 3.0 Class og lagre den som Main.as
i klassen din mappe



Trinn 9:. Class Struktur

Lag din grunnleggende klassestrukturen for å begynne å skrive koden din
pakke {import flash.display.Sprite.; public class Hoved strekker Sprite {offentlig funksjon main (): void {//konstruktør kode}}}



Trinn 10: Må Classes

Dette er de klassene vi trenger å importere for vår klasse til å arbeide, import direktivet gjør eksternt definerte klasser og pakker tilgjengelig i koden
import flash.display.Sprite;. import flash.events.MouseEvent, import org.qrcode.QRCode, import flash.display.Bitmap; import com.greensock.TweenNano, import com.greensock.easing.Expo;



Trinn 11: Variabler

Dette er de variablene vi vil bruke, lese kommentarene i koden for å vite mer om dem, noen av navnene deres er selvforklarende, så det blir ingen kommentar der
privat Var textView. TextView; privat Var smsView: SMSView = new SMSView (); privat Var emailView: EmailView = new EmailView (); privat Div linkView: LinkView = new LinkView (); privat Var lastView: Sprite, private Var currentTarget: String; //aktuelle strengen til convertprivate Var qrImg: Bitmap;



Trinn 12: Constructor

Konstruktøren er en funksjon som kjøres når et objekt er opprettet fra en klasse, er den første til å utføre denne koden når du gjør en forekomst av et objekt eller kjører ved hjelp av Document Class.

Det kaller de nødvendige funksjoner for å starte programmet. Sjekk disse funksjonene i de neste trinnene
offentlig endelige funksjonen main (): void {addTextView ();. addListeners ();}



Trinn 13: Legg Tekstvisning

Den første funksjonen utført av konstruktøren. Det vil instantiate TextView og legge den til på scenen. Dette vil være standardvisningen som vil bli vist du starter applikasjonen. Det inkluderer et kall til å fjerne den synlige view (i tilfelle det er en) og utfører også en Tween som en detalj til grensesnittet
private endelige funksjon 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, alfa: 0, letthet: Expo}); lastView = textView;}



Trinn 14: SMS Vis

Denne koden håndterer SMSView posisjon og animasjon. Det kalles når kategorien SMS knappen trykkes
privat endelige funksjon 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, alfa: 0, letthet: Expo}); lastView = smsView;}



Trinn 15: E-post Vis

EmailView kode. Det vil plassere og animere dette synet på scenen
private endelige funksjon 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, alfa: 0, letthet: Expo}); lastView = emailView;}



Trinn 16:. Link Vis

Dette er den siste kategorien, fjerner det siste til synlig og legger LinkView til scenen
private endelige funksjon 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, alfa: 0, letthet: Expo}); lastView = linkView;}



Trinn 17:. Fjern Last View

Denne funksjonen fjerner den synlige utsikten fra scenen og frigjør det opp for søppelrydding
privat endelige funksjon removeLastView () : void {if (! lastView = null) {removeChild (lastView); lastView = null; }}



Trinn 18: Legg Lyttere

Den neste kode knytter knappene til sine respektive funksjoner. Dette vil gjøre det mulig fanen basert navigasjon
private endelige funksjons 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);}



Trinn 19: Indikator Handler

Indikator MovieClip er den lille pilen som viser den aktive fanen. Denne funksjonen plasserer den i riktig posisjon, og kaller kategorien funksjon
privat endelige funksjon indicatorHandler (e: MouseEvent):. Void {indicator.x = e.target.x; bryteren (e.target.name) {case 'abcBtn': addTextView (); gå i stykker; case 'smsBtn': addSMSView (); gå i stykker; case 'emailBtn': addEmailView (); gå i stykker; case 'linkBtn': addLinkView (); gå i stykker; standard: trace ("-knappen Names Error '); }}



Trinn 20: Refresh QR-kode

Denne funksjonen vil kjøre når Refresh-knappen trykkes, bestemmer den aktuelle strengen til å konvertere og QRObject kode () metode for å generere et bitmap som er neste legges til scenen
private endelige funksjon refreshCode (e: MouseEvent): void {switch (lastView) {case textView. currentTarget = textView.textTF.text; gå i stykker; case smsView: currentTarget = 'SMSTO:' + smsView.phoneTF.text + ':' + smsView.contentTF.text; gå i stykker; case emailView: currentTarget = 'SMTP:' + emailView.toTF.text + ':' + emailView.subjectTF.text + ':' + emailView.bodyTF.text; gå i stykker; case linkView: currentTarget = linkView.linkTF.text; if (currentTarget.indexOf (': //') == -1) {currentTarget = 'http: //' + currentTarget; //automatisk legge http: //til forsiden av linker hvis nødvendig} break; standard: 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, {alfa: 0, letthet: Expo});}



Konklusjon

Bruk dette programmet til å generere egendefinerte QR-koder og husk å utforske kildefilene.

Jeg håper du likte denne opplæringen, takk for lesing!