Take the 2-minute tour ×

I wonder could some one enlighten me on an easier way of solving this code.I am new to flash and actionscript.

I want to have a text box, where a user enters their name. Each time a charachter is pressed, and image of that letter is displayed below the text box. So for example. user rights john. John is displayed in nice images below.

I have got this working, but I have to create a input box for each character, so I am left with eg. 6 boxes for each letter of name, that will only accept a character each. The reason for this is, I cannot place the images after each other, they keep overwriting the position of the 1st character typed, if only one single textbox is used.

I know i am going the long way around this, there must be something alot easier.

Here is the code, it will be very tedious if I have to go this route. Could someon give me a quick hinter on the correct way to go about this.

Thanks Fintan

firstname.addEventListener(KeyboardEvent.KEY_DOWN, key_pressed);
function key_pressed(event:KeyboardEvent):void {
if (event.charCode == 65) {
    var fl_MyInstance_2:LibrarySymbol = new LibrarySymbol();
        fl_MyInstance_2.x = 50
        fl_MyInstance_2.y = 200

} else if (event.charCode == 66) {
    var fl_MyInstance_3:letterb = new letterb();
        fl_MyInstance_3.x = 50
        fl_MyInstance_3.y = 200

} else if (event.charCode == 67) {
    var fl_MyInstance_4:letterc = new letterc();
        fl_MyInstance_4.x = 50
        fl_MyInstance_4.y = 200

} else if (event.charCode == 68) {
    var fl_MyInstance_5:letterd = new letterd();
        fl_MyInstance_5.x = 50
        fl_MyInstance_5.y = 200

} else if (event.charCode == 69) {
    var fl_MyInstance_6:letterd = new letterd();
        fl_MyInstance_6.x = 50
        fl_MyInstance_6.y = 200
share|improve this question
add comment

2 Answers

up vote 0 down vote accepted

I'll give you some code and some hints to try to point you to the right direction.

First of all, you don't need one different class for each alphabet letter - that would be at least 26 classes, or 52 if you take into account upper case/lower case, and it's totally unnecessary because each and all only serve one purpose - to show one letter.

What I would do instead is to make one MovieClip with 26 different frames (or 52 if upper/lower cases) labelled "a" to "z" (or "A" to "z"). In each of those frames, put the drawing of one letter, and one stop();. Link only this MovieClip to a class - Letter, or whatever.

Then, when the user writes on your firstname TextField, you have to be careful because he/she can hit other keys that are not letters - for example, the del key, back arrow, etc that might mess up with your visual representation. I think the only way to make sure you display everything right is to draw each time the whole contents of the textfield, like this:

firstname.addEventListener(KeyboardEvent.KEY_UP, key_pressed);

//container (empty) movieclip
var container_mc:MovieClip = new MovieClip();

function key_pressed(e:KeyboardEvent):void 

  var offset:Number=0;

  //clear container to update visual representation

  var letterInstance:Letter; //your linked class

  for(var i:uint=0;i<firstname.text.length;i++)
     letterInstance = new Letter();

     //go to frame corresponding to the letter at position "i"
     //OR use your own system to choose the image for each letter!

     //postion: x (plus offset to avoid overwritting), y
     letterInstance.x = 50 + offset;
     offset+= letterInstance.width;
     letterInstance.y = 200;

     //add letter to container


This code still has some problems, like names with non-letter characters like whitespaces, apostrophes, etc, but I think you can start working from here ;)

Hope to be of some help, good luck!

share|improve this answer
Thanks Danii. This worked fantastic. –  Fintan Mannix Oct 12 '11 at 22:08
Glad to help mate, if this answer solved your problem, a green checkie (accept) would be much appreciated! ;) –  danii Oct 12 '11 at 22:50
add comment

You say "So for example. user rights john. John is displayed in nice images below." So if I understand you correctly you want to display pre-rendered Bitmap images of the characters the user has typed?

If this is the case consider the following:

private var _image:Sprite = new Sprite(); // a container to hold your bitmaps (jpgs/pngs)
private var _spacing:uint = 30; // some arbitrary value to space them apart //
myInputTextField.addEventListener(Event.CHANGE, onNameChange);

function onNameChange(e:Event):void
// first clear the image sprite to accommodate things like backspaces //
    while(_image.numChildren) _image.removeChildAt(0);
// get the current string in the input textfield //
    var s:String = myInputTextField.text;
// and then layout a series of pre-rendered bitmaps based on those characters //
    for (var i:uint=0; i<s.length; i++){
        var c:String = s.substr(i, 1); // one character //
        var b:Bitmap = getImageCharacter(c);
            b.x = _spacing * i;

The following helper function is just a map that takes a character and maps it to a BitmapData object that say could be in your library.

function getImageCharacter(s:String):Bitmap
        case a: return new Bitmap(new ImageA()); break;
        case b: return new Bitmap(new ImageB()); break;
        case c: return new Bitmap(new ImageC()); break;

In this case ImageA could be a .png file in your library that was set to export as "ImageA".

This is just a simple example that could be much more optimized but this should get you started down the right path.

share|improve this answer
Thanks for your help Braitsch. I couldnt figure out the public/private vars, I kept getting error 1013 /1114. So I used the movie suggestion below. –  Fintan Mannix Oct 12 '11 at 22:09
add comment

Your Answer


