Examples.Flash MX: Easy way to highlight the links in flash dynamic text.

#include "XMLNode-transformTags.as"
my_xml = new XML("<a href=\"http://www.shockwave-india.com/blog\">URL for my Blog</a>");
fObj = {};
fObj.a = function(node) {
        var aList = "";
        var attrib = node.attributes;
        for (i in attrib) {
                aList += " "+i.toLowerCase()+"=\""+attrib[i]+"\"";
        }
        var tag = {};
        tag.start = "<font color=\"#0000FF\"><u><a"+aList+">";
        tag.end = "</a></u></font>";
        return tag;
};
//change all 'a' tag to a combination of font,u,a tags to highlight
trace(my_xml.transformTags(fObj,true));
/*
traces
'<font color="#0000FF"><u><a href="http://www.shockwave-india.com/blog">URL for my Blog</a></u></font>'



*/

Demo.Flash MX: Creating X-HTML using Flash MX Text box.

Further extending my strippTags code I came up with transformTags code to modify the tags in an xml object which is very useful for many different purposes. One of which I'm demonstrating here.

basic syntax is
XMLNode.transformTags(formatObject, AllowTagsByDefault)
formatObject - generic Object which contains the info on how to modify the tags.
AllowTagsByDefault - boolean value which specifies whether to allow unspecified tags or not

This demo is using the code below to transform the tags generated by an input text box so that it can be rendered in any HTML 4.0 compatible browser. We can utilize the rich text editing capabilities of flash to create a forum/comment system which will produce HTML which is compatible to the browser by modifying the .htmlText which is basically a modified version of HTML 1.0

//create an object to specify the format
var fObj = {};
//remove all  tags
fObj.textformat=false;
//change all <b> tags to <strong>
fObj.b="strong";
/*
convert
<font face="_sans" SIZE="12" COLOR="#000000">
to
<span style="font-family:Arial, Helvetica, sans-serif;font-size:12pt;color:#000000;">
*/
//change <font> tags to <span> tags
fObj.font ={__replace__:"span"}
// change size attribute to style attribute
fObj.font.size={__replace__:"style"}
fObj.font.size.__value__ = function(size) {
        return ("font-size:"+size+"pt;");
};
// change color attribute to style attribute
fObj.font.color={__replace__:"style"}
fObj.font.color.__value__ = function(color) {
        return ("color:"+color+";");
};
// change face attribute to style attribute
fObj.font.face={__replace__:"style"}
fObj.font.face.__value__ = function(face) {
        switch (face) {
         case "_sans" :
                face = "Arial, Helvetica, sans-serif";
                break;
         case "_serif" :
                face = "Times New Roman, Times, serif";
                break;
         case "_typewriter" :
                face = "Courier New, Courier, mono";
                break;
        }
        return ("font-family:"+face+";");
};
//transformTags when Main text changes
main_txt.onChanged = function() {
        flash_txt.text = this.htmlText;
        //create a XML object
        my_xml = new XML(this.htmlText);
        //transform the tags in the XML with the format object which we created
        htm_txt.text = my_xml.transformTags(fObj, true);
};

To see transformTags in action type something and format the text in the input textbox below

I will optimize and release the XMLNode.transformTags() source soon! :)

Extension.Flash MX: Improved version of Flash Remoting Helper component.

I've improved the component and now it has the following additional features / improvements.

• There is no limitation for the number of parameters.
• Now you can optionally specify the name of the array to use as the parameters of the remote function (for dynamic values and also for using other data types than string and numbers).
• You can specify result handler and status handler functions to process the return values of the remote function.
• All the Status (error) Messages are traced when no status handler function is defined.

News.Flash MX: Using CF.query with ServerSide ActionScript in JRun.

Extension.Flash MX: Remoting Helper Component.

Many Java, .NET and Coldfusion MX developers are now jumping into Flash Remoting. The problem they face when they are not much familiar with actionsript is in testing their server side remoting script. Every time they have to go to the flash developer for testing.

To solve this problem I've developed a component called RemotingHelper which allows you to define the GatewayUrl, name of the remoting Service to connect to, remote Function to call and Parameters to pass to that function using the Component Parameters. You can download the component from here

It has to be used along with the NetConnection Debugger (Menu : Window > NetConnection Debugger) that comes with Flash Remoting components.

Known limitations:

• You can only pass Strings and Numbers to the remote function other object types are not supported
• It can only take a maximum of 10 parameters

Usage:

• Drag and drop RemotingHelper component from the components window and set the properties
• Open the NetConnection Debugger from the Window menu.
• Test the Movie and see the NetConnection Debugger window for the events.

Code.Flash MX: Stripping HTML Tags using XML.

XMLNode.prototype.strippTags = function(tagList,exclude){
	if(exclude != true)exclude = false;
	if(tagList == undefined)tagList = "";
	if(this.nodeType == 1){
		var c = this.childNodes;
		var str = "";
		for(var i=0; i<c.length; i++){
			if(c[i].nodeType == 1){
				var startTag = "";
				var endTag = "";
				var aList = "";
				if(exclude != (tagList.indexOf(c[i].nodeName.toLowerCase())!= -1)){
					for(a in c[i].attributes){
						aList += " " + a + "=\"" + c[i].attributes[a] + "\"";
					}
					startTag="<" + c[i].nodeName + aList + ">";
					endTag="</" + c[i].nodeName + ">";
				}
				str += startTag + c[i].strippTags(tagList,exclude) + endTag;
				}else{
					str += c[i].nodeValue;
				}
			}
			}else{
				 return this.nodeValue;
	}
	return str;
  };
  //Usage Examples:-
  var my_str="hi! my <font color=\"#00FF00\">name</font> is <b>arul</b>"
  var my_xml=newXML(my_str);
  trace(my_xml.strippTags());
  //traces 'hi! my name is arul'
  trace(my_xml.strippTags("b"));
  //traces 'hi! my name is <b>arul</b>'
  trace(my_xml.strippTags("b",true));
  //traces 'hi! my <font color="#00FF00">name</font> is arul'
  trace(my_xml.strippTags("font",true));
  //traces 'hi! my name is <b>arul</b>' 

News.Flash MX: New Public Flash Player is released.

Update.Arul's Blog: Arul's Blog now syndicated in FLOG.

Tips.General: Macromedia Tips Library.

Tools.Flash MX: Actionscript Syntax Highlighting with SciTE|Flash.

Many of you might already know how handy it is to edit ActionScript with SciTE|Flash, for those who do not know SciTE|Flash is a text editor from BomberStudios for editing ActionScript, free download is available in their website.

One of the nice features which attracted me is exporting the script as HTML or RTF, which can be used to syntax highlight actionscript instead of my ActionScript Highlighting Service. But the current colors used are not matching with the colors I use in actionscript highlighting so I modified the flash.properties file which contains the color info.

First picture shows SciTE|Flash with the default highlighting and the second one is the modified version. You can download the modified flash.properties file from here.

Code.Flash MX: Creating Unique Random Response.

//custom class for producing unique random numbers
_global.randomResponse = function(a, b) {
        this.set(a, b);
};
//use the set method to set the random value
//to be an array or range of numbers
randomResponse.prototype.set = function(a, b) {
        if (a instanceof Array) {
                this.Arr = a;
        } else if (!(isNaN(a) && isNaN(b))) {
                this.Arr = [];
                var step = a<b ? 1 : -1;
                for (i=a; i<=b; i += step) {
                        this.Arr.push(i);
                }
        } else {
                trace("Error: invalid parameters to randomResponse Object");
                return false;
        }
        this.ArrCopy = this.Arr.slice();
        return true;
};
//Use get method to get the random response
randomResponse.prototype.get = function() {
        do {
                var index = random(this.Arr.length);
        } while (this.response == this.Arr[index]);
        this.response = this.Arr[index];
        this.Arr.splice(index, 1);
        if (this.Arr.length == 0) {
                this.onCycleComplete();
                this.Arr = this.ArrCopy.slice();
        }
        return this.response;
};
/*Usage
Example 1 - Using Array*/
var myResponse = new randomResponse(["good", "super", "great"]);
trace(myResponse.get());
trace(myResponse.get());
trace(myResponse.get());
trace(myResponse.get());
trace(myResponse.get());
myResponse.onCycleComplete = function() {
        //trace("completed a cycle");
};
/*Usage
Example 2 - Using range of numbers*/
var myResponse = new randomResponse(5, 8);
trace(myResponse.get());
trace(myResponse.get());
trace(myResponse.get());
trace(myResponse.get());
trace(myResponse.get());

Examples.Flash MX: Creating a Talking Application in Flash.

Here I will show how to create a light weight talking application in flash. It is one of the Examples I showed in the Singapore User Group Session.

Our task is fairly simple,

• Creating an audio file (preferably MP3) with all the words we want our application to speak.
• Using that audio in a movieclip as a streaming audio and placing frame labels(to another empty layer) to split the whole audio in to the words
• Using actionscript for playing the right portions of the audio to get right sentence out of it

To achieve this I've created a talker component which has the following main methods

• NumberInWords(number) which converts the given number to words which it can speak
• talk(data) which speaks the given number or string
  Example:-
  • myTalker.talk(101) will speak "Singapore Dollars One Hundred and One only"
  • myTalker.talk("SG$ Two Hundred and Twenty Two only") will speak "Singapore Dollars Two Hundred and Twenty Two only"

Using this component I've created a sample application [swf file size:50K] which speaks the number which is either random generated or typed in the Number field. Take a look at it below and the FLA source is available as a Ziped file [file size: 400K] here.

footnote:-
Also check the recent entries and feel free to add your comments. I need your comments to improve this blog