A little flash Advice

thedude_frombaywatch

I ran into this website.

http://www.generative.net/generator/


And I was hoping you can help and point me to a tutorial or how I can get the same
text effect on the banner above the website. At first it's a fluttering bunch of boxes but it
assembles into a word.

I'm a pretty intermediate flash user but I'm definitely looking for help.

Thanks!

kedinik

I would try to help, except the banner is only a static image when I visit that link.

e: Hmmm. With a different browser I downloaded 'generator', but it's an unknown filetype.

Jasconius

Look into FlashEff... which is a huge collection of text animation effects.

It's very hard to code these sorts of things from scratch. It's really a sausage factory of code. You've got to print the text into a movieclip, capture the clip is a bitmap, and then do hardcore image manipulation via code.

FlashEff occasionally runs sales and/or freebies... not sure if they that exact effect.

kedinik

FlashEff can be pretty useful, but I've run into a few annoying problems:

1) If you're using pure action script, crucial lines of code simply... don't work. One of the three most important features just plain doesn't work at all, and as of a few months ago this was a long-standing bug.

2) If you're masking a small part of a large object, FlashEff transitions come out distorted and hideous. They scale to the full size of the hidden object.

Technicality

Heres how I would go about it in AS2 if I wanted to keep it simple (whipped up in a few mins):

var text = "";
text += " XXXX ";
text += "X    X";
text += "X     ";
text += "X  XXX";
text += "X    X";
text += " XXXX ";

var textwidth = 6;
var size = 10;

for (i=0; i<text.length; i++) {
	if (text.charAt(i) == "X") {
		// draw a box for each X
		this.createEmptyMovieClip(i,i);
		this[i].beginFill(0x000000,100);
		this[i].moveTo(0,0);
		this[i].lineTo(size,0);
		this[i].lineTo(size,size);
		this[i].lineTo(0,size);
		this[i].endFill();
		// give each box some dynamic behaviour
		this[i].onEnterFrame = dynamicBoxOnEnterFrame;
	}
}


function dynamicBoxOnEnterFrame() {
	var id = this._name;
	// how far is this box from the mouse pointer
	var sdist = Math.pow(this._x-_xmouse, 2)+Math.pow(this._y-_ymouse, 2);
	if (sdist<20*size*size) {
		// its quite close, so make the box move about
		this._x += (this._x-_xmouse)/size;
		this._y += (this._y-_ymouse)/size;
	} else {
		// its not that close, so position the box according to its id
		this._x = 100+(id&#37;textwidth)*size;
		this._y = 100+Math.floor(id/textwidth)*size;
	}
}

Its not identical to the effect you showed, but thats because I'm lazy and I was trying to keep it short, simple and show the basic principle.

By drawing in the rest of the letters in ascii X's (and adjusting the textwidth variable appropriately) and adding to the onEnterFrame a little it wouldn't take much longer to reproduce the effect exactly. Hopefully this will give you a few ideas.