NOTE: the grid I’m using in this tutorial is explained in my “full-stage grid” post.

I use this setup fairly often these days, so I thought I’d give an introduction to the concept, and I’ll add more complex ideas later on. First, here’s the full source code. Copy and paste this into the first frame of a new flash document, and run it.

var size:Number = 100;
var columns:Number = Math.ceil(Stage.width / size);
var rows:Number = Math.ceil(Stage.height / size);
var ball_move:Boolean = false;

var ball:MovieClip = this.createEmptyMovieClip(”ball”, this.getNextHighestDepth());
ball.lineStyle(70, 0×0, 100);
ball.lineTo(0, 1);
ball._x = 200;
ball._y = 200;

ball.onPress = function () {

this.startDrag();
ball_move = true;

}

ball.onMouseUp = function () {

this.stopDrag();
ball_move = false;

}

ball.onMouseMove = function () {

if (!ball_move) return;
this._x = _xmouse - _xmouse%size;
this._y = _ymouse - _ymouse%size;
updateAfterEvent();

}

function drawSquare (who:String, to_x, to_y) {

this.createEmptyMovieClip(who, this.getNextHighestDepth());
this[who].lineStyle(1, 0×0, 100);
this[who].moveTo(0, 0);
this[who].lineTo(size, 0);
this[who].lineTo(size, size);
this[who].lineTo(0, size);
this[who]._x = to_x;
this[who]._y = to_y;

}

for (var c=0; c<columns; c++) {

for (var r=0; r<rows; r++) {

drawSquare(”c_”+c+”_r_”+r, c*size, r*size);

}

}

That’s it! pretty simple. Let’s walk through it.

Read the rest of this entry »

NOTES:

• This code can be cleaned up a bit (and may be later on), but this is the basic system I use.
• We’re working on proper hosting, so I’ll have the source files online for download soon.

SETUP THE STAGE:

1. place a textInput component onto the stage and give it an instance name of “search_txt”
2. place a dataGrid component onto the stage and give it an instance name of “my_dg”
3. place a dynamic text field onto the stage and give it an instance name of “total_records_txt”

WRITE THE CODE:

First, we’ll setup the basic variables we need:

var search_for:String;
var myDP:Array = new Array();
var myNewDP:Array = new Array();

Populate data grid with some random

myDP.addItem({id:0, firstName:”David”, lastName:”Jackson”, url:”waxjelly.com”});
myDP.addItem({id:1, firstName:”Bryan”, lastName:”Maxwell”, url:”bawmlan.com”});
myDP.addItem({id:2, firstName:”Bryan”, lastName:”Maxface”, url:”waxjelly.com”}); … (the full list is available in the actual code at the end of this post)

Now we populate the dataGrid with our array

my_dg.dataProvider = myDP

And we throw in a nice little report field to tell us how many records there are at any given time

total_records_txt.text = my_dg.dataProvider.length;

Now we setup our listener object

// listen for key strokes
var myListener:Object = new Object();
myListener.onKeyUp = myListener.onKeyDown = function () {

This is a little ghetto, but the idea is that we’ll simply check to make sure our search box is selected, so we don’t unnecessarily run the function, since we’ll be running it a lot

if (Selection.getFocus() != “_level0.search_txt.label”) return;
if (Key.isDown(Key.BACKSPACE)) my_dg.dataProvider = myDP;

search_for = search_txt.text;
search_dp(search_for);

}

Key.addListener(myListener);

This is where the real work is done. We setup “search_dp” function which will get called on ever key stroke

function search_dp (search_for:String) {
trace(”searching for: ” + search_for);

very important: we reset the newDP to be empty, so that we don’t stack results. Comment the next line out and search for something to see what I mean

myNewDP = [];

First, we check if the last clicked key made the search box empty

if (search_for == “”) {

if it did, we simply repopulate the data grid with its original data

my_dg.dataProvider = myDP

if it did, we loop through the whole data provider

for (var i in myDP) {

loop through the current dp “Node”

for (var j in myDP[i]) {

we convert the element to a string (in case there’s a number being searched for) we convert the string and the search_for var to lower case then we look to see if the search_for string exists in the record entry

if (myDP[i][j].toString().toLowerCase().indexOf(search_for.toLowerCase()) != -1) {

myNewDP.push(myDP[i]);

if we found what we wanted we don’t need or want to keep searching the current record so we break out of this loop and go to the next record

break;

my_dg.dataProvider = myNewDP;
total_records_txt.text = my_dg.dataProvider.length;

Here’s the actual code:

Read the rest of this entry »

More coming on this one later (with lots of detailed instructions and pretty pictures, I promise), but for now, here’s a few of the best (I’ve sifted through for you).

1. The best looking band page on myspace: The Bled
2. The best looking (legal) profile page on myspace: Tim Bezinger
   1. NOTE: I’ll cover how these two pages are done in my tutorial.
3. Mike Industries

As you search, you might find some others that look similar, or even better. Keep in mind, if the myspace nav, the banner ads, or the copyright info at the bottom of the page isn’t visible, then you’ll get your account deleted. Which is your own risk.