Share
QR-codes zijn tegenwoordig overal: tijdschriftadvertenties, billboards en zelfs tv-commercials. De kans is groot dat je een telefoon in je zak hebt die een QR-code kan lezen en de URL of het bericht kan ontcijferen. In deze zelfstudie leert u hoe u een SWF kunt maken die het proces kan omkeren: maak een QR-code van een URL of bericht. Lees verder!
Laten we eens kijken naar de laatste app waar we naartoe zullen werken:
Met behulp van vooraf gemaakte grafische elementen creëren we een goed uitziende interface die wordt aangedreven door verschillende ActionScript 3-klassen.
De code maakt goed gebruik van een QR Code Encoder-klasse, gemaakt door Jean-Baptiste Pin.
Open Flash en maak een 480 pixels breed, 480 pixels lang document. Stel de beeldsnelheid in op 24 fps.
Er wordt een kleurrijke, mooi uitziende interface weergegeven, met meerdere vormen, knoppen en meer.
Eenvoudige vormen zijn gemaakt met behulp van de Flash Drawing Tools, zodat het niet nodig is om hun creatie op te nemen.
De afbeelding hierboven toont de Namen van exemplaren gebruikt in de MovieClips. Degenen die met een beginnen Hoofdletter zijn Bibliotheek Class Namen en zou niet op het podium moeten staan.
We gebruiken een andere tween-engine dan de standaard die is opgenomen in Flash, dit verhoogt de prestaties en is gemakkelijker te gebruiken.
Je kan downloaden TweenNano van zijn officiële website.
We maken gebruik van een fantastische QR Code Encoder-bibliotheek die u hier kunt downloaden. In deze zelfstudie leert u meer over het gebruik van externe bibliotheken in uw code.
Noot van de redactie: gebruik het SWC-bestand, niet de klassen in de map \ org \ voor de beste resultaten.
Voeg de klassenaam toe aan de Klasse veld in de Publiceren deel van de eigenschappen panel om de FLA te koppelen aan de hoofddocumentklasse.
Maak een nieuwe ActionScript 3.0-klasse (Cmd + N) en sla deze op als Main.as in je klasmap.
Maak uw standaard klassenstructuur om te beginnen met het schrijven van uw code.
pakket import flash.display.Sprite; public class Hoofd breidt uit openbare functie Main (): void // constructor code
Dit zijn de klassen die we moeten importeren voor onze klas om te werken, de importeren richtlijn maakt extern gedefinieerde klassen en pakketten beschikbaar voor uw code.
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;
Dit zijn de variabelen die we zullen gebruiken, lees de opmerkingen in de code om meer over hen te weten, sommige van hun namen verklaren zichzelf, dus daar zal geen commentaar zijn.
private var textView: TextView; private var smsView: SMSView = new SMSView (); private var emailView: EmailView = nieuwe EmailView (); private var linkView: LinkView = new LinkView (); private var lastView: Sprite; private var currentTarget: String; // huidige tekenreeks om privé-var te converteren qrImg: Bitmap;
De constructor is een functie die wordt uitgevoerd wanneer een object wordt gemaakt op basis van een klasse, deze code is de eerste die wordt uitgevoerd wanneer u een exemplaar van een object maakt of wordt uitgevoerd met behulp van de documentklasse.
Het roept de nodige functies op om de app te starten. Controleer die functies in de volgende stappen.
public final function Main (): void addTextView (); addListeners ();
De eerste functie die door de constructor wordt uitgevoerd. Hiermee wordt de TextView geïnstantieerd en aan het werkgebied toegevoegd. Dit is de standaardweergave die wordt weergegeven vanaf het moment dat de toepassing wordt gestart. Het bevat een oproep om de momenteel zichtbare weergave te verwijderen (in geval er een is) en voert ook een Tween uit als een detail van de interface.
private finale functie 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, ease: Expo); lastView = textView;
Deze code behandelt de SMSView-positie en -animatie. Het wordt opgeroepen wanneer op het tabblad SMS-knop wordt gedrukt.
private finale functie addSMSView (): void removeLastView (); smsView = nieuwe SMSView (); smsView.x = stage.stageWidth * 0.5; smsView.y = 150; addChild (smsView); TweenNano.from (smsView, 0,5, y: smsView.y - 10, alpha: 0, ease: Expo); lastView = smsView;
De EmailView-code. Het plaatst en animeert deze weergave op het podium.
private finale functie addEmailView (): void removeLastView (); emailView = nieuwe EmailView (); emailView.x = stage.stageWidth * 0.5; emailView.y = 155; addChild (emailview); TweenNano.from (emailView, 0.5, y: emailView.y - 10, alpha: 0, ease: Expo); lastView = emailView;
Dit is het laatste tabblad, het verwijdert de laatste zichtbare weergave en voegt de LinkView toe aan het werkgebied.
private finale functie addLinkView (): void removeLastView (); linkView = nieuwe LinkView (); linkView.x = stage.stageWidth * 0.5; linkView.y = 110; addChild (linkView); TweenNano.from (linkView, 0.5, y: linkView.y - 10, alpha: 0, ease: Expo); lastView = linkView;
Deze functie verwijdert de momenteel zichtbare weergave van het werkgebied en maakt deze vrij voor garbagecollection.
private finale functie removeLastView (): void if (lastView! = null) removeChild (lastView); lastView = null;
De volgende code koppelt de knoppen aan hun overeenkomstige functies. Hiermee wordt de op tabbladen gebaseerde navigatie ingeschakeld.
private finale functie 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);
De indicator MovieClip is de kleine pijl die het actieve tabblad toont. Deze functie plaatst deze in de juiste positie en roept de tab-functie aan.
Accentsconagua
private laatste functie indicatorHandler (e: MouseEvent): void indicator.x = e.target.x; switch (e.target.name) case 'abcBtn': addTextView (); breken; case 'smsBtn': addSMSView (); breken; case 'emailBtn': addEmailView (); breken; case 'linkBtn': addLinkView (); breken; standaard: trace ('Button Names Error'); Deze functie wordt uitgevoerd wanneer de knop Vernieuwen wordt ingedrukt, deze bepaalt de huidige tekenreeks die moet worden geconverteerd en het QRObject coderen() methode om een bitmap te genereren die vervolgens aan de stage wordt toegevoegd.
private laatste functie refreshCode (e: MouseEvent): void switch (lastView) case textView: currentTarget = textView.textTF.text; breken; case smsView: currentTarget = 'SMSTO:' + smsView.phoneTF.text + ':' + smsView.contentTF.text; breken; case emailView: currentTarget = 'SMTP:' + emailView.toTF.text + ':' + emailView.subjectTF.text + ':' + emailView.bodyTF.text; breken; case linkView: currentTarget = linkView.linkTF.text; if (currentTarget.indexOf (': //') == -1) currentTarget = 'http: //' + currentTarget; // automatisch http: // aan de kop van de links toevoegen indien nodig pauze; standaard: trace ('Target Error'); if (qrImg! = null) removeChild (qrImg); qrImg = null; var qrObj: QRCode = nieuwe QRCode (); qrObj.encode (currentTarget); qrImg = nieuwe 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); Gebruik deze applicatie om uw aangepaste QR-codes te genereren en vergeet niet om de bronbestanden te verkennen.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
