Jan 28 2010

Easy form validation for Flash

As a professional Flash and Flex developer, I wrote lots of handy utilities that I use on a daily basis when developing Flash websites or Flex applications. I developed my own library containing base classes and utilities that allow me to setup Flash website projects in no time. I call it the “viplib”.

I plan to releasing some of that code. And here’s a first code snippit:

In Flex, it’s easy to do form validation using the various validator components. But for Flash, one has to write his own code. Here’s a simple form-validation class that not only checks empty fields and invalid email entries, but also highlights those fields when their content is invalid. Using this class you can validate a form and highlight the fields that are invalid with only 1 line of code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
//copyright Ward De Langhe
//Very Interactive People
package be.viplib.util
{
    import flash.display.Sprite;
    import flash.events.FocusEvent;
    import flash.text.TextField;
   
    public class FormValidator
    {
        private var _target:Sprite;
        private var _requiredFields:Array;
        private var _emailFields:Array;
        private var _normalColor:Number;
        private var _invalidColor:Number;
        private var _requiredMessage:String;
        private var _invalidEmailMessage:String;
       
        public function FormValidator(target:Sprite,requiredFields:Array, emailFields:Array,normalColor:Number=0x000000,invalidColor:Number=0xff0000,requiredFieldMessage:String="required field",invalidEmailMessage:String="invalid email")
        {
            _target=target;
            _requiredFields=requiredFields;
            _emailFields=emailFields;
            _normalColor=normalColor;
            _invalidColor=invalidColor;
            _requiredMessage=requiredFieldMessage;
            _invalidEmailMessage=invalidEmailMessage;
        }
        public function set invalidMailMessage(value:String):void{
            _invalidEmailMessage=value;
            for(var i:Number=0;i<_emailFields.length;i++){
                var field:TextField=_target.getChildByName(_emailFields[i]) as TextField;
                if(field.text==_invalidEmailMessage){
                    field.text=value;
                }
            }
        }
        public function set requiredMessage(value:String):void{
            _requiredMessage=value;
            for(var i:Number=0;i<_requiredFields.length;i++){
                var field:TextField=_target.getChildByName(_requiredFields[i]) as TextField;
                if(field.text==_requiredMessage){
                    field.text=value;
                }
            }
        }
        public function validate():Boolean{
            var valid:Boolean=true;
            for(var i:Number=0;i<_requiredFields.length;i++){
                var field:TextField=_target.getChildByName(_requiredFields[i]) as TextField;
                if(field.text=="" || field.text== _requiredMessage || field.text==_invalidEmailMessage || (field.text.length==1 && field.text.charCodeAt(0)==13)){
                    field.textColor=_invalidColor;
                    field.text=_requiredMessage;
                    field.addEventListener(FocusEvent.FOCUS_IN,fieldFocus_handler);
                    valid=false;
                }
            }
            for(i=0;i<_emailFields.length;i++){
                field=_target.getChildByName(_emailFields[i]) as TextField;
                if(field.textColor!=_invalidColor){
                    if(!MailValidator.validateEmail(field.text)){
                        field.textColor=_invalidColor;
                        field.text=_invalidEmailMessage;
                        field.addEventListener(FocusEvent.FOCUS_IN,fieldFocus_handler);
                        valid=false;
                    }
                }
            }
            return valid;
        }
        private function fieldFocus_handler(evt:FocusEvent):void{
            for(var i:Number=0;i<_requiredFields.length;i++){
                var field:TextField=_target.getChildByName(_requiredFields[i]) as TextField;
                if(field.textColor==_invalidColor){
                    field.textColor=_normalColor;
                    field.text="";
                    field.removeEventListener(FocusEvent.FOCUS_IN,fieldFocus_handler);
                }
            }
            for(i=0;i<_emailFields.length;i++){
                field=_target.getChildByName(_emailFields[i]) as TextField;
                if(field.textColor==_invalidColor){
                    field.textColor=_normalColor;
                    field.text="";
                    field.removeEventListener(FocusEvent.FOCUS_IN,fieldFocus_handler);
                }
            }
        }
    }
}

This class uses my mailvalidator utility to validate the email adresses. It’s a simple utility which checks if a e-mailaddress is valid using a regular expression.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//copyright Ward De Langhe
//Very Interactive People
package be.viplib.util
{
    public class MailValidator
    {
        public static function validateEmail(str:String):Boolean {
            var pattern:RegExp = /(\w|[_.\-])+@((\w|-)+\.)+\w{2,4}+/;
            var result:Object = pattern.exec(str);
            if(result == null) {
                return false;
            }
            return true;
        }
    }
}

You can download example source code here. It’s a simple form containing a couple of required fields, and an email field. Here’s how this sample looks when compiled:

Click the “validate” button to see the validation class do it’s job.


Jan 4 2010

Making HDR photo’s with a point and shoot camera

I’m an active Flickr.com user, and I’ve noticed lots of HDR images popping up lately. Some of them are absolutely garbage, but every now and then a true jewel pops up. I’ve always wanted to experiment with HDR images, but I don’t own a digital single lens reflex camera. I have a Panasonic Lumix TZ3, which is a great point and shoot camera. Sure, it’s getting a bit outdated, but it’s still a fine piece of equipment. Perfect for travelling pictures, and that’s what I use it for most of the time. Any camera that allows manual over- or under-exposure of a photo can be used to create HDR images, but the TZ3 comes with a handy auto bracketing feature that makes the life of a HDRi enthousiast so much easier.

On my last vacation, I tried a first HDR photo. The result wasn’t great, but it was ok for a first try. You can see that photo here. This first attempted inspired me to try creating some more, and hopefully better ones.
So, recently, me and my girlfriend went to Valencia and Barcelona for a week (between Christmas and New Year). It was the perfect occasion to try some new HDR photo’s.

Taking the source pictures:
I am told, to create good HDRis, your camera will need to be able to do auto bracketing ranging from -2AEB to +2AEB. Unfortunately the TZ3 only supports -1AEB to +1AEB. But, as you can see in the examples below, the results are looking great anyway. When I buy a new camera I will certainly buy one that can handle +-2AEB.
So, before shooting a picture I followed these steps:

  • Put my camera on a tripod (in my case that was just a 10 euro flexible tripod)
  • Configured my camera to automatically shoot 1 under exposed, 1 normal and 1 over exposed image (auto bracketing):

  • Set the self timer to 2 seconds (pressing the button causes the camera to move. After a 2 second delay I’m sure the camera has completely stopped moving)

Unfortunately, I forgot to configure my camera to use a low ISO setting. My camera automatically chose the ISO, and for indoor scenes, it chose a higher ISO. This resulted in a lot of noise. When creating HDR images you should try to avoid noise. Most of my indoor images failed miserably because of this. This is something I need to try next time.

Processing the images:
I used Photomatix Pro to create the HDR and I also used it for tone mapping. Afterwards I did some post-processing in photoshop, but that was merely cropping, adjusting the contrast, exposure, etc. Maybe I will post a tutorial on that later.
You can download 3 of my source images here, so you can try for yourself. The subject is a cannon on top of Mount Juïc, Barcelona (these cannons are placed around the castle of Mount Juïc):


So in Photomatix Pro, you click on the “create HDR image” button, and select the source files.

After clicking “ok”, Photomatix will ask you how the images need to be processed.

If you didn’t use a tripod, you might want to check the “align source images” checkbox. In this case I used a tripod, so that’s not necessary. The object was also very well lit, so there’s little noise. Because of that I also don’t have to check the “reduce noise” checkbox. And finally, because there are no moving objects in the scene (you should avoid moving objects when creating HDRi’s!), I also don’t need Photomatix to try to reduce ghosting artifacts.
Now press “ok” to generate the HDR image. Before tonemapping it, you should check if everything is aligned properly. If not, go back and repeat the same process, but choose “align source images”. If everything is ok, press the “tone mapping” button.
For this tutorial, I tried to create a more or less realistic image. Some people like to over-process their HDRi’s, to get some kind of surrealistic result. Personally I like it somewhere in between. I want the final image to look special, but not overdone.  Click here to see what settings I used to create the image below.

Final result:

On flickr I also have the same picture, but over-processed. It’s very tempting to do this… but the more natural version looks a lot better. Again, that’s just my opinion. If you like the surrealistic look, go for it!  Click here to see the same tonemapped HDR photo, processed with other settings for a more surrealistic/dramatic effect.

And last but not least: here are some of my HDR attempts. I took these photo’s on our trip to Valencia and Barcelona:

You can view the full set here.


Dec 22 2009

“Music for life” game

At Epyc, we made a little Flash game to support the “Music for life” show on Studio Brussel. This year, MFL collects money to help the prevention of malaria.

For each highscore above 1000 points, Epyc NV will donate 1 euro to Music for life.

Play the game here


Dec 4 2009

optiekvandorpe.be

I just launched a new website for one of my clients. It’s the website of “Optiek Vandorpe”, an optician located in Sint-Amandsberg, Belgium.

Visit the website here: http://www.optiekvandorpe.be


Nov 6 2009

Generative art on canvas

At Epyc we changed the layout of our office some time ago… and because of this, some empty walls needed decoration.
My boss thought it would be cool to order 2 of my generative pieces on canvas.
Here’s the result:

The designs were printed on a 2 by 1 meter canvas. The frame has a thickness of 4 centimeter,  which makes them even cooler.  Great to finally see them like this. Makes me want to make some more.

Sorry for the bad image quality, I quickly took these photo’s using my cellphone.


Oct 21 2009

Problem when embedding fonts using the Flash IDE

At my day job (http://www.epyc.be), we developed a framework for rendering exercises (drag and drop, select text, multiple choice, fill in,… you name it, we got it). One of the features of this framework is font libraries on exercise level. In this way we can use different fonts and only load them when needed.  If in an application we have for example 100 multiple choice questions that need font A, and only one of those questions needs font B, font B will be loaded when that specific exercise is rendered. Once loaded they are cached in memory, in case another exercise needs the same font library.
When an exercise is loaded, the first thing the base class does is loading the necessary font library  in order to render the exercise. In the exercise logic, whenever we need a font, we can create one like this:

1
2
3
4
var font:Font=FontMananger.getInstance().getFont(
fontName,
fontLibrary
);

In theory, this would also allow the use of foreign character sets…. Only in theory, because when we finally needed this feature, we ran into a “little” problem.
A font library in our system is an empty swf file with some embedded fonts. We normally create these libraries by clicking “new font” in the library:

This workflow worked fine until we had to create a Polish version of one of our projects. The problem is that it is impossible to define which characters you want to embed when embedding fonts in the library. Flash only embeds a basic char set. Strangly enough, when embedding a font for a specific text field, you CAN define the extra character set :

So, it looks like the folks at Adobe simply forgot about this. We tried everything, but no success using the Flash IDE.
Eventually we had to switch to Flexbuilder to create the font libraries. Here’s how we did this:

1
2
3
4
5
6
7
8
9
10
11
12
package {
import flash.display.Sprite;
import flash.text.Font;
public class FontLib extends Sprite
{
[Embed(systemFont = "Arial", fontName = "Arial", mimeType = "application/x-font", unicodeRange = "U+0-U+00FF,U+0100-U+01FF,U+0200-U+02FF" )]
public var DefaultFont:Class;
public function FontLib()
{
}
}
}

As you can see, in Flex we can define the Unicode ranges that need to be embedded. In this way we can create font libraries containing Baltic or Cyrillic character sets, or even Chinese!
There’s also a little problem with this workflow: Since the DefaultFont class is defined inside the FontLib application class, the compiler internally changes the class name to “FontLib_DefaultFont”. After loading this font library, and we want to create an instance of a certain font class, we have to add “FontLib_” before the class name.
Conclusion: Adobe, please add functionality to the Flash IDE so we can define extra character sets to be embedded when embedding fonts in the library!
If anyone knows a way of doing this by using the Flash IDE, please let me know.