CODEWITHSUNDEEP
flashactionscript-3eventstextinput
Fintan Mannix
Fintan Mannix

Reputation: 23

Actionscript 3 Flash Keyboard Event

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

////////////////111111////////////////////
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
        addChild(fl_MyInstance_2);

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

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

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

} else if (event.charCode == 69) {
    var fl_MyInstance_6:letterd = new letterd();
        fl_MyInstance_6.x = 50
        fl_MyInstance_6.y = 200
    addChild(fl_MyInstance_6);  
}

Upvotes: 1

Views: 941

Answers (2)

danii
danii

Reputation: 5693

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:

//KEY UP EVENT
firstname.addEventListener(KeyboardEvent.KEY_UP, key_pressed);

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

function key_pressed(e:KeyboardEvent):void 
{

  var offset:Number=0;

  //clear container to update visual representation
  while(container_mc.numChildren>0)
    container_mc.removeChildAt(0);

  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!
     letterInstance.gotoAndStop(first_name.text.charAt(i));

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

     //add letter to container
     container_mc.addChild(letterInstance);
   }

}

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!

Upvotes: 0

braitsch
braitsch

Reputation: 15334

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;
        _image.addChild(b);
    }
}

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
{  
    switch(s){
        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.

Upvotes: 1

Related Questions