Share
Les codes QR sont omniprésents de nos jours: publicités dans les magazines, panneaux d’affichage, voire publicités télévisées. Vous avez probablement un téléphone dans votre poche qui peut lire un code QR et décoder l'URL ou le message qu'il contient. Dans ce didacticiel, vous apprendrez à créer un fichier SWF pouvant inverser le processus: créez un code QR à partir d'une URL ou d'un message. Continuer à lire!
Jetons un coup d'œil à l'application finale sur laquelle nous allons travailler:
En utilisant des éléments graphiques prédéfinis, nous allons créer une interface attrayante qui sera alimentée par plusieurs classes ActionScript 3.
Le code utilisera une classe de codeurs QR Code créée par Jean-Baptiste Pin..
Ouvrez Flash et créez un document de 480 pixels de large et 480 pixels de large. Définir le taux de trame à 24fps.
Une belle interface colorée sera affichée, cela implique plusieurs formes, boutons et plus.
Les formes simples ont été créées à l'aide des outils de dessin Flash. Il n'est donc pas nécessaire d'inclure leur création..
L'image ci-dessus montre la Noms d'instance utilisé dans le MovieClips. Ceux qui commencent par un Lettre capitale sont Noms de classe de la bibliothèque et ne devrait pas être sur scène.
Nous utiliserons un moteur d'interpolation différent de celui par défaut inclus dans Flash, ce qui augmentera les performances et sera plus facile à utiliser..
Vous pouvez télécharger TweenNano depuis son site officiel.
Nous utiliserons une fantastique bibliothèque QR Code Encoder, téléchargeable ici. Vous pouvez en savoir plus sur l'utilisation de bibliothèques externes dans votre code avec ce tutoriel..
Note de la rédaction: utilisez le fichier SWC, et non les classes du dossier \ org \, pour obtenir de meilleurs résultats..
Ajoutez le nom de la classe à la Classe champ dans le Publier section de la Propriétés panneau pour associer la FLA à la classe de document Main.
Créez une nouvelle classe ActionScript 3.0 (Cmd + N) et enregistrez-la sous Main.as dans votre dossier de classe.
Créez votre structure de classe de base pour commencer à écrire votre code.
package import flash.display.Sprite; classe publique Main étend Sprite fonction publique Main (): void // code constructeur
Ce sont les classes que nous devons importer pour que notre classe fonctionne, le importation directive met à la disposition de votre code des classes et des packages définis en externe.
import flash.display.Sprite; import flash.events.MouseEvent; importer org.qrcode.QRCode; import flash.display.Bitmap; import com.greensock.TweenNano; importer com.greensock.easing.Expo;
Ce sont les variables que nous allons utiliser, lisez les commentaires dans le code pour en savoir plus à leur sujet, certains de leurs noms s’expliquent d'eux-mêmes, il n'y aura donc pas de commentaire.
private var textView: TextView; var privé smsView: SMSView = new SMSView (); var privé emailView: EmailView = new EmailView (); var privé linkView: LinkView = new LinkView (); private var lastView: Sprite; private var currentTarget: String; // chaîne en cours de conversion de la variable privée qrImg: Bitmap;
Le constructeur est une fonction qui s'exécute lorsqu'un objet est créé à partir d'une classe. Ce code est le premier à s'exécuter lorsque vous créez une instance d'un objet ou que vous l'exécutez à l'aide de la classe de document..
Il appelle les fonctions nécessaires pour démarrer l'application. Vérifiez ces fonctions dans les prochaines étapes.
fonction finale publique Main (): void addTextView (); addListeners ();
La première fonction exécutée par le constructeur. Il va instancier le TextView et l'ajouter à la scène. Ce sera la vue par défaut qui sera affichée à partir de l'application. Il inclut un appel pour supprimer la vue actuellement visible (le cas échéant) et effectue également une interpolation en tant que détail de l'interface..
fonction finale privée 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;
Ce code gère la position et l'animation de SMSView. Il est appelé lorsque vous appuyez sur l'onglet du bouton SMS..
fonction finale privée 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;
Le code EmailView. Il placera et animera cette vue sur la scène.
fonction finale privée 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;
Ceci est le dernier onglet, il supprime la dernière vue visible et ajoute le LinkView à la scène.
fonction finale privée 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;
Cette fonction supprime la vue actuellement visible de la scène et la libère pour le nettoyage de la mémoire..
fonction finale privée removeLastView (): void if (lastView! = null) removeChild (lastView); lastView = null;
Le code suivant relie les boutons aux fonctions correspondantes. Cela permettra la navigation par onglet.
fonction finale privée addListeners (): void abcBtn.addEventListener (MouseEvent.MOUSE_UP, indicatorHandler); smsBtn.addEventListener (MouseEvent.MOUSE_UP, indicateurHandler); emailBtn.addEventListener (MouseEvent.MOUSE_UP, indicateurHandler); linkBtn.addEventListener (MouseEvent.MOUSE_UP, indicateurHandler); refreshBtn.addEventListener (MouseEvent.MOUSE_UP, refreshCode);
L'indicateur MovieClip est la petite flèche qui montre l'onglet actif. Cette fonction le place dans la bonne position et appelle la fonction de tabulation.
Accentsconagua
fonction finale privée indicateurHandler (e: MouseEvent): void indicateur.x = e.target.x; commutateur (e.target.name) case 'abcBtn': addTextView (); Pause; case 'smsBtn': addSMSView (); Pause; case 'emailBtn': addEmailView (); Pause; case 'linkBtn': addLinkView (); Pause; défaut: trace ('Button Names Error'); Cette fonction sera exécutée lorsque le bouton Actualiser sera enfoncé, elle déterminera la chaîne actuelle à convertir et le QRObject. encoder() méthode pour générer un bitmap qui est ensuite ajouté à la scène.
fonction finale privée refreshCode (e: MouseEvent): void commutateur (lastView) case textView: currentTarget = textView.textTF.text; Pause; case smsView: currentTarget = 'SMSTO:' + smsView.phoneTF.text + ':' + smsView.contentTF.text; Pause; case emailView: currentTarget = 'SMTP:' + emailView.toTF.text + ':' + emailView.subjectTF.text + ':' + 'emailView.bodyTF.text; Pause; case linkView: currentTarget = linkView.linkTF.text; if (currentTarget.indexOf (': //') == -1) currentTarget = 'http: //' + currentTarget; // ajoute automatiquement http: // au début des liens si nécessaire break; défaut: trace ('Erreur de cible'); 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, facilité: Expo); Utilisez cette application pour générer vos codes QR personnalisés et n'oubliez pas d'explorer les fichiers source.
J'espère que vous avez aimé ce tutoriel, merci d'avoir lu!
