A Flash Developer Resource Site

Results 1 to 5 of 5

Thread: how to set input text hint

  1. #1
    Senior Member
    Join Date
    May 2016
    Posts
    451

    how to set input text hint

    hello all

    this is swishmax file

    i have 2 input text ( user name, pass)

    how to set input text hit as you see in web form ( Enter your name )

    my code is :


    PHP Code:
    onSelfEvent (load) {

        
    name_txt._text.border true;
        
    // how to set border size
        
    name_txt._text.background=true ;
        
    name_txt._text.backgroundColor 0xB35604;
        
    name_txt._text.borderColor 0xFF0000;
        
    name_txt._text.textColor 0xCCCCCC;
        
    // how to set hint text 
        // ex : name_txt.hintext = "Enter your name";
    }
    onFrame (1) {
        
      
    this.name_txt.onChanged = function(textfield_txt:TextField) {
       
    // i cant change textColor to black 
        
    stop();
    };

    swishmax file : https://app.box.com/s/hu01ebqtwkr6widb8pp0q3ujy81wyim8

    thanks for help

  2. #2
    Client Software Programmer AS3.0's Avatar
    Join Date
    Apr 2011
    Posts
    1,404
    Hi, you can set the stroke size & give the input text its empty field data.

    At the bottom of the onFrame(2) scripting section you can use the round rectangles to create a container, user_mc & pw_mc
    PHP Code:
    var form_data:Array=new Array("Enter your username""Enter your password")

    var 
    container=createRectangle(0,0,Stage.width/1.5,Stage.height/2,0xFFFFFF,0xCCCCCC,"20%",1,undefined,false,"password=false",0x999999,0x000000);//x,y,width,height,color,line color,rectangle options,stroke size,form data, pw text, form text color, input text color.
    var user_mc=createRectangle(0,0,200,30,0xFFFFFF,0xCCCCCC,"80%",0.1,form_data[0],"password=false",0x999999,0x000000);//x,y,width,height,color,line color,rectangle options,stroke size,form data, pw text, form text color, input text color.
    var pw_mc=createRectangle(0,0,200,30,0xFFFFFF,0xCCCCCC,"80%",0.1,form_data[1],"password=true",0x999999,0x000000);//x,y,width,height,color,line color,rectangle options,stroke size,form data, pw text, form text color, input text color.

    container._x=Stage.width/2-container._width/2//Center the container to the stages x coordinates.
    container._y=Stage.height/2-container._height/2//Center the container to stages y coordinates.

    user_mc._x=container._x+container._width/2-user_mc._width/2//Center the username text field to the stages x coordinates.
    pw_mc._x=container._x+container._width/2-user_mc._width/2//Center the username text field to the containers y coordinates.

    user_mc._y=container._y+container._height/2-user_mc._height/2-container._height/6//Center the username text field to the stages x coordinates.
    pw_mc._y=container._y+container._height/2-pw_mc._height/2+container._height/6//Center the username text field to the containers y coordinates. 
    Inside of the onFrame(2) scripting section at function createRectangle() I basically just added form_fill, which will show you text when the field is empty, you can modify form_color which is the text form color, & the color of the text thats being written:
    PHP Code:
    function createRectangle(x,y,w,h,color,line_color,rectangle_options,stroke_size,form_fill,pww,form_color,input_color) {
    x+=(stroke_size/2)
    w-=(stroke_size)
    y+=(stroke_size/2)
    h-=(stroke_size)
    this.createEmptyMovieClip("mc"+rect,this.getNextHighestDepth());
    rectangle_options=int(rectangle_options.split("%")[0])
    if(
    rectangle_options>100){
    rectangle_options=100
    }
    var 
    percent=rectangle_options
    if(percent<1){
    percent=0.1
    }
    if(
    w>h){
    rectangle_options=(((h/100)*percent)/2)
    }else{
    rectangle_options=(((w/100)*percent)/2)
    }





    curve_size=rectangle_options
    curve_size2
    =rectangle_options
    curve_size3
    =rectangle_options
    curve_size4
    =rectangle_options

    offset_x
    =x
    offset_y
    =y+h

    offset_x2
    =x
    offset_y2
    =y

    offset_x3
    =x+w
    offset_y3
    =y+h

    offset_x4
    =x+w
    offset_y4
    =y


    _root
    ["mc"+rect].clear()
    _root["mc"+rect].lineStyle(stroke_sizecolor100true"round""round""round"8);
    _root["mc"+rect].beginFill(color)

    _root["mc"+rect].moveTo(  -(0+(-offset_x)+(-curve_size)), - (0-offset_y));//BL
    _root["mc"+rect].curveTo(   (size+offset_x), ((size/(-curve_size))+offset_y)  ,  (size+offset_x) ,   (-size+offset_y+(-curve_size)))


    _root["mc"+rect].moveTo(0+offset_x2+curve_size2,0+offset_y2);//TL
    _root["mc"+rect].curveTo(size2+offset_x2,(size2/curve_size2)+offset_y2,size2+offset_x2,-size2+offset_y2+curve_size2)


    _root["mc"+rect].moveTo(0+offset_x3-curve_size3,0+offset_y3);//BR
    _root["mc"+rect].curveTo(size3+offset_x3,(size3/-curve_size3)+offset_y3,size3+offset_x3,-size3+offset_y3-curve_size3)


    _root["mc"+rect].moveTo(  -(0+(-offset_x4)+curve_size4), - (0-offset_y4));//TR
    _root["mc"+rect].curveTo(   (size4+offset_x4), ((size4/curve_size4)+offset_y4)  ,  (size4+offset_x4) ,   (-size4+offset_y4+curve_size4))



    _root["mc"+rect].moveTo(-(0+(-offset_x)+(-curve_size))  ,y);//TOP LINE
    _root["mc"+rect].lineTo( -( (-(0+(-offset_x)+(-curve_size)) ) - -(0+(-offset_x4)+curve_size4))  +-(0+(-offset_x)+(-curve_size)) ,y)

    _root["mc"+rect].moveTo(-(0+(-offset_x)+(-curve_size))  , (size/(-curve_size))+offset_y);//BOTTOM LINE
    _root["mc"+rect].lineTo( -( (-(0+(-offset_x)+(-curve_size)) ) - -(0+(-offset_x4)+curve_size4))  +-(0+(-offset_x)+(-curve_size)) ,((size/(-curve_size))+offset_y))

    _root["mc"+rect].moveTo(x,  (-size4+offset_y4+curve_size4))//LEFT LINE
    _root["mc"+rect].lineTo(x,  (-size+offset_y+(-curve_size))-(-size4+offset_y4+curve_size4)+(-size4+offset_y4+curve_size4))

    _root["mc"+rect].moveTo(x+w,  (-size4+offset_y4+curve_size4))//RIGHT LINE
    _root["mc"+rect].lineTo(x+w,  (-size+offset_y+(-curve_size))-(-size4+offset_y4+curve_size4)+(-size4+offset_y4+curve_size4))


    _root["mc"+rect].beginFill(color)
    _root["mc"+rect].moveTo(-(0+(-offset_x)+(-curve_size))  ,y);//OCTOGON FILL
    _root["mc"+rect].lineTo( -( (-(0+(-offset_x)+(-curve_size)) ) - -(0+(-offset_x4)+curve_size4))  +-(0+(-offset_x)+(-curve_size)) ,y)
    _root["mc"+rect].lineTo(x+w,  (-size4+offset_y4+curve_size4))
    _root["mc"+rect].lineTo(x+w,  (-size+offset_y+(-curve_size))-(-size4+offset_y4+curve_size4)+(-size4+offset_y4+curve_size4))
    _root["mc"+rect].lineTo( -( (-(0+(-offset_x)+(-curve_size)) ) - -(0+(-offset_x4)+curve_size4))  +-(0+(-offset_x)+(-curve_size)) ,((size/(-curve_size))+offset_y))
    _root["mc"+rect].lineTo(-(0+(-offset_x)+(-curve_size))  , (size/(-curve_size))+offset_y);
    _root["mc"+rect].lineTo(x,  (-size+offset_y+(-curve_size))-(-size4+offset_y4+curve_size4)+(-size4+offset_y4+curve_size4))
    _root["mc"+rect].lineTo(x,  (-size4+offset_y4+curve_size4))
    //END FILL
    _root["mc"+rect].endFill()
    _root["mc"+rect].lineStyle(stroke_sizeline_color100true"round""round""round"8);



    _root["mc"+rect].moveTo(  -(0+(-offset_x)+(-curve_size)), - (0-offset_y));//BL
    _root["mc"+rect].curveTo(   (size+offset_x), ((size/(-curve_size))+offset_y)  ,  (size+offset_x) ,   (-size+offset_y+(-curve_size)))


    _root["mc"+rect].moveTo(0+offset_x2+curve_size2,0+offset_y2);//TL
    _root["mc"+rect].curveTo(size2+offset_x2,(size2/curve_size2)+offset_y2,size2+offset_x2,-size2+offset_y2+curve_size2)


    _root["mc"+rect].moveTo(0+offset_x3-curve_size3,0+offset_y3);//BR
    _root["mc"+rect].curveTo(size3+offset_x3,(size3/-curve_size3)+offset_y3,size3+offset_x3,-size3+offset_y3-curve_size3)


    _root["mc"+rect].moveTo(  -(0+(-offset_x4)+curve_size4), - (0-offset_y4));//TR
    _root["mc"+rect].curveTo(   (size4+offset_x4), ((size4/curve_size4)+offset_y4)  ,  (size4+offset_x4) ,   (-size4+offset_y4+curve_size4))


    _root["mc"+rect].moveTo(-(0+(-offset_x)+(-curve_size))  ,y);//TOP LINE
    _root["mc"+rect].lineTo( -( (-(0+(-offset_x)+(-curve_size)) ) - -(0+(-offset_x4)+curve_size4))  +-(0+(-offset_x)+(-curve_size)) ,y)

    _root["mc"+rect].moveTo(-(0+(-offset_x)+(-curve_size))  , (size/(-curve_size))+offset_y);//BOTTOM LINE
    _root["mc"+rect].lineTo( -( (-(0+(-offset_x)+(-curve_size)) ) - -(0+(-offset_x4)+curve_size4))  +-(0+(-offset_x)+(-curve_size)) ,((size/(-curve_size))+offset_y))

    _root["mc"+rect].moveTo(x,  (-size4+offset_y4+curve_size4))//LEFT LINE
    _root["mc"+rect].lineTo(x,  (-size+offset_y+(-curve_size))-(-size4+offset_y4+curve_size4)+(-size4+offset_y4+curve_size4))

    _root["mc"+rect].moveTo(x+w,  (-size4+offset_y4+curve_size4))//RIGHT LINE
    _root["mc"+rect].lineTo(x+w,  (-size+offset_y+(-curve_size))-(-size4+offset_y4+curve_size4)+(-size4+offset_y4+curve_size4))
    if(
    form_fill!=undefined){
    _root["mc"+rect].createTextField("num"+0,mc.getNextHighestDepth(),0,0,_root["mc"+rect]._width,_root["mc"+rect]._height/2);    //Create textfield to store the form fill data "Enter your user name"  
    _root["mc"+rect]["num"+0]._x=0
    _root
    ["mc"+rect]["num"+0]._y=int(_root["mc"+rect]._height/2-(_root["mc"+rect]["num"+0]._height/2))
    _root["mc"+rect]["num"+0].border false;
    _root["mc"+rect]["num"+0].text form_fill//Set the form_fill text color.
    _root["mc"+rect]["num"+0].selectable=false
    _root
    ["mc"+rect]["num"+0].type="dynamic"//Make the field dynamic.
    myformat = new TextFormat();
    myformat.size=int(_root["mc"+rect]._height/2);
    myformat.color form_color
    myformat
    .bold=true;
    myformat.align="center";
    _root["mc"+rect]["num"+0].setTextFormat(myformat);
    _root["mc"+rect]["num"+0]._height=_root["mc"+rect]["num"+0].textHeight+_root["mc"+rect]["num"+0].textHeight/8
    _root
    ["mc"+rect]["num"+0]._y=int(((_root["mc"+rect]._height/2-_root["mc"+rect]["num"+0].textHeight/2)-_root["mc"+rect]["num"+0].textHeight/30)-((_root["mc"+rect]["num"+0].textHeight/8)/2))

    _root["mc"+rect].createTextField("num"+1,2,0,0,_root["mc"+rect]._width,_root["mc"+rect]._height/2);//Create a textfield to fill out the form data.
    _root["mc"+rect]["num"+1]._x=0
    _root
    ["mc"+rect]["num"+1]._y=int(_root["mc"+rect]._height/2-(_root["mc"+rect]["num"+1]._height/2))
    _root["mc"+rect]["num"+1].border false;
    _root["mc"+rect]["num"+1].type="input"//Set the textfield to input text.
    _root["mc"+rect]["num"+1].wordWrap false;
    _root["mc"+rect]["num"+1].multiline false;//Set multiline to false.
    _root["mc"+rect]["num"+1].text ""
    _root["mc"+rect]["num"+1].selectable=true//Make the text selectable.

    //_root["mc"+rect]["num"+1].type="input"

    myformat = new TextFormat();
    myformat.size=int(_root["mc"+rect]._height/2);
    myformat.color input_color
    myformat
    .bold=true;
    myformat.align="center";

    if(
    pww=="password=true"){//If pww is true you can set the textfield to password mode to hide user input.
    _root["mc"+rect]["num"+1].password=true
    }
    _root["mc"+rect]["num"+1].setTextFormat(myformat);
    _root["mc"+rect]["num"+1]._height=_root["mc"+rect]["num"+1].textHeight+_root["mc"+rect]["num"+1].textHeight/8
    _root
    ["mc"+rect]["num"+1]._y=int(((_root["mc"+rect]._height/2-_root["mc"+rect]["num"+1].textHeight/2)-_root["mc"+rect]["num"+1].textHeight/30)-((_root["mc"+rect]["num"+1].textHeight/8)/2))

    }
    _root["mc"+rect].blendMode="layer"
    _root["mc"+rect].position=0


    rect
    ++
    return 
    _root["mc"+(rect-1)]

    download v1

    swish font progress:
    For the font project I was able to complete 3 tables today, the table called 'post' gave me the name of each character in the .ttf.
    Last edited by AS3.0; 02-01-2023 at 12:34 AM.

  3. #3
    Senior Member
    Join Date
    May 2016
    Posts
    451
    I'm not an expert like you so I try to use tools instead of programming
    I've added the text
    And I just want to add a hint to it
    have you any idea to add a hint to text tool
    thanks my friend

  4. #4
    Client Software Programmer AS3.0's Avatar
    Join Date
    Apr 2011
    Posts
    1,404
    Hi, no problem, here is a simple version:

    PHP Code:
    onFrame(2){
    stop()


    function 
    setStyle(a,b,c){
    a._text.border true;//Set border to true for the text field to fill out.
    a._text.background=true ;//Set background = true.
    a._text.backgroundColor 0xB35604;//Set the background color to orange.
    a._text.borderColor 0xFF0000;//Set the border color to orange.
    a._text.textColor 0xCCCCCC;//Set the text color to black.
    a._text.password=c//c = true or false for password mode.
    a.text=""//Empty the textfield if it has data.
    b._x=a._x//Reposition the overlay text.
    b._y=a._y
    }

    setStyle(_root.main.login.username_txt,_root.main.login.username_overlay,false)//Set style for username_txt to fill, the overlay with the form data, & password mode = true or false.
    setStyle(_root.main.login.password_txt,_root.main.login.password_overlay,true);//Set style for username_txt to fill, the overlay with the form data, & password mode = true or false.






    var keyListener:Object = new Object();
    keyListener.onKeyUp = function() {//When the key is released, update visibility of the form fill text.
    if(_root.main.login.username_txt.text.length!=0){//If the username text field is not empty, set the form fill to invisible.
    _root.main.login.username_overlay._visible=false//Set the form fill to invisible.
    }else if(_root.main.login.username_txt.text.length==0){
    _root.main.login.username_overlay._visible=true//Set form fill to visible if the textfield is empty.
    }
    if(
    _root.main.login.password_txt.text.length!=0){//Repeat the same process for the password textfield.
    _root.main.login.password_overlay._visible=false
    }else if(_root.main.login.password_txt.text.length==0){
    _root.main.login.password_overlay._visible=true
    }

    };
    Key.addListener(keyListener);



    download v2 (swish)

  5. #5
    Senior Member
    Join Date
    May 2016
    Posts
    451

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