QR codes are everywhere these days: magazine advertisements, billboards, even TV commercials. Chances are you have a phone in your pocket that can read a QR code and decode the URL or message contained within. In this tutorial, you'll learn how to create a SWF that can reverse the process: create a QR code from a URL or message. Read on!
Final Result Preview
Let's take a look at the final app we will be working towards:
Step 1: Brief Overview
Using pre-made graphic elements we'll create good looking interface that will be powered by several ActionScript 3 classes.
The code will make good use of a QR Code Encoder class, created by Jean-Baptiste Pin.
Step 2: Flash Document Settings
Open Flash and create a 480 pixels wide, 480 pixels tall document. Set the Frame rate to 24fps.
Step 3: Interface
A colorful nice looking interface will be displayed, this involves multiple shapes, buttons and more.
Simple shapes were created using the Flash Drawing Tools so it won't be necessary to include their creation.
Step 4: Instance Names
The image above shows the Instance Names used in the MovieClips. The ones that start with a Capital Letter are Library Class Names and should not be on stage.
Step 5: TweenNano
We'll use a different tween engine from the default included in Flash, this will increase performace as well as being easier to use.
You can download TweenNano from its official website.
Step 6: QR Code Library
We'll make use of a fantastic QR Code Encoder library which can be downloaded from here. You can learn more about using external libraries in your code with this tutorial.
Editor's note: Use the SWC file, not the classes in the \org\ folder, for best results.
Step 7: Set Main Class
Add the class name to the Class field in the Publish section of the Properties panel to associate the FLA with the Main document class.
Step 8: Create a New ActionScript Class
Create a new (Cmd + N) ActionScript 3.0 Class and save it as Main.as in your class folder.
Step 9: Class Structure
Create your basic class structure to begin writing your code.
package { import flash.display.Sprite; public class Main extends Sprite { public function Main():void { // constructor code } } }
Step 10: Required Classes
These are the classes we'll need to import for our class to work, the import
directive makes externally defined classes and packages available to your 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;
Step 11: Variables
These are the variables we'll use, read the comments in the code to know more about them, some of their names are self explaining so there will be no comment there.
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; //current string to convert private var qrImg:Bitmap;
Step 12: Constructor
The constructor is a function that runs when an object is created from a class, this code is the first to execute when you make an instance of an object or runs using the Document Class.
It calls the necessary functions to start the app. Check those functions in the next steps.
public final function Main():void { addTextView(); addListeners(); }
Step 13: Add Text View
The first function executed by the constructor. It will instantiate the TextView and add it to the stage. This will be the default view that will be shown starting the application. It includes a call to remove the currently visible view (in case there's one) and also performs a Tween as a detail to the interface.
private final function 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; }
Step 14: SMS View
This code handles the SMSView position and animation. It is called when the SMS button tab is pressed.
private final function 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, ease:Expo}); lastView = smsView; }
Step 15: Email View
The EmailView code. It will place and animate this view on the stage.
private final function 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, ease:Expo}); lastView = emailView; }
Step 16: Link View
This is the final tab, it removes the last visible view and adds the LinkView to the stage.
private final function 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, ease:Expo}); lastView = linkView; }
Step 17: Remove Last View
This function removes the currently visible view from the stage and frees it up for garbage collection.
private final function removeLastView():void { if(lastView != null) { removeChild(lastView); lastView = null; } }
Step 18: Add Listeners
The next code links the buttons to their corresponding functions. This will enable the tab based navigation.
private final function 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); }
Step 19: Indicator Handler
The Indicator MovieClip is the little arrow that shows the active tab. This function places it in the correct position and calls the tab function.
private final function indicatorHandler(e:MouseEvent):void { indicator.x = e.target.x; switch(e.target.name) { case 'abcBtn': addTextView(); break; case 'smsBtn': addSMSView(); break; case 'emailBtn': addEmailView(); break; case 'linkBtn': addLinkView(); break; default: trace('Button Names Error'); } }
Step 20: Refresh QR Code
This function will run when the Refresh button is pressed, it determines the current string to convert and the QRObject encode()
method to generate a bitmap that is next added to the stage.
private final function refreshCode(e:MouseEvent):void { switch(lastView) { case textView: currentTarget = textView.textTF.text; break; case smsView: currentTarget = 'SMSTO:' + smsView.phoneTF.text + ':' + smsView.contentTF.text; break; case emailView: currentTarget = 'SMTP:' + emailView.toTF.text + ':' + emailView.subjectTF.text + ':' + emailView.bodyTF.text; break; case linkView: currentTarget = linkView.linkTF.text; if (currentTarget.indexOf('://') == -1) { currentTarget = 'http://' + currentTarget; //automatically add http:// to the front of links if required } 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}); }
Conclusion
Use this application to generate your custom QR Codes and remember to explore the source files.
I hope you liked this tutorial, thank you for reading!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post