Waving Text Effect in Actionscript 3.0

var text:String       = "This text is a waving text";
var format:TextFormat = new TextFormat("Arial", 12);
var radius:int = 5;
var speed:Number = Math.PI/15;
var angle:Number =0
var letters:Array = null;


function Init():void
{
	letters = [];
	
	for (var a = 0, x = 0; a<text.length; a++)
	{
		letters[a] = new Sprite();
		
		var txt:TextField =  new TextField();
		txt.selectable = false;
		txt.autoSize = "left";
		txt.text = text.charAt(a);
		txt.setTextFormat(format);
		
		letters[a].addChild(txt);
		letters[a].x = a * 15;
		addChild(letters[a])
	}
	
	addEventListener(Event.ENTERFRAME, Animate, false, 0, true); 

}

function Animate(e:Event):void
{
	for (var a = 0; a<letters.length; a++) 
	{
		letters[a].y = Math.sin(angle+a)*radius;
	}
	
	angle += speed;
}

Init();

Random Generated Displacement Map

So,  I was following this tutorial from activetuts+ to create the same effect,  a static distortion effect using the displacement map filter,  in one of my game projects and it was cool until I realized that my project is getting fatter and fatter by adding images of different sizes to use for different sized objects.

Ofcourse, this was not acceptable so I thought I could create a random generated image by code and reuse it than to create different images in Photoshop.

Anyway, here’s the code which is generating a random image to be used with the effect in the tutorial.

function rndImage(w:Number, h:Number, wl:int = 0, bl:int =0):BitmapData
{
var bitmapdata:BitmapData = new BitmapData(w,h,false, 0xDDDDDD);
var randY:int = 0;
var randX:int = 0;
var randW:int = 0;
var thick:Number = 0;
var a:int = 0;
var minWidth:int = 0;
var line:Shape = new Shape();

for ( a = 0; a< wl; a++)
{
thick = Math.random()* 1.3 + 0.2;
randY = Math.random() * h;
minWidth = (40 * w)/100;
randW = Math.random() * (w-minWidth) + minWidth;
randX = Math.random() * ((w-randW));
line.graphics.lineStyle(thick, 0xFFFFFF);
line.graphics.moveTo(randX,randY);
line.graphics.lineTo(randW, randY);
}

for ( a = 0; a< bl; a++)
{
thick = Math.random()* 1.3 + 0.2;
randY = Math.random() * h;
minWidth = (40 * w)/100;
randW = Math.random() * (w-minWidth) + minWidth;
randX = Math.random() * ((w-randW));
line.graphics.lineStyle(thick, 0x000000);
line.graphics.moveTo(randX,randY);
line.graphics.lineTo(randW+randX, randY);
}

bitmapdata.draw(line);

return bitmapdata;
}

And this is how you generate the image

rndImage(width,height, nr_white_lines,nr_dark_lines);

Video Wall Gallery with Wave Effect

Video Wall Gallery with Wave Effect

Video Wall Gallery with Wave Effect

This is a simple yet powerful video gallery that will enhance your website.

[ FEATURES ]

– XML driven content
– FLASHVARS support ( for the location of the XML file )
– resizable
– unlimited number of videos
– 
support for youtube and 
– smart thumb loading
– change the colors
– text HTML formatting  
– text supports hyperlinks
– nice wave effect
– efficient image resizing ( with correct aspect ratio ) if nedded
– OOP code
– DOCUMENTATION HELP FILE

[ PACKAGE ]

[1] DOCUMENTATION    here you’ll find the necessary info on how to change the file
[2] Source Code           here you’ll find the files to edit the template yourself
[3] Deploy                   here you’ll find all the files you need to have on your server

[ LINK ]

Image Wall Gallery with Wave Effect

Image Wall Gallery with Wave Effect

Image Wall Gallery with Wave Effect

 

This is a simple yet powerful gallery that will enhance your website.

[ FEATURES ]

– XML driven content
– FLASHVARS support ( for the location of the XML file )
– resizable
– unlimited number of images
– smart thumb loading
– change the colors
– text HTML formatting  
– text supports hyperlinks
– full view for images
– slideshow
– nice wave effect
– efficient image resizing ( with correct aspect ratio ) if nedded
– OOP code
– DOCUMENTATION HELP FILE 
[ PACKAGE ]

[1] DOCUMENTATION    here you’ll find the necessary info on how to change the file
[2] Surce Code           here you’ll find the files to edit the template yourself
[3] Deploy                   here you’ll find all the files you need to have on your server

[ LINK ]