riaxe snippets
Posts tagged flex
Using mouse position from Javascript into Flex
Jan 29th
MouseEvents can be captured from Javascript and can be used for some amazing things in Flex. I have used ExternalInterface and FlexBridge to capture mouse positions from a html page to rotate a 3D Flex Cube as shown below:
The demo of the same can be seen here
The following javascript is used to capture the mouse move positions:
document.onmousemove = getMouseXY;
var flexApp;
// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0
// Main function to retrieve mouse x-y pos.s
function initCallback() {
flexApp = FABridge.mousecapture.root()
alert("initCallback");
}
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
document.Show.MouseX.value = tempX
document.Show.MouseY.value = tempY
return true
}
function getMousex(){
return tempX
}
function getMousey(){
return tempY
}
The mouse positions can be recieved in Flex by calling getMousex() and getMousey() methods using External Interface.
Effective use of TextLineMetrics in Flex TextField components
Jan 29th
By Defination – The TextLineMetrics class contains information about the text position and measurements of a line of text within a text field. All measurements are in pixels. Objects of this class are returned by the flash.text.TextField.getLineMetrics() method.
While creating a text animation part for a application I faced the problem with the size of the individual characters in the TextField. The width and the height of the text characters inside the textfield differed from that of the actual size of the font as shown below :
One can see the final output of the demo part here
The code for the part is as below:
<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="play()" fontSize="{size}" fontFamily="Arial"
text="7" textAlign="center" color="#F1E912" fontWeight="bold"
resizeEffect="{uResize}">
<mx:Script>
<![CDATA[
[Bindable]
public var size:int = 12;
[Bindable]
public var duration:int = 800;
public var initialSize:Number = 2;
public var rotateEnabled:Boolean = true;
public var fadeEnabled:Boolean = true;
public var scaleEnabled:Boolean = true;
public var delayCount:int = 0;
public function play():void
{
//setTextSize();
if(rotateEnabled){
uRotate.end();
uRotate.angleFrom = 0;
uRotate.angleTo = 360;
uRotate.play();
}
if(fadeEnabled){
uFade.end();
uFade.alphaFrom = 0;
uFade.alphaTo = 1;
uFade.play();
}
if(scaleEnabled){
uZoom.end();
uZoom.zoomHeightFrom = initialSize;
uZoom.zoomWidthFrom = initialSize;
uZoom.zoomHeightTo = 1;
uZoom.zoomWidthTo = 1;
uZoom.play();
}
}
public function setTextSize():void
{
var txtLineMetrics:TextLineMetrics = this.getLineMetrics(0);
if(text == ' '){
width = txtLineMetrics.width+size;
height = txtLineMetrics.height+size;
}
else{
width = txtLineMetrics.width+size/2;
height = txtLineMetrics.height+size/2;
}
}
public function stop():void
{
uRotate.stop();
uFade.stop();
}
]]>
</mx:Script>
<mx:Fade id="uFade" duration="{duration}" target="{this}" effectEnd="setTextSize()"/>
<mx:Rotate id="uRotate" duration="{duration}" target="{this}"
originX="{width/2}" originY="{height/2}" effectEnd="setTextSize()"/>
<mx:Resize id="uResize" duration="{duration}" target="{this}"/>
<mx:Zoom id="uZoom" duration="{duration}" target="{this}" effectEnd="setTextSize()"/>
</mx:Label>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="init()" xmlns:comp="comp.*">
<mx:Script>
<![CDATA[
import comp.RotateText;
import mx.effects.Tween;
[Bindable]
private var mText:String = 'Hello World';
private var mTimer:Timer = new Timer(200);
private var count:int = 0;
private var mIsRotate:Boolean = true;
private var mIsScale:Boolean = true;
private var mIsFade:Boolean = true;
private function init():void
{
mTimer.addEventListener(TimerEvent.TIMER, onTimerStart);
}
private function onTextChange(e:Event):void
{
mText = e.target.text;
}
private function startAnimation(e:MouseEvent):void
{
mTimer.stop();
count = 0;
hb.removeAllChildren();
mTimer.start();
}
private function onTimerStart(e:TimerEvent):void
{
if(count < mText.length){
var rTxt:RotateText = new RotateText();
rTxt.duration = hsDur.value;
rTxt.text = mText.charAt(count);
rTxt.fadeEnabled = mIsFade;
rTxt.scaleEnabled = mIsScale;
rTxt.rotateEnabled = mIsRotate;
rTxt.size = hsSize.value;
rTxt.delayCount = count;
rTxt.initialSize = hsZoom.value;
hb.addChild(rTxt);
count++;
}
else{ mTimer.stop(); }
}
private function onDoubleClick(e:Event):void
{
txtInp.visible = !txtInp.visible;
hb.visible = !hb.visible;
}
]]>
</mx:Script>
<mx:Style>
@font-face {
src:url("assets/arial.ttf");
font-weight: normal;
font-style: normal;
font-family: Arial;
}
@font-face {
src:url("assets/arialbd.ttf");
font-weight: bold;
font-style: normal;
font-family: Arial;
}
</mx:Style>
<mx:Canvas y="177" x="441">
<mx:HBox id="hb" horizontalGap="{hs.value}" doubleClickEnabled="true"
doubleClick="onDoubleClick(event)"/>
<mx:TextInput id="txtInp" text="{mText}" fontSize="20" visible="false"
enter="onDoubleClick(event)"/>
</mx:Canvas>
<mx:Text text="{mText}" fontFamily="Arial" x="26" y="45"/>
<mx:TextInput text="{mText}" change="onTextChange(event)" x="26" y="71"/>
<mx:Button label="Animate" click="startAnimation(event)" x="26" y="101"/>
<mx:Rotate id="uRotate"/>
<mx:VBox x="26" y="149" width="171" height="279">
<mx:Label text="Horizontal Gap"/>
<mx:HSlider id="hs" minimum="-40" maximum="40"
snapInterval="5" liveDragging="true" enabled="true" showTrackHighlight="true"
showDataTip="false" value="0" tickInterval="5"/>
<mx:Label text="Font Size"/>
<mx:HSlider id="hsSize" minimum="8" maximum="76"
liveDragging="true" enabled="true" showTrackHighlight="true"
showDataTip="false" value="16" snapInterval="1"/>
<mx:Label text="Duration"/>
<mx:HSlider id="hsDur" minimum="100" maximum="2000" snapInterval="100" liveDragging="true" value="500" showTrackHighlight="true"/>
<mx:Label text="Initial Size"/>
<mx:HSlider id="hsZoom" minimum="0.1" maximum="4" snapInterval="0.1" liveDragging="true" showTrackHighlight="true"/>
<mx:HRule width="100%"/>
<mx:CheckBox label="Rotate" selected="true" change="{mIsRotate = !mIsRotate}"/>
<mx:CheckBox label="Scale" selected="true" change="{mIsScale = !mIsScale}"/>
<mx:CheckBox label="Fade" selected="true" change="{mIsFade = !mIsFade}"/>
</mx:VBox>
</mx:Application>
You will need to add the fonts arial.ttf and arailbd.ttf to the assets folder to make it work.
Hope this would be helpful 
Adding namespaces in Actionscript3.0
Jan 26th
By defination – Namespaces give you control over the visibility of the properties and methods that you create. Think of the public, private, protected, and internal
access control specifiers as built-in namespaces. If these predefined access control specifiers do not suit your needs, you can create your own namespaces.
We can create our own namespaces in Actionscript 3.0.
Suppose we have a class named Employee having a method within named calculateSalary();
We can create our own namespaces to see the difference in incentives for RIA developers. We will create two namespaces as follows:
package com.xyzsystems.namespace {
public namespace codevils=http://riaxe.com/blog;
}
package com.xyzsystems.namespace {
public namespace others;
}
Lets create our Employee class where we will use these namespaces as follows:
package com.xyzsystems.employee
{
import com.xyzsystems.namespace.*;
public class Employee
{
others static function calculateIncentive():Number{
return 5000;
}
//
codevils static function calculateIncentive():Number{
return 7500;
}
}
}
We are done with the class. Lets test the calculateIncentive() method for different namespaces.
package com.xyzsystems.test
{
import com.xyzsystems.namespace.*;
import com.xyzsystems.employee;
import mx.controls.Alert;
use namespace others;
// use namespace codevils;
public class TestEmployee
{
public function TestEmployee():void {
var incentive:Number = Employee.calculateIncentive();
Alert.show("The incentive for the employee is :"+incentive);
}
}
}
The Alert will show this “The incentive for the employee is : 5000″;
We can also define the namespace like this -
var incentive:Number; incentive = Employee.codevils::calculateIncentive();
This would result in “The incentive for the employee is : 7500” in the Alert.