Create a QR Code Generator in Flash Using AS3

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!