Hot File

How to Create a QR Code Generator in Flash Using AS3

View: 667    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: Flash template, Flash game   Fields: Other

9 point/3 review File has been tested

Using pre-made graphic elements we'll create good looking interface that will be powered by several ActionScript 3 classes.

Introduction

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.

Open Flash and create a 480 pixels wide, 480 pixels tall document. Set the Frame rate to 24fps.

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.

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.

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.

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.

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.

Create a new (Cmd + N) ActionScript 3.0 Class and save it as Main.as in your class folder.

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
        }
    }
}

These are the classes we'll need to import for our class to work, the importdirective 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;

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;

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();
}

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;
}

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;
}

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;
}

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;
}

This function removes the currently visible view from the stage and frees it up forgarbage collection.

private final function removeLastView():void
{
    if(lastView != null)
    {
        removeChild(lastView);
        lastView = null;
    }
}

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);
}

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');
    }
}

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});
}

 

 
 

How to Create a QR Code Generator in Flash Using AS3

How to Create a QR Code Generator in Flash Using AS3 Posted on 14-01-2016  Using pre-made graphic elements we'll create good looking interface that will be powered by several ActionScript 3 classes. 3/10 667

Comment:

To comment you must be logged in members.

Files with category

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd