20 Replies Latest reply on Apr 27, 2007 3:06 PM by Greg Dove

    Password Field Question

    bcounts Level 1
      I am working on an advanced login page . . . I have an idea but I am not sure how to execute and could not find any help on google or the forums.

      I want to replace the standard * symbol you get when you type in a password field with a custom circle (see link below for a example image)


      I am not sure what kinda code could achive this . . . can someone give me a detailed example or push in a direction?

      Thanks For Help In Advance!

        • 1. Re: Password Field Question
          kglad Adobe Community Professional & MVP
          unless that's really important it's not worth the trouble.
          • 2. Re: Password Field Question
            bcounts Level 1
            Lets say it is worth the trouble - what would you suggest for a starting point or code?

            The stars take away from the design of the site.

            Thanks In Advance For Any Advice
            • 3. Re: Password Field Question
              kglad Adobe Community Professional & MVP
              1. use the onChanged method of your textfield to detect each character entered into your textfield
              2. store the entered character in a string variable that will contain the text entered.
              3. for each character entered add your graphic to your textfield.*

              * this is the difficult part.

              you'll add your graphic to your fla, convert it to a movieclip and assign it an linkage id.

              enable the html property of your textfield and make it multiline. make sure its _height is sufficient to embed the graphic.

              you can then use:

              tf.htmlText="<img src='yourID'>"; // where your textfield has instance name tf and your linkage id is yourID.

              to add you image (converted to a movieclip) to your textfield. you'll need to work out the positioning of you image and positioning the cursor. positioning your image is the part of this that i don't you'll enjoy.

              • 4. Re: Password Field Question
                bcounts Level 1
                I will give that a try and see if it works - how would you suggest going about positioning? What handle or event would you start with?
                • 5. Re: Password Field Question
                  kglad Adobe Community Professional & MVP
                  i suggest trial and error. you'll need to size your textfield (and/or your image) so they accomodate each other.
                  • 6. Password Field Question
                    Greg Dove Level 4
                    I gave some thought to this also. Its easy to do it if you don't need to see the blink caret cursor, but to have it look like a regular textfield seems to be a little tricky.
                    I did however find one simple way to acheive a similar effect. It's not perfect, but perhaps it will help.

                    if you have your input password textfield called password, with Arial size 25, plain text

                    And you create another textfield, which is a 'dynamic' called passRender. Make it non-selectable (important) and put it in a layer above your password textfield. Here's the trick: Make it font size 14, Choose font Wingdings and embed one single character: lower case L "l" . This is a dot in the size/style that you're aiming for.
                    Then use this code (or similar):

                    password.onChanged = function() {
                    passRender.text = ("llllllllllllllllllllllllllllllllllllllllllllllllll").substr(0,password.text.length);

                    password.password = true

                    You will need to position the passRender textfield it so that it overlays the asterisk characters that appear when you type a password. I tried using embed on the password field with a single asterisk character... because I think it uses a device font for the asterisk in the password field- (and so perhaps this will not work well on all machines if it doesn't appear at the same size/shape for the asterisk)... with unusual results. some keys were not getting recognised.

                    Anyhow its an alternative approach, you may want to consider it.
                    • 7. Re: Password Field Question
                      nITiNkIlLeRmEeRuT Level 1
                      I have implemented same type of functionality in one of the projects.
                      What i remember was it was a simulation project for Windows XP and on a screen we have show the login screen.
                      In windows XP the rounded bullets shown in password field are a bit large icon and i can't seem to locate that in any of the fonts.

                      To make it to work I create a font using some font creator program (don't remember the name) In the font I replace the characters with the symbol i created which resembles the XP login screen symbol. Use the font in the textfield for flash (embed font).

                      And it worked perfectly.
                      • 8. Re: Password Field Question
                        Greg Dove Level 4
                        I see what you mean. I just embedded the full set of basic latin in the password field, and it changed the asterisk character to the version used in that font.... so your way is good and my way would also work better by doing this (because the device font might be unpredictable for asterisk size/position)
                        • 9. Re: Password Field Question
                          Greg Dove Level 4
                          Ok, here is a proof of concept with my approach. because of embedded fonts its 18K though.

                          • 10. Password Field Question
                            nITiNkIlLeRmEeRuT Level 1
                            I open your page and this is what i got

                            Login Panel Demo

                            Requires Flash Player version 8 or higher. You have Flash player 9.0.45 installed.

                            Oops got flash blocker installed so .
                            Looks good.

                            I only embedded the characters which can be used for password field like alphanumeric characters which definitely reduces the size.
                            • 11. Re: Password Field Question
                              Greg Dove Level 4
                              (you had me panicking for a while there!)

                              It turned out that most of the size was because I had embedded the username field as well. By removing that and making password only alphanumeric (plus the mandatory asterisk) I got it down to 5Kb.
                              • 12. Re: Password Field Question
                                Greg Dove Level 4
                                @ bcounts: if you want my fla, let me know. By itself it may not be immediately useful. I used a font called 'Latha' to embed for the password field, because it had a smallish and well centred asterisk. My fla won't work for you correctly unless you have that font. But you could use my approach or the one outlined by nITiNkIlLeRmEeRuT to make this work.

                                My approach doesn't scale well - it only works well at 100% size, but requires no font editing. nITiNkIlLeRmEeRuT's approach is more robust and should also scale well.
                                • 13. Re: Password Field Question
                                  Greg Dove Level 4
                                  @himm66: please read the forum rules. Your post does not qualify as an announcement.

                                  No advertising or solicitation is permitted on Adobe's Online Forums. However, if you have an announcement to make that is of direct interest to a particular forum topic - a single post is acceptable, as long as you add 'ANN' (for 'announcement') to the beginning of your subject line. This way people who are not interested can easily skip past your post.
                                  • 14. Re: Password Field Question
                                    here's a crazy idea....

                                    could you create on focus function for the text field that stores all keystrokes into an array and just displays a std character in the text field for each key press? OF course, parsing delete strokes could be a pain, but perhaps you can manage that on input rather than on submission. Good luck!
                                    • 15. Re: Password Field Question
                                      Greg Dove Level 4
                                      Yep, I thought of that too,and its not too different in principle from what kglad suggested... except you're using a Key listener. I even started to code something like that but it was going to be way more difficult to do than the way I ended up doing it. Its just a lot easier doing it with textfields.

                                      Its even easier to do the same thing that I did with a completely invisible password field (not invisible in the flash sense, but just setting the font colour to the same as the background). But then you lose the caret cursor, because its also invisible - that would be unusual from a user point of view. So that's why I played around to 'cover' over the asterisk characters. The other approach mentioned by nITiNkIlLeRmEeRuT - substituting the asterisk character in the embedded font ,by editing the font used prior to embedding it in the password field is the probably the cleanest approach.
                                      • 16. Re: Password Field Question
                                        bcounts Level 1
                                        I read through everyones responce to me and came across the answer!

                                        I created my own font that renders circles and embedded it into the movie - good trick and worked like a charm . . . thanks to everyone whom participated in this thread (lots of good ideas and approches)

                                        - Bryan
                                        • 17. Password Field Question
                                          ggshow Level 2
                                          replace the standard * symbol you get when you type in a password field with a custom circle


                                          Check this example, no actionscript required.

                                          try sample.swf & tell me if it works.

                                          • 18. Re: Password Field Question
                                            Greg Dove Level 4
                                            Yes... it works... it's using the method outlined above by nITiNkIlLeRmEeRuT.
                                            • 19. Re: Password Field Question
                                              bcounts Level 1
                                              Yes it works - however I would embed the font into my library and to the text field so that you do not have to include the font in your package and someone can view as you designed even if they do not have the font installed on thier system.

                                              Godd Work Guys - Bryan
                                              • 20. Re: Password Field Question
                                                Greg Dove Level 4
                                                Actually FYI Bryan, that doesn't work in terms of passing around flas. The font is only really embedded when the swf is compiled, so the swf will work once its passed around. For any fla, it still has to be installed on your local system. Putting it in the library is only an instruction for flash to pull it off your local system for embedding in the swf during compilation.

                                                And also (unless I've missed something in terms of making a textfield a password field in the property panels etc) you do need one line of actionscript to make this work properly...

                                                mytextfield.password = true;

                                                without this, the field doesn't behave like a true password field so you can use 'copy' from it. The password = true prevents that.
                                                Also, I don't know if all the extra dots on all the characters other than the asterisk take up extra space once they're embedded - presumably they could just be made the same as spaces. Perhaps you can save a few bytes when flash embeds the font outlines...I haven't tried it, but in terms of optimising this approach maybe it will make a difference. Probably not important for a one-off but if someone was building a component to do this....