# 2d array text effect

**URL:** <https://forum.kirupa.com/t/2d-array-text-effect/182748>\
**Category:** open source\
**Created:** [March 21, 2006, 5:12am UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748 "2006-03-21T05:12:23Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![Lindquist](https://avatars.discourse-cdn.com/v4/letter/l/ccd318/32.png) [@Lindquist](https://forum.kirupa.com/u/Lindquist)\
**Post date:** [March 25, 2006, 2:58am UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/21 "2006-03-25T02:58:18Z")

</div>

Sweet idea, here’s some bitmap action added into the mix. (In hindsight, I probably should’ve inherited your Tile class instead of changing it).

All you have to do in the .fla is change this line:

```auto

var Scene:Tile = new Tile(text_arr,"block",10 ,_root,true);

```

to this line:

```auto

var Scene:BitmapTile = new BitmapTile(text_arr,"block",10 ,_root,true, "pic");

```

Where “pic” references a picture in the library.

---

<div class="post-metadata">

**Author:** ![phorte](https://avatars.discourse-cdn.com/v4/letter/p/77aa72/32.png) [@phorte](https://forum.kirupa.com/u/phorte)\
**Post date:** [March 25, 2006, 12:38pm UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/22 "2006-03-25T12:38:03Z")

</div>

would be cool if you could use a black and white image as like the array mask for it. So like you could draw up your little logo on a 20,20 jpeg or somtin. The put that into flash and it could read the black pixels and make them 1 in the the array and white pixels would be 0’s. Dunno just an idea, would save having to do the whole creating a new array everytime you wanted to change it.

---

<div class="post-metadata">

**Author:** ![rmo518](https://avatars.discourse-cdn.com/v4/letter/r/f19dbf/32.png) [@rmo518](https://forum.kirupa.com/u/rmo518)\
**Post date:** [March 25, 2006, 1:38pm UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/23 "2006-03-25T13:38:59Z")

</div>

There was a small bug in my code before - it inserted an extra comma at the end of the last second level array. A small tweak to the AS gets rid of it.

[AS]w = 15;  
h = 5;  
w\_txt.onChanged = createPixels;  
h\_txt.onChanged = createPixels;  
createPixels();  
function createPixels() {  
\_root.createEmptyMovieClip(“eraser”, 1);  
\_root.createEmptyMovieClip(“grid”, 1);  
k = 0;  
for (j=0; j\<h; j++) {  
for (i=0; i\<w; i++) {  
k++;  
clip = \_root.grid.attachMovie(“pixel”, “pixel”+k, k, {\_x:i_10, \_y:j_10});  
clip.onRelease = function() {  
this.play();  
};  
}  
}  
}  
function createArray() {  
pixelArray = new Array();  
for (i=1; i\<=w_h; i++) {  
if (\_root.grid[“pixel”+i].\_currentframe == 1) {  
pixelArray.push(0);  
} else {  
pixelArray.push(1);  
}  
}  
trace(“text\_arr = [”);  
pixelString = pixelArray.join(", “);  
for (i=0; i\<h; i++) {  
if (i == h-1) {  
trace(”["+pixelString.substr(i_w_3, (w_3)-2)+"]");  
} else {  
trace("["+pixelString.substr(i_w_3, (w\*3)-2)+"],");  
}  
}  
trace("];");  
}[/AS]

---

<div class="post-metadata">

**Author:** ![Lindquist](https://avatars.discourse-cdn.com/v4/letter/l/ccd318/32.png) [@Lindquist](https://forum.kirupa.com/u/Lindquist)\
**Post date:** [March 25, 2006, 2:50pm UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/24 "2006-03-25T14:50:51Z")

</div>

> [@aussie devil](#):
>
> would be cool if you could use a black and white image as like the array mask for it. So like you could draw up your little logo on a 20,20 jpeg or somtin. The put that into flash and it could read the black pixels and make them 1 in the the array and white pixels would be 0’s. Dunno just an idea, would save having to do the whole creating a new array everytime you wanted to change it.

With my addition up above, you could just plop in your jpeg and set the entire array as 1’s to get the result you’re asking for.

---

<div class="post-metadata">

**Author:** ![nugget](https://avatars.discourse-cdn.com/v4/letter/n/ebca7d/32.png) [@nugget](https://forum.kirupa.com/u/nugget)\
**Post date:** [March 25, 2006, 5:51pm UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/25 "2006-03-25T17:51:45Z")

</div>

thanks for that bitmap thing its awsome.  
i have no idfea how to work with bitmap class so maybe ill learn by reading yours.

thanks

---

<div class="post-metadata">

**Author:** ![Lindquist](https://avatars.discourse-cdn.com/v4/letter/l/ccd318/32.png) [@Lindquist](https://forum.kirupa.com/u/Lindquist)\
**Post date:** [March 25, 2006, 6:32pm UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/26 "2006-03-25T18:32:43Z")

</div>

It’s pretty simple once you understand the copyPixels() method requires parameters from the Rectangle class and the Point class. Rectangle is just a way to store and \_x,\_y , width, and height, while Point just stores \_x, \_y.

---

<div class="post-metadata">

**Author:** ![cr125rider](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/cr125rider/32/534_2.png) [@cr125rider](https://forum.kirupa.com/u/cr125rider)\
**Post date:** [March 25, 2006, 6:36pm UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/27 "2006-03-25T18:36:47Z")

</div>

rmo518, could you make it so it adds pixles on the drag in as well as the on click, I think that would make it a little easier to doodle. I know we can add it since you posted your source, but in future versions if you were thinking of continuing this I think that would be cool! Nice work!

---

<div class="post-metadata">

**Author:** ![nugget](https://avatars.discourse-cdn.com/v4/letter/n/ebca7d/32.png) [@nugget](https://forum.kirupa.com/u/nugget)\
**Post date:** [March 25, 2006, 8:04pm UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/28 "2006-03-25T20:04:19Z")

</div>

> [@Lindquist](#):
>
> It’s pretty simple once you understand the copyPixels() method requires parameters from the Rectangle class and the Point class. Rectangle is just a way to store and \_x,\_y , width, and height, while Point just stores \_x, \_y.

that too, i don’t know the rectangle class or point class or any of the new stuff in flash 8. ill learn though.

---

<div class="post-metadata">

**Author:** ![rmo518](https://avatars.discourse-cdn.com/v4/letter/r/f19dbf/32.png) [@rmo518](https://forum.kirupa.com/u/rmo518)\
**Post date:** [March 25, 2006, 10:20pm UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/29 "2006-03-25T22:20:57Z")

</div>

> [@cr125rider](#):
>
> rmo518, could you make it so it adds pixles on the drag in as well as the on click, I think that would make it a little easier to doodle. I know we can add it since you posted your source, but in future versions if you were thinking of continuing this I think that would be cool! Nice work!

Yeah, that’s a good idea. Let me see what I can come up with.

---

<div class="post-metadata">

**Author:** ![rmo518](https://avatars.discourse-cdn.com/v4/letter/r/f19dbf/32.png) [@rmo518](https://forum.kirupa.com/u/rmo518)\
**Post date:** [March 25, 2006, 10:50pm UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/30 "2006-03-25T22:50:49Z")

</div>

I’ve added a pen and an eraser tool that should let you press and drag to add/remove pixels (as cr125rider suggested).

The AS depends on the tools movieclip that has the pencil and eraser buttons in it (check out the FLA to see how that works).

[AS]w = 15;  
h = 5;  
w\_txt.onChanged = createPixels;  
h\_txt.onChanged = createPixels;  
createPixels();  
\_root.onMouseDown = function() {  
pen = setInterval(pressAndDrag, 10);  
};  
\_root.onMouseUp = function() {  
clearInterval(pen);  
};  
function pressAndDrag() {  
if (\_root.\_xmouse\<=w_10 && \_root.\_ymouse\<=h_10 && \_root.\_xmouse\>0 && \_root.\_ymouse\>0) {  
pixID = Math.ceil(\_root.\_xmouse/10)+(Math.floor(\_root.\_ymouse/10)_w);  
if (\_root.tool == “pencil”) {  
\_root.grid[“pixel”+pixID].gotoAndStop(2);  
} else {  
\_root.grid[“pixel”+pixID].gotoAndStop(1);  
}  
}  
}  
function createPixels() {  
\_root.createEmptyMovieClip(“eraser”, 1);  
\_root.createEmptyMovieClip(“grid”, 1);  
k = 0;  
for (j=0; j\<h; j++) {  
for (i=0; i\<w; i++) {  
k++;  
clip = \_root.grid.attachMovie(“pixel”, “pixel”+k, k, {\_x:i_10, \_y:j_10});  
}  
}  
}  
function createArray() {  
pixelArray = new Array();  
for (i=1; i\<=w_h; i++) {  
if (\_root.grid[“pixel”+i].\_currentframe == 1) {  
pixelArray.push(0);  
} else {  
pixelArray.push(1);  
}  
}  
trace(“text\_arr = [”);  
pixelString = pixelArray.join(", “);  
for (i=0; i\<h; i++) {  
if (i == h-1) {  
trace(”["+pixelString.substr(i_w_3, (w_3)-2)+"]");  
} else {  
trace("["+pixelString.substr(i_w_3, (w_3)-2)+"],");  
}  
}  
trace("];");  
}[/AS]

---

<div class="post-metadata">

**Author:** ![Lindquist](https://avatars.discourse-cdn.com/v4/letter/l/ccd318/32.png) [@Lindquist](https://forum.kirupa.com/u/Lindquist)\
**Post date:** [March 25, 2006, 11:08pm UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/31 "2006-03-25T23:08:22Z")

</div>

> [@rmo518](#):
>
> Yeah, that’s a good idea. Let me see what I can come up with.

Do you have any experience with JSFL?

---

<div class="post-metadata">

**Author:** ![rmo518](https://avatars.discourse-cdn.com/v4/letter/r/f19dbf/32.png) [@rmo518](https://forum.kirupa.com/u/rmo518)\
**Post date:** [March 25, 2006, 11:15pm UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/32 "2006-03-25T23:15:14Z")

</div>

> [@Lindquist](#):
>
> Do you have any experience with JSFL?

No, I don’t. (I actually had to look it up when I saw your question.) I’m still working in Flash MX. It looks like that was introduced in MX 2004.

Why do you ask?

---

<div class="post-metadata">

**Author:** ![Lindquist](https://avatars.discourse-cdn.com/v4/letter/l/ccd318/32.png) [@Lindquist](https://forum.kirupa.com/u/Lindquist)\
**Post date:** [March 25, 2006, 11:49pm UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/33 "2006-03-25T23:49:56Z")

</div>

> [@rmo518](#):
>
> Why do you ask?

It would allow you to make the tool built-in to the Flash authoring environment. Meaning you wouldn’t have to publish a swf, then copy and paste from the output. You could just use it as one of the tools inside Flash (or so I understand, someone correct me if I’m wrong).

Mind if I give it a try? I didn’t want to step on your feet. I haven’t messed with it at all, but this looks like a good reason to try it out.

---

<div class="post-metadata">

**Author:** ![rmo518](https://avatars.discourse-cdn.com/v4/letter/r/f19dbf/32.png) [@rmo518](https://forum.kirupa.com/u/rmo518)\
**Post date:** [March 26, 2006, 5:40pm UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/34 "2006-03-26T17:40:18Z")

</div>

> [@Lindquist](#):
>
> Mind if I give it a try? I didn’t want to step on your feet. I haven’t messed with it at all, but this looks like a good reason to try it out.

I wouldn’t mind at all, I’d love to see something like that - it sounds much less clumsy than what I’m doing here.

---

<div class="post-metadata">

**Author:** ![Zelwyn](https://avatars.discourse-cdn.com/v4/letter/z/3e96dc/32.png) [@Zelwyn](https://forum.kirupa.com/u/Zelwyn)\
**Post date:** [March 26, 2006, 9:57pm UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/35 "2006-03-26T21:57:01Z")

</div>

> [@rmo518](#):
>
> There was a small bug in my code before - it inserted an extra comma at the end of the last second level array. A small tweak to the AS gets rid of it.

[SIZE=4][FONT=Comic Sans MS][COLOR=#680aac][COLOR=#680aac]  
If you want it to show in the movie, just make a dynamic text box, that refers to “\_root.textBox”, or something, and replace the first trace statement with ’ textBox = “text\_arr = [” ', and the subsequent ones with ’ textBox += whatever '. That should work. I haven’t actually tried it.[/COLOR]  
[/COLOR][/FONT][/SIZE]

---

<div class="post-metadata">

**Author:** ![rmo518](https://avatars.discourse-cdn.com/v4/letter/r/f19dbf/32.png) [@rmo518](https://forum.kirupa.com/u/rmo518)\
**Post date:** [March 27, 2006, 2:10am UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/36 "2006-03-27T02:10:33Z")

</div>

> [@Zelwyn](#):
>
> If you want it to show in the movie, just make a dynamic text box, that refers to “\_root.textBox”, or something, and replace the first trace statement with ’ textBox = “text\_arr = [” ', and the subsequent ones with ’ textBox += whatever '. That should work. I haven’t actually tried it.[SIZE=4][FONT=Comic Sans MS][COLOR=#680aac]  
> [/COLOR][/FONT][/SIZE]

That’s great. I was trying to think of a way to do that and it didn’t occur to me to use += to tack on each line as it’s written. I set the text box up to render as HTML so I could throw in some \<br\> tags and keep it in a similar format to the original example. Thanks for the idea.

The modified code:  
[AS] \_root.textBox = “text\_arr = [\<br\>”;  
pixelString = pixelArray.join(“, “);  
for (i=0; i\<h; i++) {  
if (i == h-1) {  
\_root.textBox += “[”+pixelString.substr(i_w_3, (w_3)-2)+“]\<br\>”;  
} else {  
\_root.textBox += “[”+pixelString.substr(i_w_3, (w_3)-2)+”],\<br\>”;  
}  
}  
\_root.textBox += “];”;[/AS]

While I was in there, I added text boxes right to the swf that let you change the size of the pixel grid while the swf is running (instead of having to change the as and re-export).

[FONT=Courier New][/FONT]

---

<div class="post-metadata">

**Author:** ![cr125rider](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/cr125rider/32/534_2.png) [@cr125rider](https://forum.kirupa.com/u/cr125rider)\
**Post date:** [March 27, 2006, 5:05am UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/37 "2006-03-27T05:05:56Z")

</div>

I added color functionallity to it, but it was to an old version. rmo518, it would be really cool if you could add it to a new version of it. I like the changes, I was thinking of adding those myself but you made a much nicer version :D.

Here is what I changed in the AS file, you can see the “setRGB” stuff that I added. It pulls from an array the editor spits out.  
[FONT=Courier New][/FONT]

```auto

for (var i = 0; i<Line1_mc.text_arr.length; i++) {
        for (var j = 0; j<Line1_mc.text_arr*.length; j++) {
            depth = Line1_mc.getNextHighestDepth();
            if (Line1_mc.text_arr*[j] == 1) {
                Line1_mc.attachMovie("block", "block"+depth.toString(), depth);
                var my_color:Color = new Color(_root.Line1_mc["block"+depth].block.block);
                my_color.setRGB(_root.Line1_mc.color_arr*[j]); // my_mc turns red
                Line1_mc["block"+depth]._x = (j*10)+(Stage.width/2-Line1_mc.maxwidth/2);
                Line1_mc["block"+depth]._y = (i*10)+(Stage.height/2-Line1_mc.maxheight/2);
                Line1_mc["block"+depth].xStart = Line1_mc["block"+depth]._x;
                Line1_mc["block"+depth].yStart = Line1_mc["block"+depth]._y;
            }
            _root.Line1_mc["block"+depth].onEnterFrame = function() {
                _root.EffectMe(this, _root.effectNumb);
            };
        }
    }

```

Please incorperate the new color stuff, makes it soo much cooler. Here is a SWF of my mod too, it has presets and stuff but the FLA is too big to host on here. Preset 3 shows off the color capabilities.

EDIT: OOPS rmo, I saw that your runnin MX, I’ll save a mx version for ya. I changed the structure of the little “pixles”. I made a MC inside of them that changes colors, so they still keep their outline.

---

<div class="post-metadata">

**Author:** ![Zelwyn](https://avatars.discourse-cdn.com/v4/letter/z/3e96dc/32.png) [@Zelwyn](https://forum.kirupa.com/u/Zelwyn)\
**Post date:** [March 27, 2006, 5:57am UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/38 "2006-03-27T05:57:35Z")

</div>

[SIZE=4][FONT=Comic Sans MS][color=#680aac]I made a class oriented color file!! All you do is pass an array of tile mc’s to the mc argument, and it does the work for you! You can have as many different colors as you want! I think I worked out all the bugs, and with minimal butchering of the original code. (yay!) This project is really cool. It’ll be really great for tile based games, not to mention just effects. I think, if you wanted to, you could use little chopped up pieces of a bitmap as tiles, and it would reduce the use for the BitmapData or BitmapTile classes. Ease of use is good!

Usage:  
tiles = [“block”, “block2”, “block3”];  
var Scene:Tile = new Tile(tile\_arr, tiles, 10, \_root, true);  
Scene.distance();

P.S. FYI, the file TileColor.as, is only named that. The class is still Tile.[/color]  
[/FONT][/SIZE]

---

<div class="post-metadata">

**Author:** ![Maryle](https://avatars.discourse-cdn.com/v4/letter/m/47e85d/32.png) [@Maryle](https://forum.kirupa.com/u/Maryle)\
**Post date:** [March 27, 2006, 7:19am UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/39 "2006-03-27T07:19:19Z")

</div>

nice works !

I have an idea .if somebody can combine the rmo518 “create array” with tilemaps ,that is would be cool. can dynamic generate text array and dynamic generate tilemaps…

I trid it but it cannot work .I am newbie with AS.

```auto

var text_arr=new Array();
w = 15;
h = 5;
createPixels();
_root.onMouseDown = function() {
    pen = setInterval(pressAndDrag, 10);
};
_root.onMouseUp = function() {
    clearInterval(pen);
};
function pressAndDrag() {
    if (_root._xmouse<=w*10 && _root._ymouse<=h*10 && _root._xmouse>0 && _root._ymouse>0) {
        pixID = Math.ceil(_root._xmouse/10)+(Math.floor(_root._ymouse/10)*w);
        if (_root.tool == "pencil") {
            _root.grid["pixel"+pixID].gotoAndStop(2);
        } else {
            _root.grid["pixel"+pixID].gotoAndStop(1);
        }
    }
}
function createPixels() {
    _root.createEmptyMovieClip("eraser", 1);
    _root.createEmptyMovieClip("grid", 1);
    k = 0;
    for (j=0; j<h; j++) {
        for (i=0; i<w; i++) {
            k++;
            clip = _root.grid.attachMovie("pixel", "pixel"+k, k, {_x:i*10, _y:j*10});
        }
    }
}
function createArray() {
    pixelArray = new Array();
    for (i=1; i<=w*h; i++) {
        if (_root.grid["pixel"+i]._currentframe == 1) {
            pixelArray.push(0);
        } else {
            pixelArray.push(1);
        }
    }
    [COLOR=red]_root.textBox = "[";[/COLOR]
    pixelString = pixelArray.join(", ");
    for (i=0; i<h; i++) {
        if (i == h-1) {
            _root.textBox += "["+pixelString.substr(i*w*3, (w*3)-2)+"]";
        } else {
            _root.textBox += "["+pixelString.substr(i*w*3, (w*3)-2)+"],";
        }
    }
    _root.textBox += "];";
    [COLOR=red]text_arr.push(_root.textBox);
    trace(text_arr);
    doeffect();[/COLOR]    
 
}
[COLOR=red]function doeffect(){[/COLOR]maxwidth = text_arr[0].length*11;
maxheight = text_arr.length*11;
for (var m = 0; m<text_arr.length; m++) {
    for (var n = 0; n<text_arr[m].length; n++) {
        depth = this.getNextHighestDepth();
        if (text_arr[m][n] == 1) {
            this.attachMovie("block", "block"+depth.toString(), depth);
            this["block"+depth]._x = (n*10)+(Stage.width/2-maxwidth/2);
            this["block"+depth]._y = (m*10)+(Stage.height/2-maxheight/2);
        }
        this["block"+depth].onEnterFrame = function() {
            dx = this._x-_root._xmouse;
            dy = this._y-_root._ymouse;
            dist = Math.sqrt(dx*dx+dy*dy);
            if (dist > 100) dist = 100;
            this._xscale = this._yscale += (dist-this._xscale);
        };
    }
}
}
 

```

can trace text\_arr array .but it is not works fine?

---

<div class="post-metadata">

**Author:** ![nugget](https://avatars.discourse-cdn.com/v4/letter/n/ebca7d/32.png) [@nugget](https://forum.kirupa.com/u/nugget)\
**Post date:** [March 27, 2006, 3:01pm UTC](https://forum.kirupa.com/t/2d-array-text-effect/182748/40 "2006-03-27T15:01:18Z")

</div>

this has really come a long way and just keeps getting better.  
rmo518, your array creator makes it so easy to make an array instead of manulaay typiung it.

[Previous page](https://forum.kirupa.com/t/2d-array-text-effect/182748.md?page=1)

[Next page](https://forum.kirupa.com/t/2d-array-text-effect/182748.md?page=3)