The Glitch

In the mobile app that I’ve been working on, the design calls for the text input label to be placed “inside” of the text input field, on the left side. As such, I needed to add left padding to the TextInput component, so the text field wouldn’t overlap the label, which was sitting behind the TextInput control. So I set up my code to include the appropriate padding, and tested the result. When viewing the application, it looked just like it should, with the label positioned “inside” the TextInput component.

However, when I started typing a value into the fields, that’s when I saw the glitch:

The problem was this: When typing in your text into the field, and the text goes longer than the width of the visible width of the text field inside of the component, you completely lose the cursor and can’t see the text you’re entering. That is, until your text width is as long as or greater than the width of the TextInput component. Then, your text suddenly shifts, with the text field taking up 100% of the width of the TextInput component. So naturally, I let out a huge sigh and asked, “What happened to my left padding? Did I do something wrong?”

The answer to my question is this: The padding never got incorporated into the component correctly. And no, I didn’t do anything wrong. Adobe did.

The Solution

In my wrestling with how to fix this issue, I copied over the default TextInputSkin file (spark.skins.mobile.TextInputSkin) and put it into my project files. Then I opened it up and started investigating. Here’s what I found:

In the “layoutContents” method, I found a very big issue with the logic. And while it may seem like a small, innocent issue, it looms large when trying to add padding of any sort to the component. The issue is caused by 3 errors in the code of this function.

Error #1

These two lines are worthless. Why? It doesn’t solve any problems. It creates the skip in the text inputting described above, specifically when paired with the other two errors below. So, I commented these two lines out.

Error #2

This error is just plain and simple wrong. There’s a variable for “unscaledWidth”, which is the width of the ENTIRE component, NOT the width of the textDisplay (i.e. text field) after having padding taken into consideration. There’s actually a variable called “unscaledTextWidth” in the code, which is the value that SHOULD be used in this instance of “setElementSize”, because the textDisplay should have a width that has the left and right padding taken into consideration.  So, I changed this line to be:

Error #3

This error, like the last, is also just plain wrong. The 2nd argument for the “setElementPosition” method is the X value, which you’ll notice is HARD-CODED to “0″. This means that no matter what your left padding value is, the textDisplay will ALWAYS be set to the left side of the component. The x value should be based on the value of the left padding. So, I changed this line to be:

Conclusion

With the 3 errors above fixed, my TextInput component was finally working as intended, with the correct padding values, no intermittent skipping, and no random resizing of the text field inside of the component. Rather, like any other good text input field out there, it only displays the text width it should, while hiding the rest.

So if you find yourself questioning why something isn’t working as intended, take a few minutes (or hours, in some unfortunate instances) and look into the class/component/code you’re working with. Not only will you get a better understanding of how everything is set up, but you might just find another spot where the software engineers overlooked something and made an error.

Until next time, happy coding!

Postscript

Even though I am not a fan of how Adobe laid out this TextInputSkin, I must admit that I can see how/why it was done the way it was. There aren’t many times where a mobile application would call for a situation like the one I had. Chances are, Adobe’s quality assurance and testing didn’t think to include such a circumstance. After all, most mobile application components like text input boxes are set up to take up 100% of the screen (or close to it) to optimize hit area and visual space. So, giving them the benefit of the doubt, I can’t say I’m mad at Adobe for how they put things together. But I stick to my statement that if something isn’t working as intended, take some time to look into the code behind the scenes. You just might find something in need of fixing.

A few notes about the class, its flexibility, and it’s use:

• Overall, the class automatically assigns random X coordinates, fall times, delays, scale, alpha, rotation, and tint (if colors are specified) for the effect of true randomness and depth of field.
• To import, instantiate, and start a batch of confetti in the file, only 4 lines of code are needed.
• There is a public “start()” method for the class, rather than having the class auto-start (though the demo below does auto-start, but that is through the parent file, not the class).  This is done in an effort to save in performance.  There are also public methods for “stop()”, “clear()”, and “remove()”, done in an effort to to be able to phase out the confetti (stop), clear all current instances of individual confetti pieces (clear), or stop and clear out all confetti pieces (remove).
• The class is set up to pass in an Object as the parameter when creating your Confetti object, which takes up to 6 optional attributes: width, height, colors, maxPieces, symbol, and speed.  If any or all of these are not defined, default values will be used.  Through much time and testing, calculations were solidified to make for realistic default settings.
• The class allows for passing in a custom symbol to use, rather than using the auto-generated one. In the demo below, all “shape modes” other than “Auto” are instances of MovieClips from the Library, set to export to ActionScript. These custom MovieClip symbols can have multiple frames, too.  If a MovieClip symbol has multiple frames, the class will randomly assign a frame to show for each individual piece.

With that all said, here’s a demo of the Confetti class.  And in response to the request, the class and a sample FLA file are available for download (see link below the demo). Feel free to toy around with it, change the settings, and have fun with it.

Until next time, happy coding!

VideoMax is a very lightweight, fast, flexible, and easy-to-implement custom Flash video player class that can be used in any ActionScript 3.0 file. Some of the key highlights of the VideoMax class are:

• Lightweight: Importing the VideoMax class and creating an instance adds only 12kb to overall file weight. Compare that to the built-in Adobe ‘flvPlayback’ component, which adds 58kb to the overall file weight. Do the math. That’s nearly 500% heavier than this VideoMax class.
• Easy to Use: With just 3 lines of code, you can import the VideoMax class, create an instance of the player, and add it to your Flash file. And because of its dynamically-built nature, there are NO Library components needed. That’s right, NONE. All of the assets included in the VideoMax class are 100% built from scratch with nothing but ActionScript 3.0 code.
• Customizable: You can change a number of attributes to your VideoMax instances, so you can have a video player that is as unique as the video it plays. The customizable attributes include Width, Height, Auto Play, Auto Rewind, Auto Size, Buffer, Looping, Control Bar visibility, Tint, Play Button overlay, End Frame visibility, and onStart/onComplete listeners.
• Communicative: By using the onStart and onComplete listener attributes (and accompanying parameter attributes), you can have VideoMax dispatch events that call functions back in the parent file when the video starts and/or ends.
• Self-Sufficient: With its robust set of default attributes, VideoMax takes care of wrapping up all of the loose ends. Once you create your VideoMax instance, you can sit back and relax, knowing that everything is taken care of, including control bar resizing and positioning, buffering, automatic video resizing within the player, and more. Just import the class, create the instance, assign it attributes, and add it to your file. VideoMax will take care of the rest for you.

Where Can I Get VideoMax?

VideoMax is available for download at the Official VideoMax Page on HesslerDesign.com. There, you will find a free download of VideoMax, as well as examples and documentation on implementing VideoMax in your own Flash projects.