ActionScript Virtual Keyboard Calculator

 

 

Part One

This is my first attempt at creating a virtual keyboard calculator. I got the script for the calculations from TUTVID, and added the number pads myself. As you can see below you have to add a different function to every button and direct the button to output to a specific text box.

I placed all the numbers inside movie clips (keyPad and keyPad2). Each keypad is assigned a textfield for output. In the next version I will attempt to use both keypads and textfields with only one visible at a time. Hope this get some of you started on creating your own virtual keyboards.

 

import flash.text.TextField;
import flash.events.TextEvent;
import flash.events.MouseEvent;

stage.focus = numBox;
addBtn.addEventListener(MouseEvent.CLICK, plusClick);
subBtn.addEventListener(MouseEvent.CLICK, subClick);
mulBtn.addEventListener(MouseEvent.CLICK, multClick);
divBtn.addEventListener(MouseEvent.CLICK, divClick);
equalBtn.addEventListener(MouseEvent.CLICK, equClick);
clearBtn.addEventListener(MouseEvent.CLICK, clearAll);

var plusSym:Boolean = false;
var subSym:Boolean = false;
var multSym:Boolean = false;
var divSym:Boolean = false;
numBox.restrict = "0-9";
numBox2.restrict = "0-9";

//KEYPAD 1
keyPad.num1.addEventListener(MouseEvent.CLICK, postNum1);
function postNum1(Event:MouseEvent):void{
numBox.text += "1";
}
keyPad.num2.addEventListener(MouseEvent.CLICK, postNum2);
function postNum2(Event:MouseEvent):void{
numBox.text += "2";
}
keyPad.num3.addEventListener(MouseEvent.CLICK, postNum3);
function postNum3(Event:MouseEvent):void{
numBox.text += "3";
}
keyPad.num4.addEventListener(MouseEvent.CLICK, postNum4);
function postNum4(Event:MouseEvent):void{
numBox.text += "4";
}
keyPad.num5.addEventListener(MouseEvent.CLICK, postNum5);
function postNum5(Event:MouseEvent):void{
numBox.text += "5";
}
keyPad.num6.addEventListener(MouseEvent.CLICK, postNum6);
function postNum6(Event:MouseEvent):void{
numBox.text += "6";
}
keyPad.num7.addEventListener(MouseEvent.CLICK, postNum7);
function postNum7(Event:MouseEvent):void{
numBox.text += "7";
}
keyPad.num8.addEventListener(MouseEvent.CLICK, postNum8);
function postNum8(Event:MouseEvent):void{
numBox.text += "8";
}
keyPad.num9.addEventListener(MouseEvent.CLICK, postNum9);
function postNum9(Event:MouseEvent):void{
numBox.text += "9";
}
keyPad.num0.addEventListener(MouseEvent.CLICK, postNum0);
function postNum0(Event:MouseEvent):void{
numBox.text += "0";
}
//KEYPAD 2
keyPad2.num1.addEventListener(MouseEvent.CLICK, postNum21);
function postNum21(Event:MouseEvent):void{
numBox2.text += "1";
}
keyPad2.num2.addEventListener(MouseEvent.CLICK, postNum22);
function postNum22(Event:MouseEvent):void{
numBox2.text += "2";
}
keyPad2.num3.addEventListener(MouseEvent.CLICK, postNum23);
function postNum23(Event:MouseEvent):void{
numBox2.text += "3";
}
keyPad2.num4.addEventListener(MouseEvent.CLICK, postNum24);
function postNum24(Event:MouseEvent):void{
numBox2.text += "4";
}
keyPad2.num5.addEventListener(MouseEvent.CLICK, postNum25);
function postNum25(Event:MouseEvent):void{
numBox2.text += "5";
}
keyPad2.num6.addEventListener(MouseEvent.CLICK, postNum26);
function postNum26(Event:MouseEvent):void{
numBox2.text += "6";
}
keyPad2.num7.addEventListener(MouseEvent.CLICK, postNum27);
function postNum27(Event:MouseEvent):void{
numBox2.text += "7";
}
keyPad2.num8.addEventListener(MouseEvent.CLICK, postNum28);
function postNum28(Event:MouseEvent):void{
numBox2.text += "8";
}
keyPad2.num9.addEventListener(MouseEvent.CLICK, postNum29);
function postNum29(Event:MouseEvent):void{
numBox2.text += "9";
}
keyPad2.num0.addEventListener(MouseEvent.CLICK, postNum20);
function postNum20(Event:MouseEvent):void{
numBox2.text += "0";
}

//CALCULATIONS

function plusClick(event:MouseEvent):void
{
plusSym = true;
subSym = false;
multSym = false;
divSym = false;
symTxt.text = "+";
stage.focus = numBox2;
}
function subClick(event:MouseEvent):void
{
plusSym = false;
subSym = true;
multSym = false;
divSym = false;
symTxt.text = "-";
stage.focus = numBox2;
}
function multClick(event:MouseEvent):void
{
plusSym = false;
subSym = false;
multSym = true;
divSym = false;
symTxt.text = "x";
stage.focus = numBox2;
}
function divClick(event:MouseEvent):void
{
plusSym = false;
subSym = false;
multSym = false;
divSym = true;
symTxt.text = "/";
stage.focus = numBox2;
}

var input1:String;
var input2:String;
var plusRes:Number;
var subRes:Number;
var divRes:Number;
var multRes:Number;

function equClick(event:MouseEvent):void
{
input1 = numBox.text;
input2 = numBox2.text;
if (plusSym == true)
{
plusRes = parseInt(input1) + parseInt(input2);
plusRes.toString();
resultsTxt.text = String(plusRes);
}
else if (subSym==true)
{
subRes = parseInt(input1) - parseInt(input2);
subRes.toString();
resultsTxt.text = String(subRes);
}
else if (multSym==true)
{
multRes = parseInt(input1) * parseInt(input2);
multRes.toString();
resultsTxt.text = String(multRes);
}
else if (divSym==true)
{
divRes = parseInt(input1) / parseInt(input2);
divRes.toString();
resultsTxt.text = String(divRes);
}
}
function clearAll(event:MouseEvent):void
{
numBox.text = "";
numBox2.text = "";
resultsTxt.text = "";
symTxt.text = "";
stage.focus = numBox;

}

Launch SWF in Full Screen with ActionScript

 

 

Add Full Screen with publishing settings

When changing the publishing settings to allow your SWF to launch in full screen you first have to change the publishing setting under the HTML tag.

Adding a click handlers

You can also add full screen capabilities to a SWF file without publishing an HTML page by adding code to the

The <object> tag: <param name="allowFullScreen" value="true" /> and
The <embed> tag: allowfullscreen="true"

You must also add ActionScript to allow full screen by using buttons or the stage.

Using buttons to launch Full Screen

fullBtn.addEventListener(MouseEvent.CLICK, goFull);
function goFull(event:MouseEvent):void{
stage.displayState = StageDisplayState.FULL_SCREEN;
}
escapeBtn.addEventListener(MouseEvent.CLICK, goSmall);
function goSmall(event:MouseEvent):void{
stage.displayState = StageDisplayState.NORMAL;
}

Using the Stage to launch Full Screen

import flash.display.StageDisplayState;
function goFullScreen():void
{
if (stage.displayState == StageDisplayState.NORMAL)
{
stage.displayState = StageDisplayState.FULL_SCREEN;
}
else
{
stage.displayState = StageDisplayState.NORMAL;
}
}
stage.addEventListener(MouseEvent.CLICK, _handleClick);
function _handleClick(event:MouseEvent):void
{
goFullScreen();
}

If the SWF file is already published, changing the HTML <embed> and <param> tags will not allow full screen.

ActionScript 3 Basic Mouse Events

Click on the SWF or move the mouse to activate the text.

The code below shows how the text in a dynamic text field responds to the user moving and clicking with the mouse.

• //Make a dynamic text field named mouse_events  
• //The stage will listen for each event and display the related text.  
•   
• stage.addEventListener(MouseEvent.MOUSE_DOWN, mouse_down);   
• stage.addEventListener(MouseEvent.MOUSE_UP, mouse_up);   
• stage.addEventListener(MouseEvent.MOUSE_MOVE, moving);  
• stage.addEventListener(MouseEvent.MOUSE_OUT, leave);  
•   
• function moving(event:MouseEvent)   
• {   
•     mouse_events.text = "Your mouse is moving";  
• }   
• function mouse_down(event:MouseEvent)   
• {   
•     mouse_events.text = "The mouse button is down";  
• }   
• function mouse_up(event:MouseEvent)   
• {   
•     mouse_events.text = "Mouse button is up again";  
• }
• function leave(event:MouseEvent)   
• {   
•     mouse_events.text = ""; //No text  
• }

CLICK : MouseEvent.CLICK
Used to detect mouse clicks.

DOUBLE_CLICK : MouseEvent.DOUBLE_CLICK
Used to detect double clicks.

MOUSE_DOWN : MouseEvent.MOUSE_DOWN
Checks when mouse is pressed down.

MOUSE_LEAVE : MouseEvent.MOUSE_LEAVE
Monitors when the mouse leaves the stage.

MOUSE_MOVE : MouseEvent.MOUSE_MOVE
Monitors when the mouse moves.

MOUSE_OUT : MouseEvent.MOUSE_OUT
Monitors when the mouse moves out of the attached to object of the event.

MOUSE_OVER : MouseEvent.MOUSE_OVER
Monitors when the mouse moves over the attached to object of the event.

MOUSE_UP : MouseEvent.MOUSE_UP
Monitors when the mouse moves up the attached to object of the event from a click.

MOUSE_WHEEL : MouseEvent.MOUSE_WHEEL
Monitors when the mouse wheel moves, detect the positive or negative delta property for distance and direction moved.

ROLL_OUT : MouseEvent.ROLL_OUT
Dispatched when the user moves a pointing device away from an InteractiveObject instance.

Make A Movie Clip Follow Mouse Clicks Using ActionScript 3

Click on the stage and the ball will follow the mouse click.

The Code

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

var xMovement:Tween;
var yMovement:Tween;

function Start():void
{
stage.addEventListener(MouseEvent.CLICK, moveToClick);
}

function moveToClick(event:MouseEvent):void
{

xMovement = new Tween(circle_mc,"x",Back.easeIn,circle_mc.x,mouseX,.7,true);
yMovement = new Tween(circle_mc,"y",Back.easeIn,circle_mc.y,mouseY,.7,true);
}

Start();

The fl.transitions.package

The fl.transitions.package contains classes that let you use ActionScript to create animation effects. You use the Tween and TransitionManager classes as the primary classes for customizing animation in ActionScript 3.0.

Blinds The Blinds class reveals the movie clip object by using appearing or disappearing rectangles.
Fade The Fade class fades the movie clip object in or out.
Fly The Fly class slides the movie clip object in from a specified direction.
Iris The Iris class reveals the movie clip object by using an animated mask of a square shape or a circle shape that zooms in or out.
Photo Makes the movie clip object appear or disappear like a photographic flash.
PixelDissolve The PixelDissolve class reveals reveals the movie clip object by using randomly appearing or disappearing rectangles in a checkerboard pattern.
Rotate The Rotate class rotates the movie clip object.
Squeeze The Squeeze class scales the movie clip object horizontally or vertically.
Transition The Transition class is the base class for all transition classes.
TransitionManager The TransitionManager class defines animation effects.
Tween The Tween class lets you use ActionScript to move, resize, and fade movie clips by specifying a property of the target movie clip to animate over a number of frames or seconds.
TweenEvent The TweenEvent class represents events that are broadcast by the fl.transitions.Tween class.
Wipe The Wipe class reveals or hides the movie clip object by using an animated mask of a shape that moves horizontally.
Zoom The Zoom class zooms the movie clip object in or out by scaling it in proportion.

 

ActionScript 3.0 Reference

Drag and Drop with ActionScript 3

Drag and drop code

reset.addEventListener(MouseEvent.CLICK, comeHome);

function comeHome(e:Event) {
mc.x = 115;
mc.y = 70;
}

function initDragger(mc:MovieClip):void
{
mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownDragger);
mc.addEventListener(MouseEvent.MOUSE_UP, mouseUpDragger);
}

function mouseDownDragger(e:MouseEvent):void
{
e.currentTarget.startDrag();
}
function mouseUpDragger(e:MouseEvent):void
{
e.currentTarget.stopDrag();
}

// Set up drag
initDragger(mc);

startDrag()

Lets the user drag the specified sprite. The sprite remains draggable until explicitly stopped through a call to the Sprite.stopDrag() method, or until another sprite is made draggable. Only one sprite is draggable at a time. Three-dimensional display objects follow the pointer and Sprite.startDrag() moves the object within the three-dimensional plane defined by the display object. Or, if the display object is a two-dimensional object and the child of a three-dimensional object, the two-dimensional object moves within the three dimensional plane defined by the three-dimensional parent object.

Parameters

lockCenter:Boolean (default = false) — Specifies whether the draggable sprite is locked to the center of the pointer position (true), or locked to the point where the user first clicked the sprite (false).

bounds:Rectangle(default = null) — Value relative to the coordinates of the Sprite's parent that specify a constraint rectangle for the Sprite.

stopDrag()

Ends the startDrag() method. A sprite that was made draggable with the startDrag() method remains draggable until a stopDrag() method is added, or until another sprite becomes draggable. Only one sprite is draggable at a time.