Friday, February 18, 2011

ActionScript Virtual Keyboard Calculator

Flex Builder 4 Flash Video Mouse Events

 

 

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;

}


Thursday, February 17, 2011

Launch SWF in Full Screen with ActionScript

Flex Builder 4 Flash Video Mouse Events

 

 

full screen swf

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.

Monday, January 31, 2011

Adding alternative content for SWF files

Flex Builder 4

All devices and platforms do not support flash. You need to supply alternate HTML for users to view additional content like phones and tablets.

Method 1: Add alt text and images inside the <object> tag

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="mySWF" width="300" height="300">
<param name="movie" value="mySWF.swf">

<object type="application/x-shockwave-flash" data="mySWF.swf" width="300" height="300">
<img src="myAltPic.png" height="300" width="300" alt="Image version of the SWF" />
<br>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player">
</a>
<!-- For mobile sites, Remove flash link and add the image only -->
</object>

</object>

Method 2: Using SWFObject 2 & XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Alternative Content using SWFObject</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("about.swf", "mySWF", "100%", "100%", "9.0.0", false, {},{},{scale:"noscale"});
</script>
<style type="text/css">
<!--
html,body,div#mySWF {
width:100%;
height:100%;
}
body {
margin:0px;
padding:0px;
}
-->
</style>
</head>
<body>
<div id="mySWF">
<img src="myAltPic.png" height="300" width="300" alt"Image version of the SWF" />
<p>Alternate Text here.</p>
</div>

</body>
</html>

Get SWFObject 2

Method 3: Using SWFObject 2, PHP & XML

Use this method as a back up if your SWF file has a datagrid connected to a database (Flex). You can use PHP and SQL/XML to populate the area. There are many different ways to do this, and this code just shows how you can incorporate simplexml into the alternate area.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Alternative Content using SWFObject</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("about.swf", "mySWF", "100%", "100%", "9.0.0", false, {},{},{scale:"noscale"});
</script>
<style type="text/css">
<!--
html,body,div#mySWF {
width:100%;
height:100%;
}
body {
margin:0px;
padding:0px;
}
-->
</style>
</head>
<body>
<div id="mySWF">
<p>

<?php
if (file_exists('myList.xml')) {
$xml = simplexml_load_file('myList.xml');
print_r($xml);
} else {
exit('Failed to open test.xml.');
}
?>
</p>
</div>
</body>
</html>

Monday, December 27, 2010

Free Flex Components

Flex Builder 4

1. FlexLib

- Open Source Flex Component Library

The FlexLib project is a community effort to create open source user interface components for Adobe Flex 2, 3 and 4.

Current components: AdvancedForm, Base64Image, EnhancedButtonSkin, CanvasButton, ConvertibleTreeList, Draggable Slider, Fire, Highlighter, HorizontalAxisDataSelector IconLoader, ImageMap, PromptingTextArea, PromptingTextInput, Scrollable Menu Controls, SuperTabNavigator, Alternative Scrolling Canvases, Horizontal Accordion, TreeGrid, FlowBox, Docking ToolBar, Flex Scheduling Framework

2. reusable-fx

The reusable-fx is a library of reusable flex components.

* ChartScroller adds scrolling and zooming functionality to CartesianChart
* DataGrid2CSV enables export of data displayed in DataGrid to CSV format
* MDataGrid is an extendible DataGrid with client-side filtering and searching
* SlideDown, SlideLeft, SlideRight and SlideUp defines slide effects

3. The ActionScript Data Provider Controls library (ASDPC)

Provides a set of standard user interface components written in ActionScript.

  • Easy and extensive customization (functionality, appearance)
  • Platform, framework and project neutrality (out of the box usage)
  • Generic data intergration (data provider interface architecture)
  • High-performance
  • Unit tested and well documented
  • Open-source licence MIT

ADOBE Resources

Monday, December 20, 2010

Tour de Mobile Flex

Flex Builder 4

Tour de Mobile Flex is an Android application for exploring the new Flex mobile capabilities. You can start building Flex applications for mobile devices with the Flex Hero prerelease.

Download the Tour de Mobile Flex Flash Builder Project (FXP) or get the code from github.

!

Related Posts Plugin for WordPress, Blogger...