These boxes, which are nothing more than just rectangles, mark the contact zones of the characters. In this case, this particular frame of Betaman that's being editted in Flash represents the momment in which the character's headbutt would hit the enemy. Intuitively we can say that the red rectangle or Red Collision Box represents the action zone of the attack. On the other hand, the red rectangle or Green Collision Box represents the zone where the character is vulnerable to enemy attacks. We can conclude then that if Red Collision Box of a character A has contact with the Green Collision Box of character B then character B must change its animation to one that depicts its pain and also loose some health.
These contact zones are vital when it comes to define action zones of attacks and also to define the vulnerable zones of a character. You might notice that they are not neccesarily precise in relation to the characters perimeter, they are just aproximations of where contact should be delimited. For example, if I want to give the illusion that a character has an arm outside the plane of an attack then it should be outside of the green zone. Same thing with attacks. The idea is that collision looks real and not that character B is hit when the characters just scrape each other.
