SynerCoding: HeaderV1 (Fibers class)

HeaderV1 (Fibers class)

Hi,

Now I’ll post the code explaination of how I made my header.

First you need a bitmap. Make a perlin noise with high detail:

1
2
3

var bd:BitmapData=new BitmapData(headerWidth, 1, false, 0x000000);
var offs:Array=[new Point(0,0), new Point(0,0)];
bd.perlinNoise(3, 3, 2, 0, false, true, 7, true, offs);

The bitmapdata only needs to be 1px high. And because I have set the width and height of the perlinnoise to 3 you get a huge perlinnoise in your bitmap.

If you now stretch the bitmapdata to the desired height you get the fibers but still in greyscale.

var hWidth:int = 300;
var hHeight:int = 100;
 
var bd:BitmapData=new BitmapData(hWidth, 1, false, 0x000000);
var bd2:BitmapData=new BitmapData(hWidth, hHeight, false, 0x000000);
 
var offs:Array=[new Point(0,0), new Point(0,0)];
 
bd.perlinNoise(3, 3, 2, 0, false, true, 7, true, offs);
for(var i:int = 0; i<hHeight; i++) {
	bd2.copyPixels(bd, bd.rect, new Point(0,i));
}
var bmp=new Bitmap(bd2);
addChild(bmp);

This code shows you that I copy the perlin noise and place it in another BitmapData in a next line of pixels. The script does this until the desired height is reached. Now you have the bars in greyscale. The code makes the following SWF:

To get the flash moving you need to change the offset of the perlinnoise. In that case you dont generate a completely new perlinnoise but rather the same but just positioned a slightly different. We can do this by adding an EventListener to stage that listens for the Enterframe event. And then calls the onFrame function. In that function we change the offset and make the new perlinnoise and bitmapdata:

var hWidth:int = 300;
var hHeight:int = 100;
 
var bd:BitmapData=new BitmapData(hWidth, 1, false, 0x000000);
var bd2:BitmapData=new BitmapData(hWidth, hHeight, false, 0x000000);
 
var offs:Array=[new Point(0,0), new Point(0,0)];
 
var bmp=new Bitmap(bd2);
addChild(bmp);
addEventListener(Event.ENTER_FRAME, onFrame);
 
function onFrame(e:Event):void {
	offs[0].x+=0.05;
	offs[0].y+=0.05;
	offs[1].x+=0.05;
	offs[1].y+=0.05;
	bd.perlinNoise(3, 3, 2, 0, false, true, 7, true, offs);
	bd2.lock();
	for(var i:int = 0; i<hHeight; i++) {
		bd2.copyPixels(bd, bd.rect, new Point(0,i));
	}
	bd2.unlock();
}

You might wonder why I lock the bitmapData before the forloop and unlock it after the forloop. When I lock the bitmapData the bitmap that uses that bitmapdata wont change until I unlock it. So this means that it wont update the bitmap after every iteration over the forloop. And when I unlock it will update. This code generates the following swf:

Now I just need to add colors and the black edge around it so it can blend into the black background of my site. I used an gradient for the colors and gradients for the edge. We will wrap the code for the edge in a function and the code for the colors in another function. First I’ll make the edge function.

function edge(theWidth:int, theHeight:int):BitmapData {
	var ratio:Array = [0, 50, 205, 255];
	var alphas:Array = [1,0,0,1];
	var colors:Array = [0x000000,0x000000,0x000000,0x000000];
	var type:String = GradientType.LINEAR;
	var matr:Matrix = new Matrix();
	matr.createGradientBox(theWidth, theHeight, 0, 0);
 
	var edgeH:Sprite = new Sprite();
	edgeH.graphics.beginGradientFill(type, 
					colors, 
					alphas, 
					ratio,
					matr)
	edgeH.graphics.drawRect(0,0,theWidth,theHeight);
	edgeH.graphics.endFill();
 
	var ratio2:Array = [0, 90, 165, 255];
	var matr2:Matrix = new Matrix();
	matr2.createGradientBox(theWidth, theHeight, 90*(Math.PI/180));
	var edgeV:Sprite = new Sprite();
	edgeV.graphics.beginGradientFill(type, 
					colors, 
					alphas, 
					ratio2,
					matr2)
	edgeV.graphics.drawRect(0,0,theWidth,theHeight);
	edgeV.graphics.endFill();
 
	var combined:BitmapData = new BitmapData(theWidth, theHeight, true, 0x00000000);
	combined.draw(edgeH);
	combined.draw(edgeV);
 
	return combined;
}

When just calling this function to show what it makes:

var hWidth:int = 300;
var hHeight:int = 100;
 
var borderBD:BitmapData = edge(hWidth,hHeight);
var border:Bitmap = new Bitmap(borderBD);
 
addChild(border);

If I now add the border to the fibers:

var hWidth:int = 300;
var hHeight:int = 100;
 
var bd:BitmapData=new BitmapData(hWidth, 1, false, 0x000000);
var bd2:BitmapData=new BitmapData(hWidth, hHeight, false, 0x000000);
 
var offs:Array=[new Point(0,0), new Point(0,0)];
 
var bmp:Bitmap=new Bitmap(bd2);
var borderBD:BitmapData = edge(hWidth,hHeight);
var border:Bitmap = new Bitmap(borderBD);
 
addChild(bmp);
addChild(border);
 
addEventListener(Event.ENTER_FRAME, onFrame);
 
function onFrame(e:Event):void {
	//content omitted
}
 
function edge(theWidth:int, theHeight:int):BitmapData {
	//content omitted
}

Now we only need to add the color to our header. I have also warped that in a function:

function colors(theWidth:int, theHeight:int):Sprite {
	var linRatios:Array  = [110, 150, 190];
	var colorArray:Array = [0xbd1925, 0x007300, 0x0e0055];
	var linAlphas:Array  = [1,1,1]
	var linGrad:String   = GradientType.LINEAR;
	var linMatrix:Matrix = new Matrix();
 
	linMatrix.createGradientBox(theWidth, theHeight, 0, 0);
 
	var lin:Sprite = new Sprite();
	lin.graphics.beginGradientFill(linGrad, 
					colorArray, 
					linAlphas, 
					linRatios,
					linMatrix)
	lin.graphics.drawRect(0,0,theWidth,theHeight);
	lin.graphics.endFill();
	return lin;
}

And when calling only this function it makes this swf:

var hWidth:int = 300;
var hHeight:int = 100;
 
var colorOverlay:Sprite = colors(hWidth,hHeight);
 
addChild(colorOverlay);

If we want to see the bars through the color overlay we need to set the blendmode of the sprite different. I thought multiply was the best:

var hWidth:int = 300;
var hHeight:int = 100;
 
var bd:BitmapData=new BitmapData(hWidth, 1, false, 0x000000);
var bd2:BitmapData=new BitmapData(hWidth, hHeight, false, 0x000000);
 
var offs:Array=[new Point(0,0), new Point(0,0)];
 
var bmp:Bitmap=new Bitmap(bd2);
var border:Bitmap = new Bitmap(edge(hWidth,hHeight));
var colorOverlay:Sprite = colors(hWidth,hHeight);
colorOverlay.blendMode = BlendMode.MULTIPLY;
 
addChild(bmp);
addChild(colorOverlay);
addChild(border);
addEventListener(Event.ENTER_FRAME, onFrame);
 
function onFrame(e:Event):void {
	//content omitted
}
 
function edge(theWidth:int, theHeight:int):BitmapData {
	//content omitted
}
 
function colors(theWidth:int, theHeight:int):Sprite {
	//content omitted
}

I’ve wrapped this all in a class and added 2 text fields. I am planning to enhance the class a little further. So the placing of the text can become more dynamic and the I am planning on enhancing the Fibers a bit more.
Click to get the class

SynerCoding

HeaderV1 (Fibers class)

Leave a Reply