Monday, October 26, 2009

Create a Dynamic and Interactive Message Board in ActionScript 3

This tutorial is on a project made by my friend Peter Blaho(warloxk@gmail.com)
The message board will be dyanmic in the sense that it will load the text from an external XML file.
To start hit Ctrl+J to bring up the Document properties window. Set the width to 400 pixels and the heigh to 60. Set any background color.It won't be visible
Draw a 400x60 Rectangle with the color #F4EED4. Align its centre so that it completely covers the stage.
Create a new layer and name it Actions.

Now Hit Ctrl+F8 to bring up the New Symbol window. Set its name to trigger_left and select Export For Actionsript.Go to the Color Window and set the type to Linear.Set the color of the left end color marker to #F4EED4 and alpha to 100%. Set the right one to #F4EED4 and this time the alpha to 0%.

Draw a 60x60 square and go to the Align panel to align the left edge. It should look like this


Now repeat the same process but instead of the left orientaion, it should be right. Set the name as trigger_right. This should look like this

Open the New Symbol window again and set the name to trigger_bottom. Remember to select Export For Actionscript. Draw a 300x60 rectangle of any color. Align its centre and set its alpha to 0.

Now select the first frame of the Actions Layer and copy and paste the following code


//////////////////////////////////////////////
// FlashVars
var flash_vars:Array = new Array();

var keyStr:String;
var valueStr:String;
var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
for (keyStr in paramObj) {
    valueStr = String(paramObj[keyStr]);
    flash_vars[keyStr] = valueStr;
}
//////////////////////////////////////////////

var text_array:Array = new Array();
var curr_text_id:int = 0;
var text_speed:int = 2;
var text_speed_s:int = text_speed;
var margin:int = 10;

////////////////////////////////////////////////
var myTextField:TextField = new TextField();
addChild(myTextField);
var myFormat:TextFormat = new TextFormat();

var trigger_left_t:trigger_left = new trigger_left;
trigger_left_t.x = 0;
trigger_left_t.y = 30;
addChild(trigger_left_t);

var trigger_bottom_t:trigger_bottom = new trigger_bottom;
trigger_bottom_t.x = 200;
trigger_bottom_t.y = 30;
addChild(trigger_bottom_t);

var trigger_right_t:trigger_right = new trigger_right;
trigger_right_t.x = 400;
trigger_right_t.y = 30;
addChild(trigger_right_t);
////////////////////////////////////////////////

////////////////////////////////////////////////
// load xml
var xml_loader:URLLoader; //the xml loader
flash_vars['xml_path'] = 'message.xml';
//loadXML(flash_vars['xml_path'] + "?ticker=" + Math.random() * 1.000000E+010); //load the xml
loadXML(flash_vars['xml_path']); //load the xml
                       
function loadXML(Uri:String):void {
    xml_loader = new URLLoader();
    xml_loader.addEventListener(Event.COMPLETE, on_complete);
    xml_loader.addEventListener(IOErrorEvent.IO_ERROR, on_error);
    xml_loader.load(new URLRequest(Uri));
}
////////////////////////////////////////////////

function on_error(evt:ErrorEvent):void {
    trace("cannot load xml file");
}

function on_complete(evt:Event):void {
    text_array = get_xml_data(xml_loader.data.toString());
    myTextField.htmlText = text_array[curr_text_id].msg;
    myTextField.width = 0;
    myTextField.x = 400 + margin;
    myTextField.y = 16;
    myTextField.selectable = false;
    myTextField.autoSize = TextFieldAutoSize.LEFT;
   
    myFormat.color = 0x000000;
    myFormat.size = 24;
    myTextField.setTextFormat(myFormat);
}

function get_xml_data(XMLData:String):Array {
   
    var menuXML:XML = new XML(XMLData);
    //just in case
    menuXML.ignoreWhitespace = true;

    //get XML item's entrys
    var XMLItems = menuXML.descendants("core");

    //load all items into an array
    var itemsArray:Array = new Array();
    var itemObj:Object;
    for(var i in XMLItems) {
        itemObj=new Object();
        itemObj.msg = str_replace('[', '<', str_replace(']', '>', XMLItems[i].@msg));
        itemObj.msg_link = XMLItems[i].@msg_link;
        itemsArray.push(itemObj);
    }
    return itemsArray;
}

function main_function(event:Event) {
    var max:int = myTextField.width;
   
    if (myTextField.x <= ((0 - max) - margin)) {

        if ((text_array.length - 1) > curr_text_id) {
            curr_text_id++;
        }
        else {
            curr_text_id = 0;
        }
       
        myTextField.x = 700 + margin;
        myTextField.htmlText = text_array[curr_text_id].msg;
        myTextField.setTextFormat(myFormat);
        myTextField.autoSize = TextFieldAutoSize.LEFT;
    }
   
    if (myTextField.x > 710) myTextField.x = 710;
    myTextField.x -= text_speed;
}

function text_speed_up(event:MouseEvent):void {
    text_speed *= 2;
}

function text_reverse(event:MouseEvent):void {
    text_speed = 0 - text_speed;
}

function text_normal(event:MouseEvent):void {
    text_speed = text_speed_s;
}

function text_stop(event:MouseEvent):void {
    text_speed = 0;
}

function str_replace(search, replace, string):String {
    var array = string.split(search);
    return array.join(replace);
}

addEventListener(Event.ENTER_FRAME, main_function);
trigger_left_t.addEventListener(MouseEvent.MOUSE_OVER, text_reverse);
trigger_left_t.addEventListener(MouseEvent.MOUSE_OUT, text_normal);
trigger_bottom_t.addEventListener(MouseEvent.MOUSE_OVER, text_stop);
trigger_bottom_t.addEventListener(MouseEvent.MOUSE_OUT, text_normal);
trigger_right_t.addEventListener(MouseEvent.MOUSE_OVER, text_speed_up);
trigger_right_t.addEventListener(MouseEvent.MOUSE_OUT, text_normal);

Hit Ctrl+Enter to test the movie.

Download the .fla file here

Upload your files for free at www.fileden.com

No comments:

Post a Comment