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

Create an Advanced Explosion/Fireworks Effect

I will be using a 400x400 Stage with a background color of 0x222222.
In the root directory of the .fla file create a new folder and name it script. Now open you favourite text editor and copy and paste the following code

package script
{
import flash.display.Sprite;
import flash.events.Event;
import flash.utils.Timer;
import flash.events.TimerEvent;

public class Spark extends Sprite
{
private var spark:Sprite = new Sprite();

/*origination coordinates of the spark*/
private var X;
private var Y;

/*the Y coordinate at which the spark will busrst*/
private var burstPoint;

/*sppeds along the X and Y axes*/
private var xSpeed;
private var ySpeed;

/*whether the spark will burst or jus fade away*/
private var willBurst;

/*the size(width) of the spark*/
private var size;

/*gravity will be acting on all sparks.*/
private var gravity = 0.15;

/*flag the spark for removal*/
private var removeSpark = false;

/*
*The Constructor takes parameters in the following order
X Coordinate,
Y Coordinate,
burstPoint,
vertical Speed,
Horizontal Speed,
willBurst,
size.

Only the first three are mandatory
*/
public function Spark(xc:Number,yc:Number,brstPnt:Number,ySd:Number=2,
xSd:Number=0,burst:Boolean=false,sz:Number=2)
{
X=xc;
Y=yc;
burstPoint=brstPnt;
ySpeed=ySd;
xSpeed=xSd;
willBurst=burst;
size=sz;

spark.x=X;
spark.y=Y;

addChild(spark);
spark.addEventListener(Event.ENTER_FRAME,moveDown);
}

private function moveDown(e:Event)
{
/*if the spark is flagged for removal*/
if(removeSpark)
{
spark.graphics.clear();
spark.removeEventListener(Event.ENTER_FRAME,moveDown);
spark=null;
return
}

/*Increment the Y axis speed to simulate gravity*/
ySpeed+=gravity;

/*Move the spark*/
spark.y+=ySpeed;
spark.x+=xSpeed;

/*
Draw the spark and simulate the trail.
If the spark will ultimately burst it
has a shorter trail. The trail also
depends on the speed of the spark;
*/
spark.graphics.clear();
if(willBurst)
{
for(var i=0;i<5;i+=1)
{
spark.graphics.lineStyle(size,0xFFFFFF,1/(i+1));
spark.graphics.moveTo(-xSpeed*i/3,-ySpeed*i/3);
spark.graphics.lineTo(-xSpeed*(i+1)/3,-ySpeed*(i+1)/3);
}
}
else
{
/*reduce the alpha*/
spark.alpha-=0.02;
if(spark.alpha<=0)
removeSpark=true;

/*
the trail length will reduce as the
alpha falls to simulate a
simutaneous fade out and slow down
effect
*/
for(i=0;i<15*spark.alpha;i+=1)
{
spark.graphics.lineStyle(size,0xFFFFFF,1/(i+1));
spark.graphics.moveTo(-xSpeed*i,-ySpeed*i);
spark.graphics.lineTo(-xSpeed*(i+1),-ySpeed*(i+1));
}
}

/*If the burst Point has been reached*/
if(spark.y<=burstPoint)
{
/*
if the spark does not have to burst
flag it for removal
*/
if(!willBurst)
removeSpark=true;
/*
the burst effect will be obtained by
creating a random number of instances
of the Spark class and sending them
in random directions;
*/
else
{ /*number of fragments will range from 20-40*/
var burstFragments = 20+Math.ceil(Math.random()*20);
for(var j=0;j<burstfragments;j++)>
{
var d:Spark =new Spark(spark.x,burstPoint,burstPoint-100,-7+Math.random()*14,-7+Math.random()*14,false,2)
addChild(d);
}
/*flag the original spark for removal*/
removeSpark=true;
}
}

}

//class ends
}
//package ends
}

This will be your custom class. Save this file in the folder named "script", with the name "Spark.as". Now open your .fla file and hit Ctrl+J to bring up the Document Properties window and set both the Width and Height to 400 and the Background Color to0x222222 (Black).
Click on Ok and then select the first frame of the layer and hit F9. In the Actions window that pops up, Copy the following lines of code.

import script.Spark;
function showSpark() {
/*random X coordinate of origin*/
var X = Math.random()*400;

/*
variable xSpeed so that sparks originating
from the left side of the stage move towards
the right and vice-versa
*/
var xSpeed = 0.05*(200-X);

/*
random burst point so that each spark
bursts at a different level
*/
var burstPoint = 50+Math.random()*100;

var d:Spark = new Spark(X,350,burstPoint,-15,xSpeed,true,3);
addChild(d);

/*add a random shade to the spark*/
var color:ColorTransform = new ColorTransform();
color.blueMultiplier = Math.random();
color.greenMultiplier = Math.random();
d.transform.colorTransform = color;

}
showSpark();

Hit Ctrl+Enter To test the movie. The code will add only one instance of the Spark class to the stage. Add your own method to add more instances

Download the orginal source code files here

You can improve the code by adding sounds to each explosions