A Flash Developer Resource Site

Results 1 to 12 of 12

Thread: Dynamically Add New Text

  1. #1
    Member
    Join Date
    Jan 2010
    Location
    Bloomington, IL
    Posts
    52

    Question Dynamically Add New Text

    Hey,
    I'm building an application where the user makes their own logo/picture. I have a Logo MC, with a bunch of stuff. Here is my problem: I want the user to be able to add an unlimited amount of textboxes to the logo mc, but also be able to go back and edit those text boxes' color, filters, size, text etc. I don't know exactly how to go about doing this. I have a movieclip that is like a text control:
    It has a textbox to specify text, a colorpicker for color, etc. When a user clicks, "Add new text", I want to add a new text control movie clip to the end of all the others, and also link it to a textbox that is added in the logo. I thought this up:
    Code:
    function addNewText(){
    	var randomString:String = String(Math.random());
    	var anotherTextInLogo = new TextField();
    	anotherTextInLogo.name = randomString;
    	new TextControlBox(randomString);
    }
    I havn't made any classes, but I thought that maybe I could give the textbox a random name, then pass it on to the TextControlBox (Movieclip).

    If anybody understands what I'm trying to do, could you please help me out?

    -rustbuck

  2. #2
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    Your TextControlBox class should have a TextField property which will be the textfield it is controlling. In fact, I'd have the TextControlBox create that TextField. Don't worry about naming it, names are pretty much useless.

    skeleton of TextControlBox.as
    Code:
    public class TextControlBox extends MovieClip{
      public var textfield:TextField;
    
      public function TextControlBox(){
        textfield = new TextField();
      }
    
      //more methods, etc
    }
    Then, when you want to create a new TextControlBox, you can grab the textfield that it already created for you and put that somewhere.

    Code:
    var tcb:TextControlBox = new TextControlBox();
    var tf:TextField = tcb.textfield;
    controlBoxes.push(tcb);  //controlBoxes is an array.  You do want to keep track of them, don't you?
    addChild(tcb);
    logo.addChild(tf);
    Note, this is only a sketch. You should definitely not take it verbatim. Use this as a guideline to make your own code do what you want.

  3. #3
    Member
    Join Date
    Jan 2010
    Location
    Bloomington, IL
    Posts
    52
    So with that code how would the control access the textbox added into the logo. Im a bit confused, sorry.

  4. #4
    Member
    Join Date
    Jan 2010
    Location
    Bloomington, IL
    Posts
    52
    Like, what if I want to add an event listener that then changes the color of the textbox in the logo

  5. #5
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    The TextControlBox has a reference to the textfield, so any code in TextControlBox that wants to can access that field.

    Let's make a method in TextControlBox that sets the color of the text in the textfield.
    Code:
    public class TextControlBox extends MovieClip{
      public var textfield:TextField;
    
      public function TextControlBox(){
        textfield = new TextField();
      }
    
      public function setTextColor(color:uint):void{
        textfield.textColor = color;
      }
    }
    You could add a listener which eventually calls setTextColor.

  6. #6
    Member
    Join Date
    Jan 2010
    Location
    Bloomington, IL
    Posts
    52
    Okay! I understood what you were saying, so I made a new document where I made a quick controlbox movieclip, and linked it to the TextControlBox class. I also made a logo mc, and then put a button named test into the controlbox mc. Inside the controlbox mc, which btw has an instance name of tcb, i put this code:
    Actionscript Code:
    stop();
    test.addEventListener(MouseEvent.CLICK, handler);
    function handler(e:MouseEvent){
       
        this.setTextColor(0xFF0000);
        this.setText("Hello!");
       
    }
    I added a setText method to the class to see if stuff was working.
    It worked, and I got a textbox that said hello in red.
    But one thing I don't understand,
    how do I add children of the textcontrolbox(tcb) if i just drew it and converted it to a symbol?
    Here was my code on the main timeline:
    Actionscript Code:
    stop();
    //var tcb:TextControlBox = new TextControlBox(); //don't need?
    var tf:TextField = tcb.textfield;
    //controlBoxes.push(tcb);  //controlBoxes is an array.  You do want to keep track of them, don't you?
    addChild(tcb);
    logo.addChild(tf);
    I commented out the arrays thing, but you can see my question about the tcb. Is it possible to add children of a movieclip that I drew?
    Hope you can help, you've helped a TON, or should I say 5tons, already.
    rustbuck

  7. #7
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    Yes, if you put an instance of your TextControlBox on the stage through the IDE, then flash will create a variable to point to it with the same name as the instancename you gave it on stage. In this case, it's still tcb (or else you would have recieved an error on the addChild line).

    In fact, you're already taking a property of the movieclip you drew and adding it to logo. I think that if there are other parts of your TextControlBox symbol that are named, there should be corresponding properties. I'm not 100% sure since I typically don't develop with the flash IDE.

    What children of tcb do you want to add to what? Be aware that a display object can only be on the displaylist once. So if you add it somewhere else, it will be removed from tcb.

  8. #8
    Member
    Join Date
    Jan 2010
    Location
    Bloomington, IL
    Posts
    52
    I want to have multiple textcontrolboxes. How could I instantiate a new one when the user wants to add another textbox, but use the mc i drew in the IDE for the textcontrolbox?

  9. #9
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    In your library, you should have a symbol for the textcontrolbox you drew in the ide. Export it for Actionscript, and assign it the TextControlBox class. Then, any new TextControlBox you create (using new TextControlBox()) will look the same.

  10. #10
    Member
    Join Date
    Jan 2010
    Location
    Bloomington, IL
    Posts
    52
    bless your soul but don't i need to change the var that i instantiate the textcontrolbox with each time?

  11. #11
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    Nope. This would create and add 10 TextControlBoxes.

    Code:
    var lasty:int = 0;
    var controlBoxes:Array = [];
    for (var i:int =0; i<10; i++){
      var tcb:TextControlBox = new TextControlBox();
      tcb.y = lasty;
      lasty += tcb.height;
      addChild(tcb);
      controlBoxes.push(tcb);
    }
    I left out the code to get the textfield from it and do stuff with that, but you should be able to figure it out.

  12. #12
    Member
    Join Date
    Jan 2010
    Location
    Bloomington, IL
    Posts
    52
    THANK YOU! You're the best 5TonsOfFlax, a great guardian of actionscript and its babfoolery! hahhaaha! praise the almight 5tons! A great goose roams the earth!!!!!!!!1

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center